Wordpress前端Ajax

Question

I'm currently developing a plugin that renders it's own pages so the form submissions for the admin occur outside of the admin panel. I would like to create instant updates on form submission like you see in the Wordpress admin panel.

I have read a million tutorials and I just cant seem to get my head around, I'm hoping someone can take the time to explain to me, using this example:

I would like a form to add a contact. The form asks for "Contact Name", "Contact Type", "Contact Number" and a hidden field of "Job ID". I would like to load all contacts already in the database for this job and I would like it to refresh when you add a new contact.

Thanks in advanced, I really need some help!

JS:

    jQuery(document).on("click", "#submitcontact", function(e){

    e.preventDefault();
    jQuery.ajax({
        url: MyAjax.ajaxurl,
        type: "POST",
        data: {
            action: "tm_add_contact",
            contactname: jQuery("#contactname").val(),
            contacttype: jQuery("#contacttype").val(),
            contact: jQuery("#contact").val(),
            jobnumber: jQuery("#jobnumber").val()
        },
        success: function(data){
           alert("success " + data);
        },
        error: function(e){
             alert("error " + e);
        }
    });

});

Form:

  <button type="button" class="btn btn-success pull-right" data-toggle="popover" title="Add Contact" data-placement="left" data-html='true' data-content='
                            <form>
                              <div class="form-group">
                                <label for="contactname">Name</label>
                                <input type="text" class="form-control" id="contactname" name="contactname" placeholder="Jane Doe">
                              </div>
                              <div class="form-group">
                                <label for="contacttype">Type</label>
                                <select class="form-control" id="contacttype" name="contacttype">
                                  <option>Landline</option>
                                  <option>Mobile</option>
                                  <option>Buisness</option>
                                  <option>Email</option>
                                  <option>Fax</option>
                                </select>
                              </div>
                              <div class="form-group">
                                <label for="contact">Contact</label>
                                <input type="text" class="form-control" id="contact" name=contact placeholder="">
                                <input type="hidden" id="jobnumber" name="jobnumber" value="<?php echo $job->JobNumber ?>">
                              </div>
                              <button type="button" id="submitcontact" name="submitcontact" class="btn btn-default"><i class="fa fa-plus" aria-hidden="true"></i> Add Contact</button>
                            </form>   
                                '><i class="fa fa-plus" aria-hidden="true"></i> Add Contact</button>

Function:

    function tm_add_contact(){

$contactname = $_POST['contactname'];
$contacttype = $_POST['contacttype'];
$contact = $_POST['contact'];
$jobnumber = $_POST['jobnumber'];
$date = current_time( 'mysql' );
global $wpdb;
$table_name = $wpdb->prefix . 'trademanager_job_contacts';
$wpdb->insert(
    $table_name,
    array(
        'JobNumber' => $jobnumber,
        'ContactName' => $contactname,
        'Type' => $contacttype,
        'Contact' => $contact,
        'DateAdded' => $date
    ),
    array(
        '%s'
    )
);

echo "HELLO WORLD!!!";

die();
return true;
}
//
add_action('tm_ajax', 'tm_add_contact'); // Call when user logged in
add_action('tm_ajax', 'tm_add_contact'); // Call when user in not logged in

UPDATE:

I was using the wrong actions above and the incorrect names. The form now works, however I still do not understand how to show results on submission without refreshing the page...

Answer 1

Try using ajaxForm jquery plugin. http://malsup.com/jquery/form/#ajaxForm

Afterwards using a callback:

function showResponse(response){
      jQuery('.datalist > tbody').prepend(response);
}

Note: format the response in backend accordingly using tables. You can even clear the form after a successful submittion.

Or without ajaxForm plugin:

jQuery('form').on('submit', function(event){
    event.preventDefault();
    var data = $(this).serialize();
    var form = $(this);
   // than use $.ajax

    $.post(url,data,function(response){            
        jQuery('.your_table > tbody').append(response);
        //using previously defined form variable, because this is now post object
        form[0].reset();

    });
   // or use: return false
});

For database results use

$db_contacts = $wpdb->get_results('SELECT * FROM your_table ORDER BY id');

Then:

foreach($db_contacts as $contact){
   echo $contact->contactname;
}