Manipulate data in jQuery AJAX success: function

Question

I have this function

jQuery.ajax({
    type: "POST",
    url: jQuery("#exam_form").attr( 'action' ),
    data: jQuery("#exam_form").serialize(),
    success: function(result){
        //Add row
        table.append(result);

        console.dir(result);
}
});

It outputs this to the console

<tr>
<td class="tg-yw4l">01/03/2017</td>
<td class="tg-yw4l">P123</td>
<td class="tg-yw4l">Test Exam P123</td>
<td class="tg-yw4l">AM</td>
<tr>

I am trying to add <input> fields into the table data, which take the value from the <td> so the HTML would look like this instead:

<tr>
<td class="tg-yw4l"><input type="text" name="date" value="01/03/2017"> 01/03/2017</td>
<td class="tg-yw4l"><input type="text" name="date" value="P123">P123</td>
<td class="tg-yw4l"><input type="text" name="date" value="Test Exam P123">Test Exam P123</td>
<td class="tg-yw4l"><input type="text" name="date" value="AM">AM</td>
<tr>

The full code is posted below:

<form id="exam_form" method="get" action="<?php echo     get_stylesheet_directory_uri(); ?>/inc/ajax_submit.php">

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#exam_board').change(function() {
        var $examBoard=jQuery('#exam_board').val();
        // call ajax
        jQuery("#exam_level").empty();
        jQuery.ajax({
            url:"<?php bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php",     
            type:'POST',
            data:'action=my_special_ajax_call&exam_boardid=' + $examBoard,
            success:function(results){
                //alert(results);
                jQuery("#exam_level").removeAttr("disabled");       
                jQuery("#exam_level").append(results);  
            }
        });                                    
});

jQuery('#exam_level').change(function() {
    var $examLevel=jQuery('#exam_level').val();
    jQuery( "#loading-animation").show();
    // call ajax
    jQuery("#exam_code").empty();
    jQuery.ajax({
        url:"<?php bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php",     
        type:'POST',
        data:'action=my_special_ajax_call&exam_levelid=' + $examLevel,
        success:function(results){
            //alert(results);
            jQuery("#exam_code").removeAttr("disabled");       
            jQuery("#exam_code").append(results);  
        }
    });                                    
});

});

</script>

<?php 
    $args = array(
        'show_count' => 0,
        'selected' => -1,
        'hierarchical' => 1,
        'exclude' => 1,
        'show_option_none' => 'Exam Board',
        'name' => 'exam_board',
        'depth' => 1,
        'taxonomy' => 'examination'

    );
    wp_dropdown_categories($args);
?>

<select name="exam_level" id="exam_level" disabled="disabled"></select>
<select name="exam_code" id="exam_code" disabled="disabled"></select>
<a id="target" href="#">Add Exam</a>
</form>

<table id="myTable">
    <tbody>
        <tr><td>Exam Board</td><td>Exam Level</td><td>Exam Code</td>    <td>AM/PM</td></tr>
    </tbody>
</table>

<script>
jQuery( "#target" ).click(function() {
    var tbody = jQuery('#myTable').children('tbody');
    //Then if no tbody just select your table 
    var table = tbody.length ? tbody : jQuery('#myTable');
    jQuery.ajax({
    type: "POST",
    url: jQuery("#exam_form").attr( 'action' ),
    data: jQuery("#exam_form").serialize(),
    success: function(result){
        //Add row
        table.append(result);
            console.dir(result);
        }
});
});

</script>

This is the function for the AJAX in functions.php

function implement_ajax() {
    if(isset($_POST['exam_boardid'])){
        $categories=  get_categories('parent='.$_POST['exam_boardid'].'&hide_empty=0'.'&taxonomy=examination'); 
      foreach ($categories as $cat) {
          $option .= '<option value="'.$cat->term_id.'">';
          $option .= $cat->cat_name;
          $option .= '</option>';
      }
      echo '<option value="-1" selected="selected">Exam Level</option>'.$option;
    die();
    } // end if
if(isset($_POST['exam_levelid'])){
    $categories=  get_categories('parent='.$_POST['exam_levelid'].'&hide_empty=0'.'&taxonomy=examination'); 
    foreach ($categories as $cat) {
        $option .= '<option value="'.$cat->term_id.'">';
        $option .= $cat->cat_name;
        $option .= '</option>';
    }
    echo '<option value="-1" selected="selected">Exam Code</option>'.$option;
    die();
} // end if


}
add_action('wp_ajax_my_special_ajax_call', 'implement_ajax');
add_action('wp_ajax_nopriv_my_special_ajax_call', 'implement_ajax'); //for users that are not logged in.

so basically you have got a HTML string being returned from the server? You'll need to use JS string functions to find the right parts of the string and insert the extra markup. Probably a lot easier to change the server output at source - either make it return the relevant HTML, or make it return the data as JSON so you can then build whatever UI you want on top of it. — ADyson
– ADyson, Commented Feb 27, 2017 at 11:57
@ADyson I have put the full code in for context now. Which parts do I need to look at to change the server output at source? — Ian Butler
– Ian Butler, Commented Feb 27, 2017 at 12:24
none of that PHP is outputting tables, it seems to be outputting <option> elements. What URL does your code jQuery("#exam_form").attr( 'action' ) resolve to? You need to find the code which runs when that URL is called. — ADyson
– ADyson, Commented Feb 27, 2017 at 12:51
@ADyson Thanks, there is another file that the URL resolves to. I can change the HTML output at source there — Ian Butler
– Ian Butler, Commented Feb 27, 2017 at 12:55

Prasun Jajodia · Accepted Answer · 2017-02-27 12:04:32Z

1

A simple hack solution would be to do the following

jQuery.ajax({
    type: "POST",
    url: jQuery("#exam_form").attr( 'action' ),
    data: jQuery("#exam_form").serialize(),
    success: function(result){
        //Add row
        table.append(result);

        // append inputs to last appended rows
        tr = table.find("tr").last();
        tds = tr.find("td");
        jQuery.each(tds, function(index, td){
          jQuery(td).html('<input type="text" name="date" value="'+jQuery(td).html()+'">');
        })
        console.dir(result);
    }
});

However I agree with @ADyson on the server output part.

answered Feb 27, 2017 at 12:04

Prasun Jajodia

4703 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

Manipulate data in jQuery AJAX success: function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related