Архив метки: javascript

WEB

Функция «посмотреть пароль» на сайте

Комментариев нет

Иногда бывает полезно раскрыть «звездочки» в теле тэга input при типе равном password. Вообще javascript не позволяет заменять тип «на лету» (например на text), но! как всегда это ограничение можно достаточно просто обойти — просто удалим обьект input и заменим его другим. Например как-то так:

           <div id="input_pass_div">
                <input type="password" id="password_login_form" class="form-control input-shadow" placeholder="Пароль">
            </div>
            <div class="form-control-position">
                <i style="cursor: pointer" onclick="ShowPassMe()" class="icon-eye"></i>
            </div>
<script>     
    tgpass=false;
    function ShowPassMe(){ 
       ps=$("#password_login_form").val();
       $("#password_login_form").remove();  
       if (tgpass==false){
         $("#input_pass_div").html('<input type="text" id="password_login_form" class="form-control input-shadow" placeholder="Пароль">');
         tgpass=!tgpass;
       } else {
           tgpass=!tgpass;
           $("#input_pass_div").html('<input type="password" id="password_login_form" class="form-control input-shadow" placeholder="Пароль">');
       };
       $("#password_login_form").val(ps);
    };    
</script>
WEB

Прогрессбар на vue.js

Комментариев нет

Например можно реализовать как-то так (в примере на самом деле два прогрессбара). К сожалению всёж пока выходит сложнее для чтения и понимания чем «чистый» javascript+jquery

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>        
</head>
<body>
    <table id="hotels_list"></table>
    <div id="hotels_pager"></div>  
    <div id="app">
        <div class="container">
            <div class="row">
                    <div class="col-6">      
                        <persent v-bind:msg="pers1"></persent>
                    </div>
                    <div class="col-6">    
                        <persent v-bind:msg="pers2"></persent>
                    </div>                
            </div>    
        </div>                
    </div>
<script>    
Vue.component('persent', {
    props: ['msg'],
    template: '<div><div>{{ msg.txt }}</div><div class="progress"><div class="progress-bar" role="progressbar" :style="msg.style" :aria-valuenow="msg.value" aria-valuemin="0" aria-valuemax="100">{{ msg.value }}%</div></div></div>'
});      
var app = new Vue({
  el: '#app',
  data: {
    timing: null,
    pers1 : {
        value: 10,
        txt:'Добавление новых',
        style:'width:20%'
    },
    pers2 : {
        value: 70,
        txt:'Обновление',
        style:'width:70%'
    }
  },
  mounted(){
    console.log("-загрузились полностью..");  
    this.runTiming();
  },
  methods: {
      runTiming() {
        this.timing = setInterval(this.changeCurrentPers, 2000)          
      },
      changeCurrentPers(){
         vl=this;
        $.post('progress.txt',{}, function(data){                          
                vl.pers1.value=data;
                vl.pers1.style='width:'+data+'%';
        });       
        $.post('progress_update.txt',{}, function(data){
                vl.pers2.value=data;
                vl.pers2.style='width:'+data+'%';
        });                 
      }
  },  
});

Всё ищу, гдеб его (VUE.js)  можно применить.. Пока выходит «надумано»..

WEB

Пробую Vue.js

Комментариев нет

Ниже писал как тестировал React.js, в итоге не привилось от слова совсем. Всё надумано и усложнено.  Для реализации элементарных вещей типа вывода динамического списка загруженного из вне требуются феерические велосипеды. В итоге не смог придумать ни одного примера использования где было бы проще и удобнее чем с использованием чистого javascript + jquery. Теперь задумался в сторону фреймворка Vue.js В нём понравилась идея компонентности (кирпичиков из «своих» тегов) для создания страницы. Пока тестировал, получился вот такой скриптик, демонстрирующий базовые возможности:

<!doctype html>
<head>		
        <meta charset="UTF-8">
        <title>VUE.js test</title>		
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>        
</head>
<body>
<div id="app">
  {{ message }}
  <span v-bind:title="title">Hello</span>
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>      
  </ol>    
  <button v-on:click="addItem">Добавить элемент</button>
  <input v-model="message">
  <brick></brick>
  <brick></brick>
