it-swarm.com.de

Verwenden AJAX in einem Plugin Formular einreichen - WIRKLICH verwirrt

Probleme bei der Verwendung aller Ajax-Hooks und -Funktionen von Wordpress.

Diesen Beitrag gelesen: 5 Tipps für die Verwendung von Ajax in Wordpress

Wurde jedoch verwirrt, nachdem der gesamte Code ausprobiert und auf ein Ajax-Formular angewendet wurde.

Ich rufe eine Funktion aus meiner Plugin-Klasse auf, um ein Echo von den einzelnen Postseiten für Benutzer auf "Swoon" zu übermitteln. Das Formular wird einwandfrei gedruckt. Hier ist der Formularcode:

//the html form for the front end
function ds_swoons_form(){
global $post, $current_user;
get_currentuserinfo();

    $form = '<div id="swoon-response">';
    $form .= '</div>';

    $form .= '<form id="entry_swoon_form" name="entry_swoon_form" action="" method="POST">';
        $form .= '<input type="hidden" name="ds_postid" value="'.$post->ID.'" />';
        $form .= '<input type="hidden" name="ds_userid" value="'.$current_user->ID.'" />';
        $form .= '<input type="submit" value="Swoon" class="swoon-submit" />';
    $form .= '</form>';

return $form;
}//end ds_swoons_form

Meine Warteschlangen:

wp_enqueue_script('json-form');

// embed the javascript file that makes the swoons AJAX request
wp_enqueue_script( 'swoon_ajax_request', plugins_url('ds-swoons/js/swoon-ajax-form.js'), array( 'jquery' ) );

// declare the URL to the file that handles the AJAX request (wp-admin/admin-ajax.php)
wp_localize_script( 'swoon_ajax_request', 'SwoonAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

//add the AJAX action
add_action( 'wp_ajax_swoons_submit_action', array('DS_Swoons','ds_ajax_swoons_form_submit') );

Und mein Javascript:

jQuery('#entry_swoon_form').ajaxForm({
target: '#swoon-response',
dataType: 'html',
data: {
       action: 'swoons_submit_action'
      },
url: SwoonAjax.ajaxurl,
success : function(responseText) {      
    jQuery('#swoon-response').html('Swooned!');
}
});

Ich bin ein Neuling, wenn es um AJAX geht. Der Artikel, den ich las, war gut, bis ich zum Ende kam, wo er eine AjaxForm-Beispielanforderung zeigte und ich mich verirrte.

Die Ajax-Formularfunktion wird nie ausgeführt und die Seite wird nur neu geladen. SO Ich vermute, dass eine meiner Enqueue-Funktionen nicht korrekt ist.

Vielen Dank im Voraus.

BEARBEITEN ----------------------------------------- ------- Neuer Code für die jQuery.post-Methode - funktioniert aber immer noch nicht

jQuery(document).ready(function(){
jQuery('.swoon-submit').click(function(){
    jQuery.post(
        // see tip #1 for how we declare global javascript variables
        SwoonAjax.ajaxurl,
        {
            // here we declare the parameters to send along with the request
            // this means the following action hooks will be fired:
            // wp_ajax_nopriv_myajax-submit and wp_ajax_myajax-submit
            action : 'swoons_submit_action',
            //nonce for validation
            //swoonNonce : SwoonAjax.swoonNonce,
            // other parameters can be added along with "action"
            postid : SwoonAjax.postid,
            userid : SwoonAjax.userid
        },
        function( response ) {
            alert( response );
        }
    );
});
console.log(SwoonAjax.ajaxurl)
});

In FireBug wird ein sehr schneller Fehler angezeigt, aber ich kann nicht sehen, was schnell genug passiert, bevor die Anforderung endet. Und es bleibt kein Fehler, nachdem die .post ausgeführt wurde. In der Datenbank werden keine Daten aktualisiert, daher weiß ich, dass sie nicht ausgelöst werden.

Vielen Dank

EDIT 2 ------------------------------------------------ -----------------

Ich habe das Formular zum Absenden erhalten und es aktualisiert die Datenbank unter Verwendung des folgenden Codes:

jQuery(document).ready(function(){
jQuery('.swoon-submit').click(function(){
    var $form = $( 'form#entry_swoon_form' ),
        postid = $form.find( 'input[name="ds_postid"]' ).val(),
        userid = $form.find( 'input[name="ds_userid"]' ).val();
    jQuery.post(
        // see tip #1 for how we declare global javascript variables
        SwoonAjax.ajaxurl,
        {
            // here we declare the parameters to send along with the request
            // this means the following action hooks will be fired:
            // wp_ajax_nopriv_myajax-submit and wp_ajax_myajax-submit
            action : 'swoons_submit_action',
            //nonce for validation
            //swoonNonce : SwoonAjax.swoonNonce,
            // other parameters can be added along with "action"
            ds_postid: postid,
            ds_userid: userid

        },
        function( response ) {
            alert( response );
        }
    );
    return false;
});

Jedoch: Ich kann nicht scheinen, die Formularfeldwerte (versteckt) zu erhalten, um an die PHP Funktion für DB-Einfügung gesendet zu werden. Die Informationen werden in der Firebug-Konsole als gesendet angezeigt, aber es gelangen keine Informationen zur Funktion PHP. Ich denke, es hat etwas damit zu tun, wie ich die Felder an die Funktion PHP sende, bin mir aber nicht sicher. Vielen Dank!

3
dkmojo

Dinge, die Sie überprüfen können:

  1. Zeigen Sie die Seitenquelle an, und suchen Sie nach Ihren js-Dateien, ob sie enthalten sind oder nicht, und ob ihre Reihenfolge korrekt ist.
  2. Verwenden Sie console.log(SwoonAjax.ajaxurl), um zu überprüfen, ob in Ihrer js-Datei der richtige Pfad angegeben ist.
  3. Wechseln Sie in Firebug zur Registerkarte Console und versuchen Sie dann, Ihre AJAX -Anforderung auszulösen. Hier sehen Sie die Verarbeitung und ggf. Fehler.
  4. Versuchen Sie es mit der jquery.post-Methode von jQuery für AJAX. Es ist einfacher.

Diese Überprüfungen helfen Ihnen, das Problem zu identifizieren.

Ein kurzer Tipp: Ändern Sie plugins_url('ds-swoons/js/swoon-ajax-form.js') in plugins_url('js/swoon-ajax-form.js', __FILE__). Dadurch erhalten Sie den richtigen Plugin-Ordner.

4

Da Sie diese Funktion zum Binden des WordPress-Ajax add_action( 'wp_ajax_swoons_submit_action', array('DS_Swoons','ds_ajax_swoons_form_submit') ); verwendet haben, müssen Sie eine Aktionsvariable mit dem Namen swoons_submit_action übergeben. Andernfalls wird WordPress admin-ajax.php es ablehnen.

Würde es Ihnen etwas ausmachen, dieses Snippet zum Senden von Daten zu verwenden?

$('#entry_swoon_form').submit(functions() {
    var data = $(this).serialize();
    $.ajax({
        type: 'post',
        url: ajaxurl,
        dataType: 'json',
        data: data + '&action=swoons_submit_action',
        cache: false,
        success: function(response){
            console.log(response);
        }
    }); 
});
1
Tareq