refresh div on adding rows using javascript

Question

My table is being populated using ajax from a mysql database. I have a text field below it which adds the entered data to the database. All this works fine, but what i want to do is on adding that new row to the table, i want to dynamically show the user that their entry has been added (or simply refresh that div when new field has been added). Currently aim able to achieve that using a simple function:

function addItem(new_item, edit_table) {
     var itemName = new_item;
     var newRow = document.createElement('tr');
     var rowCell = document.createElement('td');
     rowCell.textContent = itemName;
     // rowCell.addClass("grid");
     newRow.appendChild(rowCell);
     edit_table.appendChild(newRow);
  }

However this does not let me add extra functionalities to that row e.g. i have a delete and edit icon upon hover. So by using this function i am able to show the new row added but its not exactly functioning. So i recon the better option would be to refresh that div when this happens.

I am using the following code to call the addItems method:

$('#b_go').click(function(){
    //some other conditions, then using ajax to post the data
    success: function (data) {
    if(data == 'success') {
        addItem(new_row, selected_table);
   }

HTML for the table:

<table class="table table-striped table-bordered home" id="subjects">
    <thead>
        <th>Subject Title</th>
    </thead>
    <tbody>
        <?php
        $sql = mysql_query("select Title from Subject");
        while($row = mysql_fetch_array($sql)) {
            echo "<tr><td>";
            echo $row['Title']?> <!--using html to output buttons for delete and edit for each row-->
         <?;echo "</td></tr>";
        }
            ?>
    </tbody>
</table>

Css for the above table:

.table {
  width: 100%;
  margin-bottom: 18px;
}
.table th, .table td {
  padding: 8px;
  line-height: 18px;
  text-align: left;
  border-top: 1px solid #ddd;
}
.table th {
  font-weight: bold;
  vertical-align: bottom;
}
.table td {
  vertical-align: top;
}
.table thead:first-child tr th, .table thead:first-child tr td {
  border-top: 0;
}

.table-striped tbody tr:nth-child(odd) td, .table-striped tbody tr:nth-child(odd) th {
  background-color: #f9f9f9;
}

.home {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.home th {
    font-size: 15px;
    font-weight: 400;
    color: #039;
    padding: 10px 8px;
    border-bottom: 2px solid #6678b1;
}
.home td {
    line-height:15px;
    border-bottom: 1px solid #E0E0E0;
    border-left: 1px solid #E0E0E0;
    font-size: 12px;
    color: #404040;
    padding: 9px 8px 3px 8px;
}
.home tbody tr:hover td {
    background-color:#E6E6FF;
    cursor: pointer; 
}

Any help would be appreciated!

Answer 1

Do you have JQuery? You can make something similar in JS, but here's the concept.

1. Create a template of the new row in HTML

2. Add the row to the DB.

3. Add the row to the table:

   var row = $("#myRowTemplate").clone();
   row.attr("id", "");
   //Bind the new data
   row.find(".fname").text("Jack");
   row.find(".lname").text("Dean");
   //Bind a click event on the first name
   row.find(".fname").click(function(){alert('Hi!');});
   $("#myTable").find("tbody :first").append(row);
   

Hopes that's helps :)

Answer 2

I have to leave work, but here's a quick and dirty answer.

When adding new elements dynamically that have pre-existing functions/events/actions that are already bound, the new elements will not automatically inherent the events/actions of their siblings. I recommend using jQuery for something like this.

For jQuery versions greater than 1.3 - use jQuery LIVE() function:
http://api.jquery.com/live/

Description: This will map the data passed to your new event handlers needed

For jQuery versions 1.7 or higher - use jquery ON() function:

http://api.jquery.com/on/

Description: method attaches event handlers to the currently selected set of elements in the jQuery object. This will attach the event handler to any new element you create.

Update: 11:57 AM Tuesday: Based on your comment. You need to use bind('click') or on('') function when you SUBMIT the form.

 // First : Change your click code to this. You'll need the bind() function here.  This will make it so your events will bind to each new row

   $('#b_go').bind("click", function(){
        //some other conditions, then using ajax to post the data
        success: function (data) {
        if(data == 'success') {
        addItem(new_row, selected_table);
   }

 // Change your function to this:
    function addItem(new_item, edit_table) {
        var itemName = new_item;
        var newRow = document.createElement('tr');
        var rowCell = document.createElement('td');
        rowCell.textContent = itemName;
         $(rowCell).addClass("grid"); // Make sure GRID is the class being applied to your other TDs/TRs etc
        newRow.appendChild(rowCell);
        edit_table.appendChild(newRow);
       $(edit_table +' tr:odd td').css('background','#f9f9f9'); // Set color for all odd rows.

  }

HOW TO RELOAD TABLE:

STEP #1 - Create a new < div > layer with an ID #getDataGrid. THIS MUST WRAP AROUND YOUR TABLE.

STEP #2 - Create a new file like : data-grid.php and include the following HTML. Please also include any PHP business logic that would be needed to make the appropriate database calls to make this code successful:

<table class="table table-striped table-bordered home" id="subjects">
    <thead>
        <th>Subject Title</th>
    </thead>
    <tbody>
       <?php
        $sql = mysql_query("select Title from Subject");
        while($row = mysql_fetch_array($sql)) {
            echo "<tr><td>";
            echo $row['Title']?> <!--using html to output buttons for delete and edit for each row-->
         <?;echo "</td></tr>";
        }
            ?>
     </tbody>
</table>

STEP #3 : Update your click function:

$('#b_go').bind("click", function(){
        //some other conditions, then using ajax to post the data
        success: function (data) {
        if(data == 'success') {

        addItem(new_row, selected_table);

        $.get('data-grid.php', function(getTable) {
            $('#getDataGrid').html(getTable);
        });

   }

EXPLANATION. What this is doing on your click function is using jQuery to essentially perform a "GET" (just as PHP GET would perform). We are retrieveing our newly created data-grid.php file, and then PLACING the contents into the #getDataGrid div layer we created that wraps around the table. What this will do will actually wipe out the currently displayed table with the new displayed table.

Answer 3

Instead of only partially using a DOM approach, create the TD in javascript too.

function addItem(itemName) {

    var newRow = document.createElement('tr');
    var rowCell = documentcreateElement('td');
    rowCell.textContent = itemName;
    newRow.appendChild(rowCell);
    document.getElementById('subjects').appendChild(newRow);

}