Question

I have some strange behaviour going on with the jQuery ajax functionality in my asp.net MVC3 application.

I have several boxes of data each containing a link to open a popup and change the data in each box. To do this I’ve added a jquery live() click event to process the data via a jQuery ajax call. In the “success” method of the ajax call, i take the return data and open a UI Dialog popup (a partial view) which contains a list of radio buttons. I select a different radio button and press ‘close’ – the close button fires another live() click event, processes that new data via an ajax call which refreshes the data in the box on the main page.

This works perfectly first time. If you then click to change it again, the popup opens, allows you to select a new value, but this time pressing close on the popup triggers two click events which throws an null error in my MVC controller.

If you repeat this process it triggers 3 click events, so it’s clear that live() is appending these events somewhere.

I’ve tried using on() and click(), but the page itself is made up of panels loaded in via ajax so I used live() to automatically bind the events.

Here is the code I’m using:

HTML

<p><!--Data to update goes here--></p>
<a href="#" class="adjust">Update Data</a>

First Click event calling popup with Partial View

$('a.adjust').live('click', function (e) { 
    var jsonData = getJsonString(n[1]);
    var url = '@Url.Action("ChangeOptions", "Search")';
    var dialog = $('<div id="ModalDialog" style="display:none"></div>').appendTo('body');
    // load the data via ajax
    $.ajax({
        url: url,
        type: 'POST',
        cache: false,
        contentType: "application/json; charset=utf-8",
        data: jsonData,
        success: function (response) {
            dialog.html(response);
            dialog.dialog({
                bgiframe: true,
                modal: true
                }
            });
        }
    });
    e.preventDefault();
});

Second click event the takes the new info to return updated partial view

$('a#close').live('click', function (event) { 
    var jsonData = getJsonString(n[1]);
    var url = '@Url.Action("GetChangeInfo", "Search")';
    $.ajax({
        url: url,
        type: 'POST',
        contentType: "application/json; charset=utf-8",
        data: jsonData,
        success: function (response) {
            $('#box-' + @column).html(response);  //this refreshes the box on the main page
        },
        error: function () {
        }
    });
    $('#ModalDialog').dialog('close');
    event.preventDefault();
});

Anybody know what might be happening here, and how I could resolve it?

Answer 1

Use namespaces to unbind previous click binds like this:

$('a.adjust').unbind('click.adjustclick');

Then bind the click action to a.adjust:

$('a.adjust').bind('click.adjustclick', function(){

  //your code here

  //note the return false, this prevents the browser from visiting the URL in the href attribute
  return false;
});

If i understand you correctly, you try to run the second click action when the dialog is closed. Therefor I would use the build in close function for the dialog like this:

$('a.adjust').bind('click.adjustclick', function(){
    var jsonData = getJsonString(n[1]);
    var url = '@Url.Action("ChangeOptions", "Search")';
    var dialog = $('<div id="ModalDialog" style="display:none"></div>').appendTo('body');
    // load the data via ajax

    $.ajax({
        url: url,
        type: 'POST',
        cache: false,
        contentType: "application/json; charset=utf-8",
        data: jsonData,
        success: function (response) {
            dialog.html(response);
            dialog.dialog({
                bgiframe: true,
                modal: true,
                close: function(){
                    var jsonData2 = getJsonString(n[1]);
                    var url2 = '@Url.Action("GetChangeInfo", "Search")';

                    $.ajax({
                        url: url2,
                        type: 'POST',
                        contentType: "application/json; charset=utf-8",
                        data: jsonData2,
                        success: function (response2) {
                            $('#box-' + @column).html(response2);  //this refreshes the box on the main page
                        },
                        error: function () {
                        }
                    });
                  }
                }
            });
        }
    });
});

If you are using your own button a#close, bind a click event to it to close the dialog, it will automatically fire the close function for the dialog.

$('a#close').unbind('click.closedialog');
$('a#close').bind('click.closedialog', function () {
  $('#ModalDialog').dialog('close');
  return false;
}