Multiple jquery ajax on page not working

I've got 2 ajax requests on one page. Both work fine on separate pages, but when they're both on the same page, one stops working after the first has been run.

I'm using the Colorbox plugin for one request and this works fine. The other I've put together myself (I'm new to jquery, so may well have errors) and works if I run it first. But once开发者_运维百科 Colorbox has been activated it stops working.

The page is here: http://dev.thetram.net/times/test2.php and the code below.

Would really appreciate some pointers to where I'm going wrong, thanks!

<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>

Try removing the

async: false

line. This tells jQuery to run the request synchronously, which blocks the browser until the request comlpetes.

I've debugged it and it's clear what the problem is.

The second ajax request will inject another HTML element (DIV in this case) with the same id="output" which will then cause the first ajax query on subsequent calls to put the result in that DIV instead of in the UL that you want.

How did I know? I used debugging tools provided with Google Chrome. I noticed that $("#output") (I made a watch expression for this) 'points' to the UL at first, but then as soon as second ajax request if finished, all of the sudden this same expression points to DIV element. Then I examined the return value of the second ajax request and indeed it's one DIV element with the id="output".

Don't forget - when you say $("#output") you might get multiple elements with the id="output". If you only want UL elements with that id, then you should specify that, otherwise you'll get back all elements with that particular id.

In short, what you want at the end of the first ajax query is:

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

You did not say which script isn't working.

I'll assume it's the one attached to the #parkride. If so, that one works just fine for me in Chrome 9 (dev).