ООП. Как в классе сделать обработчик события для тэга в виде метода будущего объекта?

@Kot137 · Регистрация: 14.05.2016

Студворк — интернет-сервис помощи студентам

Здравствуйте.
Помогите разобрться. Я в PHP вывожу в цикле однотипные группы тэгов, к каждой группе привязываю объект JS - обработчик событий в этой группе. Объект описан типа класа. При создании экземпляра объекту передается его ID, в объекте есть метод, который во время инициализации объекта вешатся на обработчик событий тэга, однако при возникновении события метод не видит параметров своего объекта. Я подозреваю, что создается новый экземпляр метода не связанный с объектом...

Зделал подобие класса в виде:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
function prop_int_class (ii){
  this.id=ii;
  // Обработчик событий
  this.iev=function(x,y){
    if ((x==1)&&(y='min')) alert(this.id);
  }
  // Установка: вешаем события на тэги
  this.ini=function(){
    $("#teg"+this.id).bind(click, {fu: this.iev }, function(event){ event.data.fu(1, "min");});
  }
  this.ini();
}

При создании страницы, после прорисовки каждого тэга №i создается и инициализируется объект:

PHP
1
echo "<script>var pio$i=new prop_int_class($i);</script>";

Во время инициализации и при "ручном" вызове метода, значение this.id - выдает заданное значение. Но при срабатываении события - click получаю ошибку: значение this.id - undefined. Может как-то по другому можно повесить метод на событие?

@Padimanskas · 29.05.2016, 13:01

Сообщение от Kot137

echo "<script>var pio$i=new prop_int_class($i);</script>";

нельзя генерить скрипты из php. Узнай что такое передача репрезентативного состояния.

@Kot137 · 29.05.2016, 13:49 **[ТС]**

Сообщение от Padimanskas

нельзя генерить скрипты из php..

Почему? Из-за того, что может быть JS еще неподгружен?

PHP
1
echo "<script>$(document).ready(function() { var pio$i=new prop_int_class($i);});</script>";

- так тоже самое.

Сообщение от Padimanskas

Узнай что такое передача репрезентативного состояния.

"это стиль постро*е*ния архи*тек*туры рас*пре*де*лен*ного кли*ент-сер*вер*ного при*ло*же*ния, кото*рый упро*щает роутинг и постро*е*ние API." - причем здесь это?

@Padimanskas · 29.05.2016, 14:31

Сообщение от Kot137

Почему? Из-за того, что может быть JS еще неподгружен?

Сообщение от Kot137

"это стиль постро*е*ния архи*тек*туры рас*пре*де*лен*ного кли*ент-сер*вер*ного при*ло*же*ния, кото*рый упро*щает роутинг и постро*е*ние API." - причем здесь это?

господь милосердный

@dzendev · 29.05.2016, 17:15

