CODEWITHSUNDEEP
ajaxjquery-uijqueryload
Maddis
Maddis

Reputation: 645

Jquery load in Dialog is repeated exponentially

I have a really annoying issue with jQuery and/or the jQuery UI Dialog Box.

After clicking on a special link a modal dialog will pop up with some loaded content (ajax) and inside this loaded content are new links/buttons that load their url inside the same div Box, so the dialog still is loaded, but with new content then. The Problem is, that if you link on that link (inside a fresh loaded dialog box and on a recently reloaded website) it works as it should, but with the second click it loads the url twice, with the third it loads 4 times ... It growing exponentially with every new link loaded inside the dialog. I testet this with a counter stored inside $_SESSION.

This is the Javascript Code:

var somedialog = $('<div></div>').dialog({
  autoOpen: false,
  resizable: false,
  modal: true,
  /*show: 'fade',
  hide: 'puff',*/
  closeOnEscape: true,
  close: function(){
  }
 });
 function openInDialog(url, title, width, height)
 {
  somedialog.empty();
  somedialog.dialog("option", "width", width);
  somedialog.dialog("option", "height", height);
  somedialog.dialog("option", "title", title);
  somedialog.load(url,{},function (responseText, textStatus, XMLHttpRequest)
   {
    somedialog.dialog('open');
   }
  );

  //somedialog.load(url,{},function (responseText, textStatus, XMLHttpRequest){
  // dialogdiv.somedialog('open');
  //});
 }

 $('a.ajaxBuyItemDialog').on('click',function(){
  openInDialog(this.href, this.title, 400, 300);
  //prevent the browser to follow the link
  return false;
 });

There seemed to bee other people with this issue, but that was not a very effective discussion: https://stackoverflow.com/questions/6471360/jquery-load-after-load-repeated-results-problem

Thanks for your help!

EDIT: This is part of the code which is located in the loaded script:

$("#_BUYITEM_FORM").live('submit', function(){
    $.ajax({ // create an AJAX call...
        data: $(this).serialize(), // get the form data
        type: $(this).attr('method'), // GET or POST
        url: $(this).attr('action'), // the file to call
        success: function(response){ // on success..
            $("#_BUYITEM_CONTENT").html('<p class="AjaxLoaderImg"><span>Einen Moment bitte...</span></p>');
            $("#_BUYITEM_CONTENT").html(response); // update the DIV
        }
    });
    return false; // cancel original event to prevent form submitting
});

Without it I can't get it to refresh the dialog box with new content.

Upvotes: 1

Views: 1535

Answers (3)

Maddis
Maddis

Reputation: 645

"Dirty" solution

function watchBuyItemForm(){
        $("#_BUYITEM_FORM").submit(function(){
            $.ajax({ // create an AJAX call...
                data: $(this).serialize(), // get the form data
                type: $(this).attr('method'), // GET or POST
                url: $(this).attr('action'), // the file to call
                success: function(response){ // on success..
                    somedialog.html(ajaxLoader);
                    somedialog.html(response); // update the DIV
                    watchBuyItemForm();
                }
            });
            return false; // cancel original event to prevent form submitting
        });
    }

Upvotes: 0

charlietfl
charlietfl

Reputation: 171690

If you reload the script numerous times it will add a new submit handler to form each time since you are using live().

live() will delegate the handler to the document and thus should either only be called once or you need to call die() before script loads each time.

if you were to get rid of using live() you could move the submit handler to the success callback of load() and use submit() rather than live(). If the original form is replaced...the original submit() event handler will also be gone

Upvotes: 0

Matteo-SoftNet
Matteo-SoftNet

Reputation: 531

It seems that your javascript code is replicated in every $('a.ajaxBuyItemDialog') destination page clicked. Adding that script to the dialog again at every click causes event to be triggered more than once.

Upvotes: 1

Related Questions