Несколько jquery ajax на странице не работают

У меня есть 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>

person fakegeek    schedule 30.11.2010    source источник


Ответы (3)


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

Второй запрос 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>");
person rawpower    schedule 30.11.2010
comment
Ах, это работает мечта! Спасибо за вашу помощь, теперь это имеет смысл. Я проверял повторяющиеся имена в каждом сценарии, но не понимал, что он будет обрабатывать их таким образом. - person fakegeek; 30.11.2010

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

async: false

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

person sje397    schedule 30.11.2010
comment
Если я удалю его на обоих, Colorbox перестанет работать. Если я просто удалю его на другом звонке, это не имеет значения - person fakegeek; 30.11.2010
comment
Любой одиночный «асинхронный» вызов заблокирует браузер. Асинхронность, как правило, не очень хорошая идея. Можете ли вы найти альтернативу Colorbox? - person sje397; 30.11.2010

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

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

person rawpower    schedule 30.11.2010
comment
Извините, это было не очень полезно! Да, это паркрайд, с которым у меня проблемы. Интересно, у меня в фаерфоксе не работает - person fakegeek; 30.11.2010
comment
@ sje397: он сказал, что они работают на отдельных страницах, на странице примера, которую он предоставил, есть обе. По-видимому, проблема более тонкая, поскольку она работает в моей версии Chrome для разработчиков. - person rawpower; 30.11.2010
comment
Я только что проверил его в Opera и Safari и у меня такая же проблема. - person fakegeek; 30.11.2010
comment
странный. Я только что попробовал его в бета-версии IE9 и... он работает. Он также работает в Firefox 4.0 b7. - person rawpower; 30.11.2010
comment
Все мои тесты на ПК (я ПК! LOL) - person rawpower; 30.11.2010
comment
хм, возможно ли, что это проблема, связанная с Mac? Мой код выглядит нормально? Мне было интересно, была ли проблема с наличием более одного события ajax на странице? - person fakegeek; 30.11.2010
comment
На мой (неопытный) взгляд ваш jQuery выглядит нормально. Я не знаю о каких-либо проблемах с многократным использованием ajax jQuery на одной странице. Вы даже не ориентируетесь на одну и ту же серверную страницу, поэтому ошибка на сервере маловероятна. В любом случае, почему бы вам не запустить (каламбур) Firebug и не посмотреть, что здесь происходит на самом деле? Я не говорю об отладке JavaScript, просто о простой сетевой трассировке. - person rawpower; 30.11.2010
comment
Простите мое невежество, но я не совсем уверен, что я ищу? - person fakegeek; 30.11.2010
comment
Что ж, в конечном итоге ajax — это не что иное, как HTTP-запрос, выполняемый асинхронно. Итак, есть этот сетевой элемент, о котором идет речь - вы не просто вызываете функцию JavaScript, которая выполняет некоторую работу (потенциально вызывая другие функции), если бы это было так, вы могли бы просто отладить вещь и сделать. Вы должны убедиться, что HTTP POST действительно выполнен, и если да, то каков результат этого запроса. Панель сети Firebug точно покажет вам, что происходит. - person rawpower; 30.11.2010
comment
Спасибо, это действительно полезно. Что ж, это интересно. Вывод отличный, но, похоже, он не выводится в браузер? - person fakegeek; 30.11.2010
comment
Хорошо, тогда по крайней мере вы устранили одну часть проблемы — HTTP POST работает нормально, и результат возвращается нормально. У нас остается два варианта: либо jQuery не может найти ваш целевой элемент (в принципе невозможно), либо, возможно, возвращаемый текст не является допустимым HTML (не уверен, что он вообще должен быть). У вас есть контроль над кодом на стороне сервера (хм, классический ASP?) - может быть, вы могли бы попытаться вернуть текст, заключенный в ‹span›? Посмотрите на консоль JavaScript на наличие ошибок, должно быть где-то что-то не работает. - person rawpower; 30.11.2010
comment
Это действительно странно. Пробовал обернуть его в пролет и ничего не изменилось. Я не понимаю, почему он работает нормально, пока не запустится другой запрос ajax. - person fakegeek; 30.11.2010
comment
Ах, я неправильно понял исходный вопрос! Как только вы запустите второй запрос ajax, первый действительно больше не работает. - person rawpower; 30.11.2010