How to get the event of the partialview button in a jQuery modal dialog

I have a partial view named xyz and I have a lot of buttons on it which implements different functionality.

 $('#dialog').dialog({
        autoOpen: false,
        width: 700,
        resizable: false,
        modal: true,
        open: function (event, ui) { $(this).load('<%=Url.Action("PushButton","Body",new {Parm="text",Parm1="Value"开发者_如何学Go}) %>'); },
        position: 'top' 
    });

I'm opening this partial view XYZ in a jQuery modal dialog box. I have some buttons in the partialview XYZ. I'm not getting how to fire the event explicitly. Like if I want to close the dialog box by click of the button created in Partialview.

You will need to wire the button events once the load is complete. You can add a callback to the load to notify you: http://api.jquery.com/load/

I had the same problem. I want my partial view to be independent and submit using Ajax. It's similar to creating a user control.

I am now planning to use a publisher/subscriber mechanism to listen to an event from my partial view. The parent can listen to this event and close the dialog box.

I came across Ben Alman's Pub/Sub gist.

Another good article for the observer pattern in JavaScript is Learning JavaScript Design Patterns, The Observer Pattern.

Here is the code for the callback on the load event:

 $('#dialog').dialog({
        autoOpen: false,
        width: 700,
        resizable: false,
        modal: true,
     open: function (event, ui) { $(this).load('<%=Url.Action("PushButton","Body",new {Parm="text",Parm1="Value"}) %>', function(){
         $("#buttonId").click(function(){
             //Stuff you want to do with the button here
         });
     }); },
        position: 'top' 
    });

You can do this inside document.ready as well:

$(document).on('click', '#idOfControlInsideDialog', function() {
      //Stuff you want to do here
});