loading external pages not working properly with multiple links
I thought I was done with the loading external pages problem but I guess not yet.
When there are multiple links, modal dialog is loaded just as many times as the number of the links.
When there are multiple links, modal dialog is loaded just as many times as the number of the links.
For example, if there are 3 links with class="test", when first link is clicked, it will load 3 times on top of each.
Anyway to fix it?
<a href="/user/login/" class="test">comment #1</a><br> <a href="/user/signup/" class="test">comment #2</a><br> <a href="/user/reset_password/" class="test">comment #3</a><br> $('a.test').click(function() { var url = this.href; // show a spinner or something via css var dialog = $('<div style="display:none" class="loading"></div>').appendTo('body'); // open the dialog dialog.dialog({ // add a close listener to prevent adding multiple divs to the document close: function(event, ui) { // remove div with all data and events dialog.remove(); }, width: 400, modal: true }); // load remote content dialog.load( url, {}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object function (responseText, textStatus, XMLHttpRequest) { // remove the loading class dialog.removeClass('loading'); } ); //prevent the browser to follow the link return false; });