Ajax & WordPress am Frontend - Datenbank nicht aktualisiert

Question

Also arbeite ich an einer WordPress-Website. Es fällt mir etwas schwer, die Benutzereingaben zu erhalten, um die Datenbank zu aktualisieren.

JS:

var ID = $(this).attr('id'); 
var name = $("#name_input_"+ID).val(); 
var createDate = $("#created_input_"+ID).val(); 
var stats = $("#status_input_"+ID).val(); 
var dateExpire = $("#disbanded_input_"+ID).val(); 
var dataString = 'id=' + ID + '&name=' + name + 
'&createDate=' + createDate + '&stats=' + stats + '&dateExpire=' + dateExpire; 

// can place loading image here 

if (name.length > 0 || createDate.length > 0 || 
stats.length > 0 || dateExpire.length > 0) { 
    $.ajax({ 
    type: "POST", 
    url: "../edit-items.php", 
    data: dataString, 
    cache: false, 
    error: function(xhr, status, error) { 
     var err = eval("(" + xhr.responseText + ")"); 
     alert(err.Message); 
    }, 
    success: function (html) { 
     $("#name_"+ID).html(name); 
     $("#createDate_"+ID).html(createDate); 
     $("#stats_"+ID).html(stats); 
     $("#dateExpire_"+ID).html(dateExpire); 
    } 
    }); 
} else { 
    alert("Enter text to make an edit."); 
} 
}); 

PHP (edit-items.php)

global $wpdb; 

if($_POST['id']) { 
    $id = esc_sql($_POST['id']); 
    $name = esc_sql($_POST['name']); 
    $created = esc_sql($_POST['createDate']); 
    $stats = esc_sql($_POST['stats']); 
    $dateExpire = esc_sql($_POST['dateExpire']); 

    $query = "UPDATE items SET itemName='$name', createDate='$created', itemStats='$stats', dateExpire='$dateExpire' WHERE committee_id='$id';" 

    $wpdb->query($wpdb->prepare($query)); 
    } 

Immer wenn ich versuche die Tabelle zu aktualisieren, ich bin in der Lage erfolgreich am vorderen Ende zu tun, sondern auf Aktualisieren, die Daten ändern sich nicht. Durch das Überprüfen der Datenbank wird außerdem überprüft, dass die Daten nicht geändert wurden ... Es scheint, als ob der "Erfolg" im AJAX übergeben wird, aber aus irgendeinem Grund wird die Datenbank nicht aktualisiert.

Jeder Einblick darauf wäre hilfreich!

Bearbeiten Entschieden, um mit der admin-ajax.php Methode zu starten. Alles ist gleich, außer ich die URL in den JS url: "/wp-admin/admin-ajax.php", und der Code von edit-items.php ist jetzt in functions.php wie so geändert:

function editCommittee() { 
    global $wpdb; 

if($_POST['id']) { 
    $id = esc_sql($_POST['id']); 
    $name = esc_sql($_POST['name']); 
    $created = esc_sql($_POST['createDate']); 
    $stats = esc_sql($_POST['stats']); 
    $dateExpire = esc_sql($_POST['dateExpire']); 

    $wpdb->update('itemsTable', 
       array(
        'name' => $name 
       ), 
       array(
        'committee_id' => $id 
       ), 

       array(
        '%s' 
       ) 
); 
    echo $id; 
    exit(); 
    } 
} 
add_action('wp_ajax_editItems', 'editItems'); 

Answer 1

Ok, also zuerst lokalisieren Sie Ihre ajaxurl Objekt

add_action('wp_enqueue_scripts', 'frontend_enqueued_scripts'); 

/** 
* Localization object 
* 
* @since 1.0.0 
*/ 
function frontend_enqueued_scripts() { 

    wp_enqueue_script('script', get_template_directory_uri() . '/js/custom.js', array('jquery'), '', true); 
    wp_localize_script('script', 'ajax_object', array(
     'ajaxurl' => admin_url('admin-ajax.php'), 
    )); 
} 

Wenn Sie haben, in Ihrem functions.php einem Ort, wo Sie Front-End-Skripte Einreihen platzieren Sie den wp_enqueue_script und wp_localize_script Teil dort. Auch wenn Sie Ihre Ajax aufrufen Javascript in eine Datei, die nicht custom.js aufgerufen wird, ändern Sie den Namen, um darauf zu zeigen. Ich verwende immer custom.js als eine Datei, wo ich alle meine themenbezogenen Javascript speichern.

