php script gets two ajax requests, only returns one?

Question

I'll start from the beginning. I'm building a wordpress plugin that does double duty, in that it can be inserted in to a post via a shortcode, or added as a sidebar widget. All it does is output some js to make jquery.post requests to a local php file. The local php file makes a request to a webservice for some data. (I had to do it this way instead of directly querying the web service with jquery.ajax because the url contains a license key that would be public if put in the js).

Anyway, When I am viewing a page in the wordpress blog that has both the sidebar widget and the plugin output via shortcode only one of the requests work. I mean it works in that it gets a response back from the php script. Once the page is loaded they both work normally when manually told to.

Webpage view -> send 2 post requests to my php script -> both elements should be filed in, but only one is.

My php script is just:

<?php
    if(isset($_POST["zip"])) {
         // build a curl object, execute the request, 
         // and basically just echo what the curl request returns.
    }
?>

Pretty basic.

here is some js some people wanted to see:

function widget_getActivities( zip ){
    jQuery("#widget_active_list").text("");
    jQuery.post("http://localhost/wordpress/wp-content/ActiveAjax.php", { zip: zip}, 
  function(text) {
   jQuery(text).find("asset").each(function(j, aval){
    var html = "";
    html += "<a href='" + jQuery(aval).find("trackback").text() + "' target='new'> " +  jQuery(aval).find("assetName").text() + "</a><b> at </b>";

    jQuery("location", aval).each(function(i, val){
     html += jQuery("locationName", val).text() + " <b> on </b>";
    });

    jQuery("date", aval).each(function(){
     html += jQuery("startDate", aval).text();
    <!--jQuery("#widget_active_list").append("<div id='ActivityEntry'>" + html + " </div>");-->
    jQuery("#widget_active_list")
     .append(jQuery("<div>")
      .addClass("widget_ActivityEntry")
      .html(html)
      .bind("mouseenter", function(){
       jQuery(this).animate({ fontSize: "20px", lineHeight: "1.2em" }, 50);  
      })
      .bind("mouseleave", function(){
       jQuery(this).animate({ fontSize: "10px", lineHeight: "1.2em" }, 50);  
     })
     );

    });
   });
  });
}

Now imagine there is another function identical to this one except everything that is prepended with 'widget_' isn't prepended. These two functions get called separately via:

jQuery(document).ready(function(){
    w_zip = jQuery("#widget_zip").val();
 widget_getActivities( w_zip );
 jQuery("#widget_updateZipLink").click(function() { //start function when any update link is clicked
  widget_c_zip = jQuery("#widget_zip").val();
  if (undefined == widget_c_zip || widget_c_zip == "" || widget_c_zip.length != 5)
   jQuery("#widget_zipError").text("Bad zip code");
  else
   widget_getActivities( widget_c_zip );

 });
})

I can see in my apache logs that both requests are being made. I'm guessing it is some sort of race condition but that doesn't make ANY sense. I'm new to all this, any ideas?

EDIT: I've come up with a sub-optimal solution. I have my widget detect if the plugin is also being used on the page, and if so it waits for 3 seconds before performing the request. But I have a feeling this same thing is going to happen if multiple clients perform a page request at the same time that triggers one of the requests to my php script, because I believe the problem is in the php script, which is scary.

Answer 1

Not really enough information for me to really figure anything out...

However one thing to try is to get firebug and see what the response is for each of the requests.

Another question might be...are you filling in by id? If so, then it may be due to the fact that you have the same id twice in one page, and that is messing things up. If you have it online it would be much easier to help you out.

---

Edit:

A few comments...I'm not sure if anything will be solved by this...however...

 <!--jQuery("#widget_active_list").append("<div id='ActivityEntry'>" + html + " </div>");-->

As far as I know the type of comment you use there is only effective when used in html and might be screwing up your Javascript. Replace it with //

jQuery("#widget_active_list").append(jQuery("<div>")
                                     .addClass("widget_ActivityEntry")
                                     .html(html)
                                     .bind("mouseenter", function(){
                                          jQuery(this).animate({ fontSize: "20px", lineHeight: "1.2em" }, 50);  
                                     })
                                     .bind("mouseleave", function(){
                                          jQuery(this).animate({ fontSize: "10px", lineHeight: "1.2em" }, 50);  
                                     })
                             );

Second of all...that whole block is nested in the last .each which doesn't seem to be having an effect however, it is not impossible that it messing with it.

Last of all, while it might not actually be making a difference, you should probably be setting the type of the response to xml. Using both the http headers in php and using the last argument of the function. i.e.

header("Content-Type: application/xml");

and

jQuery.post("http://localhost/wordpress/wp-content/ActiveAjax.php", { zip: zip}, thefunctionhere, xml);

If this doesn't help, my suggestion for a sub-optimal solution, is to use a get request instead, and add a random parameter that isn't taken into account to both requests, however make it the same for each request, but different every time you go to the page. That way the browser will cache the request for the first one, and not query the server a second time, but it won't cache it for when the person comes to the page again.