Kontaktformular in Vorlage mit jquery, validate und ajax

Ich habe eine page-contact.php für mein Kontaktformular in meiner Vorlage. Ich wollte meinem Formular die Jquery-validation und einige tolle Ajax-Aktionen hinzufügen. Dies ist bereits ein funktionierender Code in einer einfachen PHP-Seite, aber es funktioniert nicht in WordPress.

Mein Kontaktformular:

loading

die Ajax-function in functions.php

 add_action('wp_ajax_sendmail', 'sendmail'); add_action('wp_ajax_nopriv_sendmail', 'sendmail'); function sendmail() { if(isset($_POST['Submit'])) { echo 'ajax success'; } else { echo "

nothing submitted

"; } die(); }

Und meine Javascript Aktion:

 $(document).ready(function(){ $("#contact_form").validate({ rules: { name: "required", email: { required: true, email: true }, message: "required" }, messages: { name: "Please enter your name", email: { required: "Please enter your email adress", email: "Please enter your valid email adress" }, message: "Please enter a short message, what your inquiry is about" }, submitHandler: function(form) { $('#loading_icon').show(); $('#click').hide(); var params = $(form).serialize(); $.ajax ({ type: 'POST', url: '', data: params, success: function(response) { $('#response').hide(); $('#response').html(response); $('#response').fadeIn('slow'); $('#loading_icon').hide(); } }); } }); }); 

Die benötigten Dateien werden korrekt geladen (/1.10.1/jquery.min.js, jquery.validate.js), aber dieser Code gibt immer 0 zurück, obwohl ich wp_ajax_nopriv_sendmail in functions.php habe. Die Konsole gibt keinen Fehler zurück. Ich glaube, dass mir einige wp-spezifische Fakten fehlen, aber welche?

Danke im Voraus

Solutions Collecting From Web of "Kontaktformular in Vorlage mit jquery, validate und ajax"

WordPress führt Jquery im Noconflict-Modus aus. (WordPress Codex Reference) oder lese diesen kurzen Artikel, den ich vor einiger Zeit gepostet habe. Sieh es hier an .

Sie müssen ersetzen:

 $(document).ready(function(){ 

Mit diesem:

 jQuery(document).ready(function($){ 

Also alles zusammen, probiere das aus:

 jQuery(document).ready(function($){ $("#contact_form").validate({ rules: { name: "required", email: { required: true, email: true }, message: "required" }, messages: { name: "Please enter your name", email: { required: "Please enter your email adress", email: "Please enter your valid email adress" }, message: "Please enter a short message, what your inquiry is about" }, submitHandler: function(form) { $('#loading_icon').show(); $('#click').hide(); var params = $(form).serialize(); $.ajax ({ type: 'POST', url: '< ?php echo admin_url( 'admin-ajax.php' ); ?>', data: params + "&action=sendmail", success: function(response) { $('#response').hide(); $('#response').html(response); $('#response').fadeIn('slow'); $('#loading_icon').hide(); } }); } }); }); 

Die folgende Zeile liest Ihre Aktion wahrscheinlich nicht richtig, deshalb gibt sie 0 zurück

 url: '< ?php echo admin_url( 'admin-ajax.php' ); ?>', data: params + "&action=sendmail", 

Überlegen Sie, wie Sie eine AJAX-Anfrage ähnlich machen:

 // the value of 'action' is the key that will be identified by the 'wp_ajax_' hook var data = { 'action': 'my_action', 'message': 123 }; var ajaxurl = '< ?php echo admin_url('admin-ajax.php'); ?>'; $.post(ajaxurl, data, function(response) { // Output the response which should be 'Hellow World' alert(response); }); 

Dann in Ihrem callback:

 // Check if set and if the received value is 123 if (isset($_POST['message']) && $_POST['message'] == 123 ) { echo 'Hello World'; } // Always exit to avoid further execution exit(); 

Ich habe ein sehr einfaches Tutorial gefunden, das ziemlich genau beschreibt, wie man AJAX in seinem WordPress-Blog richtig implementiert: AJAX in WordPress implementieren