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

Question

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

Answer 1

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

Второй запрос 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>"); 

Answer 2

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

async: false 

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

Answer 3

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

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