Javascript-форум - вопрос по $.ajax

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - вопрос по $.ajax (https://javascript.ru/forum/jquery/10989-vopros-po-%24-ajax.html)

вопрос по $.ajax

за помощь отблагодарю денежкой :victory:
предложения по улучшению кода с большим удовольствием приму.
я хочу сделать голосование с возможностью выбора возраста.
о работе скрипта: есть кнопки "ЗА(ON)" и "ПРОТИВ(OFF)", при нажатии на одну из них вываливается список с возростом, типа
Выберите Ваш возраст:
моложе 20
21-30
31-40
41-50
51-60
61 старше
где пользователь выбирает свой возраст, кликает например на кнопку "21-30" и с помощью AJAX'a пошли данные к базе!
скажу сразу что ВСЕ как я задумал работает!!
но есть одно, маленький нюанс.
суть проблемы:
если пользователь кликает например по кнопке "ЗА(ON)" -> выбирает возраст -> запрос идет к базе от "ЗА(ON)". Итого: РАБОТАЕТ
а вот если кликает например сначала по кнопке "ЗА(ON)", потом "ПРОТИВ(OFF)" (и наоборот), тоесть сначала хотел проголосовать ЗА, потом передумал, нажал на "ПРОТИВ(OFF) -> выбирает возраст -> вот тут-то и косяк, запрос идет к базе от "ЗА(ON)" и "ПРОТИВ(OFF)".
то есть почему-то выполняется 2ое обращение у базе!
вот код:

<script type="text/javascript">
   var j = jQuery;
   function footer(OnOff){
      j(OnOff).click(function(){
         j(".panel").slideUp("slow");
         j(".boxOn").css({'display':'none'});
         j(".boxOff").css({'display':'none'});
         j(".center").css({'display':'block'});
         return false;
      });
   }
   function ajaxURL(box, rat, age, objid){
      j(box).html('<div class="load"></div>');
      j.ajax({
         type:"POST",
         url:"ajax.index.php",
         data:"option=com_kino&task=vote"+rat+age+"&id=<?=$id;?>",
         cache:false,
         success:function(html){j(box).html(html);}
      });
   }
   j(document).ready(function(){
      j(".center").css({'display':'none'});
      <?php /* кликаем на .boxOn > вываливается панель #panel */?>
      j("#on").bind("click", function(){
         
         j(".panel").attr('id','panelON').slideDown("slow");
         <?php /* присваиваем уникальный id каждому элементу vozrast */ ?>
           j(".panel div").attr('id',function(index){return 'on_'+index;}).addClass("vozrast_On").removeClass("vozrast_Off");
         <?php /* выводим кнопки, ловим клик и обрабатываем AJAX */?>
           j("#on_0").one("click", function(){ajaxURL(".boxLeft", "&query=on", "&age=0", "<?=$id;?>");});
         j("#on_1").one("click", function(){ajaxURL(".boxLeft", "&query=on", "&age=1", "<?=$id;?>");});
         j("#on_2").one("click", function(){ajaxURL(".boxLeft", "&query=on", "&age=2", "<?=$id;?>");});
         j("#on_3").one("click", function(){ajaxURL(".boxLeft", "&query=on", "&age=3", "<?=$id;?>");});
         j("#on_4").one("click", function(){ajaxURL(".boxLeft", "&query=on", "&age=4", "<?=$id;?>");});
         j("#on_5").one("click", function(){ajaxURL(".boxLeft", "&query=on", "&age=5", "<?=$id;?>");});
         footer(".vozrast_On");
      });
        <?php /* отрицательный отзыв */?>
        j("#off").bind("click", function(){         
         
         j(".panel").attr('id','panelOFF').slideDown("slow");
         <?php /* присваиваем уникальный id каждому элементу vozrast */?>
           j(".panel div").attr('id',function(index){return 'off_'+index;}).addClass("vozrast_Off").removeClass("vozrast_On");
         <?php /* выводим кнопки, ловим клик и обрабатываем AJAX */?>
           j("#off_0").one("click", function(){ajaxURL(".boxRight", "&query=off", "&age=0", "<?=$id;?>");});
         j("#off_1").one("click", function(){ajaxURL(".boxRight", "&query=off", "&age=1", "<?=$id;?>");});
         j("#off_2").one("click", function(){ajaxURL(".boxRight", "&query=off", "&age=2", "<?=$id;?>");});
         j("#off_3").one("click", function(){ajaxURL(".boxRight", "&query=off", "&age=3", "<?=$id;?>");});
         j("#off_4").one("click", function(){ajaxURL(".boxRight", "&query=off", "&age=4", "<?=$id;?>");});
         j("#off_5").one("click", function(){ajaxURL(".boxRight", "&query=off", "&age=5", "<?=$id;?>");});
         footer(".vozrast_Off");
      });
   });
   </script>

<div style='text-align:center;margin-top:5px;'>
       <div class='boxLeft'><?=$sumON; /*число из базы*/ ?></div>
                          <div class='boxOn' id='on'></div><div class='boxOff' id='off'></div><div class='center'></div>
       <div class='boxRight'><?=$sumOFF; /*число из базы*/ ?></div>
</div><div style='clear:both;'></div>

<div class='panel'>Выберите Ваш возраст:
       <div>моложе 20</div>
       <div>21-30</div>
       <div>31-40</div>
       <div>41-50</div>
       <div>51-60</div>
       <div>61 старше</div>
</div>

Цитата:

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

j("#on_0").one("click", function(){ajaxURL(".boxLeft", "&query=on", "&age=0", "<?=$id;?>");});

Цитата:

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

j("#off_0").one("click", function(){ajaxURL(".boxRight", "&query=off", "&age=0", "<?=$id;?>");});

вы не снимаете старый обработчик события, и при этом добавляете новый.
как итог, выполняются оба.
поэтому количество запросов будет такое же, как и количество кликов по #on/#off

подскажите а как снять-то ?

Цитата:

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

подскажите а как снять-то ?

а, что в документацию заглянуть - это трудно?

Цитата:

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

а, что в документацию заглянуть - это трудно?

:dance: unbind(type , fn ) ?

это для On / Off

Saymor,
браво.
вам понадобилось всего 7 минут, чтобы найти нужный раздел документации.
спрашивается, зачем задавать идиотские вопросы, если ответ на них находится самостоятельно достаточно быстро?

Цитата:

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

браво.

бился 2 дня! :) а вы меня на путь истенный направили!
предложением:

