0

I'm new to WordPress but have been programming PHP for a long time... I searched a bunch of questions but couldn't find what I need.

I have a page with a search form that contains a few parameters and a submit button.

I have javascript that uses AJAX to submit the form parameters to a REST API endpoint on a non-WordPress server. When I get the response back from that server I want to display the results on the page.

Here is the form data that I pasted onto a page:

<form id="grpSearch">
        <div class="form-group">
            <label for="days[]"
                   style="font-weight:bold; text-align: right; margin-right:15px; float:left;">Day: </label>
            <input type="checkbox" name="days[]" value="1"> Su &nbsp;
            <input type="checkbox" name="days[]" value="2"> M &nbsp;
            <input type="checkbox" name="days[]" value="3"> T &nbsp;
            <input type="checkbox" name="days[]" value="4"> W &nbsp;
            <input type="checkbox" name="days[]" value="5"> Th &nbsp;
            <input type="checkbox" name="days[]" value="6"> F &nbsp;
            <input type="checkbox" name="days[]" value="7"> Sa &nbsp;
        </div>
        <div class="form-group">
            <label for="tod[]" style="font-weight:bold; text-align: right; margin-right:15px; float:left;">Time of
                Day: </label>
            <input type="checkbox" name="tod[]" value="8"> Morning &nbsp;
            <input type="checkbox" name="tod[]" value="9"> Afternoon &nbsp;
            <input type="checkbox" name="tod[]" value="10"> Evening &nbsp;
        </div>
        <div class="form-group">
            <label for="frequency[]" style="font-weight:bold; text-align: right; margin-right:15px; float:left;">Frequency: </label>
            <input type="checkbox" name="frequency[]" value="11"> Weekly &nbsp;
            <input type="checkbox" name="frequency[]" value="12"> Bi-Weekly &nbsp;
            <input type="checkbox" name="frequency[]" value="13"> Monthly &nbsp;
            <input type="checkbox" name="frequency[]" value="14"> Occasional &nbsp;
        </div>
        <div class="form-group">
            <input name="search" type="submit" class="button" value="Search"/>
        </div>
</form>

<div id="results"></div>

Here is the JavaScript that should be called when the submit button is clicked.

(function ($) {
function processForm(e) {
    $.ajax({
        url: 'https://example.com/groups',
        dataType: 'text',
        method: 'get',
        contentType: 'application/x-www-form-urlencoded',
        data: $(this).serialize(),
        success: function (data, textStatus, jQxhr) {
            makeHtml(jQuery.parseJSON(data));
            $('#grpSearch')[0].reset();
        },
        error: function (jqXhr, textStatus, errorThrown) {
            console.log(errorThrown);
        }
    });

    e.preventDefault();
}

function makeHtml(data) {
    $('#results').empty();
    for (var index in data) {

        // Start the result div for a single group
        var result = '<div class="result clearfix" style="padding-top: 15px;">';

        // Add the contact div
        result += makeContactDiv(group);

        // Add the content div
        result += makeContentDiv(group);

        result += '</div>';

        $('#results').append(result);
    }
} 
})(jQuery);

When this code is all on a plain html page (not in WordPress) it works very well. I now need to move the functionality into a page in WP. I thought this would be really easy to put the HTML in a page, add the javascript file to the header and it would just work. Sadly, this is not the case.

So, how do I get clicking the Search button to invoke the JavaScript code which would get results and update the page by appending content to the results div on my page on WordPress?

If there is another way that this needs to be done, please educate me.

  • The first thing you should do is to learn how to do ajax with wordpress. The tl;dr is that it is possible to do it in the way you try but there are an easier built-in mechanism for that. Google is your friend, use it. – Mark Kaplun Aug 30 '15 at 9:57
  • I used Google and wasn't getting it. Hence the question... – Scott Madeira Aug 30 '15 at 13:11
  • google.com/search?q=wordpress+ajax&ie=utf-8&oe=utf-8 ? all results on that page seems to be relevant as a starting point. – Mark Kaplun Aug 30 '15 at 13:56
  • I'm sure those are wonderful links if you understand wordpress and how it works. I was trying to get some help with a "do this..." to get me started because I'm on a tight deadline. Again stackexchange is less than helpful to the noob. – Scott Madeira Aug 30 '15 at 14:49
  • yes, sorry that there are no shortcuts. you need to understand wordpress before you take wordpress project or llocate time for learning. The easy stuff is easy, but anything more complex will require learning time. – Mark Kaplun Aug 30 '15 at 15:55
-1

I got everything working but it may not be the most elegant of solutions.

I put the form text as well as the empty results div on a page. I created a small plugin that checks to see if we are on that page. If so, insert the JavaScript into the footer. Otherwise, do nothing.

This checks for the page we are on:

public function display_group_information($content)
{
    global $post;

    if ($post->post_name == 'groups-activities-and-events'){
        add_action('wp_footer', [$this, 'load_group_ajax']);
    }
    return $content;
}

This adds the required javascript:

public function load_group_ajax(){
?>
    <script>
        !function(r){function n(n).....("#grpSearch").submit(n)}(jQuery);
    </script>

<?php
}

Again, probably not the most elegant way of doing it but it works.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.