Ajax Request Failing

Question

I've got a perplexing issue which has left me quite confused. I've got a form which has a link on it and when the user clicks the link it is supposed to open up an AJAX popup form and display some data in the form.

It is working just perfectly about 90% of the time. But of late, a few users are complaining that when they click the link, the popup appears but the data is not being displayed. Instead, they just get the loading sign and it just goes on forever.

I decided to test this myself and after a few tries I was able to replicate this myself. In my JS Console, I've got no response back and just have the request headers. As for my code, what happens is, when the popup is displayed initially, I just have the loading throbber going and I send a .get request to my Drupal function to retrieve the data. Once the data is retrieved, we replace the throbber with the data display. You can see this being done in the code below:

$('a.myModule_test_request', context).live("click", function(event) {
        //Store the matched div jquery object in a variable
        var $this = $(this);

        event.preventDefault();

        //Get the complete url for the Test Request drupal function
        var testurl = Drupal.settings.basePath + 'myModule/TestRequest/';
        //Get the nodeid from the link
        var linkurl = $this.attr("href");
        //We use a regex to extract the nid, which is at the end of the url
        var match = /\d+$/.exec(linkurl);
        var nid = match[0];
        //The complete url for the Test Request drupal function
        testurl = testurl + nid;

        //Create a temporary div and turn it into a modal dialog
        var $myModule_Item_TestRequest_modal_dialog = $('<div id ="myModule_Item_TestRequest_' + nid + '"></div>');

        //Make the height and width of the dialog 95% of the screen size
        var dialogWidth = ($(window).width() * 0.95);
        var dialogHeight = ($(window).height() * 0.95);

        $myModule_Item_TestRequest_modal_dialog
          .addClass("myModule_test_request_dialog")
          .addClass("myModule_dialog")
          .dialog({
            modal: true,
            title: $this.text(),
            resizable: true,
            draggable: true,
            height:dialogHeight,
            width:dialogWidth,
            bgiframe: true,
            open: function () {
              //Add an id attribute to the close button, when the dialog opens, which will be used later to close the dialog and detach behaviors
              $(this).parent().children().children('.ui-dialog-titlebar-close').attr( 'id', 'myModule_Item_TestRequest_Dialog_Close');
              //Add an id to main div of dialog box.

              $(this).parent('.ui-dialog').attr( 'id', 'myModule_Item_TestRequest_Dialog');
              //Add the myModule_test_request_dialog and myModule_dialog classes to main div of dialog box as well
              $(this).parent('.ui-dialog').addClass("myModule_test_request_dialog_wrap myModule_dialog");

            }
          });

          //Add positioning for the div
          $myModule_Item_TestRequest_modal_dialog.position({
            my: "center",
            at: "center",
            of: window
          });

          //Display the throbber in the dialog while the form loads
          $myModule_Item_TestRequest_modal_dialog.html('<div class="myModule_throbber"><img src="' + throbberImage.src + '" width="48" height="48" alt="Loading.."><p>Loading..</p></div>');

          //Load the html returned from the testurl function and attach behaviors to the new content.
          $.get(testurl, function(data) {
            $myModule_Item_TestRequest_modal_dialog.html(data);
            Drupal.attachBehaviors($myModule_Item_TestRequest_modal_dialog);
          });

          //When the dialog close button is clicked, detach behaviors and remove the dialog
          $('#myModule_Item_TestRequest_Dialog_Close').click(function() {
            Drupal.detachBehaviors($myModule_Item_TestRequest_modal_dialog);
            $myModule_Item_TestRequest_modal_dialog.dialog('destroy').remove();
          });
      });

After troubleshooting this, I figured out that when the popup hangs, there is absolutely no request being logged for that particular click in the Apache request log. How could this happen? I know the function is working all the way until that .get request because I've got the popup loaded and the throbber displayed, but what happens after that? It's appears as though it is failing to even send the request to Apache. Do requests go ignored in jQuery?

Hope you guys can give me some pointers on why this could happen. Any help would be highly appreciated.

Answer 1

It appears to me that you have not yet enclosed your script as described in this post. That might be it?

(function($) {
Drupal.behaviors.myBehavior = {
  // your function goes here, I think.
};
})(jQuery);