locked
Javascript function with UpdatePanel RRS feed

  • Question

  • User1510859543 posted

    Below is relevant code from our aspx pages, including javascript functions, RowDatabound code-behind and page markup.  What is happening is that the first time I call the js function statustest() all works fine and the value of the radiobutton is reset to zero (0) because the user tried to change it's value to 2 but the empty TextBox in the FormView caused it to be set back to zero. If I do nothing to the TextBox and click the radiobutton with value = 2 again it accepts the entry, even though it should fail again.  I included the code where the js function is applied (GridView Databound event) also. Note that the GridView is inside an UpdatePanel and the FormView is not (relevant?).  Any help or better solutions are appreciated.

    Below is how item in radiobutton renders in html

    <input id="gvJobSetupTask_ctl07_rblStatus_2"
    type="radio"
    name="gvJobSetupTask$ctl07$rblStatus"
    value="2"
    onclick="javascript: statustest(this,4);setTimeout('__doPostBack(\'gvJobSetupTask$ctl07$rblStatus$2\',\'\')', 0)">

    However, the statustest() part drops off after change.

        <script type="text/javascript">
            function isEmpty(obj) {
                for (var key in obj) {
                    if (obj.hasOwnProperty(key))
                        return false;
                }
                return true;
            }
            function statustest(obj, isetupid) {
                var vobj = document.getElementById('fvJobSetup_txtInsuranceAdjuster');
                var ckupdate = document.getElementById("ckUpdateRow");
    
                if (parseInt(obj.value) === 2 && isEmpty(vobj) === true) {
                    alert('Insurance Adjuster information is missing. Done is not valid.');
                    ckupdate.checked = false;
                    obj.value = 0;
                } else {
                    ckupdate.checked = true;
                }
            }
        </script>
    
        Protected Sub gvJobSetupTask_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gvJobSetupTask.RowDataBound
            Dim lbl As Label
            If e.Row.RowType = DataControlRowType.DataRow Then
                If e.Row.RowState = DataControlRowState.Normal Or
                    e.Row.RowState = DataControlRowState.Alternate Then
    
                    Dim intStatus As Int16 = Convert.ToInt16(DataBinder.Eval(e.Row.DataItem, "Status"))
                    Dim intJobSetupID As Int32 = Convert.ToInt32(DataBinder.Eval(e.Row.DataItem, "JobSetupID"))
                    If intStatus = 0 And intJobSetupID <> 12 Then
                        intCountOpen += 1
                    End If
    
                    Dim rbl As RadioButtonList = e.Row.FindControl("rblStatus")
                    rbl.SelectedValue = intStatus.ToString
    
                    Dim bolNANotAllowed As Boolean = Convert.ToBoolean(DataBinder.Eval(e.Row.DataItem, "NANotAllowed"))
                    If bolNANotAllowed = True Then
                        rbl.Items(1).Enabled = False
                    End If
    
                    For Each Li As ListItem In rbl.Items
                        Li.Attributes.Add("onclick", "javascript: statustest(this," & intJobSetupID.ToString & ");")
                    Next
               End If
            ElseIf e.Row.RowType = DataControlRowType.Footer Then
                lbl = e.Row.FindControl("LblOpenCount")
                lbl.Text = intCountOpen.ToString
                txtOpenCount.Text = intCountOpen.ToString
                intCountOpen = 0
            End If
    
        End Sub
    
    
    
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <table width="480">
                <tr align="center">
                    <td>
                        <asp:CheckBox ID="ckPrepaint" runat="server" Text="Prepaint" AutoPostBack="True" CssClass="Hide" />
                    </td>
                    <td>
                        <asp:CheckBox ID="ckWaiter" runat="server" Text="Waiter" AutoPostBack="True" CssClass="Hide" />
                    </td>
                </tr>
            </table>
            <asp:GridView ID="gvJobSetupTask" runat="server" DataSourceID="SqlJobSetupTask" 
                AutoGenerateColumns="False" DataKeyNames="RecordID,JobSetupID" 
                BackColor="White" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px" 
                CellPadding="3" ForeColor="Black" GridLines="Vertical" ShowFooter="True">
                <Columns>
                    <asp:TemplateField HeaderText="Open&nbsp;N/A&nbsp;Done" ItemStyle-Height="5" ItemStyle-HorizontalAlign="Center">
                        <ItemTemplate>
                            <asp:RadioButtonList ID="rblStatus" runat="server" RepeatDirection="Horizontal" 
                                    CellPadding="3" CellSpacing="0" AutoPostBack="True"
                                    OnSelectedIndexChanged="rblStatus_SelectedIndexChanged">
                                <asp:ListItem Value="0" Text=""></asp:ListItem>
                                <asp:ListItem Value="1" Text=""></asp:ListItem>
                                <asp:ListItem Value="2" Text=""></asp:ListItem>
                            </asp:RadioButtonList>
                        </ItemTemplate>
                        <ItemStyle Height="5px" HorizontalAlign="Center" />
                        <FooterTemplate>
                            <asp:Label ID="LblOpenCountText" runat="server" Text="Count Open:" Font-Bold="True"></asp:Label>
                        </FooterTemplate>
                        <FooterStyle HorizontalAlign="Right" />
                    </asp:TemplateField>
                </Columns>
                <FooterStyle BackColor="#CCCCCC" />
                <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
                <SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
                <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
                <AlternatingRowStyle BackColor="#CCCCCC" />
            </asp:GridView>        
                    
        </ContentTemplate>
    </asp:UpdatePanel>
    
                    <asp:FormView ID="fvJobSetup" runat="server" DataKeyNames="RecordID" Width="100%" 
                        DataSourceID="SqlJobSetup" DefaultMode="Edit">
                        <EditItemTemplate>
                               <table width="98%">
                                    <tr>
                                        <td colspan="2">&nbsp;</td>
                                        <td style="text-align: center">Phones</td>
                                        <td style="text-align: center">Email</td>
                                    </tr>
                                    <tr>
                                        <td style="font-size: small; text-align: right;">Ins. Adjuster:</td>
                                        <td>
                                            <asp:TextBox ID="txtInsuranceAdjuster" runat="server" 
                                                Text='<%# Bind("InsuranceAdjuster") %>' Width="200px" MaxLength="35" 
                                                onkeydown="setChange();">
                                            </asp:TextBox>
                                        </td>
                                        <td>
                                            <asp:TextBox ID="txtInsuranceAdjusterPhone" runat="server" 
                                                Text='<%# Bind("InsuranceAdjusterPhone") %>' 
                                                Width="120px" MaxLength="35" onkeydown="setChange();">
                                            </asp:TextBox>
                                        </td>
                                        <td>
                                            <asp:TextBox ID="txtInsuranceAdjusterEmail" runat="server" 
                                                Text='<%# Bind("InsuranceAdjusterEmail") %>' 
                                                Width="200px" MaxLength="100" onkeydown="setChange();">
                                            </asp:TextBox>
                                        </td>
                                    </tr>
    			    </table>
                        </EditItemTemplate>
    
                    </asp:FormView>
    
    
    
    
    

    Monday, August 26, 2019 8:59 PM

