Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Добрые люди помогите с ползунком jquery ui slider (https://javascript.ru/forum/misc/73225-dobrye-lyudi-pomogite-s-polzunkom-jquery-ui-slider.html)

laimas 19.04.2018 16:16

SERblY,
без обид, но если не думать над тем что вам пишут, ждать с моря погоды, то это и есть тупость. Для кого это было написано, что нельзя вставить переменную Smarty в шаблон в JS код не учитывая фигурных скобок? Я кому давал ссылку?

Знать реалии сервера, это означает - либо вы свой JS код показываете как он выводится в шаблоне, если еще только он в шаблоне выводится, причем не обязательно весь его вываливать, либо просто словами сказать - вывод его в шаблоне, при этом есть ошибки и т.п.

Если вывод этого JS в шаблоне, то ваша попытка сделать так:

<script type="text/javascript">
jQuery(document).ready(function(){
 
 
/* слайдер цен */
 
var minCost = jQuery("input.minCost"),
maxCost = jQuery("input.maxCost"),
storage = sessionStorage;
jQuery("#slider").slider({
min: 0,
max: {%$max_price%},
step: 500,
...


закончится неудачей потому, что уже на этой строке jQuery("#slider").slider({ - эта фигурная скобка есть конфликт с этой фигурной скобкой - max: {%$max_price%},

Вам сколько раз об этом повторять? Вместо того чтобы прочесть по ссылке и вникнуть в суть проблемы, вы ждете чтобы вам на хлеб намазали?

Кроме этого говорилось, что можно поступить иначе, просто объявить js-переменную, определив ей значение через переменную Smarty объявленную вне фигурных скобок, и которую потом использовать.

<script type="text/javascript">
var max =  {%$max_price%}; //ЭТО МАКС ЗНАЧЕНИЕ

jQuery(document).ready(function(){
 
 
/* слайдер цен */
 
var minCost = jQuery("input.minCost"),
maxCost = jQuery("input.maxCost"),
storage = sessionStorage;
jQuery("#slider").slider({
min: 0,
max: max, //А ЭТО ИСПОЛЬЗУЕМ ЕГО ВЕЗДЕ ВМЕСТО 100000
step: 500,
...


Что непонятного? Если вы и это делали, а у вас не работает, то бог его знает, что и где вы делаете.

SERblY 19.04.2018 16:31

Цитата:

Сообщение от laimas
без обид, но если не думать над тем что вам пишут, ждать с моря погоды, то это и есть тупость. Для кого это было написано, что нельзя вставить переменную Smarty в шаблон в JS код не учитывая фигурных скобок? Я кому давал ссылку?

Знать реалии сервера, это означает - либо вы свой JS код показываете как он выводится в шаблоне, если еще только он в шаблоне выводится, причем не обязательно весь его вываливать, либо просто словами сказать - вывод его в шаблоне, при этом есть ошибки и т.п.

Если вывод этого JS в шаблоне, то ваша попытка сделать так:

01
<script type="text/javascript">
02
jQuery(document).ready(function(){
03
  
04
  
05
/* слайдер цен */
06
  
07
var minCost = jQuery("input.minCost"),
08
maxCost = jQuery("input.maxCost"),
09
storage = sessionStorage;
10
jQuery("#slider").slider({
11
min: 0,
12
max: {%$max_price%},
13
step: 500,
14
...


закончится неудачей потому, что уже на этой строке jQuery("#slider").slider({ - эта фигурная скобка есть конфликт с этой фигурной скобкой - max: {%$max_price%},

Вам сколько раз об этом повторять? Вместо того чтобы прочесть по ссылке и вникнуть в суть проблемы, вы ждете чтобы вам на хлеб намазали?

в предыдущем посте написал что это я понял давно вы сами то читайте вообще,
Цитирую себя блин:
Потому что тупо вставить в скрипт на место 1000000 вот это {%$max_price%} НЕПРАВИЛЬНО, не будет работать и даже если будет будут глюки так как будут конфликты там из-за символов (это Вы до меня донесли это я понял)

SERblY 19.04.2018 16:33

<script type="text/javascript">
var max =  {%$max_price%}; //ЭТО МАКС ЗНАЧЕНИЕ

jQuery(document).ready(function(){
 
 
/* слайдер цен */
 
var minCost = jQuery("input.minCost"),
maxCost = jQuery("input.maxCost"),
storage = sessionStorage;
jQuery("#slider").slider({
min: 0,
max: max, //А ЭТО ИСПОЛЬЗУЕМ ЕГО ВЕЗДЕ ВМЕСТО 100000
step: 500,
...



вот вооооттт о чем я Вас прошу, СПАСИБО!
ПС: я это тоже догнал я только синтаксиса же незнаю куда правильнее вставить это вначале или где, вот вы показали как должно быть я УСВОИЛ жирный + Вам за это

SERblY 19.04.2018 16:44

Цитата:

Сообщение от SERblY
если еще только он в шаблоне выводится, причем не обязательно весь его вываливать, либо просто словами сказать - вывод его в шаблоне

Понял учту

laimas 19.04.2018 16:45

SERblY,
а что если этот JS у вас подключаемый? А ведь и об этом тоже говорилось, и говорилось, что нужно просто вывести на страницу в секции <sriptp> в шаблоне страницы, в которой подключается этот js-код слайдера цен, типа var max = {%$max_price%}; А в подключаемом файле использовать эту переменную вместо 10000. Ведь говорилось же!

И если это подключаемый файл, то вставлять в него smarty переменные глупо, ибо js файлы не являются исполняемые на сервере, РНР код в них не будет выполняться, а Smarty, это РНР.

Поэтому вам и описывались ситуации, читать нужно внимательно и думать, и пояснять происходящее на сервере, если хотите получать конкретику в ответах.

SERblY 19.04.2018 17:27

ВСЕ работает спасибо!
еще вопрос если можно, условие для шага лучше делать на смарти что то типа:
объевляем {%$price_step%} - шаг
ЕСЛИ {%$max_price%} < 10000 то {%$price_step%} = 500
ЕСЛИ {%$max_price%} < 100000 то {%$price_step%} = 1000
ЕСЛИ {%$max_price%} < 1000000 то {%$price_step%} = 10000 и т.д.

или в самом JS лучше сделать, щас просто оч важна скорость загрузки сайта там и все это, поэтому и спрашиваю, мб вопрос не актуален, но всеже , как лучше будет для всех?

SERblY 19.04.2018 17:28

Цитата:

Сообщение от laimas
И если это подключаемый файл, то вставлять в него smarty переменные глупо, ибо js файлы не являются исполняемые на сервере, РНР код в них не будет выполняться, а Smarty, это РНР.

это я понимаю, я писал вроде бы что в самом шаблоне все работает, ну должен был уточнить, исправлюсь!

laimas 19.04.2018 18:09

Без разницы где эти условия задавать.

SERblY 19.04.2018 18:33

понял спс

SERblY 19.04.2018 19:50

а случаем не знайте как прописать настройки мб в JS чтобы включилась анимированая его передвижение когда меняются значения в input ?
извиняюсь нашел, animate: true,

SERblY 19.04.2018 20:32

да кстати мало ли кто будет читать тему, и как я неожиданно узнает что ui библиотека не поддерживает использование сенсорных событий. короче говоря не двигается на смартфонах он слайдер, то решается просто с помощью jquery.ui.touch-punch.min.js, берем тут touchpunch.furf.com
<script src="jquery-ui.min.js"></script>
//подключаем сразу после подключения JQuery UI
<script src="jquery.ui.touch-punch.min.js"></script>

После подключение библиотеки все виджеты должны функционировать также как и на PC версии

SERblY 20.04.2018 15:34

Цитата:

Сообщение от рони (Сообщение 481935)
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]);
    }
});

Рони помоги пожалуйста, обнаружил такую вот проблему, когда ползунок двигаешь мышью (выставляешь диапазон) он остается так как был даже после обновление но короче все как надо, как ты помог сделать, но есть одно но, если его положение выставить не мышью а инпутами (забив туда цену), то его положение не запоминается, а встает на то которое было когда его последний раз двигали мышью, тоесть я мышью выставляю ползунок диапазон 1000-10000 его ширина допустим 10% (width), нажимаю поиск, потом открываю снова, все отлично он так и стоит, ДАЛЕЕ я выставляю диапазон цен уже ручками через инпуты например 1000-100000 он срабатывает и его ширина становиться визуально например 40% (width), нажимаю поиск, потом открываю снова и ОПА в инпутах все сохранилось как надо 1000-100000, а ползунок откатился на состояние в 10% шириной, тоесть на то когда его последний раз выставляли мышью, короче когда его трогали в прям смысле слова ! Такая вот беда, а так уже довел до ума и цену сделал динамичной максимальную и шаг динамичным, вот заметил такой неприятный косяк!
приведу полный код ниже (вместе с инпутами):
{%assign var='min_price' value=0%}
{%assign var='price_step' value=500%}
{%if $max_price < 10000%}{%assign var='price_step' value=500%}{%/if%}
{%if $max_price > 10000%}{%assign var='price_step' value=1000%}{%/if%}
{%if $max_price > 100000%}{%assign var='price_step' value=5000%}{%/if%}
<script type="text/javascript">
var minprice =  {%$min_price%};
var maxprice =  {%$max_price%};
var pricestep =  {%$price_step%};
jQuery(document).ready(function(){
var minCost = jQuery("input.minCost"),
    maxCost = jQuery("input.maxCost"),
    storage = sessionStorage;
jQuery("#slider").slider({
  min: minprice,
  max: maxprice,
  step: pricestep,
  range: true,
  animate: true,
  values: JSON.parse(storage.getItem("values")) ||[0, maxprice],
  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]);
    }
});


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 > maxprice) { value2 = maxprice; jQuery("input.maxCost").val(maxprice)}

	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>

<input style="padding-left:3px; padding-right:3px" class="price_field minCost form-control" name="{%$id%}[over]" type="number" placeholder="Цена, {%$locale.888%}" id="" value=""/>

<input style="padding-left:3px; padding-right:3px" class="price_field maxCost form-control" name="{%$id%}[less]" type="number" placeholder="Цена, {%$locale.889%}" id="bs_{%$field.id%}" value=""/>


PS^ и еще вопрос как сделать чтобы они не наезжали на друг друга тоесть есть шаг pricestep допустим он 500 и чтобы меньше 0-500 нельзя было выставить ползунок ато они в данный момент 0-0 выставляется тоесть наезжают друг на дружку, мне кажеться это моветон


Часовой пояс GMT +3, время: 02:34.