locked
Deleting table rows and populating with new data RRS feed

  • Question

  • User1406973109 posted

    Good day all,

    Please i have a dynamically generated table, populated in a jquery mobile page, when i get to the fourth page based on users selection, i want to go back to the initial page, re-populate the table for newer selections, but it still displays the initial table of that page, without removing the contents of the table.

    Please what can i do, this is my table and jquery mobile page:

    <!--Question 5-->
        <div data-role="page" id="Qnt5" data-theme="true" class="ui-page-theme-a" style="width:80%;margin-left: 10%; margin-top:5%;">
            <form id="QSTN5" method="post" data-theme="f">
                <header data-role="header">
                    <h1>Question 5 Of 12</h1>
                    <a data-icon="arrow-l" data-rel="back" href="/">Back</a>
                </header>
                <div data-role="content" data-theme="f">
                    <div class="form-group">
                        <label>Using a scale of 1 to 5 where 1 means poor, 2 = fair, 3 = Good, 4 Very good and 5= Excellent what is your level of satisfactions with the each of these providers?</label>
                        <div class="col-md-8">
                            <fieldset>
                                <table border="0" cellpadding="0" width="50%" id='tblQuestion5'> </table>
                            </fieldset>
                        </div>
                    </div>
                </div>
                <div data-role="footer" class="ui-footer" data-theme="f">
                    <div class="ui-controlgroup-horizontal">
                        <input id="btnSaveQuestion5" type="submit" class="ui-btn" value="Next" />
                    </div>
                </div>
            </form>
        </div>

    the jquery code:

    $(document).on('pagebeforeshow', '#Qnt5', function () {
            var networks = storeObject.question4;
            var html = ''
            
    
            this.counter = this.counter || 0;
            this.counter++;
            if (networks != "" && this.counter <= 1) {
                //the code below suppose to clear the body of the table and repopulate the table
                $("#tblQuestion5 > tbody").empty();
                for(var i=0; i < networks.length; i++){
                            html += "<tr>"
                            html += "<td><label class='ui-table-cell-label'>" + networks[i] + "</label></td>"
                            html += "<td><input type='radio' name=" + networks[i] + " value='1'>Poor</td>"
                            html += "<td><input type='radio' name=" + networks[i] + " value='2'>fair</td>"
                            html += "<td><input type='radio' name=" + networks[i] + " value='3'>Good</td>";
                            html += "<td><input type='radio' name=" + networks[i] + " value='4'>Very good</td>"
                            html += "<td><input type='radio' name=" + networks[i] + " value='5'>Excellent</td>"
                            html += "</tr>"
                        }
                        $(html).appendTo('#tblQuestion5');
            }
    
            
        });

    Tuesday, June 21, 2016 9:27 AM

Answers

  • User1406973109 posted

    Seems like i found a solution using this code:

    $(document).on('pagebeforeshow', '#Qnt5', function () {
            var networks = storeObject.question4;
            var content = ''
    
            //Comment this out, part of the problem
            //this.counter = this.counter || 0;
            //this.counter++;
            //if (networks != "" && this.counter <= 1) {
            if (networks != "") {
                //$("#tblQuestion5 > tbody").empty();
                for(var i=0; i < networks.length; i++){
                    content += "<tr>"
                    content += "<td><label class='ui-table-cell-label'>" + networks[i] + "</label></td>"
                    content += "<td><input type='radio' name=" + networks[i] + " value='1'>Poor</td>"
                    content += "<td><input type='radio' name=" + networks[i] + " value='2'>fair</td>"
                    content += "<td><input type='radio' name=" + networks[i] + " value='3'>Good</td>";
                    content += "<td><input type='radio' name=" + networks[i] + " value='4'>Very good</td>"
                    content += "<td><input type='radio' name=" + networks[i] + " value='5'>Excellent</td>"
                    content += "</tr>"
                        }
                //Replace below also
                //$(html).appendTo('#tblQuestion5');
                //with
                $('#tblQuestion5').html(content);
            }
    
            
        });

    Thanks

    Tim

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 21, 2016 1:53 PM

All replies

  • User1406973109 posted

    Seems like i found a solution using this code:

    $(document).on('pagebeforeshow', '#Qnt5', function () {
            var networks = storeObject.question4;
            var content = ''
    
            //Comment this out, part of the problem
            //this.counter = this.counter || 0;
            //this.counter++;
            //if (networks != "" && this.counter <= 1) {
            if (networks != "") {
                //$("#tblQuestion5 > tbody").empty();
                for(var i=0; i < networks.length; i++){
                    content += "<tr>"
                    content += "<td><label class='ui-table-cell-label'>" + networks[i] + "</label></td>"
                    content += "<td><input type='radio' name=" + networks[i] + " value='1'>Poor</td>"
                    content += "<td><input type='radio' name=" + networks[i] + " value='2'>fair</td>"
                    content += "<td><input type='radio' name=" + networks[i] + " value='3'>Good</td>";
                    content += "<td><input type='radio' name=" + networks[i] + " value='4'>Very good</td>"
                    content += "<td><input type='radio' name=" + networks[i] + " value='5'>Excellent</td>"
                    content += "</tr>"
                        }
                //Replace below also
                //$(html).appendTo('#tblQuestion5');
                //with
                $('#tblQuestion5').html(content);
            }
    
            
        });

    Thanks

    Tim

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 21, 2016 1:53 PM
  • User61956409 posted

    Hi timotech,

    Firstly, I’m glad to hear that you resolve the problem by yourself. And thanks for sharing us your solution.

    Secondly, according to your description, it seems that you’d like to empty initial table data first and append new data rows to table, if that is the case, using .empty() method to remove the data rows from table and then calling .appendTo() method to insert new rows into table as you did should also be working, please debug the code to make sure if the table “tblQuestion5” with a <tbody> tag and if you could find the element you want to remove.

    Best Regards,

    Fei Han

    Wednesday, June 22, 2016 3:03 AM