Цитата:

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

еще и в доки отправили...
главное зацепки..

спасибо! можно Вас отблагодарить?
WMR
или Qiwi
??

Цитата:

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

главное зацепки..

ну, да, форум пожалуй для этого нужен
задать направление, и дать зацепки

Цитата:

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

WMR

в них пойдет.
кошель скинул в личку

Цитата:

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

ну, да, форум пожалуй для этого нужен
задать направление, и дать зацепки

с unbind() все равно не выходит задуманного!
как же отвязать on от off в моем случае?

Цитата:

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

с unbind() все равно не выходит задуманного!
как же отвязать on от off в моем случае?

а как вы его используете?
вы в курсе, что? :

alert(function(){} == function(){});//false
//================================
var qwe=function(){}
alert(qwe == qwe);//true

а в unbind надо передавать ту же функцию, а не такую же

Цитата:

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

а в unbind надо передавать ту же функцию, а не такую же

хм.. интересный пример, возьму на заметку.
но из примера я не понял как это использовать в моем случае.

приведу пример своего кода:

j("#on").bind('click', on);
j('#off').unbind('click', off);
		<?php /* кликаем на .boxOn > вываливается панель #panel */?>
		function on(onObj){	
			j("#off").unbind('click');		
			j(".panel").attr('id','panelON').slideDown("slow");
			<?php /* присваиваем уникальный id каждому элементу vozrast */ ?>
	        j(".panel div").attr('id',function(index){return 'on_'+index;}).addClass("vozrast_On").removeClass("vozrast_Off");
			<?php /* выводим кнопки, ловим клик и обрабатываем AJAX */?>
	        j("#on_0").one("click", function(){ajaxURL(".boxLeft", "&query=on", "&age=0", "<?=$id;?>");});
			j("#on_1").one("click", function(){ajaxURL(".boxLeft", "&query=on", "&age=1", "<?=$id;?>");});
			j("#on_2").one("click", function(){ajaxURL(".boxLeft", "&query=on", "&age=2", "<?=$id;?>");});
			j("#on_3").one("click", function(){ajaxURL(".boxLeft", "&query=on", "&age=3", "<?=$id;?>");});
			j("#on_4").one("click", function(){ajaxURL(".boxLeft", "&query=on", "&age=4", "<?=$id;?>");});
			j("#on_5").one("click", function(){ajaxURL(".boxLeft", "&query=on", "&age=5", "<?=$id;?>");});
			footer(".vozrast_On");
			//onObj.stopPropagation();
		}

