Добрые люди помогите с ползунком jquery ui slider
Вложений: 1
Суть такова, сам как смог прикрутил, тоесть если его двигаешь в инпутах меняется все нормально, поиск по этим пораметрам срабатывает, но вот незадача, если обновить страничку то в инпутах диапазон остаетсся тот который выбирали, а ползунок на стандартные исходные возвращаеться, ребят помогите, как сделать чтобы он тоже оставался
Вот код самого ползунка (скрипта) мб что то лишнее или не так настроил, надеюсь поможете:
<script src="/assets/jquery-ui/jquery-ui.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
/* слайдер цен */
jQuery("#slider").slider({
min: 0,
max: 1000000,
step: 500,
range: true,
stop: function(event, ui) {
jQuery("input.minCost").val(jQuery("#slider").slider("values",0));
jQuery("input.maxCost").val(jQuery("#slider").slider("values",1));
},
slide: function(event, ui){
jQuery("input.minCost").val(jQuery("#slider").slider("values",0));
jQuery("input.maxCost").val(jQuery("#slider").slider("values",1));
}
});
jQuery("input.minCost").change(function(){
var value1=jQuery("input.minCost").val();
var value2=jQuery("input.maxCost").val();
if(parseInt(value1) > parseInt(value2)){
value1 = value2;
jQuery("input.minCost").val(value1);
}
jQuery("#slider").slider("values",0,value1);
});
jQuery("input.maxCost").change(function(){
var value1=jQuery("input.minCost").val();
var value2=jQuery("input.maxCost").val();
if (value2 > 1000000) { value2 = 1000000; jQuery("input.maxCost").val(1000000)}
if(parseInt(value1) > parseInt(value2)){
value2 = value1;
jQuery("input.maxCost").val(value2);
}
jQuery("#slider").slider("values",1,value2);
});
// фильтрация ввода в поля
jQuery('input.maxCost, input.minCost').keypress(function(event){
var key, keyChar;
if(!event) var event = window.event;
if (event.keyCode) key = event.keyCode;
else if(event.which) key = event.which;
if(key==null || key==0 || key==8 || key==13 || key==9 || key==46 || key==37 || key==39 ) return true;
keyChar=String.fromCharCode(key);
if(!/\d/.test(keyChar)) return false;
});
});
</script>
вот кусок формы где ползунок и инпуты:
<div class="col-md">
<input style="padding-left:3px; padding-right:3px" class="price_field minCost form-control" name="{%$id%}[over]" type="number" step="500.00" id="" placeholder="Цена, {%$locale.888%}" value=""/>
</div>
<div class="col-md">
<input style="padding-left:3px; padding-right:3px" class="price_field maxCost form-control" name="{%$id%}[less]" type="number" step="500.00" placeholder="Цена, {%$locale.889%}" id="bs_{%$field.id%}" value=""/>
</div>
вот подгружаеться сам ползунок: прям ниже инпутов сразу (я просто разделил чтобы понятнее было) <div class="sliderCont"> <div id="slider"></div> </div> Прикреплю еще скрин на всякий чтобы было яснее! Надеюсь на помощь! Спасибо! |
Данные из инпутов передались на сервер для фильтрации данных, при отрисовке этих инпутов нельзя в них поместить переданные на сервер значения?
|
SERblY,
slider ui сохранение |
так как лучше сделать я так и не понял, Вы извините конечно мб я туплю. просто не сильно шарю в скрипте, так поставить могу что то подправить но вот как сделать лучше чтобы не так на отмашку а чтобы рабочий вариант хороший был не допру никак :(
|
SERblY, правильнее будет вывести в input переданное фильтру значение и при инициализации слайдера воспользоваться ими.
Сохранять значения в localStorage по-моему глупо, когда есть возможность модифицировать backend. |
SERblY,
проще способ Nexus, на php в строку 12 например добавить values: <[??,??]>, не знаю php, может кто подскажет |
Цитата:
|
Цитата:
|
SERblY, какой шаблонизатор используется?
Каким методом данные на сервере передаются? |
smarty
<div class="col-md">
<input style="padding-left:3px; padding-right:3px" class="price_field minCost form-control" name="{%$id%}[over]" type="number" step="500.00" id="" placeholder="Цена, {%$locale.888%}" value=""/>
</div>
<div class="col-md">
<input style="padding-left:3px; padding-right:3px" class="price_field maxCost form-control" name="{%$id%}[less]" type="number" step="500.00" placeholder="Цена, {%$locale.889%}" id="bs_{%$field.id%}" value=""/>
</div>
повторюсь при изменение числового значения input ползунок работает. при передвижение ползунка меняется значение input . поиск по данным критериям срабатывает. но при открытие вновь поиска в input данные прошлого запроса сохраняются пока их не обнулишь или не изменишь а ползунок тупо встает на исходную (вот главная проблема), ну и как специалисты мб еще подскажите что то мб в коде лишнее или можно сделать лучше. безмерно благодарен лично Вам за помощь любую и форуму конечно, уже не 1 раз обращаюсь. |
Цитата:
var minCost = jQuery("input.minCost"),
maxCost = jQuery("input.maxCost");
jQuery("#slider").slider({
min: 0,
max: 1000000,
step: 500,
range: true,
values: [ minCost.val(), maxCost.val()],
stop: function(event, ui) {
minCost.val(jQuery("#slider").slider("values",0));
maxCost.val(jQuery("#slider").slider("values",1));
},
slide: function(event, ui){
minCost.val(jQuery("#slider").slider("values",0));
maxCost.val(jQuery("#slider").slider("values",1));
}
});
Правда, похоже, нужно чтобы вместо
placeholder="Цена, {%$locale.888%}" value=""/>
было
placeholder="Цена, {%$locale.888%}" value="{%$locale.888%}"/>
И, соответственно, во втором инпуте аналогично. |
{%$locale.888%} это не переменная это просто языковая, От , До, просто еще записал в языковой файл "цена"
|
SERblY,
А как же тогда Цитата:
|
Цитата:
|
Цитата:
То есть, чтобы сохранить выбор пользователя, нужно значения полей полученные на сервере помещать в параметры слайдера. Если это не возможно, то эти значения слайдер должен получить из значения полей, то есть value, а они у вас пустые, о чем и говорил Dilettante_Pro. Так что нужно выяснить как инициализируется слайдер, и если значения получает из полей, то передавайте их в Smarty - value="{$value}". |
что для этого нужно ? прошу реально помощи, на что головы хватило сделал, тут немогу понять....
|
я понимаю для знающих это просто, я например в верстке силен, но хоть убейте я только на начале пути в понимание Java , я не тупой, могу сделать, но я начинающий мне мб надо объяснить... нет Вы и все форумчане этого не обязаны делать, никто мне не должен ничего и я никому, но суть наша в том что можно просто обратиться на форум где тусуются люди знающее вопрос и помогут, ..... никто ни кому нечего не должен, но я буду очень благодарен если Кто-то поможет, спасибо! извините за такой выдох!
|
помоги если есть вариант ?!, тема уйде в никуда!
|
Цитата:
|
Да, те что вам отвечали знаю и понимают многое, но откуда же им ведомо как обстоят дела на сервере. А не зная этого вам никто не скажет - "нужно вот это передать в это таким образом".
Через поля формы нужно передать значения состояния ползунка, если js-скрипт подключается к странице, то есть серверный язык в нем ничего не может править, подставлять. Поэтому в шаблонизатор и нужно передать значения для полей, те что были получены. А как они обрабатываются сервером, не известно, известно только что это будут имена name="{%$id%}[less]", хотя такие имена не лучшее, что можно придумать. |
Цитата:
|
бли ну я же скинул код, код который работает, вот код исходника (без ползунка):
{%if $field.type == 'p'%}
<input class="form-control price_field" name='{%$id%}[over]' type='number' step='0.01' placeholder="{%$locale.888%}" value=''/>
<input class="form-control price_field" name='{%$id%}[less]' type='number' step='0.01' placeholder="{%$locale.889%}" value='' id="bs_{%$field.id%}"/>
<select size='1' name="{%$id%}[rate]" class="form-control price_field">
{%foreach from=$field.rates item='rates'%}
<option {%if $rates_default.id == $rates.id%}selected{%/if%} value='{%$rates.id%}'>{%$rates.name%}</option>
{%/foreach%}
</select>
{%/if%}
как есть!!! |
Чего вы хотите? Этот код ни о чем не говорит, я зная что такое Smarty могу лишь только сказать что это сформирует нечто. Все.
Вам русским языком говорят, что если положение ползунка задавать через значения полей, которые он обрабатывает, то их нужно задавать на сервере, где они placeholder="{%$locale.888%}" value=''? Вы думаете что тут волшебники и знают как сервер принимает эти значения, обрабатывает и прочее, а значит конкретно скажу написать в шаблоне именно так-то и так? Ошибаетесь. А атрибут id, это всего лишь уникальный идентификатор DOM-объекта на странице, по которому его можно получить. |
да я думаю что волшебники, не первый раз обращаюсь.... повторюсь Вы не обязаны мне помогать, но думаю тут вопрос фигня , я просто не знаю как его решить... В любом случае Вам спасибо! извините за беспокойство...
|
вот выше стандартный пример, без ползунка, все работает, прикрутить ползунок, все переменные там есть, Как это сделать? подскажите, тыкните носом как говориться, я Вас понимаю, когда ко мне по поводу bootstrap4 обращаются тоже люди не далекие, я просто данную задачу в скрипте решить не могу, поэтому и обратился!
|
Вы обслуживаете бабушку продуктами на основании ее записки к вам. И чтобы не забывать, в силу ее возраста, эта записка для нее и учет чего она уже брала, чтобы не купить заново. Она пишет для вас:
Хлеб - 1 булка Яйца - 10 штук Чтобы она не забыла, вы привозя ей продукты должны написать Куплено хлеба - 1 булка. Куплено яиц - 10 яиц. Все здесь на форуме видят знают как бабушка делает у вас заказ и могут помочь в какой либо ситуации. Но никому здесь на форуме не ведомо, почему вы вместо Куплено хлеба - 1 булка. Куплено яиц - 10 яиц. возвращаете бабушке в записке Хлеб - Яйца - Что блин непонятного то? Как вам могут подсказать сделать нечто, не зная на чем это основывается. Смотрите пост от рони, храните изменения ползунка на клиенте в таком случае, только не локальном хранилище, а в сессионном, иначе клиент будет видеть совсем не то, что ожидает. Больше сказать нечего. |
Цитата:
|
Цитата:
|
по поводу Рони, он мне помог очень с картой помню году в 2014, на него собственно и надеялся, тоже не буду лукавить, но что то в теме пропал, еще раз Вам лично говорю, Извините, я просто скрипт натянул как смог, далее мои знания заканчиваются, я думаю все впереди полюбому, но ползунок нужен сейчас, вот беда какая!
|
в форме все есть, все подгружаеться посредством аякса, я же как то смог его прикрутить, если надо дам доступ, вот короче говоря как это все работает:
<div class="bg-light" style="padding:10px; border:2px solid #29abe0; box-shadow: 0 1px 14px 0 rgba(24,80,120,.5)">
<a href="#" onclick="divOp(0);"><i class="material-icons closedsearch">clear</i></a>
{%******* доп. поля *******%}
<div class="block_search_ajax"></div>
далее подключаеться :
<script src="{%$smarty.const.THEME%}assets/jquery-ui/jquery-ui.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
/* слайдер цен */
jQuery("#slider").slider({
min: 0,
max: 1000000,
step: 500,
range: true,
stop: function(event, ui) {
jQuery("input.minCost").val(jQuery("#slider").slider("values",0));
jQuery("input.maxCost").val(jQuery("#slider").slider("values",1));
},
slide: function(event, ui){
jQuery("input.minCost").val(jQuery("#slider").slider("values",0));
jQuery("input.maxCost").val(jQuery("#slider").slider("values",1));
}
});
jQuery("input.minCost").change(function(){
var value1=jQuery("input.minCost").val();
var value2=jQuery("input.maxCost").val();
if(parseInt(value1) > parseInt(value2)){
value1 = value2;
jQuery("input.minCost").val(value1);
}
jQuery("#slider").slider("values",0,value1);
});
jQuery("input.maxCost").change(function(){
var value1=jQuery("input.minCost").val();
var value2=jQuery("input.maxCost").val();
if (value2 > 1000000) { value2 = 1000000; jQuery("input.maxCost").val(1000000)}
if(parseInt(value1) > parseInt(value2)){
value2 = value1;
jQuery("input.maxCost").val(value2);
}
jQuery("#slider").slider("values",1,value2);
});
// фильтрация ввода в поля
jQuery('input.maxCost, input.minCost').keypress(function(event){
var key, keyChar;
if(!event) var event = window.event;
if (event.keyCode) key = event.keyCode;
else if(event.which) key = event.which;
if(key==null || key==0 || key==8 || key==13 || key==9 || key==46 || key==37 || key==39 ) return true;
keyChar=String.fromCharCode(key);
if(!/\d/.test(keyChar)) return false;
});
});
</script>
<link href="{%$smarty.const.THEME%}assets/jquery-ui/jquery-ui.css" rel="stylesheet"/>
.............специально еще захвачу два поля чекбоксы и т.д., все подключается в зависимости от условия, это для примера. но меня конкретно интересует ползунок добрые люди,
{%if $field.type == 'r'%}
<div class="form-group">
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="{%$id%}" class="custom-control-input" value=''>
<label class="custom-control-label" for="customRadio1"> {%$locale.204%}</label>
</div>
{%foreach from=$field.values_array item='vl' key='k'%}
<div class="custom-control custom-radio">
<input type="radio" id="customRadio{%$vl%}" name="{%$id%}" class="custom-control-input" value='{%$k%}'>
<label class="custom-control-label" for="customRadio{%$vl%}"> {%$vl%}</label>
</div>
{%/foreach%}
</div>
{%/if%}
{%if $field.type == 'c'%}
{%foreach from=$field.values_array item='vl' key='k'%}
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" name="{%$id%}[{%$k%}]" class="custom-control-input" id="customCheck{%$vl%}" value="{%$k%}">
<label class="custom-control-label" for="customCheck{%$vl%}"> {%$vl%}</label>
</div>
{%/foreach%}
{%/if%}
{%if $field.type == 'p'%}
<div class="row">
<div class="col-md">
------------------------------------------
<input style="padding-left:3px; padding-right:3px" class="price_field minCost form-control" name="{%$id%}[over]" type="number" step="500.00" id="" placeholder="Цена, {%$locale.888%}" value=""/>
</div>
<div class="col-md">
<input style="padding-left:3px; padding-right:3px" class="price_field maxCost form-control" name="{%$id%}[less]" type="number" step="500.00" placeholder="Цена, {%$locale.889%}" id="bs_{%$field.id%}" value=""/>
--------------------------------------------------------------
</div>
<div class="col-md">
<select style="padding:3px" size='1' name="{%$id%}[rate]" class="form-control price_field custom-select">
{%foreach from=$field.rates item='rates'%}
<option {%if $rates_default.id == $rates.id%}selected{%/if%} value="{%$rates.id%}"><strong>{%if $rates.id == 1 %}ք{%/if%}{%if $rates.id == 2 %}${%/if%}{%if $rates.id == 3 %}€{%/if%}</strong></option>
{%/foreach%}
</select>
</div>
</div>
----------------------------------------------
<div class="clearfix" style="height:10px"></div>
<div class="sliderCont">
<div id="slider"></div>
</div>
<div class="clearfix" style="height:10px"></div>
-----------------------------------------------------
{%/if%}
</div>
{%/if%}
{%/foreach%}
<div class="row">
<div class="col-md">
<div class="custom-control custom-checkbox">
<input class="custom-control-input" id="defaultCheckimages" name="must[images]" type="checkbox" value="ON" />
<label class="custom-control-label" for="defaultCheckimages" style="cursor: pointer">
только с фото
</label>
</div>
</div>
{%foreach from=$fields key='k' item='field'%}
{%if $field.type == 'f' OR $field.type == 'y' OR $field.type == 'j'%}
<div class="col-md">
<div class="custom-control custom-checkbox">
<input class="custom-control-input" id="defaultCheck{%$k%}" name="must[{%$k%}]" type="checkbox" value="ON" />
<label class="custom-control-label" for="defaultCheck{%$k%}" style="cursor: pointer">
{%$field.name%}
</label>
</div>
</div>
{%/if%}
{%/foreach%}
|
SERblY,
замените строки 8 - 22 на это ...
var minCost = jQuery("input.minCost"),
maxCost = jQuery("input.maxCost"),
storage = sessionStorage;
jQuery("#slider").slider({
min: 0,
max: 1000000,
step: 500,
range: true,
values: JSON.parse(storage.getItem("values")) ||[0, 1000000],
stop: function(event, ui) {
minCost.val(ui.values[0]);
maxCost.val(ui.values[1]);
storage.setItem("values", JSON.stringify(ui.values));
},
slide: function(event, ui){
minCost.val(ui.values[0]);
maxCost.val(ui.values[1]);
}
});
|
SERblY, вы публикуете код представления, оно ничем особо не поможет, т.к. не обрабатывает (и не должно) запрос, а просто отрисовывает страницу.
Можно попробовать заменить участок представления, который отвечает за отрисовку инпутов для слайдера этим:
<div class="col-md">
<input style="padding-left:3px; padding-right:3px"
class="price_field minCost form-control"
name="{%$id%}[over]"
type="number"
step="500.00"
placeholder="Цена, {%$locale.888%}"
id="bs_{%$field.id%}"
value="{%if isset($smarty.request[$id].over)%}{%$smarty.request[$id].over%}{%else%}0{%/if%}"/>
</div>
<div class="col-md">
<input style="padding-left:3px; padding-right:3px"
class="price_field maxCost form-control"
name="{%$id%}[less]"
type="number"
step="500.00"
max="1000000"
min="0"
placeholder="Цена, {%$locale.889%}"
id="bs_{%$field.id%}"
value="{%if isset($smarty.request[$id].less)%}{%$smarty.request[$id].less%}{%else%}0{%/if%}"/>
</div>
Если известен метод передачи данных на сервер, то "$smarty.request" нужно заменить на "$smarty.get/post"."$smarty.request" - не ссылка на глобальную переменную request, подробнее в документации шаблонизатора. Js заменить этим:
(function() {
var jQ = jQuery,
$slider = jQ("#slider"),
$minField = jQ("input.minCost"),
$maxField = jQ("input.maxCost");
$minField.add($maxField).change(function() {
var isMaxField = this.classList.contains('maxCost'),
minValue = +this.value;
if(isMaxField && +$maxField.val() > +$maxField.attr('max'))
$maxField.val($maxField.attr('max') || 0);
if(minValue > +$maxField.val())
this.value = minValue = (+$maxField.val() || 0);
$slider.slider('values', +isMaxField, minValue);
}).keypress(function(event) {
var e = e || window.event,
key = e.keyCode || e.charCode;
if([null, 0, 8, 13, 9, 46, 37, 39].indexOf(key) > -1)
return true;
else if(!/\d/.test(String.fromCharCode(key)))
return false;
});
$slider.slider({
min: $maxField.attr('min') || 0,
max: $maxField.attr('max') || 0,
step: $maxField.attr('step') || 0,
values: [$minField.val() || 0, $maxField.val() || $maxField.attr('max') || 0],
range: true,
stop: function _ui_slider_handler(event, ui) {
$minField.add($maxField).val(function(i) {
return ui.values[i];
});
},
slide: _ui_slider_handler
});
})();
Если вывести значения в инпуты не выйдет, то воспользуйтесь вариантом рони. Если значения выведутся в инпуты, но что-то не будет работать, смотрите консоль, м.б. я где-то допустил в js ошибку (не тестировал). |
Спасибо Вам и Рони Спасибо, я попробую и отпишусь обязательно
|
мало ли не я один такой )
|
Цитата:
|
Цитата:
min: 0, max: 1000000, step: 500 это нонсенс, не может он имеет эти значения как константы. Например, пользователь находится на странице группы товаров с минимальной ценой 2000 и максимальной 10000. В этом случае рабочий диапазон ползунка будет сжат, а шаг изменения слишком большой. Отдавая ползунок пользователю параметры мин/макс и шаг изменения нужно рассчитывать под конкретный диапазон. |
Цитата:
|
Цитата:
|
как бы эту светлую мысль еще и реальзовать
даже упростить минимальное значение пускай будет 0 всегда а вот максимальное берется из базы самое большое какое есть в базе |
Допустим у вас продаются в отделе бублики разных производителей, при этом мин. цена это 50 руб/кг и макс. 80 руб/кг. Вы отдаете клиенту свой ползунок с мин. значением 0 и макс. значением 10000, да еще с шагом 500. В каком месте шкалы будет реально выбрать цену бубликов и возможно ли будет это сделать с шагом 500?
А в другом отделе вы торгуете Жигулями и Лексусами, с мин. ценой 400000 и макс. 4600000. Можно ли будет на вашем ползунке с его диапазоном купить Лексус? Я не настаиваю, дело хозяйское, но вашим ползунком либо нельзя будет воспользоваться, либо он будет неудобен. |
| Часовой пояс GMT +3, время: 03:06. |