Question

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.

Answer 1

“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
        });
    }