но так не правильно, так как все равно идет 2 запроса
а если поставить:

j("#on").bind('click', on);
j('#on').unbind('click', on);

то список с возрастом не вываливается.
логики уловить не могу..

Цитата:

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

но так не правильно, так как все равно идет 2 запроса
а если поставить:
j("#on").bind('click', on);j('#on').unbind('click', on);
то список с возрастом не вываливается.
логики уловить не могу..

я ж вроде написал, что ты выставляешь события много раз на #on_0 / #off_0 , и прочие
соответственно и снимать события надо с них же.перед тем, как выставить новые.
вот примерный код - не проверял на рабочесть, но суть такова:

<script type="text/javascript">
   var j = jQuery;
   function footer(OnOff){
      j(OnOff).click(function(){
         j(".panel").slideUp("slow");
         j(".boxOn").css({'display':'none'});
         j(".boxOff").css({'display':'none'});
         j(".center").css({'display':'block'});
         return false;
      });
   }
   function ajaxURL(box, rat, age, objid){
      j(box).html('<div class="load"></div>');
      j.ajax({
         type:"POST",
         url:"ajax.index.php",
         data:"option=com_kino&task=vote"+rat+age+"&id=<?=$id;?>",
         cache:false,
         success:function(html){j(box).html(html);}
      });
   }
   j(document).ready(function(){
   var fns=[null,null,null,null,null,null];//массив запомненных обработчиков события
      j(".center").css({'display':'none'});
      <?php /* кликаем на .boxOn > вываливается панель #panel */?>
      j("#on").bind("click", function(){
         
         j(".panel").attr('id','panelON').slideDown("slow");
         <?php /* присваиваем уникальный id каждому элементу vozrast */ ?>
           j(".panel div").attr('id',function(index){return 'on_'+index;}).addClass("vozrast_On").removeClass("vozrast_Off");
         <?php /* выводим кнопки, ловим клик и обрабатываем AJAX */?>
           j("#on_0").unbind('click',fns[0]).one("click", fns[0]=function(){ajaxURL(".boxLeft", "&query=on", "&age=0", "<?=$id;?>");});
         j("#on_1").unbind('click',fns[1]).one("click", fns[1]=function(){ajaxURL(".boxLeft", "&query=on", "&age=1", "<?=$id;?>");});
         j("#on_2").unbind('click',fns[2]).one("click", fns[2]=function(){ajaxURL(".boxLeft", "&query=on", "&age=2", "<?=$id;?>");});
         j("#on_3").unbind('click',fns[3]).one("click", fns[3]=function(){ajaxURL(".boxLeft", "&query=on", "&age=3", "<?=$id;?>");});
         j("#on_4").unbind('click',fns[3]).one("click", fns[4]=function(){ajaxURL(".boxLeft", "&query=on", "&age=4", "<?=$id;?>");});
         j("#on_5").unbind('click',fns[4]).one("click", fns[5]=function(){ajaxURL(".boxLeft", "&query=on", "&age=5", "<?=$id;?>");});
         footer(".vozrast_On");
      });
        <?php /* отрицательный отзыв */?>
        j("#off").bind("click", function(){         
         
         j(".panel").attr('id','panelOFF').slideDown("slow");
         <?php /* присваиваем уникальный id каждому элементу vozrast */?>
           j(".panel div").attr('id',function(index){return 'off_'+index;}).addClass("vozrast_Off").removeClass("vozrast_On");
         <?php /* выводим кнопки, ловим клик и обрабатываем AJAX */?>
           j("#off_0").unbind('click',fns[0]).one("click", fns[0]=function(){ajaxURL(".boxRight", "&query=off", "&age=0", "<?=$id;?>");});
         j("#off_1").unbind('click',fns[1]).one("click", fns[1]=function(){ajaxURL(".boxRight", "&query=off", "&age=1", "<?=$id;?>");});
         j("#off_2").unbind('click',fns[2]).one("click", fns[2]=function(){ajaxURL(".boxRight", "&query=off", "&age=2", "<?=$id;?>");});
         j("#off_3").unbind('click',fns[3]).one("click", fns[3]=function(){ajaxURL(".boxRight", "&query=off", "&age=3", "<?=$id;?>");});
         j("#off_4").unbind('click',fns[4]).one("click", fns[4]=function(){ajaxURL(".boxRight", "&query=off", "&age=4", "<?=$id;?>");});
         j("#off_5").unbind('click',fns[5]).one("click", fns[5]=function(){ajaxURL(".boxRight", "&query=off", "&age=5", "<?=$id;?>");});
         footer(".vozrast_Off");
      });
   });
   </script>

