AJAX call in wordpress template

Question

У меня возникла проблема с получением моего рабочего приложения php/javascript/ajax в моей теме Wordpress. Я использую его для своих пользователей, поэтому не на панели администратора.

Что я уже делал: Я назвал файл JavaScript в своих functions.php. И его загрузка прекрасна. Но когда я открываю свой основной файл php, он не вызывает вызов ajax.

У меня есть 4 страницы: response.php

• response.php (Это один работает отлично.)
• одной page.php (Это один также работает отлично.)
• voedingsschema .js (Это один работает без WordPress.)
• function.php (я не знаю, если я сделал это право.)

Я надеюсь, что я дал достаточно информации.

function.php код из моего шаблона выглядит следующим образом:

function fitnesszone_child_scripts(){ 
    wp_enqueue_script('voedingsschema js', get_stylesheet_directory_uri() . '/js/voedingsschema.js'); 
} 
add_action('wp_enqueue_scripts', 'fitnesszone_child_scripts'); 

Javascript код:

<script type="text/javascript"> 
$(document).ready(function() { 

    //##### send add record Ajax request to response.php ######### 
    $("#FormSubmit").click(function (e) { 
      e.preventDefault(); 
      if($("#contentText").val()==='') 
      { 
       alert("Please enter some text!"); 
       return false; 
      } 

      $("#FormSubmit").hide(); //hide submit button 
      $("#LoadingImage").show(); //show loading image 



      var myData = { 
      content_txt: $('#contentText').val(), 
      content_txt2: $('#contentText2').val(), 
      }; 
      jQuery.ajax({ 
      type: "POST", // HTTP method POST or GET 
      url: "http://website.com/wp-content/themes/fitnesszone-child/response.php", //Where to make Ajax calls 
      dataType:"text", // Data type, HTML, json etc. 
      data:myData, //Form variables 
      success:function(response){ 
       $("#responds").append(response); 
       $("#contentText").val(''); //empty text field on successful 
       $("#FormSubmit").show(); //show submit button 
       $("#LoadingImage").hide(); //hide loading image 

      }, 
      error:function (xhr, ajaxOptions, thrownError){ 
       $("#FormSubmit").show(); //show submit button 
       $("#LoadingImage").hide(); //hide loading image 
       alert(thrownError); 
      } 
      }); 
    }); 

    //##### Send delete Ajax request to response.php ######### 
    $("body").on("click", "#responds .del_button", function(e) { 
     e.preventDefault(); 
     var clickedID = this.id.split('-'); //Split ID string (Split works as PHP explode) 
     var DbNumberID = clickedID[1]; //and get number from array 
     var myData = 'recordToDelete='+ DbNumberID; //build a post data structure 

     $('#item_'+DbNumberID).addClass("sel"); //change background of this element by adding class 
     $(this).hide(); //hide currently clicked delete button 

      jQuery.ajax({ 
      type: "POST", // HTTP method POST or GET 
      url: "http://website.com/wp-content/themes/fitnesszone-child/response.php", //Where to make Ajax calls 
      dataType:"text", // Data type, HTML, json etc. 
      data:myData, //Form variables 
      success:function(response){ 
       //on success, hide element user wants to delete. 
       $('#item_'+DbNumberID).fadeOut(); 
      }, 
      error:function (xhr, ajaxOptions, thrownError){ 
       //On error, we alert user 
       alert(thrownError); 
      } 
      }); 
    }); 

}); 
</script> 

Answer 1

Давайте попробуем этот путь для реализации Ajax в WordPress

functions.php

function fitnesszone_child_scripts(){ 
    wp_enqueue_script('voedingsschema_js', get_stylesheet_directory_uri() . '/js/voedingsschema.js'); 
    wp_localize_script('voedingsschema_js', 'voedingsschema_vars', array('ajaxurl' => admin_url('admin-ajax.php'))); 
} 
add_action('wp_enqueue_scripts', 'fitnesszone_child_scripts'); 

function fitnesszone_implement_ajax(){ 
    include(TEMPLATEPATH .'/response.php'); 
} 
add_action('wp_ajax_fitnesszone', 'fitnesszone_implement_ajax'); 
add_action('wp_ajax_nopriv_fitnesszone', 'fitnesszone_implement_ajax'); 

voedingsschema.js

var contentTxt: $('#contentText').val(); 
var contentTxt2: $('#contentText2').val(); 

$.ajax({ 
    url: voedingsschema_vars.ajaxurl, 
    type: 'POST', 
    data: 'action=fitnesszone&context_txt=contextTxt&context_txt2=contextTxt2, 
    success: function(results){ 
     // YOUR CODE 
    }, 
}); 

Не заворачивайте яваскрипт кода в voedingsschema.js в <script></script> тега. Это зарезервировано, когда вы кладете код яваскрипта внутри HTML