1

jqueryポップアップメールで特定の投稿を表示するページからカスタム投稿データを送信しようとしています.

現時点では、完成した HTML フォームと JQuery モーダル ボックスのセットアップがあります。

この js コードは次のとおりです。

jQuery(document).ready(function($){
var email = $( "#email" ),
message = $( "#message" ),
allFields = $( [] ).add( email ).add( message ),
tips = $( ".validateTips" );

$( ".email-course" )
        .button()
        .click(function() {
                $( "#dialog-form" ).dialog( "open" );
});

$( "#dialog-form" ).dialog({
    autoOpen: false,
modal: true,
width: 550,
height:260,
resizable: false,
show: 'fade',
title: 'Email course',
    buttons: {
    "Send": function() {

        //Need help here
    },
    Cancel: function() {
    $( this ).dialog( "close" );
    }
    },
    close: function() {
    allFields.val( "" ).removeClass( "ui-state-error" );
    }
});
});

そして HTML フォーム:

<div id="dialog-form" title="Email this course">
    <form>
        <fieldset>
            <label for="email">To:</label>
            <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
            <label for="email">From:</label>
            <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
            <label for="message">Message (optional)</label>
            <input type="text" name="message" id="message" value="" class="text ui-widget-content ui-corner-all" />
        </fieldset>
    </form>
</div>

そしてボタン：

<div class="right"><button class="email-course">Email this course</button></div>

私の質問は、フォームからデータを読み取る方法です。また、それらをすべてロードするページからID付きの投稿データを取得し、Wordpressのwp_emailで送信する必要がありますか? 「メッセージ (オプション)」をその特定の投稿 ID のデータとマージする必要があります。他に必要な情報があればお知らせください。前もって感謝します。

4

1 に答える 1

0

バックグラウンド：

jQuery には次の.serialize()メソッドがあります。

一連のフォーム要素を送信用の文字列としてエンコードします。

このメソッドを使用すると、個別に収集することなく、すべてのフィールド値をシリアル化できます。

たとえば、次のことができます。

$('form').serialize()

収集されたすべてのフォームフィールドと値を含む文字列を取得し、この文字列をリクエストdata: {}内のオブジェクトでサーバーに渡すことができます。$.ajax

.serialize()jqAPIのドキュメント

Send コールバックを埋める:

"Send": function() {
     //Need help here

     $.ajax({
         data        : $('#dialog-form form').serialize(),
         error       : function (jqXHR, textStatus:string, errorThrown:string) {
                     if (errorThrown) {
                           // Show message.
                     }
           },
         success     : function (response_from_server:ResponseFromServer, statusText:string, xhr) {
                     // Do post-processing here.
           },
         type        : 'POST',
         url         : ajaxurl
    });
},

ここ：

ajaxurl:「/wp-admin/admin-ajax.php」を指す AJAX クエリで使用するために WordPress によって設定される javascrip グローバル変数

$('#dialog-form form').serialize() : このメソッドは、フォームに存在するすべての正常な HTML コントロールをシリアル化し、AJAX クエリにデータとして追加するメソッドです。

ここでは、AJAX 要求を検証するための nonce チェックが欠落しているだけです。コードを単純にするためにそこには入れていません。

次に、WordPress PHP バックエンドで、好きなように処理するために、そのデータをシリアル化してキャプチャする必要があります。

それが役に立てば幸い。

于 2013-08-14T20:49:42.517 に答える