CODEWITHSUNDEEP
asp.netjqueryjquery-uidialog
Tommy Jakobsen
Tommy Jakobsen

Reputation: 2361

jQuery dialog + ASP.NET buttons - strange behaviour

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

Upvotes: 0

Views: 1510

Answers (2)

OneSHOT
OneSHOT

Reputation: 6953

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

Upvotes: 0

marc.d
marc.d

Reputation: 3844

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

Upvotes: 3

Related Questions