Der obige Code erstellt ein ajax_object Objekt an Ihrem Frontend, das für den Code innerhalb der custom.js verfügbar sein wird, da Sie es an das Skript angehängt haben. Die Handles in der eingereihten Datei und das lokalisierte Skript (in unserem Fall script) müssen identisch sein, damit dies funktioniert.

Dann können Sie, in functions.php Datei oder in einer Datei enthalten erstellen, wo Sie Ihre Ajax-Funktionen setzen, eine Callback-Funktion

/** 
* Front and back end ajax hooks. 
*/ 
add_action('wp_ajax_edit_committee', 'edit_committee'); 
add_action('wp_ajax_nopriv_edit_committee', 'edit_committee'); 

/** 
* Ajax callback function 
* 
* @since 1.0.0 
*/ 
function edit_committee() { 
    global $wpdb; 

    if (isset($_POST['id'], $_POST['committee_nonce']) && wp_verify_nonce(sanitize_key($_POST['committee_nonce']), 'committee_nonce_action') && '' !== $_POST['id']) { // Input var okay. 
     $id   = (isset($_POST['id']) && '' !== $_POST['id']) ? sanitize_text_field(wp_unslash($_POST['id'])); : ''; // Input var okay. 
     $name  = (isset($_POST['name']) && '' !== $_POST['name']) ? sanitize_text_field(wp_unslash($_POST['name'])); : ''; // Input var okay. 
     $created  = (isset($_POST['create_date']) && '' !== $_POST['create_date']) ? sanitize_text_field(wp_unslash($_POST['create_date'])); : ''; // Input var okay. 
     $stats  = (isset($_POST['stats']) && '' !== $_POST['stats']) ? sanitize_text_field(wp_unslash($_POST['stats'])); : ''; // Input var okay. 
     $date_expire = (isset($_POST['date_expire']) && '' !== $_POST['date_expire']) ? sanitize_text_field(wp_unslash($_POST['date_expire'])); : ''; // Input var okay. 

     $updated = $wpdb->update('itemsTable', array( 'name' => $name), array('committee_id' => $id), array('%s')); 
     if(false !== $updated) { 
      wp_die('success'); 
     } else { 
      wp_die('fail'); 
     } 

    } 
} 

ich die Hygienisierung Kontrollen hinzugefügt. Es ist wichtig, dass Sie ein Nonce in Ihr Formular einfügen, mit dem Sie die Daten übermitteln.

Sie können es hinzufügen, indem

wp_nonce_field('committee_nonce_action', 'committee_nonce'); 

innerhalb des <form> Element auf dem vorderen Ende setzt. Dies erzeugt eine nonce, was eine gute Sicherheitsmaßnahme ist, besonders wenn Sie in die Datenbank schreiben.

Die Callback-Funktion prüft, ob die Nonce gesetzt ist, ob die Variable $_POST['id'] gesetzt und nicht leer ist, und prüft zuerst die Nonce.

Dann können Sie mit der Ausführung der Funktion fortfahren.

Ich habe alle $POST Variablen dort gelassen, obwohl Sie sie nicht verwenden, aber vielleicht möchten Sie sie später verwenden. Ich habe sie auch hygienisiert und entblößt.

Der // Input var okay. Kommentar ist für phpcs Zwecke, können Sie das ignorieren.

Dann machen Sie das Update vor. Wenn Sie die itemsTable in der Datenbank haben, sollte sie diese mit den von Ihnen angegebenen Daten aktualisieren.

