locked
How I hide Radio in Repeater using Jquery RRS feed

  • Question

  • User-582711651 posted

    Hi 

    This is my code, this is works, but I can't able to hide Radiobutton, how I do it?

      <script type="text/javascript">
        function disbl_rbt() {
            $('#pnl_Repeater input[type="radio"]').each(function () {
                if ($(this).prop('checked') == true) {
                    $(this).hide(); // This line is not work, I can't able to hide my radio
                    $(this).prop("checked", false) // This line works well
               
                }
            });
        }
    </script>

    <asp:RadioButton ID="rbt_row" runat="server" CssClass="btn btn-success" type="radio" /></td>

    <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="disbl_rbt();" />

    Thanks in advance.

    Saturday, October 17, 2020 9:41 PM

Answers

  • User409696431 posted

    It is hiding the radio button, but your button that calls the function posts back and reloads the page. The JQuery styling is not retained.

    You'll see a flash of the button going away, then reappearing.  (By going away, I mean the dot itself.  Your CssClass="btn btn-success" type="radio" puts a span around the input for that styling.  If you want to hide that, too, you'll have to target that span.)

    To avoid your button posting the page back, add return false after your JavaScript call.

    <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="disbl_rbt();return false;" />

    Obviously you shouldn't expect hiding something with JQuery to survive postbacks, so this application does have that limitation.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, October 18, 2020 12:12 AM
  • User-939850651 posted

    Hi ayyappan.CNN,

    According to your description, I used the code you provided for a simple test. The solution provided by KathyW is indeed effective. The cause of your current problem may be this:

    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-3.5.1.min.js"></script>
        <script type="text/javascript">
            function fnCheckUnCheck(objId) {
    
                var rdoArray = document.getElementsByTagName("input");
                for (i = 0; i <= rdoArray.length - 1; i++) {
                    if (rdoArray[i].type == 'radio') {
    
                        if (rdoArray[i].id != objId) {
                            rdoArray[i].checked = false;
                        } else {
                            var tdParent = $(rdoArray[i]).closest('tr');
                            var memCode = tdParent.children('td[id*="tdCustomerCode"]');
                            var memName = tdParent.children('td[id*="tdCustomerName"]');
                            //$('#lbl_CustomerCode').text(memCode.text());
                            //$('#lbl_CustomerName').text(memName.text());
                        }
                    }
                }
            }
    
            function db_post() {
               
                $.ajax({
                    type: "POST",
                    url: "Y.aspx/Doc_ackwd",
                    data: '',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        alert("The document acknowledgement information has been updated successfully!");
                        disbl_rbt();
                    },
                    error: function (data, ex) {
                        alert("Sorry there is err. " + data + " Ex: " + ex);
                    }
    
                });
                //return false;
            }
    
            function disbl_rbt() {
                $('#pnl_Repeater input[type="radio"]').each(function () {
                    if ($(this).prop('checked') == true) {
                        //$(this).prop("checked", false)
                        $(this).hide();
                        //return false;
                    }
                });
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:Panel ID="Pnl_Reptr" runat="server" ScrollBars="Auto" Height="200px">
                    <div class="box-body">
                        <div class="row" style="padding: 10px;" id="Gridpanel" runat="server">
                            <div class="row">
                                <div class="row table-responsive" id="pnl_Repeater" runat="server" visible="True">
                                    <asp:Repeater runat="server" ID="rptLeadGrid">
                                        <HeaderTemplate>
                                            <table id="tblAttendance" class="table table-bordered table-striped" style="cursor: pointer; margin-bottom: 0px;">
                                                <tr style="background: #3c8dbc; color: #fff; font-size: 16px;">
                                                    <th>Insurance Claim Transaction Details</th>
                                                </tr>
                                            </table>
                                            <div class="table-responsive" style="background-color: #e2e2e2; padding-top: 5px;">
                                                <div class="box-body">
                                                    <table id="example1" class="table table-bordered table-hover" style="cursor: pointer; background-color: #fff;">
                                                        <thead style="background-color: #3c8dbc; color: #fff; font-size: 14px; border: none;">
                                                            <tr>
                                                                <%--<th id="thSN" runat="server">Sr#</th>--%>
                                                                <th id="thchk" runat="server">+</th>
                                                                <th id="thCustomerCode" runat="server">MemberCode</th>
                                                                <th id="thCustomerID" runat="server">MemberID</th>
                                                                <th id="thCustomerName" runat="server">Member Name</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <tr style="font-size: 12px;">
                                                <%--<td id="tdSN" runat="server"><%#Container.ItemIndex + 1 %></td>--%>
                                                <td id="tdchk" runat="server">
                                                    <asp:RadioButton ID="rbt_row" runat="server" CssClass="btn btn-success" type="radio" onclick="fnCheckUnCheck(this.id);" />
                                                </td>
                                                <td id="tdCustomerCode" runat="server"><%#Eval("MEMBERCODE") %></td>
                                                <td id="tdCustomerID" runat="server"><%#Eval("MEMBERID") %></td>
                                                <td id="tdCustomerName" runat="server"><%#Eval("MEMBERNAME") %></td>
                                            </tr>
                                        </ItemTemplate>
                                        <FooterTemplate>
                                            </tbody></table> 
                                            </div>
                                            </div>  
                                        </FooterTemplate>
                                    </asp:Repeater>
                                </div>
                                <%--<center>
                                            <asp:Label ID="Label1" runat="server" Text="" ForeColor="red"></asp:Label>
                                            <asp:Label ID="lbl_trckingid" runat="server" Text="" ></asp:Label>
                                            </center>  --%>
                            </div>
                        </div>
                    </div>
                </asp:Panel>
                <br />
                <asp:Button ID="btnsubmit" runat="server" Text="Save"  class="btn btn-primary" 
                    Visible="true" ValidationGroup="group2" OnClientClick="db_post();return false;" ></asp:Button>
                <%--<asp:Label runat="server" ID="lbl_CustomerCode"></asp:Label>
                <br />
                <asp:Label runat="server" ID="lbl_CustomerName"></asp:Label>--%>
            </div>
        </form>
    </body>
    protected void Page_Load(object sender, EventArgs e)
            {
                if (!Page.IsPostBack)
                {
                    bindReapter();
                }
            }
    
            private void bindReapter()
            {
                DataTable dt = new DataTable();
                string conStr = ConfigurationManager.ConnectionStrings["conStr"].ToString();
                using (SqlConnection conn = new SqlConnection(conStr))
                {
                    string query = "select * from test_tbl";
                    using (SqlCommand cmd = new SqlCommand(query, conn))
                    {
                        SqlDataAdapter sda = new SqlDataAdapter(cmd);
                        sda.Fill(dt);
                        rptLeadGrid.DataSource = dt;
                        rptLeadGrid.DataBind();
                    }
                }
            }
    
            [WebMethod]
            public static void Doc_ackwd() {
    //just for testing //do something about submit }

    Result:

    Please place return false; after the call function instead of inside the function.

    If I misunderstood something, please let me know.

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 19, 2020 9:03 AM

All replies

  • User409696431 posted

    It is hiding the radio button, but your button that calls the function posts back and reloads the page. The JQuery styling is not retained.

    You'll see a flash of the button going away, then reappearing.  (By going away, I mean the dot itself.  Your CssClass="btn btn-success" type="radio" puts a span around the input for that styling.  If you want to hide that, too, you'll have to target that span.)

    To avoid your button posting the page back, add return false after your JavaScript call.

    <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="disbl_rbt();return false;" />

    Obviously you shouldn't expect hiding something with JQuery to survive postbacks, so this application does have that limitation.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, October 18, 2020 12:12 AM
  • User-582711651 posted

    Hi KathyW,

    Noted, I brief what I want exactly, I have a Repeater, when Client click a Radiobutton then to save data by using Ajax, after Save Succeed, the respective Radio will disappear. 

    My Code

    <script type="text/javascript" src="http://cdn.jsdelivr.net/json2/0.1/json2.js"></script>
     <script type="text/javascript">
                   function db_post() {
                    var f_db = {};
                     var recidx =  $('#<%=lbl_rowid.ClientID%>').text();
                     f_db.recid =  $.trim(recidx);
                     var trkidx =  $('#<%=lbl_trckingid.ClientID%>').text();
                     f_db.trkid =  $.trim(trkidx);
                     f_db.recvdt = $('#<%=txt_PostCouriReceivedOn.ClientID%>').val();
                     f_db.recvby = $('#<%=txt_DocReceivedByName.ClientID%>').val().toUpperCase();
                     f_db.recvph = $('#<%=txt_ReceivedPersonMobPH.ClientID%>').val();
                     f_db.remarks = $('#<%=txt_GeneralRemarks.ClientID%>').val().toUpperCase();
                     f_db.usrid = '<%= Session("ICT_Em_Code") %>';
                     f_db.ipadr = '<%= Session("ICT_IPADDR") %>';
                     
                $.ajax({
                    type: "POST",
                    url: "ICT_TxnHO_DocAcknowledgement.aspx/Doc_ackwd",
                    data: '{f_db: ' + JSON.stringify(f_db) + '}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        alert("The document acknowledgement information has been updated successfully!");
                        $("#<%=txt_PostCouriReceivedOn.ClientID %>").val("");
                        $("#<%=txt_DocReceivedByName.ClientID %>").val("");
                        $("#<%=txt_ReceivedPersonMobPH.ClientID %>").val("");
                        $("#<%=txt_GeneralRemarks.ClientID %>").val("");
                        $(".modal-backdrop").remove();
                        $("#Popu_HOApproval").modal('hide');
                        disbl_rbt(); // Here I wanna disable respective radio button   
                    },
                    error: function (data, ex) {
                        alert("Sorry there is err. " + data + " Ex: " + ex);
                        $(".modal-backdrop").remove();
                        $("#Popu_HOApproval").modal('show');
                    }
                    
                });
                return false;
                }
     </script>
     function disbl_rbt() {
            $('#pnl_Repeater input[type="radio"]').each(function () {
                if ($(this).prop('checked') == true) {
                    $(this).hide();
                }
            });
        }
    My Repeater
    
    <div class="row table-responsive" id="pnl_Repeater" runat="server" visible="True">
                                                <asp:Panel ID="Pnl_Reptr" runat="server" Height="350px" ScrollBars="auto" style="text-align: right">
                                                <asp:Repeater runat="server" ID="rptLeadGrid">
                                                    <HeaderTemplate>
                                                        <table id="tblAttendance" class="table table-bordered table-striped" style="cursor: pointer; margin-bottom: 0px;">
                                                            <tr style="background: #3c8dbc; color: #fff; font-size: 16px;">
                                                                <th>Insurance Claim Transaction Details</th>
                                                            </tr>
                                                        </table>
                                                        <div class="table-responsive" style="background-color: #e2e2e2; padding-top: 5px;">
                                                            <div class="box-body" >
                                                                <table id="example1" class="table table-bordered table-hover" style="cursor: pointer; background-color: #fff;">
                                                                    <thead style="background-color: #3c8dbc; color: #fff; font-size: 14px; border: none;">
                                                                        <tr>
                                                                            <th id="thSN" runat="server">Sr#</th>
                                                                            <th id="thchk" runat="server">+</th>
                                                                            <th id="thTrackingNo" runat="server">Tracking#</th>
                                                                            <th id="thDocuStatus" runat="server">Status</th>
                                                                            <th id="thRegion" runat="server">Region Name</th>
                                                                            <th id="thBranch" runat="server">Branch Name</th>
                                                                            <th id="thGroupName" runat="server">Group Name</th>
                                                                            <th id="thCustomerCode" runat="server">MemberCode</th>
                                                                            <th id="thCustomerID" runat="server">MemberID</th>
                                                                            <th id="thCustomerName" runat="server">Member Name</th>
                                                                            <th id="thLoanID" runat="server">LoanID</th>
                                                                            <th id="thDeadType" runat="server">DeadType</th>
                                                                            <th id="thDeadPerson" runat="server">Dead Person</th>
                                                                            <th id="thDeathCause" runat="server">DeathCause</th>
                                                                            <th id="thDeathDate" runat="server">DeathDate</th>
                                                                            <th id="thCourierName" runat="server">CourierName</th>
                                                                            <th id="thPODNo" runat="server">POD No</th>
                                                                            <th id="thSubmittedby" runat="server">SentBy</th>
                                                                            <th id="thMobNo" runat="server">MobNo</th>
                                                                            <th id="thDocStat" runat="server" visible="false">.</th>
                                                                            <th id="thRowID" runat="server" visible="false">.</th>
                                                                            </tr>
                                                                    </thead>
                                                                    <tbody>
                                                    </HeaderTemplate>
                                                    <ItemTemplate>
                                                        <tr style="font-size: 12px;">
                                                           <td id="tdSN" runat="server"><%#Container.ItemIndex + 1 %></td>
                                                            <td id="tdchk" runat="server">
                                                                <asp:RadioButton ID="rbt_row" runat="server" CssClass="btn btn-success" type="radio" onclick="fnCheckUnCheck(this.id); Pop_HOApprvl();"/></td>
                                                            <td id="tdTrackingNo" runat="server" style="color: #003399">
                                                                <asp:Label ID="lbl_trackno" runat="server" Text='<%#Eval("TrackingNo") %>'></asp:Label></td>
                                                            <td id="tdDocuStatus" runat="server" style="color: #CC3300"><%#Eval("DocuStatus") %></td>
                                                            <td id="tdRegionName" runat="server"><%#Eval("RegionName") %></td>
                                                            <td id="tdBranchName" runat="server"><%#Eval("BranchName") %></td>
                                                            <td id="tdGroupName" runat="server"><%#Eval("Group") %></td>
                                                            <td id="tdCustomerCode" runat="server"><%#Eval("MEMBERCODE") %></td>
                                                            <td id="tdCustomerID" runat="server"><%#Eval("MEMBERID") %></td>
                                                            <td id="tdCustomerName" runat="server"><%#Eval("MEMBERNAME") %></td>
                                                            <td id="tdLoanID" runat="server"><%#Eval("LoanID") %></td>
                                                            <td id="thDeadType" runat="server"><%#Eval("DeadType") %></td>
                                                            <td id="thDeadPerson" runat="server"><%#Eval("DeadPerson") %></td>
                                                            <td id="tdDeathCause" runat="server"><%#Eval("DeathCause") %></td>
                                                            <td id="tdDeathdate" runat="server"><%#Eval("DateofDead") %></td>
                                                            <td id="tdCourierName" runat="server"><%#Eval("CourierName") %></td>
                                                            <td id="tdPODNo" runat="server"><%#Eval("PODNo") %></td>
                                                            <td id="tdSentBy" runat="server"><%#Eval("SentBy") %></td>
                                                            <td id="tdMobNo" runat="server"><%#Eval("MobNo") %></td>
                                                            <td id="tdDocStat" runat="server">
                                                                <asp:Label ID="DStat" runat="server" Text='<%#Eval("DocStat") %>' Visible="false"></asp:Label></td>
                                                            <td id="tdRowID" runat="server">
                                                                <asp:Label ID="RowID" runat="server" Text='<%#Eval("RowID") %>' ></asp:Label></td>
                                                            
                                                        </tr>
                                                    </ItemTemplate>
                                                    <FooterTemplate>
                                                        </tbody></table> 
                                            </div>
                                            </div>  
                                                    </FooterTemplate>
                                                </asp:Repeater>
                                                </asp:Panel>
                                            </div>

    Hope you understand. 

    Thanks,

    Sunday, October 18, 2020 3:47 AM
  • User409696431 posted

    Well, I can't do anything with your code, since I don't have your database and do not have the time to create one and create similar code.   I answered your question using the code  you first provided. Now you are asking a different question involving an AJAX Post to the database.  All I can say is that any javascript style changes won't survive a page reload (and of course, your function doesn't hide the entire radiobutton as styled, just the dot inside it).  Is the page refreshing?

    Sunday, October 18, 2020 4:20 AM
  • User-582711651 posted

    Hi KathyW

    I have cut down unwanted codes and uploaded my aspx pages, pls click this link to download;

    https://drive.google.com/drive/folders/1UlnK55cgpidmcV7OKGuw9jtOVaqH2TVb?usp=sharing

    Sunday, October 18, 2020 11:50 AM
  • User409696431 posted

    Sorry, but no.  I have no more time to spend on this.

    Sunday, October 18, 2020 10:17 PM
  • User-939850651 posted

    Hi ayyappan.CNN,

    According to your description, I used the code you provided for a simple test. The solution provided by KathyW is indeed effective. The cause of your current problem may be this:

    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-3.5.1.min.js"></script>
        <script type="text/javascript">
            function fnCheckUnCheck(objId) {
    
                var rdoArray = document.getElementsByTagName("input");
                for (i = 0; i <= rdoArray.length - 1; i++) {
                    if (rdoArray[i].type == 'radio') {
    
                        if (rdoArray[i].id != objId) {
                            rdoArray[i].checked = false;
                        } else {
                            var tdParent = $(rdoArray[i]).closest('tr');
                            var memCode = tdParent.children('td[id*="tdCustomerCode"]');
                            var memName = tdParent.children('td[id*="tdCustomerName"]');
                            //$('#lbl_CustomerCode').text(memCode.text());
                            //$('#lbl_CustomerName').text(memName.text());
                        }
                    }
                }
            }
    
            function db_post() {
               
                $.ajax({
                    type: "POST",
                    url: "Y.aspx/Doc_ackwd",
                    data: '',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        alert("The document acknowledgement information has been updated successfully!");
                        disbl_rbt();
                    },
                    error: function (data, ex) {
                        alert("Sorry there is err. " + data + " Ex: " + ex);
                    }
    
                });
                //return false;
            }
    
            function disbl_rbt() {
                $('#pnl_Repeater input[type="radio"]').each(function () {
                    if ($(this).prop('checked') == true) {
                        //$(this).prop("checked", false)
                        $(this).hide();
                        //return false;
                    }
                });
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:Panel ID="Pnl_Reptr" runat="server" ScrollBars="Auto" Height="200px">
                    <div class="box-body">
                        <div class="row" style="padding: 10px;" id="Gridpanel" runat="server">
                            <div class="row">
                                <div class="row table-responsive" id="pnl_Repeater" runat="server" visible="True">
                                    <asp:Repeater runat="server" ID="rptLeadGrid">
                                        <HeaderTemplate>
                                            <table id="tblAttendance" class="table table-bordered table-striped" style="cursor: pointer; margin-bottom: 0px;">
                                                <tr style="background: #3c8dbc; color: #fff; font-size: 16px;">
                                                    <th>Insurance Claim Transaction Details</th>
                                                </tr>
                                            </table>
                                            <div class="table-responsive" style="background-color: #e2e2e2; padding-top: 5px;">
                                                <div class="box-body">
                                                    <table id="example1" class="table table-bordered table-hover" style="cursor: pointer; background-color: #fff;">
                                                        <thead style="background-color: #3c8dbc; color: #fff; font-size: 14px; border: none;">
                                                            <tr>
                                                                <%--<th id="thSN" runat="server">Sr#</th>--%>
                                                                <th id="thchk" runat="server">+</th>
                                                                <th id="thCustomerCode" runat="server">MemberCode</th>
                                                                <th id="thCustomerID" runat="server">MemberID</th>
                                                                <th id="thCustomerName" runat="server">Member Name</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <tr style="font-size: 12px;">
                                                <%--<td id="tdSN" runat="server"><%#Container.ItemIndex + 1 %></td>--%>
                                                <td id="tdchk" runat="server">
                                                    <asp:RadioButton ID="rbt_row" runat="server" CssClass="btn btn-success" type="radio" onclick="fnCheckUnCheck(this.id);" />
                                                </td>
                                                <td id="tdCustomerCode" runat="server"><%#Eval("MEMBERCODE") %></td>
                                                <td id="tdCustomerID" runat="server"><%#Eval("MEMBERID") %></td>
                                                <td id="tdCustomerName" runat="server"><%#Eval("MEMBERNAME") %></td>
                                            </tr>
                                        </ItemTemplate>
                                        <FooterTemplate>
                                            </tbody></table> 
                                            </div>
                                            </div>  
                                        </FooterTemplate>
                                    </asp:Repeater>
                                </div>
                                <%--<center>
                                            <asp:Label ID="Label1" runat="server" Text="" ForeColor="red"></asp:Label>
                                            <asp:Label ID="lbl_trckingid" runat="server" Text="" ></asp:Label>
                                            </center>  --%>
                            </div>
                        </div>
                    </div>
                </asp:Panel>
                <br />
                <asp:Button ID="btnsubmit" runat="server" Text="Save"  class="btn btn-primary" 
                    Visible="true" ValidationGroup="group2" OnClientClick="db_post();return false;" ></asp:Button>
                <%--<asp:Label runat="server" ID="lbl_CustomerCode"></asp:Label>
                <br />
                <asp:Label runat="server" ID="lbl_CustomerName"></asp:Label>--%>
            </div>
        </form>
    </body>
    protected void Page_Load(object sender, EventArgs e)
            {
                if (!Page.IsPostBack)
                {
                    bindReapter();
                }
            }
    
            private void bindReapter()
            {
                DataTable dt = new DataTable();
                string conStr = ConfigurationManager.ConnectionStrings["conStr"].ToString();
                using (SqlConnection conn = new SqlConnection(conStr))
                {
                    string query = "select * from test_tbl";
                    using (SqlCommand cmd = new SqlCommand(query, conn))
                    {
                        SqlDataAdapter sda = new SqlDataAdapter(cmd);
                        sda.Fill(dt);
                        rptLeadGrid.DataSource = dt;
                        rptLeadGrid.DataBind();
                    }
                }
            }
    
            [WebMethod]
            public static void Doc_ackwd() {
    //just for testing //do something about submit }

    Result:

    Please place return false; after the call function instead of inside the function.

    If I misunderstood something, please let me know.

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 19, 2020 9:03 AM
  • User409696431 posted

    Since XuDong Peng has kindly confirmed that my answer works, when followed properly, please confirm it yourself, then mark my answer explaining about adding return false after your JavaScript call as the answer to your question. You might want to mark XuDong Peng's answer as well, for taking the time to confirm it with your code.

    Marking answers helps other people with similar questions find the answers more quickly.

    Monday, October 19, 2020 6:59 PM
  • User-582711651 posted

    Hi XuDong Peng, 

    Excellent! as per your suggestion just I replaced "return false; "

    See OnClientClick="db_post(); return false;" and removed  //return false; in function db_post()

    it works thanks for your timing help. 

    with best regards, 

    Tuesday, October 20, 2020 12:25 PM