0

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.

  • First thing to do is to look at the network tab in the Chrome debugger and see if the request is being sent or not over the internet. That tells you where to look next (client or server) for the next step in the troubleshooting. And, if you see a request being sent examine it to see if it is formed correctly and to the right destination. You may also be on the lookout for any caching issues (IE particularly known for aggressive caching) that might prevent the real request from being sent. – jfriend00 Sep 30 '14 at 5:46
  • In my Firebug debugger, I've only got two things visible for this request, the Request Headers and the Cookies tab. I compared the Request Headers with a request that worked and they look exactly the same. So, I checked my Apache Server Request log, but I couldn't find an entry for this request. So, it's like it never was sent. – SN_26 Sep 30 '14 at 5:56
  • What dies Firebug show for response headers? For response? Are you 100% use the URL for the request is correct? Can you tell if the response is coming from cache? Does Firebug show a response of any kind? Or any kind of response timing? Perhaps post a screenshot of what you see in Firebug for that request. – jfriend00 Sep 30 '14 at 6:06
  • There are no tabs for the response headers and response for the request that hangs. Basically, it just times out after around 35 secs. My url is correct. Please note that this request works 90% of the time, only sometimes does it hang. And when it does hang, it does not register in the Apache Request Log and I get no response tabs in firebug. – SN_26 Sep 30 '14 at 6:55
0

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);
  • I copied and pasted just the function, the script is being properly closed. – SN_26 Sep 30 '14 at 5:54
  • It's not so much about it being properly closed as being enclosed in the Drupal wrapper. – Darvanen Sep 30 '14 at 9:00
  • Everything is enclosed properly. There are no bugs regarding enclosure. – SN_26 Oct 1 '14 at 5:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.