Несколько JQuery AJAX на странице не работает - PullRequest
Новая
       1

Несколько JQuery AJAX на странице не работает

3 голосов
/ 30 ноября 2010

У меня 2 ajax-запроса на одной странице. Оба прекрасно работают на отдельных страницах, но когда они оба на одной странице, один перестает работать после запуска первого.

Я использую плагин Colorbox для одного запроса, и это прекрасно работает. Другой, который я собрал сам (я новичок в jquery, поэтому вполне может иметь ошибки) и работает, если я его сначала запустил. Но как только Colorbox активирован, он перестает работать.

Страница находится здесь: http://dev.thetram.net/times/test2.php и код ниже.

Буду очень признателен, если я укажу, где я иду не так, спасибо! 

<script type="text/javascript">
<!--
$(document).ready(function(){

$(function() {
$('#parkride').change(function () {

$.ajax({
    type: "POST",
 url: "http://dev.thetram.net/inc/parkingfinder_script.asp",
 dataType: "application/x-www-form-urlencoded",
 data: "Action=GetPR&Val=" + $("#parkride").val(),
 async: false,
 success: function(msg) {
     $('#output').html("<li>" + msg + "</li>");
 }
 });
return false;
    });
  });


$(function() {
//if submit button is clicked
$('form#frm_journeyplanner #submit').click(function () {

//get form values
var str = $("form#frm_journeyplanner").serialize();

$.ajax({
    type: "POST",
    url: "http://dev.thetram.net/inc/journeyplanner/jp_testscript.asp",
 dataType: "application/x-www-form-urlencoded",
    data: str,
 async: false,
 success: function(msg) {
  $('#results').html(msg);
  $.colorbox({inline:true, href:"#results", opacity:0.6, innerWidth:620, innerHeight:580, title:"Find tram times",
  onOpen:function(){  $("#results").show(); }, //make sure results show in the modal window
  onClosed:function(){ $("#results").hide(); } //stop results from displaying on the main page
   });
 }
 });
return false;
    });
  });

}); // end of doc ready
-->
</script>

Ответы [ 3 ]

2 голосов
/ 30 ноября 2010

Попробуйте удалить строку 

async: false

.Это заставляет jQuery синхронно выполнять запрос , который блокирует браузер до тех пор, пока запрос не будет завершен.

0 голосов
/ 30 ноября 2010

Я его отладил, и понятно, в чем проблема.

Во втором запросе ajax будет вставлен другой элемент HTML (в данном случае DIV) с тем же id = "output", который затем заставит первый запрос ajax при последующих вызовах поместить результат в этот DIV, а не в UL, который ты хочешь.

Как я узнал? Я использовал инструменты отладки, предоставляемые с Google Chrome. Я заметил, что $ ("# output") (я сделал для этого выражение для наблюдения) сначала "указывает" на UL, но затем, как только второй ajax-запрос завершается, внезапно это же выражение указывает на элемент DIV , Затем я проверил возвращаемое значение второго ajax-запроса и действительно это один элемент DIV с id = "output".

Не забывайте - когда вы говорите $ ("# output"), вы можете получить несколько элементов с id = "output". Если вам нужны только элементы UL с этим идентификатором, вы должны указать это, иначе вы получите все элементы с этим конкретным идентификатором.

Короче говоря, в конце первого запроса ajax вы хотите: 

$('ul#output').html("<li>" + msg + "</li>");
0 голосов
/ 30 ноября 2010

Вы не сказали, какой скрипт не работает.

Я предполагаю, что это тот, который прикреплен к #parkride.Если это так, то у меня в Chrome 9 (dev) это отлично работает.

...