2 Ошибки
1. Обработчик события неверно прикреплён:
.bind(click, - должно быть с кавычками .bind('click',
2. Вызов метода объекта приведет к ошибки

JavaScript
1
2
3
this.iev=function(x,y){
    if ((x==1)&&(y='min')) alert(this.id); // alert undefined
}

Для this нужно явно указать контекст и здесь есть 2 варианта

JavaScript
1
2
3
this.iev=function(x,y){
  if ((x==1)&&(y='min')) alert(this.id);
}.bind(this);

или
var self = this;

JavaScript
1
2
3
this.iev=function(x,y){
  if ((x==1)&&(y='min')) alert(self.id);
}

Вот полностью код

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="//code.jquery.com/jquery.js"></script>
    <script>
        function prop_int_class (ii){
          this.id=ii;
          // Обработчик событий
         /* this.iev=function(x,y){
            if ((x==1)&&(y='min')) alert(this.id);
          }.bind(this);*/
          var self = this;
          this.iev=function(x,y){
            if ((x==1)&&(y='min')) alert(self.id);
          }
          // Установка: вешаем события на тэги
          this.ini=function(){
            $("#teg"+this.id).bind('click', {fu: this.iev }, function(event){ 
                event.data.fu(1, "min");
            });
          }
          this.ini();
        }
    </script>
    
</head>
<body>
    <div id="teg1">click</div>
    <div id="teg2">click</div>
    <?php
        $i = 1;
        echo "<script>var pio$i=new prop_int_class($i);</script>";
    ?>
</body>
</html>

@Kot137 · 29.05.2016, 19:27 **[ТС]**

Сообщение от dzendev

var self = this;

Огромное Вам спасибо за адекватный ответ!
После явного указания this - все заработало!

@Fedor Vlasenko · 29.05.2016, 19:32

Сообщение от Padimanskas

нельзя генерить скрипты из php. Узнай что такое передача репрезентативного состояния.

здесь мы просто хороним JSONP

@Kot137 · 29.05.2016, 19:56 **[ТС]**

Сообщение от dzendev

или
var self = this;

Хотя нет. Такой подход - копирует параметры объекта в моменте, но при срабатывании событий функция не имеет доступа к актуальным параметрам, она видит те, которые были на момент назначения... ((

@dzendev · 29.05.2016, 19:59

Сообщение от Kot137

Хотя нет. Такой подход - копирует параметры объекта в моменте, но при срабатывании событий функция не имеет доступа к актуальным параметрам, она видит те, которые были на момент назначения... ((

Код киньте

@Kot137 · 29.05.2016, 20:14 **[ТС]**

Нашел не самое красивое решение: если назначение обработчиков событий вынести из объекта в скрипт PHP.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="//code.jquery.com/jquery.js"></script>
    <script>
        function prop_int_class (ii){
          this.id=ii;
          // Обработчик событий
          this.iev=function(x,y){
            if ((x==1)&&(y='min')) alert(this.id);
          }.bind(this);*/
          this.iev=function(x,y){
            if ((x==1)&&(y='min')) alert(this.id);
          }
        }
    </script>
    
</head>
<body>
    <div id="teg1">click</div>
    <div id="teg2">click</div>
    <?php
        $i = 1;
        echo "<script>var pio$i=new prop_int_class($i);";
        echo "$('#teg$i').bind('click',  function(){ pio$i.iev(1,'min');});</script>";
    ?>
</body>
</html>

Добавлено через 7 минут

Сообщение от dzendev

Код киньте

вот как это изначально предполагалось:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
function prop_int_class(ii){ // Типа класс обработки инпутов и ползунка свойства INT фильтра +++++++++++++++++++++++++++++++++++++++++++
    
    // Инициализация
    this.id=ii;
    this.active_min=false;
    this.active_max=false;
    this.active_range=false;
    this.active_submit=false;
    this.range=""; // ""/min/max
    this.focus_min=false;
    this.focus_max=false;
    this.focus_range=false;      
 
    this.iev=function(x,idd){
        // Основная функция объекта
        // Получаем название блока
        var ids;
        if (idd=="min") ids="pro_input_min_"+this.id;
        if (idd=="max") ids="pro_input_max_"+this.id;
        if (idd=="range") ids="pro_input_range_"+this.id;
        
        if (x==0){ // Клик на основное поле min или max
            // Установим активности +++++++++++++++++++++++++++++++
            this.active_min=(idd=="min");
            this.active_max=(idd=="max");
            $("#"+ids).css("background-color","#ffd1b5"); // Подсветка
            //+++++++++++++++++++++++++++++++++++++++++++++++++++++
            
            // Если ползунок этого вида уже есть - то прячем его
            if ((this.range==idd)&&this.active_range){ // отрабатывается в потере фокуса
                //this.active_range=false;
                //$("#pro_td_range_"+this.id).hide();                
            } else{ // Если нет, то прорисовываем
                this.active_range=true;
                $("#pro_td_range_"+this.id).show();
                $('#pro_input_range_'+this.id).unbind(); // отключаем события, чтобы изменить
                document.getElementById('pro_input_range_'+this.id).value=document.getElementById(ids).value;
                this.ini("range"); // Возвращаем прослушку событий
            }
        }
        
        if (x==1){ // Измененение
            if (!this.active_submit) { // Рисуем кнопку ПРИМЕНИТЬ
                this.active_submit=true;
                $("#pro_td_apply_"+this.id).show();
            }
            if (idd=="range"){ // Дернули ползунок
                this.focus_range=true;                
                // Клонируем новое значение в инпут
                if (this.active_min) $("#pro_input_min_"+this.id).unbind();
                if (this.active_max) $("#pro_input_max_"+this.id).unbind();
                document.getElementById(ids).value=document.getElementById('pro_input_range_'+this.id).value;
                if (this.active_min) this.ini("min");
                if (this.active_max) this.ini("max");
            } else{ // Изменили ручками в инпуте
                this.active_range=true;
                $("#pro_td_range_"+this.id).show();
                $('#pro_input_range_'+this.id).unbind(); // отключаем события, чтобы изменить
                document.getElementById('pro_input_range_'+this.id).value=document.getElementById(ids).value;
                this.ini("range"); // Возвращаем прослушку событий                
            }            
        }
        
        if (x==2){ // Потеря фокуса
            if (idd=="range"){ // если ползунок потерял фокус - то прячем его
                this.focus_range=false;
                this.active_range=false;
                $("#pro_td_range_"+this.id).hide(); 
                // Если фокус не появился на активном инпуте - то снимаем активность
                setTimeout(function () {
                    if (!this.active_range){
                        $("#"+ids).css("background-color","#eee8de"); // Возврат цвета
                    }
                }, 37); // время в мс
            } else{
                // Если фокус теряет инпут и при этом не на ползунок, то надо снимать активность
                this.focus_min=!(idd=="min");
                this.focus_max=!(idd=="max");
                setTimeout(function () {
                    if (!this.focus_range){
                        $("#"+ids).css("background-color","#eee8de"); // Возврат цвета
                    }
                }, 37); // время в мс
            }
        }
        
        if (x==3){ // Получение фокуса
            this.active_min=(idd=="min");
            this.focus_max=(idd=="max");
            this.focus_range=(idd=="range");
        }
    }
    
    // Начальная установка событий на мин и мах
    this.ini=function(z){
        // if ((z=="min")||(z=="all")) $("#pro_input_min_"+this.id).bind('click', this.iev(0, "min"));
        if ((z=="min")||(z=="all")) $("#pro_input_min_"+this.id).bind('click', {fu: this.iev }, function(event){ event.data.fu(0, "min");});
        if ((z=="max")||(z=="all")) $("#pro_input_max_"+this.id).bind('click', {fu: this.iev }, function(event){ event.data.fu(0, "max");});
        
        if ((z=="min")||(z=="all")) $("#pro_input_min_"+this.id).bind('change', {fu: this.iev }, function(event){ event.data.fu(1, "min");});
        if ((z=="max")||(z=="all")) $("#pro_input_max_"+this.id).bind('change', {fu: this.iev }, function(event){ event.data.fu(1, "max");});
        if ((z=="range")||(z=="all")) $("#pro_input_range_"+this.id).bind('change', {fu: this.iev }, function(event){ event.data.fu(1, "range");});
        
        if ((z=="min")||(z=="all")) $("#pro_input_min_"+this.id).bind('blur', {fu: this.iev }, function(event){ event.data.fu(2, "min");});
        if ((z=="max")||(z=="all")) $("#pro_input_max_"+this.id).bind('blur', {fu: this.iev }, function(event){ event.data.fu(2, "max");});
        if ((z=="range")||(z=="all")) $("#pro_input_range_"+this.id).bind('blur', {fu: this.iev }, function(event){ event.data.fu(2, "range");});
        
        if ((z=="min")||(z=="all")) $("#pro_input_min_"+this.id).bind('focusin', {fu: this.iev }, function(event){ event.data.fu(3, "min");});
        if ((z=="max")||(z=="all")) $("#pro_input_max_"+this.id).bind('focusin', {fu: this.iev }, function(event){ event.data.fu(3, "max");});
        if ((z=="range")||(z=="all")) $("#pro_input_range_"+this.id).bind('focusin', {fu: this.iev }, function(event){ event.data.fu(3, "range");});
        // alert(this.id);
    }    
    this.ini("all"); // Инициализация при первом вызове 
}

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
foreach  ($prd_propers as  $tmp_prop){ 
                // Получаем данные по свойству
                $prop_type=$m->GET($redis_index.'prop_type'.$tmp_prop);
                $prop_title=$m->GET($redis_index.'prop_title'.$tmp_prop);
             
                // Выводим свойство на экран
                echo "<div class='div_proper1'>";
                echo "<h4>$prop_title</h4>";
                if ($prop_type==0){ // int +++++++++ 
                    $prop_min=$m->GET($redis_index.'prop_min'.$tmp_prop);
                    $prop_max=$m->GET($redis_index.'prop_max'.$tmp_prop);
                    
                    echo "<table><tr>"; 
                    echo "<td style='width: 45%;'><input id='pro_input_min_$tmp_prop' type='number' value='$prop_min' min='$prop_min' max='$prop_max' /></td>"; // от 
                    echo "<td style='width: 10%;'>...</td>"; // до
                    echo "<td style='width: 45%;'><input id='pro_input_max_$tmp_prop' type='number' value='$prop_max' min='$prop_min' max='$prop_max' /></td>"; // до
                    echo "</tr><tr>";
                    echo "<td colspan='3' class='all_hide' id='pro_td_range_$tmp_prop'>"; // Ползунок 
                    echo "<input id='pro_input_range_$tmp_prop' type='range' value='$prop_max' min='$prop_min' max='$prop_max' />";
                    echo "</td>";
                    echo "</tr><tr>";
                    echo "<td colspan='3' class='all_hide' id='pro_td_apply_$tmp_prop'>"; // Ползунок 
                    echo "<input onclick='pro_range_f($tmp_prop,3)' id='pro_input_submit_$tmp_prop' type='submit' value='Применить' />";
                    echo "</td>";
                    echo "</tr></table>";
                    echo "<script>var pio$tmp_prop=new prop_int_class($tmp_prop);</script>";"; // Экземпляр класса обработки ползунка
                }                /**/
                echo "</div>"; /**/
            }

@Fedor Vlasenko · 29.05.2016, 20:23

Kot137, здесь действительно не стоит js средствами php генерить
стоит задача js получить данные так передавайте их в атрибутах data

HTML5
1
2
3
4
5
6
7
8
9
10
<div class="group">
  <div data-group="1">group1</div>
  <div data-group="1">group1</div>
  <div data-group="1">group1</div>
</div>
<div class="group">
  <div data-group="2">group2</div>
  <div data-group="2">group2</div>
  <div data-group="2">group2</div>
</div>

JavaScript
1
2
3
  $('.group').on('click', 'div', function() {
    alert($(this).data('group'));
  });

Песочница

@dzendev · 29.05.2016, 22:28

Чёт не понял php код

- генерит несколько ползунков?

Добавлено через 36 минут
Вообщем попробовал Ваш код поднять

У меня работает только когда я меняю значения в input[text], тогда ползунок меняет своё положение. Когда дёргаю ползунок ничего не происходит.
Как оно работать то хоть должно?

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="//code.jquery.com/jquery.js"></script>
    <script>
        function prop_int_class(ii){ // Типа класс обработки инпутов и ползунка свойства INT фильтра +++++++++++++++++++++++++++++++++++++++++++
    
    // Инициализация
    this.id=ii;
    this.active_min=false;
    this.active_max=false;
    this.active_range=false;
    this.active_submit=false;
    this.range=""; // ""/min/max
    this.focus_min=false;
    this.focus_max=false;
    this.focus_range=false;  
    var self = this;    
 
    this.iev=function(x,idd){
        // Основная функция объекта
        // Получаем название блока
        var ids;
        if (idd=="min") ids="pro_input_min_"+self.id;
        if (idd=="max") ids="pro_input_max_"+self.id;
        if (idd=="range") ids="pro_input_range_"+self.id;
        
        if (x==0){ // Клик на основное поле min или max
            // Установим активности +++++++++++++++++++++++++++++++
            self.active_min=(idd=="min");
            self.active_max=(idd=="max");
            $("#"+ids).css("background-color","#ffd1b5"); // Подсветка
            //+++++++++++++++++++++++++++++++++++++++++++++++++++++
            
            // Если ползунок этого вида уже есть - то прячем его
            if ((self.range==idd)&&self.active_range){ // отрабатывается в потере фокуса
                //self.active_range=false;
                //$("#pro_td_range_"+self.id).hide();                
            } else{ // Если нет, то прорисовываем
                self.active_range=true;
                $("#pro_td_range_"+self.id).show();
                $('#pro_input_range_'+self.id).unbind(); // отключаем события, чтобы изменить
                document.getElementById('pro_input_range_'+self.id).value=document.getElementById(ids).value;
                self.ini("range"); // Возвращаем прослушку событий
            }
        }
        
        if (x==1){ // Измененение
            if (!self.active_submit) { // Рисуем кнопку ПРИМЕНИТЬ
                self.active_submit=true;
                $("#pro_td_apply_"+self.id).show();
            }
            if (idd=="range"){ // Дернули ползунок
                self.focus_range=true;                
                // Клонируем новое значение в инпут
                if (self.active_min) $("#pro_input_min_"+self.id).unbind();
                if (self.active_max) $("#pro_input_max_"+self.id).unbind();
                document.getElementById(ids).value=document.getElementById('pro_input_range_'+self.id).value;
                if (self.active_min) self.ini("min");
                if (self.active_max) self.ini("max");
            } else{ // Изменили ручками в инпуте
                self.active_range=true;
                $("#pro_td_range_"+self.id).show();
                $('#pro_input_range_'+self.id).unbind(); // отключаем события, чтобы изменить
                document.getElementById('pro_input_range_'+self.id).value=document.getElementById(ids).value;
                self.ini("range"); // Возвращаем прослушку событий                
            }            
        }
        
        if (x==2){ // Потеря фокуса
            if (idd=="range"){ // если ползунок потерял фокус - то прячем его
                self.focus_range=false;
                self.active_range=false;
                $("#pro_td_range_"+self.id).hide(); 
                // Если фокус не появился на активном инпуте - то снимаем активность
                setTimeout(function () {
                    if (!self.active_range){
                        $("#"+ids).css("background-color","#eee8de"); // Возврат цвета
                    }
                }, 37); // время в мс
            } else{
                // Если фокус теряет инпут и при этом не на ползунок, то надо снимать активность
                self.focus_min=!(idd=="min");
                self.focus_max=!(idd=="max");
                setTimeout(function () {
                    if (!self.focus_range){
                        $("#"+ids).css("background-color","#eee8de"); // Возврат цвета
                    }
                }, 37); // время в мс
            }
        }
        
        if (x==3){ // Получение фокуса
            self.active_min=(idd=="min");
            self.focus_max=(idd=="max");
            self.focus_range=(idd=="range");
        }
    }
    
    // Начальная установка событий на мин и мах
    this.ini=function(z){
        // if ((z=="min")||(z=="all")) $("#pro_input_min_"+self.id).bind('click', self.iev(0, "min"));
        if ((z=="min")||(z=="all")) $("#pro_input_min_"+self.id).bind('click', {fu: self.iev }, function(event){ event.data.fu(0, "min");});
        if ((z=="max")||(z=="all")) $("#pro_input_max_"+self.id).bind('click', {fu: self.iev }, function(event){ event.data.fu(0, "max");});
        
        if ((z=="min")||(z=="all")) $("#pro_input_min_"+self.id).bind('change', {fu: self.iev }, function(event){ event.data.fu(1, "min");});
        if ((z=="max")||(z=="all")) $("#pro_input_max_"+self.id).bind('change', {fu: self.iev }, function(event){ event.data.fu(1, "max");});
        if ((z=="range")||(z=="all")) $("#pro_input_range_"+self.id).bind('change', {fu: self.iev }, function(event){ event.data.fu(1, "range");});
        
        if ((z=="min")||(z=="all")) $("#pro_input_min_"+self.id).bind('blur', {fu: self.iev }, function(event){ event.data.fu(2, "min");});
        if ((z=="max")||(z=="all")) $("#pro_input_max_"+self.id).bind('blur', {fu: self.iev }, function(event){ event.data.fu(2, "max");});
        if ((z=="range")||(z=="all")) $("#pro_input_range_"+self.id).bind('blur', {fu: self.iev }, function(event){ event.data.fu(2, "range");});
        
        if ((z=="min")||(z=="all")) $("#pro_input_min_"+self.id).bind('focusin', {fu: self.iev }, function(event){ event.data.fu(3, "min");});
        if ((z=="max")||(z=="all")) $("#pro_input_max_"+self.id).bind('focusin', {fu: self.iev }, function(event){ event.data.fu(3, "max");});
        if ((z=="range")||(z=="all")) $("#pro_input_range_"+self.id).bind('focusin', {fu: self.iev }, function(event){ event.data.fu(3, "range");});
        // alert(this.id);
    }    
    this.ini("all"); // Инициализация при первом вызове 
}
    </script>
</head>
<body>
    <?php
        $prd_propers = array(
            0 => array('id' => 1, 'title' => "ololo1", 'min' => 5, 'max' => 100),
            1 => array('id' => 2, 'title' => "ololo2", 'min' => 15, 'max' => 100),
            2 => array('id' => 3, 'title' => "ololo3", 'min' => 25, 'max' => 100)
        );
        foreach  ($prd_propers as  $tmp_prop){ 
                // Получаем данные по свойству
                $prop_type=$tmp_prop[id];
                $prop_title=$tmp_prop[title];
             
                // Выводим свойство на экран
                echo "<div class='div_proper1'>";
                echo "<h4>$prop_title</h4>";
                // if ($prop_type==0){ // int +++++++++ 
                    $prop_min=$tmp_prop[min];
                    $prop_max=$tmp_prop[max];
                    
                    echo "<table><tr>"; 
                    echo "<td style='width: 45%;'><input id='pro_input_min_$tmp_prop[id]' type='number' value='$prop_min' min='$prop_min' max='$prop_max' /></td>"; // от 
                    echo "<td style='width: 10%;'>...</td>"; // до
                    echo "<td style='width: 45%;'><input id='pro_input_max_$tmp_prop[id]' type='number' value='$prop_max' min='$prop_min' max='$prop_max' /></td>"; // до
                    echo "</tr><tr>";
                    echo "<td colspan='3' class='all_hide' id='pro_td_range_$tmp_prop[id]'>"; // Ползунок 
                    echo "<input id='pro_input_range_$tmp_prop[id]' type='range' value='$prop_max' min='$prop_min' max='$prop_max' />";
                    echo "</td>";
                    echo "</tr><tr>";
                    echo "<td colspan='3' class='all_hide' id='pro_td_apply_$tmp_prop[id]'>"; // Ползунок 
                    echo "<input onclick='pro_range_f($tmp_prop[id],3)' id='pro_input_submit_$tmp_prop[id]' type='submit' value='Применить' />";
                    echo "</td>";
                    echo "</tr></table>";
                    echo "<script>var pio$tmp_prop[id]=new prop_int_class($tmp_prop[id]);</script>"; // Экземпляр класса обработки ползунка
                // }                /**/
                echo "</div>"; /**/
            }
 
    ?>
</body>
</html>

@Kot137 · 30.05.2016, 01:40 **[ТС]**

Сообщение от dzendev

Как оно работать то хоть должно?

предполагалось, что это будут фильтры, задающие даипазон. min и max - текстовые инпуты, а при клике на один из них появляется ползунок (один и для мин и для макс). Не работает. Возникают "гонки" при попытке отследить фокус. Я погуглил - нормального решения нет, если только извращаться с settimout...
Я решил отказаться от этой затеи и попробовать сделать дойной ползунок (всегда видимый).

@Padimanskas · 30.05.2016, 04:09

Сообщение от Poznakomlus

здесь мы просто хороним JSONP

но сути дела это не меняет, потому что она заключена не в конкретных технических средствах(можно не обращать внимания на cors?), а в большей степени акцентируется на архитектуре. Но речь не о ТС, а мне очень доставляет и порой хочется просто рыдать от смеха, когда люди прибывающие вместе со мной на этом форуме 2, 3, 5 и более лет, до сих пор мало понимающие о том как организованы приложения внутри и какие мировые стандарты и практики существуют на сегодняшний день, советуют какие-то исправления и прочие шняжки этим новичкам в пределах их собственного хардкода.

@dzendev · 30.05.2016, 09:26

Сообщение от Kot137

Я решил отказаться от этой затеи и попробовать сделать дойной ползунок (всегда видимый).

На jquery ui есть готовое решение для Вашего случая http://jqueryui.com/slider/#range
Если немного подправить получится то, что Вам нужно.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Slider - Range slider</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
  $(function() {
    var maxRange = 500;
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: maxRange,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
        $( "#min" ).val( ui.values[ 0 ] );
        $( "#max" ).val( ui.values[ 1 ] );
      }
    });
    $( "#min" ).val( $( "#slider-range" ).slider( "values", 0 ) );
    $( "#max" ).val( $( "#slider-range" ).slider( "values", 1 ) );
    $( "#min" ).bind('change', function(event) {
      
    });
    $( "#min" ).change(function() {
      var valMin = $(this).val();
      if(valMin <= $( "#slider-range" ).slider( "values", 1 ) && valMin >= 0){
        $( "#slider-range" ).slider( "values", 0 , valMin );
      }
    });
     $( "#max" ).change(function() {
      var valMax = $(this).val();
      if(valMax >= $( "#slider-range" ).slider( "values", 0 ) && valMax <= maxRange ){
        $( "#slider-range" ).slider( "values", 1 , valMax );
      }
    });
  });
  </script>
</head>
<body>
 
<p>
  <label for="amount">Price range:</label>
  <input type="text" id="min" value="" style="color:#f6931f; font-weight:bold;">
  <input type="text" id="max" value="" style="color:#f6931f; font-weight:bold;">
</p>
 
<div id="slider-range"></div>
 
</body>
</html>

@Kot137 · 30.05.2016, 15:27 **[ТС]**

Сообщение от dzendev

На jquery ui есть готовое решение для Вашего случая http://jqueryui.com/slider/#range

Спасибо. Но от него я еще вчера отказался, т.к. не работает в телефонах. Несколько подобных решений перепробывал и остановился на jqxSlider (jQWidgets). Вот что получилось http://техномагазин.рф/бензопилы

@dzendev · 30.05.2016, 16:18

Сообщение от Kot137

т.к. не работает в телефонах.

Так вроде есть фикс для мобильных устройств jquery.ui.touch-punch.js
http://touchpunch.furf.com/
https://github.com/furf/jquery-ui-touch-punch

Сообщение от Kot137

остановился на jqxSlider (jQWidgets)

Классно конечно, но только платно $199 для одного сайта вроде

@Kot137 · 30.05.2016, 17:33 **[ТС]**

Сообщение от dzendev

Классно конечно, но только платно $199 для одного сайта вроде

Я скачал версию от 2015 на альтернативном сайте. Надеюсь будет работать без попрашайничества...

Новые блоги и статьи Все статьи Все блоги /
Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .
Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .	Отправка уведомления на почту при создании или изменении элементов справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной записи электронной. . .	модель ЗдравоСохранения 5. Меньше увольнений- больше дохода! anaschu 24.03.2026 Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .	Midnight Chicago Blues kumehtar 24.03.2026 Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .