Home/ Questions/Q 6644127
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T00:07:52+00:00

I wanted to have the radio button check when its particular row is clicked,

  • 0

I wanted to have the radio button check when its particular row is clicked, but it is not working. I’m suspecting jquery selector problem with ajax/json generated table. This is my code listing. I’m a Stackoverflow newbie.

            <html>
            <head>
            <script type="text/javascript" src="<?php echo base_url();?>js/jquery-1.6.1.min.js"></script>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Untitled Document</title>
            <style type="text/css">
            <!--

            .selected td { background-color: #FF0000; }

            -->
            </style>
            </head>
            <body>
            <div id="search_form">
              <form id="form1" name="form1" method="post" action="">
                  <table width="80%" border="1" align="center" cellspacing="0">
                    <tr>
                      <td><label>
                        <div align="center">
                          <p>
                            <input name="search_input" type="text" id="search_input" value="ASET" size="50" />
                          </p>
                        </div>
                      </label></td>
                      <td width="10%" rowspan="2"><div align="center" id="btn_search">Search</div></td>
                    </tr>
                    <tr>
                      <td><label>
                        <div align="center">
                        <input name="rb_searchType" type="radio" id="cb_searchType" value="fileno" checked="checked" />
                      File No
                       <input type="radio" name="rb_searchType" id="cb_searchType2" value="filetitle" />
                      Title</div>
                      </label></td>
                    </tr>
                  </table>
                  <div align="center"></div>
                  <div align="center"></div>
              </form>
            </div>

            <div id="status_submit">
            </div>
            <div id="search_result1">
            </div>
            </body>
            <script type="text/javascript">
            $(document).ready(function() {

                $('#btn_search').click(function() {
                    $('#form1').submit();
                });

                $("form").submit(function() {

                  var fSearchInputValue = $('#search_input').attr('value');
                  var fSearchType = $("input[@name='rb_searchType']:checked").val();

                 $('#status_submit').html("please wait......");
                  $.ajax({
                        type: "POST",
                        url: "<?php echo site_url('files/search_list_file_json/'); ?>"+"/",
                        data: "SearchInputValue="+ fSearchInputValue +"& SearchType="+ fSearchType,
                        dataType: "json",
                        success: function(data) {
                        var contentHtml = '<table width="100%" border="1" cellpadding="2" cellspacing="0" bordercolor="#000000" id="Table"><tr><td width="5%">&nbsp;</td><td width="15%">FILE NO&nbsp;</td><td>SUBJECT&nbsp;</td></tr>';

                            $(data).each(function(index, item) {
                                contentHtml += '<tr><td><input type="radio" name="rb_fileno" id="rb_fileno" value="';
                                contentHtml += item.FileNo;
                                contentHtml += '" />&nbsp;</td>';               
                                contentHtml += '<td>';
                                contentHtml += item.FileTitle;
                                contentHtml += '&nbsp;</td></tr>';  
                            });

                        contentHtml += "</table>";
                          $('#search_result1').html(contentHtml);
                          $('#status_submit').fadeIn(function(){$('#status_submit').html('');});

                        },
                        error: function(){
                            var contentHtml='No result';
                            $('#status_submit').fadeIn(function(){$('#status_submit').html(contentHtml);});         
                        }
                    });

            return false;
                }); //end ajax json

                //check radio button when row is clicked
                 $('#search_result1s tr').click(function(event) {
                    // $(data).filter('div.search_result1 tr').click(function(event) {

                    $(this).find('td input:radio').prop('checked', true);
                    $(this).addClass("selected").siblings().removeClass("selected");
                 });

            }); // end document.ready

            </script>
            </html>

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this

    $('#search_result1s tr').live('click',function(event) {
    $(this).find('td :input[type=radio]').attr({'checked':'checked'});
     ...
});

    basically .live() method works similar to .click() only difference is when you add html element dynamically to body means after page has been loaded then .live() succeed but .click() method fails.

    • 0