</div>        
<script>   
Vue.component('brick', {
    template: '<div>Это кирпичик</div>'
});    
var app = new Vue({
  el: '#app',
  data: {
    message: 'Привет'+ new Date().toLocaleString(),
    title: 'title me'+ new Date().toLocaleString(),
    msg:"DDD",
    todos:[
        {text:'Один',key:"wedwe"},
        {text:'Два'},
        {text:'Три'}
    ]
  },
  methods: {
        addItem: function () {
          this.todos.push({text: this.message});
        }
  },  
});    

</script>    
</body>
</html>

Демо тут

WEB

Пробуем ReactJS

Комментариев нет

Если честно, пока не представляю, что можно сделать с ReactJS, что нельзя сделать удобно и понятно при помощи Jquery+PHP. Но решил таки попробовать. Итак, что такое ReactJS — фактически это надстройка над JavaScript написанная на языке JavaScript. Т.е. всё что написано на ReactJS — компилируется или «на лету» при помощи babel в javascript или при выкладывании в «продакт» и далее подключается вызовом обычного JavaScript.

Чтобы не разделять «продакт» «девелоп» и не возиться с бабелом, я у себя настроил один из вариантов, а именно в косоли висит запущеный скрипт-компилятор, который мониторит изменения файлов в папке src и при изменении чего-либо, компилирует файл в папку js. Соответственно всегда имеем «продакт».

Что нужно сделать чтоб начать пользоваться ReactJS:

1) Поставить NodeJS и ReactJS на компьютере где разрабатываем (компиляция кода ReactJS в JavaScript происходит при помощи его):

apt install nodejs
npm install babel-cli@6 babel-preset-react-app@3

2) Ставим npx — утилита которая позволяет запускать npm пакеты

npm install -g npx

3) Зпаускаем в консоли что-типа:

npx babel --watch src --out-dir js --presets react-app/prod

В моем случае все скрипты из папки src компилируются в папку js

В итоге html страница может выглядеть так:

<!DOCTYPE html>
<html>    
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <head>
        <meta charset="UTF-8">
        <title id="rj_title"></title>
    </head>
    <body id="rj_body">
        <div id="root"></div>
        <script src="js/test.js"></script>
    </body>
</html>

а файл src/test.js так:

const name='Павел Игоревич';
const element = <h1>Привет {name}!</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

В браузере выведет:

PHP, WEB

Простая загрузка файла на сервер используя JQUERY

Комментариев нет

Задача: сохранить файл на сервер без обновления страницы. Т.е. при помощи ajax

Решение:

Клиентская часть:

<h1>Отправка сообщения в техподдержку</h1>
    <div id="snd">
        <form id="data" method="post" enctype="multipart/form-data">
            <textarea id="tehtxt" name="tehtxt" class="form-control" rows="3" placeholder="Сообщение для техподдержки"></textarea>
            <br/>
            <input name="image" type="file" />
            <br/>
            <button class="btn btn-success" id="buttonsendteh">Отправить сообщение</button>
        </form>
    </div>
    <br/>
    <script>
        $("form#data").submit(function(e) {
                e.preventDefault();    
                var formData = new FormData(this);
                $("#buttonsendteh").hide();
                $.ajax({
                    url: "index.php?route=/controller/server/sendtoteh.php",
                    type: 'POST',                  
                    data: formData,
                    success: function (data) {
			$("#snd").html(data);    
			ListSbssMessages();
			$("#buttonsendteh").show();
                    },
                    cache: false,
                    contentType: false,
                    processData: false
                });
        });
    </script>

Серверная часть:

 $tehtxt=mysqli_real_escape_string($sqlcn->idsqlconnection,$_POST["tehtxt"]);
 $prc="";  
  if (isset($_FILES['image'])==true){
    $orig_file = $_FILES['image']['name']; 
    $userfile_name = GetRandomId(8) . '.' . pathinfo($orig_file, PATHINFO_EXTENSION);
    $src = $_FILES['image']['tmp_name'];    
    $res = move_uploaded_file($src, WUO_ROOT."/files/".$userfile_name);     
    $prc="Прикрепленный файл: $userfile_name";
  };