WordpressフロントエンドAjax

Question

私は現在、それ自身のページをレンダリングするプラグインを開発しています。そのため、管理者用のフォーム提出は管理パネル外で行われます。あなたがWordpressの管理パネルに表示されているように、フォーム提出の即時更新を作成したいと思います。

私は百万のチュートリアルを読んでいると私はちょうど周りに私の頭を取得するように見えるカント、私は誰かがこの例を使用して、私に説明する時間を取ることができます願っています：私は追加するためのフォームを希望

連絡先。 フォームは、「担当者名」、「担当者タイプ」、「担当者番号」、および「ジョブID」の非表示フィールドを要求します。私はこの仕事のために既にデータベースに入っているすべての連絡先を読み込みたいと思います。あなたが新しい連絡先を追加するときに更新したいと思います。

アドバンスで感謝します。私は本当に助けが必要です！

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

}); 

フォーム：

<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 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：

私は上記の間違った行動や間違った名前を使用していました。フォームは現在機能しますが、私はまだページを更新せずに結果を表示する方法を理解していません...

Answer 1

ajaxForm jqueryプラグインを使用してみてください。 http://malsup.com/jquery/form/#ajaxForm

その後コールバックを使用して：

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

注テーブルを使用してそれに応じてバックエンドで応答をフォーマットします。提出が成功した後でもフォームをクリアすることさえできます。

またはajaxFormプラグインなし：データベースの結果を得るために

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

その後

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

を使用します。

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