Wordpress搜索结果模态

Question

I am complete php/js newbie and i got stuck on something that i cant figure out.

I have page at www.test.com/page with a search form that calls www.test.com/results like this:

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

Form gets URL that the user typed in, passes it to /results, the line ($url = $_POST['url'];) is where it is analyzed and results are displayed.

But, i would want the search results to open in (bootstrap) modal instead of new page. I know this can be done with AJAX but i am complete newbie and am looking for most dirty simple solution that would make it work.

Again, sorry if this is too "newbie" type of question, i am still learning.

Answer 1

Yes, you can use jQuery and AJAX to control the form submit. So something akin to the code example below should do the trick:

$('#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();

});

Short explanation:

We attached a "submit" event listener to your form object and performed a POST AJAX request to your server endpoint /results. Server passes back the processed search results into the callback function of $.post and renders it onto your modal object. You may also change the 2nd argument of $.post, i.e. { URL: "some_url.com" } to whatever data object you want to pass to your server.

This should help you get started with rendering your search results onto your modal element instead of navigating to a new page.