私の.jsファイルの下のコードでは、最初の関数save_audition
がうまく機能しています。私はちょうどコピー/貼り付け、いくつかの変数を変更した2番目のものは、fまたは何らかの理由ではありません。私はいくつかのトラブルシューティングを行い、.htmlと同様に.phpファイル(手動で呼び出すとうまくいく)を除外し、何らかの理由でこのスクリプトが起動しないと判断しました。AJAX呼び出しが呼び出されない
これはAJAXを使用した初めてのプロジェクトです。そのため、非常にシンプルで、わからないことがあります。 FYI、私は管理者-ajax.php
EDITを使用してワードプレスのAJAXフレームワーク内で働いている:ここではメインのプラグインファイルにペーストビンです:ここではhttp://pastebin.com/AaJ6QqTx
は.jsファイルからコードです。最初のon( 'クリック')イベント(save_audition)は正常に動作しています.2番目の(hide_audition)は、return false;
がリンクを起動しないように動作しますが、実際のAJAXクリックイベントは発生していません。
//Save (or remove) an audition from the user's saved auditions meta using ajax
$('.save-audition').on('click', function() {
var post_id = $(this).attr('data-post_id');
var nonce = $(this).attr('data-nonce');
var clicked = $(this);
$.ajax({
type : 'post',
dataType : 'json',
url : myAjax.ajaxurl, //we can use this value because in our php file we used wp_localize_script
data : {action: 'tps_save_audition', post_id : post_id, nonce: nonce},
success: function(response) {
$('#alerts').append('<div class="alert"><div class="alert-icon"><i class="fa fa-exclamation"></i></div><div class="alert-message">'+response.message+'</div><div class="close"><i class="fa fa-close"></i></div></div>');
$('#alerts .alert').fadeIn(400);
if(response.type == 'success') {
clicked.children('span').children('.fa-stack-2x').addClass('fa-check');
clicked.children('span').children('.fa-stack-1x').addClass('saved');
} else if (response.type = 'removed') {
clicked.children('span').children('.fa-stack-2x').removeClass('fa-check');
clicked.children('span').children('.fa-stack-1x').removeClass('saved');
} else {
alert(response.message);
}
}
})
return false;
});
//Hide an audition from the user's view by saving it as user_meta
$('.hide-audition').on('click', function() {
var post_id = $(this).attr('data-post_id');
var nonce = $(this).attr('data-nonce');
var clicked = $(this);
$.ajax({
type : 'post',
dataType : 'json',
url : myAjax.ajaxurl, //we can use this value because in our php file we used wp_localize_script
data : {action: 'tps_hide_audition', post_id : post_id, nonce: nonce},
success: function(response) {
$('#alerts').append('<div class="alert"><div class="alert-icon"><i class="fa fa-exclamation"></i></div><div class="alert-message">'+response.message+'</div><div class="close"><i class="fa fa-close"></i></div></div>');
$('#alerts .alert').fadeIn(400);
if(response.type == 'success') {
clicked.children('i').css('color', 'red');
} else {
alert(response.message);
}
}
})
return false;
});
私は$(これ)が実際にあなたが思う 'これ'ではないというニックルを賭けます。デベロッパーコンソールを開き、 'これ'が何であるかを見て、あなたが予想していなかった範囲に 'this'が入るのはとても簡単です。クロージャーとコールバックの外側。スコープをバインドするいくつかの適切なjquery方法があります。私は頭の上からそれを思い出すことができません。 – PandemoniumSyndicate
ええと、あるグーグルの後、私はあなたが正しいと思う。私はAJAX呼び出しの外で$(これ)に変数を設定しました。これは多くのスレッドで提案された解決策ですが、他に何かがあるはずです。私は検索を続けます。先端に感謝します。たぶん私はPayPalあなたニックル;) – Eckstein
私はPHPのコードはここでは関連しないと思う、結果のHTMLを投稿してみてください。いくつかのPHP変数がhtml属性で混乱しているかどうかを確認するには – Jacopo