Custom Field, Abfrage über Ajax durchzuführen ?

playnic

Hallo,

ich wünsche euch alle erstmal ein frohes neues Jahr :)

Ich habe folgendes Anliegen an euch, habe auf meiner Webseite mehrere "select" Dropdown-Menüs,
welche je nach Auswahl einen Shortcode in einer Div anzeigt.

Der Shortcode gibt ein vordefiniertes Custom Field aus, soweit klappt auch alles super, aber durch
den Großen Code, welcher komplett geladen wird, ist es einfach unnötiger Platz der gebraucht wird.

Nun ist die Frage, ob es möglich ist die "Abfrage" nach dem Custom Field über Ajax durchzuführen?
Dadurch sollte dann ja nur das geladen werden, was auch benötigt wird.

Hier habe ich mal den Aktuellen Code für euch: http://jsfiddle.net/zApq4/42/ ([custom_field1] habe ich ersetzt)

Ich habe mich schon mit dem Thema auseinandergesetzt, aber leider habe ich da wirklich keinen Durchblick.

Nun ist die Frage, ob ihr mir da weiterhelfen könnt, bzw. ob es überhaupt möglich ist?

Liebe Grüße,
Peter

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

stega

Zunächst benötigst du eine PHP-Datei, nenne wir sie function.php, die ein entspr. Ergebnis zu deiner AJAX-Anfrage zurückliefert.
Diese könnte wie folgt aussehen:

PHP

<?php


  include "wp-load.php"; //die Datei liegt im Root von WordPress; je nach Verzeichnisstruktur Pfad anpassen!


  $post_id = $_POST['pid']; 
  $option = $_POST['option'];


  $code = '<select id="selectField2" onchange="get_custom()" style="padding-left: 20px;width:150px">';


  switch($option) {


    case "option1": $code .= '<option value="option0">-Bitte ausw&auml;hlen-</option>'.
                             '<option value="option1-1">1.1</option>'.
                             '<option value="option1-2">1.2</option>'.
                             '<option value="option1-3">1.3</option>';
                         $code .= "</select>";
                         break;
    case "option2": $code .= '<option value="option2-1">2.1</option>'.
                             '<option value="option2-2">2.2</option>'.
                             '<option value="option2-3">2.3</option>';
                         $code .= "</select>";
                         break;
    case "option3": $code .= '<option value="option3-1">3.1</option>'.
                             '<option value="option3-2">3.2</option>'.
                             '<option value="option3-3">3.3</option>';
                         $code .= "</select>";
                         break;


    case "option1-1": $code = get_post_meta($post_id, 'feldname', true);
                      break;
    case "option1-2": $code = get_post_meta($post_id, 'feldname2', true);
                      break;
    case "option1-3": $code = get_post_meta($post_id, 'feldname3', true);
                      break;


  };


  echo $code;
?>

Alles anzeigen

"feldname", "feldname1", "feldname2" müssen natürlich noch durch die richtigen Namen der Custom-Felder ersetzt werden.

Der HTML-Code im Template sieht dann in etwa wie folgt aus:

HTML

<select id="selectField1" style="padding-left: 20px;width:150px" onchange="get_submenu()">
        <option value="option0">-Bitte auswählen-</option>
        <option value="option1">Menü 1</option>
        <option value="option2">Menü 2</option>
        <option value="option3">Menü 3</option>


</select>




<div id="option"></div>
<div id="custom_content"></div>

Alles anzeigen

Und nun noch etwas JavaScript/jQuery (Header, Footer oder direkt in der Seite):

Code

<script type="text/javascript">
var postID = 442; //entspr. Anpassen oder über WordPress-Funktion aktuelle ID ermitteln und hier ausgeben!
var fct_path = "function.php"; //Pfad anpassen!


function get_submenu() {
  jQuery.post(fct_path, {option: jQuery("#selectField1").val(), pid: postID}, function( data ) {
   jQuery("#option" ).html( data );
  });
}


function get_custom() {
  jQuery.post(fct_path, {option: jQuery("#selectField2").val(), pid: postID}, function( data ) {
   jQuery("#custom_content" ).html( data );


  });


}


</script>

Alles anzeigen

Ich hoffe, das hilft dir etwas weiter.

playnic

Vielen Dank, das hat mir sehr weitergeholfen :)

Habe nur ein Problem, wenn ich jetzt z.b. [COLOR=#000000][COLOR=#DD0000]option1-1, [COLOR=#000000][COLOR=#DD0000]option1-2 und [COLOR=#000000][COLOR=#DD0000]option1-3[/COLOR][/COLOR][/COLOR][/COLOR][/COLOR][/COLOR] brauche,
und nur die Custom Fields für dieso Optionen ausgefüllt habe bekomme ich immernoch alle Optionen angezeit.

Kann man dies Irgenwie regeln, dass vorher eine Abfrage gemacht wird, ob die Custom Fields vorhanden sind,
bzw. ob sie einen Inhalt haben, und dann nur die Optionen anzeigen ?

Desweiteren habe ich noch ein Anliegen, kann man einen Vor- und Zurück button erstellen ?
Das wenn man z.b. im [COLOR=#FF8000][/COLOR]Menü 1 ist, die [COLOR=#FF8000][/COLOR][COLOR=#000000][COLOR=#DD0000]option1-1[/COLOR][/COLOR] ausgewählt hat, dann auf den Vor Button drückt
und dann die [COLOR=#FF8000][/COLOR][COLOR=#000000][COLOR=#DD0000]option1-2 ausgewählt wird usw.?[/COLOR][/COLOR]

Finde es echt nett von dir, dass du mir da hilfst.

Liebe Grüße,
Peter

stega

Vielleicht hilft dir dieser Ansatz weiter:

PHP

case "option1": if(trim(get_post_meta($post_id, 'feldname', true))!="") {
                     $code .= '<option value="option0">-Bitte ausw&auml;hlen-</option>'.
                              '<option value="option1-1">1.1</option>'.
                              '<option value="option1-2">1.2</option>'.
                              '<option value="option1-3">1.3</option>';
                     $code .= "</select>";
                    }
                    else
                     $code="";
                    break;

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Custom Field, Abfrage über Ajax durchzuführen ?

Jetzt mitmachen!