页面上的多个jquery ajax无法正常工作

时间:2010-11-30 11:42:13

标签: jquery ajax colorbox

我在一个页面上有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 个答案:

答案 0 :(得分:2)

尝试删除

async: false

线。这告诉jQuery同步运行请求,这将阻止浏览器直到请求发生。

答案 1 :(得分:0)

您没有说哪个脚本无效。

我会假设它是附加到#parkride的那个。如果是这样,那个适合我的Chrome 9(开发)就可以了。

答案 2 :(得分:0)

我已经调试过了,问题很明显。

第二个ajax请求将注入另一个HTML元素(在本例中为DIV),具有相同的id =“output”,这将导致后续调用的第一个ajax查询将结果放入该DIV而不是UL中你想要的。

我怎么知道?我使用了谷歌浏览器提供的调试工具。我注意到$(“#output”)(我为此制作了一个表达式)首先“指向”UL,但是一旦第二个ajax请求完成,突然这个相同的表达式指向DIV元素。然后我检查了第二个ajax请求的返回值,实际上它是一个id =“output”的DIV元素。

不要忘记 - 当你说$(“#output”)时,你可能会得到带有id =“output”的多个元素。如果您只想要具有该id的UL元素,那么您应该指定它,否则您将获得具有该特定ID的所有元素。

简而言之,在第一个ajax查询结束时你想要的是:

$('ul#output').html("<li>" + msg + "</li>");