<div style='text-align:center;margin-top:5px;'>
       <div class='boxLeft'><?=$sumON; /*число из базы*/ ?></div>
                          <div class='boxOn' id='on'></div><div class='boxOff' id='off'></div><div class='center'></div>
       <div class='boxRight'><?=$sumOFF; /*число из базы*/ ?></div>
</div><div style='clear:both;'></div>

<div class='panel'>Выберите Ваш возраст:
       <div>моложе 20</div>
       <div>21-30</div>
       <div>31-40</div>
       <div>41-50</div>
       <div>51-60</div>
       <div>61 старше</div>
</div>

PS кстати, менять ID-шники - не самая лучшая идея

:thanks: спасибо и низкий поклон, Ваш пример работает..

но если честно, сам бы до такого не дошел.
В мануалах иначе описано.

а почему менять ID-шники - не самая лучшая идея?

Цитата:

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

а почему менять ID-шники - не самая лучшая идея?

я даже добавлю, что не лучшая идея, здесь вообще задействовать ID_шники
работать ваш код будет, даже с добавлением и изменением ID-Шников
но при этом страдает чистота кода.
ID - это уникальный идентификатор, как ФИО у человека
поэтому его не стоит менять
и к тому же ID предназначен для доступа к одиночным элементам, для которых удобней обратится именно так.
в вашем случае мы имеем дело с набором соседей
и к каждому из них можно обращаться как "сосед №", а не назначать ID
как именно обращатся таким образом, опять-таки напсиано в справочнике

Цитата:

Сообщение от Gvozd (Сообщение 65861)

оо как.. понятно..

вопрос еще такой, я добавил строчку кода сюда
БЫЛО:

function footer(OnOff){
04	      j(OnOff).click(function(){
05	         j(".panel").slideUp("slow");
06	         j(".boxOn").css({'display':'none'});
07	         j(".boxOff").css({'display':'none'});
08	         j(".center").css({'display':'block'});
09	         return false;
10	      });
11	   }

СТАЛО:

function footer(OnOff){
		j(OnOff).click(function(){
			j(".panel").slideUp("slow");
			j(".boxOn").css({'display':'none'});
			j(".boxOff").css({'display':'none'});
			j(".center").css({'display':'block'});
			j(".voteAge").slideDown("slow");
			ajaxURL("#voteAge","","&age=agevote","<?=$id;?>");
		});	
	}

все работает как мне надо! возникает проблема с отображением результатов после запроса AJAX'a.
то есть браузер отображает значение ~3-4 раза нормально, 1-2 раза значение не обновляется, хотя запрос проходит..
проверял, браузер в данном случае не кэширует..

как такое может быть?

отлаживайте
фаербаг вам в руки
http://javascript.ru/tutorial/foundation/errors

Цитата:

Сообщение от Gvozd (Сообщение 66075)

отлаживайте
фаербаг вам в руки
http://javascript.ru/tutorial/foundation/errors

я им пользуюсь, без него никак! но он ошибок не выдает :-?

Saymor,
на странице куда запрос идёт установите заголовки запрещающие кешировать, если нету таких.

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

Цитата:

Сообщение от Gvozd (Сообщение 66117)

я бы рад, но в моей версии нет ничего подобного или я "инвалид"
у меня версия 1.5.4 скрин:
http://imglink.ru/show-image.php?id=...704e97c10cb23f

и еще поэксперементировав получил следующее:
если после AJAX запроса я выдачу результатов отдаю в какой нибудь <div> на странице. То есть не в тот где отображается инфа и где она должна обновиться после запроса, а в "левый", то FF из 10 запросов 10 обновляет как надо! а вот например опера показывает из 2-4 запросов 1 не обновленный!

загадка прям какая-то..

Цитата:

Сообщение от sysya (Сообщение 66116)

Saymor,
на странице куда запрос идёт установите заголовки запрещающие кешировать, если нету таких.

у меня все данные отправляются челез jQuery.AJAX методом POST, вычитал, что таким образом страница не кэшируется..

отменял кэш с помощью PHP результат не меняется

Господа! ну помогите добрым советом, измучался. все перепробовал!!
для меня не совсем понятно как может рабочий скрипт через раз не срабатывать?! или как вообще может получиться не совсем рабочий скрипт! он либо работает либо нет! :help: