jQuery dialog + ASP.NET buttons - strange behaviour

Question

Hi

Having this div:

<div id="advSearchDialog" style="visibility:hidden;">
    <xx:search ID="searchUC" runat="server" />
</div>

And a button:

<input type="button" id="btnAdvSearch" value="Search" />

I turn it into a jQuery dialog, where the button opens the dialog:

$(document).ready(function() {
    $('#advSearchDialog').dialog({
        autoOpen: false,
        height: 500,
        width: 600,
        modal: true,
        bgiframe: true,
        title: 'Avanceret søgning',
        open: function(type, data) {
            $(this).parent().appendTo("form");
        }
    });

    $('#btnAdvSearch').click(function() {
        $('#advSearchDialog').css('visibility', 'visible');
        $('#advSearchDialog').dialog('open');
    });
});

Using ASP.NET, I get a problem.

If I push some other button on the ASP.NET page (inside an update panel), and after that clicks the btnAdvSearch button, nothing happens. Why is that?

Thanks in advance

Answer 1

maybe the partial page refresh removes your click event, hard to say without seeing the whole page.

the solutions to that problem would be using jquery live events http://docs.jquery.com/Events/live

hth

Answer 2

Check the emitted HTML using firebug or somthing similar and you will probably notice that your button is no longer inside the form tags and is at the end of the body tag.

In you're OK button callback you can use something like

dialogBox.appendTo($('#FormIdHere'));

dialogBox is a variable set as so

var dialogBox = $('#DialogDiv').dialog({ autoOpen: false });

This should add your button back into the form.

EDIT:

Here is a code snippet I've recently used (all the code below is fired within an onload function but reasonPostBack must be declared outside the onload function)

var button = $('input.rejectButton');
reasonPostBack = button.attr('onclick');
button.removeAttr('onclick');

var dialogBox = $('#ReasonDiv').dialog({ autoOpen: false, title: 'Please enter a reason', modal: true, bgiframe: true, buttons: { "Ok": function() {

            if ($('input.reasonTextBox').val().length > 0) {
                $(this).dialog('close');
                dialogBox.appendTo($('#theform'));
                reasonPostBack();
            }
            else 
            {
                  alert('You must enter a reason for rejection');
            }
        }
    }
});


button.click(function() {
    dialogBox.dialog('open');
    return false;
});

First i take a reference to the .Net postback with

var reasonPostBack = button.attr('onclick');

and hold it for later then strip the click event from the button to stop the post back ocurring "automatically". I then build the dialog box and add an anonymous function for the OK button, this runs my code to test if there is anything in a text box, if there isn't it simply alerts the user otherwise it;

Closes the div

$(this).dialog('close');

Adds the div back inside the form tags ready for the post back

dialogBox.appendTo($('#theform'));

and then calls the original postback

reasonPostBack();

Finally the last bit of code

button.click(function() {
    dialogBox.dialog('open');
    return false;
});

adds our own event handler to the .Net button to open the dialog that was instantiated earlier.

HTH

OneSHOT

Answer 3

I have similar problem. Jquery dialog widget is also used in my project, also we use telerik radajaxpanel for partial postbacks. So, when partial postback occures my dialog loses all its events. How can I prevent this behavior?