Search code examples
jqueryasp.netjquery-uijquery-dialog

ASP .Net TextChanged to show Jquery dialog

I want to display a jquery dialog under certain conditions when the text changes on a textbox which has a datepicker attached to it.

In my TextChanged event I call to a javascript function which should display the dialog

protected void txtPickupDate_TextChanged(object sender, EventArgs e)
{ 
ScriptManager.RegisterClientScriptBlock(this, typeof(Page), "showInfo", "showDialog();", true);
}

Javascript on my aspx page is:

function showDialog() {
    $("#popInfo").dialog("open");
}

Using firebug I see that the javascript function is fired but the dialog is never displayed. I put an asp button on the page calling the function onClientClick to test the function and it works perfectly.

I also tried a solution mentioned else where but still no luck:

$('#popInfo').parent().appendTo(jQuery("form:first"));

I'm pretty sure that is has something to do with updatepanels or postbacks but it has me stumped. Greatly appreciate any help!

Solution

  • If you have configured your TextChanged event and when you debug it you can see it going in there, try thisTextChanged event instead:

    protected void txtPickupDate_TextChanged(object sender, EventArgs e)
{ 
ScriptManager.RegisterStartupScript(this.Page, typeof(UpdatePanel), Guid.NewGuid().ToString(), "$(function(){$('#popInfo').dialog('open');});", true);
}

    I am assuming you are using UpdatePanel with a ScriptManager.

    Also look at AJAX Control Tool Kit and JQuery Autocomplete Plugin for other ways to call server side code.