Wordpress Suchergebnisse in Modal

Question

Ich bin komplett PHP/Js Neuling und ich blieb auf etwas, das ich nicht herausfinden kann.

Ich habe Seite an www.test.com/page mit einer Suchmaske, die www.test.com/results wie dies nennt:

<form method="post" action="https://www.test.com/results"> 
    <input type="text" placeholder="Enter URL:" required=""> 
    <button>Search</button> 
</form> 

Formular erhält URL, dass der Benutzer in eingegeben hat, übergibt es an /results wird die Zeile ($url = $_POST['url'];) analysiert und die Ergebnisse angezeigt.

Aber ich möchte, dass die Suchergebnisse in (Bootstrap) Modal statt neue Seite öffnen. Ich weiß, dass dies mit AJAX gemacht werden kann, aber ich bin kompletter Neuling und suche nach der schmutzigsten einfachen Lösung, die es arbeiten lassen würde.

Nochmals, tut mir leid, wenn dies zu "Newbie" Art der Frage ist, lerne ich immer noch.

Answer 1

Ja, Sie können jQuery und AJAX verwenden, um das Senden des Formulars zu steuern. So etwas wie das folgende Codebeispiel sollte es tun:

$('#myForm').on('submit', function(event) { 

    $.post('https://www.test.com/results', { URL: "some_url.com" }, function(data) { 
     // Render the results onto your modal anyway you want with data 
     // retrieved from server here 
     $("#my-modal-object").html(data); 
    }).error(function() { 
     // Handle the event when the call to "/results" fails 
     alert("Yikes! Call to /results failed!"); 
    }); 

    // Prevents default browser behaviour which submits the form 
    // then routes to another page, if specified 
    event.preventDefault(); 

}); 

Kurze Erklärung:

Wir angebracht, um einen "submit" Ereignis-Listener zum Formular Objekt und führten einen POST AJAX-Request an den Server Endpunkt /results. Der Server gibt die verarbeiteten Suchergebnisse an die Callback-Funktion $.post zurück und rendert sie auf Ihr modales Objekt. Sie können auch das 2. Argument von $.post, d. H. { URL: "some_url.com" }, zu jedem Datenobjekt ändern, das Sie an Ihren Server übergeben möchten.

Dies sollte Ihnen helfen, mit dem Rendern Ihrer Suchergebnisse auf Ihrem modalen Element zu beginnen, anstatt zu einer neuen Seite zu navigieren.