CODEWITHSUNDEEP
javascriptc#jqueryasp.net
King_Fisher
King_Fisher

Reputation: 1213

Jquery Click event not working after postback

Script :

 $(document).ready(function() {
        $('#<%=txtfranchisecode.ClientID %>').change(function() {

            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "CreditLimit.aspx/databind",
                data: '{Code: ' + $('#<%=txtfranchisecode.ClientID%>').val() + '}',
                dataType: "json",
                success: function(data) {

                    for (var i = 0; i < data.d.length; i++) {

                        $('#<%=tbDetails.ClientID %>').append("<tr><td><b>Name:</b></td><td>" + data.d[i].Name + "</td></tr><tr><td><b>Address:</b></td><td>" + data.d[i].Address + "</td></tr><tr><td><b>phone:</b></td><td>" + data.d[i].Phone + "</td></tr><tr><td><b>Email:</b></td><td>" + data.d[i].Email + "</td></tr><tr><td><b>Branch:</b></td><td>" + data.d[i].branch + "</td></tr>");


                    }
                    $('#<%=panel.ClientID %>').dialog("open");
                },
                error: function(result) {
                    alert("Error");
                }
            });

        });

    });

I have used Update panel on my page.Its working when i use First time but not working after postback (behind the Textbox change event I have some Serverside Calculation)

Through Google i got this link Click me and i tried this but no use What should i do?

Edited: tried with "Amresh Kumar Singh " Solutions 

<script>
    $(function() {
        $('#<%=panel.ClientID %>').dialog({
            autoOpen: false,
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "explode",
                duration: 1000
            },
            buttons: [{
                text: "Ok",
                click: function() {
                    $(this).dialog("close");
                }
}]
        });



    });
</script>
<script>
  function BindData() {

        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "CreditLimit.aspx/databindbyId",
            data: '{Code: ' + $('#<%=ddlname.ClientID%>').val() + '}',
            dataType: "json",
            success: function(data) {

                for (var i = 0; i < data.d.length; i++) {

                    $('#<%=tbDetails.ClientID %>').append("<tr><td><b>Name:</b></td><td>" + data.d[i].Name + "</td></tr><tr><td><b>Address:</b></td><td>" + data.d[i].Address + "</td></tr><tr><td><b>phone:</b></td><td>" + data.d[i].Phone + "</td></tr><tr><td><b>Email:</b></td><td>" + data.d[i].Email + "</td></tr><tr><td><b>Branch:</b></td><td>" + data.d[i].branch + "</td></tr>");


                }
                $('#<%=panel.ClientID %>').dialog("open");
            },
            error: function(result) {
                alert("Error");
            }
        });
    }

C#:

 protected void Page_Load(object sender, EventArgs e)
    {
        ddlname.Attributes.Add("OnChange", "BindData();");
    }

first time its working well but next time its throw and exception :

Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'

Upvotes: 2

Views: 7518

Answers (4)

Amresh Kumar Singh
Amresh Kumar Singh

Reputation: 133

You should create a Javascript function and bind on textbox change.

<script>
function BindData(){
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "CreditLimit.aspx/databind",
            data: '{Code: ' + $('#<%=txtfranchisecode.ClientID%>').val() + '}',
            dataType: "json",
            success: function(data) {

                for (var i = 0; i < data.d.length; i++) {

                    $('#<%=tbDetails.ClientID %>').append("<tr><td><b>Name:</b></td><td>" + data.d[i].Name + "</td></tr><tr><td><b>Address:</b></td><td>" + data.d[i].Address + "</td></tr><tr><td><b>phone:</b></td><td>" + data.d[i].Phone + "</td></tr><tr><td><b>Email:</b></td><td>" + data.d[i].Email + "</td></tr><tr><td><b>Branch:</b></td><td>" + data.d[i].branch + "</td></tr>");
              }
                $('#<%=panel.ClientID %>').dialog("open");
            },
            error: function(result) {
                alert("Error");
            }
        });
    }

</script>

Now bind BindData() function on page load event As below:

txtfranchisecode.Attributes.Add("OnChange", "BindData();");

Upvotes: 1

musthafa
musthafa

Reputation: 433

King Fisher you cant make it work, as because the document ready is called only one time during load, so we can load the jquery function on each page load

put your jquery function inside a function

<script>
function MainFunction(){
 $('#<%=txtfranchisecode.ClientID %>').change(function() {

            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "CreditLimit.aspx/databind",
                data: '{Code: ' + $('#<%=txtfranchisecode.ClientID%>').val() + '}',
                dataType: "json",
                success: function(data) {

                    for (var i = 0; i < data.d.length; i++) {

                        $('#<%=tbDetails.ClientID %>').append("<tr><td><b>Name:</b></td><td>" + data.d[i].Name + "</td></tr><tr><td><b>Address:</b></td><td>" + data.d[i].Address + "</td></tr><tr><td><b>phone:</b></td><td>" + data.d[i].Phone + "</td></tr><tr><td><b>Email:</b></td><td>" + data.d[i].Email + "</td></tr><tr><td><b>Branch:</b></td><td>" + data.d[i].branch + "</td></tr>");


                    }
                    $('#<%=panel.ClientID %>').dialog("open");
                },
                error: function(result) {
                    alert("Error");
                }
            });

        });
}

</script>

and add this code in your Backend Page Load

ScriptManager.RegisterStartupScript(this, this.GetType(), GetUID(), "MainFunction();", true);

and this function also in Backend aspx page for generating new key each time

  public string GetUID()
    {
        return Guid.NewGuid().ToString("N");
    }

Upvotes: 3

Hugo Yates
Hugo Yates

Reputation: 2111

Not too clear on the structure of your code but you may need to invoke the javascript again. Place your above JavaScript in a function and then in your C# after postback call it.

ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "Init", " MyFunction();", true);'

Upvotes: 1

Michal Paszkiewicz
Michal Paszkiewicz

Reputation: 681

The DOM isn't reloaded after a partial postback, so the document ready function won't be hit again. You need to assign a partial postback handler.

Something like this:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" OnLoad="UpdatePanel1_Load">
    <ContentTemplate>
        <!-- Contents... -->
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="ReloadThePanel" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>

Upvotes: 0

Related Questions