Der letzte, aber nicht der letzte ist der JavaScript-Code. Ich nahm an, dass Sie den Ajax-Aufruf auf Knopfdruck ausführen. Dies muss geändert werden für sie (I #update_button verwendet, werden Sie die korrekte ID oder Klasse Ihres Schaltfläche platzieren) arbeiten

jQuery(document).ready(function($) { 
    'use strict'; 

    $('#update_button').on('click', function(e){ 
     e.preventDefault(); 

     var ID = $(this).attr('id'); // Button that is clicked is in $(this) object 
     var name = $('#name_input_'+ID).val(); 
     var create_date = $('#created_input_'+ID).val(); 
     var stats = $('#status_input_'+ID).val(); 
     var date_expire = $('#disbanded_input_'+ID).val(); 

     // Can place loading image here 
     if (name.length > 0 || create_date.length > 0 || stats.length > 0 || date_expire.length > 0) { 
      $.ajax({ 
       type: 'POST', 
       url: ajax_object.ajaxurl, 
       data: { 
        'action' : 'edit_committee', 
        'id' : ID, 
        'name' : name, 
        'create_date' : create_date, 
        'stats' : stats, 
        'date_expire' : date_expire, 
        'committee_nonce' : $('#committee_nonce').val() 
       }, 
       cache: false, 
       error: function(jqXHR, textStatus, errorThrown) { 
        console.log(jqXHR + ' :: ' + textStatus + ' :: ' + errorThrown); 
       }, 
       success: function (html) { 
        if (html == 'success') { 
         $('#name_'+ID).html(name); 
         $('#createDate_'+ID).html(create_date); 
         $('#stats_'+ID).html(stats); 
         $('#dateExpire_'+ID).html(date_expire); 
        } 
       } 
      }); 
     } else { 
      alert('Enter text to make an edit.'); 
     } 

    }); 

}); 

ich auch Variablennamen short_name Format, statt shortName geändert haben. Ich finde das ordentlicher.

Beachten Sie, dass wir für die URL ajax_object.ajaxurl - das ist die lokalisierte ajax_object von Anfang an, Referenzieren auf den richtigen Pfad der Datei admin-ajax.php. Die Daten sind nur Ihre Zeichenfolge, aber als ein Objekt geschrieben.

Wenn Sie also auf die Schaltfläche klicken, werden alle Ihre Daten in eine globale $_POST Variable Ihres Ajax-Aufrufs eingefügt.

Sie können es durch Inspektor Lauf mit und Netzwerk klicken> XHR Registerkarte

Auch wenn Sie sich nicht sicher sind, was Ihre $_POST Variable hält, setzen

error_log(print_r($_POST, true)); 

in Ihrem edit_committee() Funktion, direkt vor der Validierungsprüfung (die if-Bedingung).Wenn Sie in Ihrem wp-config.php

define('WP_DEBUG', true); 
ini_set('log_errors',TRUE); 
ini_set('error_reporting', E_ALL); 
ini_set('error_log', dirname(__FILE__) . '/error_log.txt'); 

aktiviert haben Debuggen werden Sie haben error_log.txt in der Wurzel Ihrer Wordpress-Installation, und Sie können überprüfen, was der Inhalt der $_POST variabel ist.

this helps;)

Answer 2

Ich bin mir ziemlich sicher, dass Sie nicht POST-Daten zu PHP-Datei haben senden - prüfen Sie. Geben Sie var_dump($_POST) in PHP ein, und fügen Sie console.log(html) im Erfolgsteil von AJAX hinzu.

Versuchen Sie auch Ihre dataString Variable in JS Um dies ändern:

var dataString = { 
id:ID, 
name:name, 
createDate:createDate, 
stats:stats, 
dateExpire:dateExpire 
}; 

Answer 3

Hier ist die Frage, für Ajax-Anfragen, die wir http://example.com/wp-admin/admin-ajax.php verwenden.
Auch sollten Sie Ihre Datenstring cantain &action=editItems (das gleiche wie Sie in wp_ajax_editItems verwenden)

Sie Ajax-Request-Code wie ...

$.ajax({ 
    type: "POST", 
    url: "/wp-admin/admin-ajax.php", 
    data: dataString + '&action=editItems', 
    cache: false, 
    error: function(xhr, status, error) { 
     var err = eval("(" + xhr.responseText + ")"); 
     alert(err.Message); 
    }, 
    success: function (html) { 
     $("#name_"+ID).html(name); 
     $("#createDate_"+ID).html(createDate); 
     $("#stats_"+ID).html(stats); 
     $("#dateExpire_"+ID).html(dateExpire); 
    } 
    }); 

Weitere Details https://codex.wordpress.org/AJAX_in_Plugins

Hoffnung Besuche aussehen sollte, dass hilft :)

Answer 4

$wpdb->update('table', 
array('column' => $name), 
array('ID' => 1), 
array('%s'), 
array('%d') 
);