How to save the dynamically added row using jquery php?

Question

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

My HTML on THEME-OPTIONS page

<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

Create a server side endpoint that allows a post and a get, when it is a post, update the DB, when it is a get, get the number from the DB. Then call that endpoint via a jQuery AJAX call. — Idiot211
– Idiot211, Commented Aug 5, 2013 at 3:19
I have done the same things ...used a counter variable and saved that in db using ajax... Thanks for comments ..cheerss — Vaibs_Cool
– Vaibs_Cool, Commented Aug 5, 2013 at 6:41

Yann Chabot · Accepted Answer · 2013-08-08 17:57:00Z

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
     }
   });

edited Aug 8, 2013 at 17:57

answered Aug 5, 2013 at 18:50

Yann Chabot

4,9093 gold badges43 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vaibs_Cool Over a year ago

Thanks i have done the same thing ...with my data variables and also my row counter ..

Collectives™ on Stack Overflow

How to save the dynamically added row using jquery php?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related