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

@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 на альтернативном сайте. Надеюсь будет работать без попрашайничества...

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .