locked
select row from pop up and insert RRS feed

  • Question

  • User639567535 posted

    how to select row from pop up and display in html table

    Monday, October 24, 2016 10:45 AM

All replies

  • User1724605321 posted

    Hi ,

    how to select row from pop up and display in html table

    Could you please explain more about your requirement ? Do you have a table in popup and you wan to show the selected row in web page ? If it is the gridview control , you could refer to below article :

    http://www.aspsnippets.com/Articles/Get-ASPNet-GridView-SelectedRow-when-clicked-using-JavaScript.aspx 

    If it is a html table , you could refer to below code sample :

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    	<meta charset="utf-8" />
        <script src="../Scripts/jquery-1.10.2.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#table tr").click(function () {
                    $(this).addClass('selected').siblings().removeClass('selected');
                    var value = $(this).find('td:first').html();
                    alert(value);
                });
    
                $('.ok').on('click', function (e) {
                    alert($("#table tr.selected td:first").html());
                });
            })
           
        </script>
      <style>
          td {border: 1px #DDD solid; padding: 5px; cursor: pointer;}
    
         .selected {
            background-color: brown;
            color: #FFF;
          }
      </style>
    </head>
    <body>
        <table id="table">
            <tr>
                <td>1 Ferrari F138</td>
                <td>1 000€</td>
                <td>1 200€</td>
                <td>Model monopostu stajne Scuderia Ferrari pre sezónu 2013</td>
                <td>1</td>
                <td>F138</td>
                <td>Klik pre detaily</td>
            </tr>
            <tr>
                <td>2 Ferrari F138</td>
                <td>1 000€</td>
                <td>1 200€</td>
                <td>Model monopostu stajne Scuderia Ferrari pre sezónu 2013</td>
                <td>1</td>
                <td>F138</td>
                <td>Klik pre detaily</td>
            </tr>
            <tr>
                <td>3 Ferrari F138</td>
                <td>1 000€</td>
                <td>1 200€</td>
                <td>Model monopostu stajne Scuderia Ferrari pre sezónu 2013</td>
                <td>1</td>
                <td>F138</td>
                <td>Klik pre detaily</td>
            </tr>
        </table>
        <input type="button" name="OK" class="ok" value="OK" />
    </body>
    </html>
    

    Best Regards,

    Nan Yu

    Tuesday, October 25, 2016 8:14 AM
  • User639567535 posted

    Nan Yu

    Hi ,

    Bakhtawar Ashiq

    how to select row from pop up and display in html table

    Could you please explain more about your requirement ? Do you have a table in popup and you wan to show the selected row in web page ? If it is the gridview control , you could refer to below article :

    http://www.aspsnippets.com/Articles/Get-ASPNet-GridView-SelectedRow-when-clicked-using-JavaScript.aspx 

    If it is a html table , you could refer to below code sample :

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    	<meta charset="utf-8" />
        <script src="../Scripts/jquery-1.10.2.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#table tr").click(function () {
                    $(this).addClass('selected').siblings().removeClass('selected');
                    var value = $(this).find('td:first').html();
                    alert(value);
                });
    
                $('.ok').on('click', function (e) {
                    alert($("#table tr.selected td:first").html());
                });
            })
           
        </script>
      <style>
          td {border: 1px #DDD solid; padding: 5px; cursor: pointer;}
    
         .selected {
            background-color: brown;
            color: #FFF;
          }
      </style>
    </head>
    <body>
        <table id="table">
            <tr>
                <td>1 Ferrari F138</td>
                <td>1 000€</td>
                <td>1 200€</td>
                <td>Model monopostu stajne Scuderia Ferrari pre sezónu 2013</td>
                <td>1</td>
                <td>F138</td>
                <td>Klik pre detaily</td>
            </tr>
            <tr>
                <td>2 Ferrari F138</td>
                <td>1 000€</td>
                <td>1 200€</td>
                <td>Model monopostu stajne Scuderia Ferrari pre sezónu 2013</td>
                <td>1</td>
                <td>F138</td>
                <td>Klik pre detaily</td>
            </tr>
            <tr>
                <td>3 Ferrari F138</td>
                <td>1 000€</td>
                <td>1 200€</td>
                <td>Model monopostu stajne Scuderia Ferrari pre sezónu 2013</td>
                <td>1</td>
                <td>F138</td>
                <td>Klik pre detaily</td>
            </tr>
        </table>
        <input type="button" name="OK" class="ok" value="OK" />
    </body>
    </html>
    

    Best Regards,

    Nan Yu

    yes i have page suppose abc page in that there is button and html table suppose (table1) in that table1 i display data from abc_table .. and when i click on button pop up appear and in that pop up there is data in html table (table2) .. in table2 data comes from def_table .. 

    now i want when i click on row then want to insert data from pop table2 in table1

    display table1 in page

    <script type="text/javascript">
            $(function () {       
                var ID= '<%=Session["value"]%>';
                var obj={};
                obj.ID=ID;
                getser(obj);
    
            });
            debugger;
            function getser(obj) {
                var send={};
                send.ID=obj.ID;
    
                $.ajax({
                    type: "POST",
                    url: "page.aspx/data_call",
                    contentType: "application/json;charset=utf-8",
                    data:JSON.stringify(send),
                    dataType: "json",
                    success: function (result) {
                        var re = JSON.parse(result.d).response;
                        var example = $("#table1").DataTable({
                            "dom": 'Blfrtip',
                            "columns":[
                                {
                                    "title": "ID",
                                    "data": "ID"
                                },{
                                    "title": "Type",
                                    "data": "Type"
                                  
                                },{
                                    "title": "value1",
                                    "data": "value1",
                                    "visible": false
                                }, {
                                    "title": "value2",
                                    "data": "value2",
                                    "visible": false
                                },{
                                    "title": "value3",
                                    "data": "value3,
                                    "render": function(data, type, row){
                                        return row.value1+ row.value2+ row.value2
                                    }
                                }
                            ]
                           
                        });
                        for (var i = 0; i < re.length; i++) {
                            if (re[i] !== null) {
                                example.row.add({
                                    "ID": re[i][0],
                                    "Type": re[i][1],
                                    "value1":  re[i][2] ,
                                    "value2": re[i][3],
                                    "value3": re[i][4]
                                })
                            }
                        }
                        example.draw();
                        $('#table1').on('click', 'tbody tr', function () {
                            var rowData =  example.row(this).data();
                            $("#myModal").modal("show");
                            var row = $(this);
                                var serv = row.find('td')[1].firstChild.data;
                                $("#txt_serv").val(serv);
    
                                $("#txt_repeat").val(rowData.value1);
                                $("#dura_values").val(rowData.value2);
                               $("#text_mil").val(rowData.value3);
                           
                        });        	
                   
                    },
                    error: function (error) {
                     
                        var r = error.responseText;
                        var errorMessage = r.Message;
                        alert(errorMessage);
                        alert(r);
                        alert(Error);
                    }
                });
            };
    
        </script>

    from pop up i select row and the row currently  i display in alert now i want to display /insert these values in table1 how i do that

    <script type="text/javascript">
            $(function () {
                $('#table2').on('click', 'tr', function () {
                    debugger;
                    if ($(this).hasClass('selected')) {
                       $(this).removeClass('selected');
                    }
                    else {
                        $('#table2', 'tr.selected').removeClass('selected');
                        $(this).addClass('selected');
                    }
                    debugger;
                    
                    $('[ID*=btnadd]').on('click', function () {
                        var ID = '<%=Session["value"]%>';
                        var row = $(this);
    
                        var Type = row.find('td')[0].firstChild.data;
                        var info = row.find('td')[1].firstChild.data;
                        var s = {};
                        s. ID = ID;
                        s. Type = Type;
                        s. info = info;
                        alert(JSON.stringify(s));
                        get(s);
                    });
                });
            });
                function get(s) {
                    debugger;
                    var ins = {};
                    ins. ID = obj.ID;
    
                    $.ajax({
                        type: "POST",
                        url: "M.aspx/insert ",
                        contentType: "application/json;charset=utf-8",
                        data:JSON.stringify(ins),
                        dataType: "json",
                        success: function (result) {
    var data_insert = $("#table1").DataTable({
                                "dom": 'Blfrtip',
                                "columns": [
                                    {
                                        "title": "Type",
                                        "data":  Type"
    
                                    },{
                                        "title": "info",
                                        "data": " info ",
                                    }
                                     
                                ]
    
                            });
                            debugger;
                            for (var i = 0; i < re.length; i++) {
                                if (insertd[i] !== null) {
                                    data_insert.row.add({
                                        " Type": re[i][0],
                                        " info ": re[i][1]
                                    })
                                }
                            }
                            debugger;
                            data_insert.draw();
                        },
                        error:function(error)
                        {
                            var r = error.responseText;
                            var errorMessage = r.Message;
                             alert(errorMessage);
                            alert(r);
                            alert("error");
    
                        }
    
                    });
                };
           
            
        </script>
    


    this shows error

     Uncaught TypeError: Cannot read property 'firstChild' of undefined(…)

    ID because  before this is there is page in that there is dropdown values so when i select value i.e. i select apple then i try to display data according to apple..

    and in insert button i want these two conditions

    -- insert ID value in column 

    -- select row from pop up and insert that data 

    Tuesday, October 25, 2016 9:07 AM
  • User1724605321 posted

    Hi ,

    Uncaught TypeError: Cannot read property 'firstChild' of undefined(…)

    Please debug your js code to confirm whether "row.find('td')[0]" is correct , if your btnadd is inside gridview row , you want find current row when button click, you could try :

      var $item = $(this).closest("tr") 

    Instead of "$(this)" . 

    Best Regards,

    Nan Yu

    Wednesday, October 26, 2016 7:58 AM
  • User639567535 posted

    Nan Yu

    Hi ,

    Bakhtawar Ashiq

    Uncaught TypeError: Cannot read property 'firstChild' of undefined(…)

    Please debug your js code to confirm whether "row.find('td')[0]" is correct , if your btnadd is inside gridview row , you want find current row when button click, you could try :

      var $item = $(this).closest("tr") 

    Instead of "$(this)" . 

    Best Regards,

    Nan Yu

    hi

    now  am done with selected row and get data on button click but i get data in alert box .. 

    data in pop like this  

    Type    info
    type_2  34 2 def
     type_3  234 52 tef
     type_4  344 26 dhf

    so when i click row this shows data like this 

    Type="type_2" info="34 2 def"

    where as i want individual data like this type="type_2" value1="34" value="2" value3"="def" for inserting data in table1

    i tried this

    <script type="text/javascript">
            $(function () {
                $('#table2').on('click', 'tr', function () {
                    debugger;
                    if ($(this).hasClass('selected')) {
                       $(this).removeClass('selected');
                    }
                    else {
                        $('#table2', 'tr.selected').removeClass('selected');
                        $(this).addClass('selected');
                    }
                    debugger;
                    
                      $('# table2').on('click', 'tr', function () {
                    debugger;
                    if ($(this).hasClass('selected')) {
                        $(this).removeClass('selected');
                    }
                    else {
                        $('#table2', 'tr.selected').removeClass('selected');
                        $(this).addClass('selected');
                    }
                    debugger;
                    var row = $(this);            
                    var Type = $("#table2 tr.selected").find('td:eq(0)').html();
                    var info = $("#table2 tr.selected").find('td:eq(1)').html();
                    var s = {};
                  
                    s. Type = Type;
                    s. info = info;
    
                   alert(JSON.stringify(s));
    
                });
    
    
                           $('[ID*=btnadd]').on('click', function () {
    
                                alert("12ad");
                                debugger;
    
                                var Vechile_ID = '<%=Session["Vechilevalue"]%>';
    
              var Type = $("#table2 tr.selected").find('td:eq(0)').html();
              var info = $("#table2 tr.selected").find('td:eq(1)').html();
    
                 var Type = $("#master_table tr.selected").find('td')[0].firstChild.data;
                      
                 var info = $("#master_table tr.selected").find('td')[1].firstChild.data;
                                s = {};
                                s.Vechile_ID = Vechile_ID;
                                s.Type = Type;
                                s.info = info;
                                
                                alert(JSON.stringify(s));
                  });
    
                   });
                function get(s) {
                    debugger;
                    var ins = {};
                    ins. ID = obj.ID;
    
                    $.ajax({
                        type: "POST",
                        url: "M.aspx/insert ",
                        contentType: "application/json;charset=utf-8",
                        data:JSON.stringify(ins),
                        dataType: "json",
                        success: function (result) {
    var data_insert = $("#table1").DataTable({
                                "dom": 'Blfrtip',
                                "columns": [
                                    {
                                        "title": "Type",
                                        "data":  Type"
    
                                    },{
                                        "title": "info",
                                        "data": " info ",
                                    }
                                     
                                ]
    
                            });
                            debugger;
                            for (var i = 0; i < re.length; i++) {
                                if (insertd[i] !== null) {
                                    data_insert.row.add({
                                        " Type": re[i][0],
                                        " info ": re[i][1]
                                    })
                                }
                            }
                            debugger;
                            data_insert.draw();
                        },
                        error:function(error)
                        {
                            var r = error.responseText;
                            var errorMessage = r.Message;
                             alert(errorMessage);
                            alert(r);
                            alert("error");
    
                        }
    
                    });
                };
           
            
        </script>
    
    

      

            [WebMethod]

            public static string insert (string Type, string value1, string value2, string value3)

            {

                Data insert = new Data();

                Table1 insertdata = new Table1 ();

                {

                    insertdata.Type = Type;

                    insertdata. value1= value1;

                    insertdata. value2= value2;

                    insertdata. Value3= Value3;

                }

                Table1.Add(insertdata);

                insert.SaveChanges();

                return new JavaScriptSerializer().Serialize(insertdata);

     

            }

    Wednesday, October 26, 2016 8:52 AM
  • User1724605321 posted

    Hi, 

    where as i want individual data like this type="type_2" value1="34" value="2" value3"="def" for inserting data in table1

    You could use string.split in javascript :

    var string = "text to split";
    var string1 = string.split(" ");

    I notice you have provided the code you have tried , do you have any error or you have solved your problem .

    Best Regards,

    Nan Yu

    Thursday, October 27, 2016 2:35 AM
  • User639567535 posted

    Nan Yu

    Hi, 

    Bakhtawar Ashiq

    where as i want individual data like this type="type_2" value1="34" value="2" value3"="def" for inserting data in table1

    You could use string.split in javascript :

    var string = "text to split";
    var string1 = string.split(" ");

    I notice you have provided the code you have tried , do you have any error or you have solved your problem .

    Best Regards,

    Nan Yu

    there is error ... these value 1 value 2 value 3 not inserted in database. and how i split beacuse there is [1] poistion in td where whole text exist like this <td>23 42 abc </tD>

    Thursday, October 27, 2016 5:12 AM
  • User1724605321 posted

    Hi ,

    I notice that you set id value for "ins",but not set other values before call insert function :

                    var ins = {};
                    ins. ID = obj.ID;

    Please debug your js function to confirm whether you get the correct row information .

    Best Regards,

    Nan Yu

    Friday, October 28, 2016 5:28 AM