Answers

  • User288213138 posted

    Hi dlchase,

    If you put the RadioButtonList in the UpdatePanel control, after one postback, the jquery event will not work.

    Because the updatepanel will remove or replace the content after postback. Hence the jquery cannot access the previous contents inside the updatepanel.

    You can try below code:

    var prm = Sys.WebForms.PageRequestManager.getInstance();
    
            prm.add_endRequest(function () {
                // re-bind your jQuery events here
            });
    

    More information about how to solve this problem you can refer to this link: https://stackoverflow.com/a/256253


    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 27, 2019 7:17 AM

All replies

  • User288213138 posted

    Hi dlchase,

    If you put the RadioButtonList in the UpdatePanel control, after one postback, the jquery event will not work.

    Because the updatepanel will remove or replace the content after postback. Hence the jquery cannot access the previous contents inside the updatepanel.

    You can try below code:

    var prm = Sys.WebForms.PageRequestManager.getInstance();
    
            prm.add_endRequest(function () {
                // re-bind your jQuery events here
            });
    

    More information about how to solve this problem you can refer to this link: https://stackoverflow.com/a/256253


    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 27, 2019 7:17 AM
  • User1510859543 posted

    I am not clear on what "events" go inside the prm.add_endRequest function?  Is this where the functions I have listed would go?

    Tuesday, August 27, 2019 2:12 PM
  • User288213138 posted

    Hi dlchase,

    Sys.WebForms.PageRequestManager getInstance Method return the instance of the PageRequestManager class for the page.

    prm.add_endRequest raised after an asynchronous postback is finished and control has been returned to the browser.

    More information about endRequest you can refer to this link:https://docs.microsoft.com/en-us/previous-versions/bb383810(v=vs.100)

    Best regards,

    Sam

    Wednesday, August 28, 2019 6:53 AM