How to save the dynamically added row using jquery php?

2 Views

I am trying to add dynamic rows using jQuery in wordpress theme options page ..

My HTML on THEME-OPTIONS page

Read More
<a href="#" title="" class="add-author">Add Author</a>

<table class="authors-list" id="tablebody" border="1" bordercolor="#ddd" 
style="background-color:#F5F5F5" width="100%" cellpadding="3" cellspacing="3">
    <tr><td>Designation</td><td>StartDate</td><td>EndDate</td></tr>
    <tr>
        <td><input style="width:200px" type="text" name="designation"/></td>
        <td><input style="width:200px" type="text" id="start_date" name="start_date"/></td>
        <td><input style="width:200px" type="text" id="end_date" name="end_date"/></td>
    </tr>
</table>

My jQuery CODE for adding the rows 

var counter = 1;
jQuery('a.add-author').click(function(event){
alert("asdas");
    event.preventDefault();
    counter++;
    var newRow = jQuery('<tr><td><input style="width:200px" type="text" name="designation' +
counter + '"/></td><td><input style="width:200px" type="text" id="start_date'+ counter +'" name="start_date' +
        counter + '"/></td><td><input style="width:200px" id="end_date'+ counter +'" type="text" name="end_date' +
        counter + '"/></td></tr>');
    jQuery('table.authors-list').append(newRow);
    jQuery("#start_date"+ counter).datepicker();
    jQuery("#end_date"+ counter).datepicker();

});

Working DEMO of addition of rows

How can i save the counter of no of rows in database of wordpress …and how can i retrieve the no of rows added ..Plz help me i m stuck… I m not making any new table in wordpress database. I wud like to save this in theme option database by update_option or add_option so i have also tried using the ajax request but dont know how to use update_option on those page .. Thanks a lot

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. I don’t really like to use a counter for this, even tho it’s probably the lightest way, I believe that the safest way in jquery would be simply to do an ajax request after you added your row that way (right after you append):

        //The first table row is the header so you remove this row from the count
    rowNumber = ($('#myTable tr').length - 1);

    Then, you simply save this number using ajax in your database this way :

       jQuery.ajax({
     type: 'post',
     url: 'save.php' //In this file, you'll do a php/mysql request that will do this SQL request *** UPDATE your_table SET your_table_column_where_you_want_to_set_it = $_POST['rownumber'] WHERE current_user_id = unique_user_id *** Of course, you might also save the date in this row but I let you take care of the request update now that you understand the basics
     , 
     data: {
        rownumber: rowNomber // This will be the $_POST['rownumber'] on the save.php file
      }, 
     success: function() {
        // Action if it works (popup saying new field saved ? or something like this)
     },
     error: function() {
        //If it doesn't work, do an action
     }
   });