Search Contact Person Plugin via Ajax

Question

I'm new to Craft and I'm trying to achieve the following with a Craft Plugin

A user visits my site and can input a zip code to receive the corresponding contact person's name, phonenumber and image. I want to develop a plugin which allows the admin to create the contact person entries in the backend and which handles the ajax request by getting the right contact person form the database.

So for example, the user sends the zip code 54343, an ajax request with that data is sent, the plugin queries the database, converts the result into a json-string and sends the ajax response back.

I'm afraid I have no idea how to start.

How do I create the table and import the data? (There is a CSV document) Where do I send the ajax request to? What structures of a Craft plugin do I need?

I'd really appreciate your help.

Answer 1

It's actually quite easy and you don't really need json or a plugin to do it. If you really need it as a plugin, then that's a whole different thing that would need a separate answer.

In your search template file:

<div id="contacts"><!-- results will get inserted here. --></div>

<form id="find-contact-form" data-url="/contacts">          
    <label for="zip">Zip Code</label>
    <input type="text" name="zip">
    <!-- submits form data via post to 'data-url' attribute -->
    <input type="submit" value="Find Contacts"/> 
</form>

In your search template javascript file (make sure to include jquery):

$(function() {
    $('#find-contact-form').submit(function(event) {
        event.preventDefault();

        var data = $(this).serialize();
        var url = $(this).attr('data-url');

        $.post(url, data, function(result) {
            $('#contacts').html(result);
        }, 'html')
        .fail(function() {
            //console.log("error");
        });
    });
}

In your contacts.html template:

{% if craft.request.isAjax %}

    {% set zip = craft.request.getParam('zip') %}

    {% if zip %}
        {% set contacts = craft.entries.section('contacts').zip(zip) %}
        {% if contacts|length %}
            {% for contact in contacts %}
                <img src="{{ contact.image.first.url" }}"><br>
                {{ contact.firstName }} {{ contact.lastName}}<br>
                T {{ contact.telephone}}<br>
            {% endfor %}
        {% else %}
            No contacts found with the zip {{ zip }}.
        {% endif %}
    {% endif %}

{% endif %}

You can also use that same template for your normal contacts page. Just use the clause {% if not craft.request.isAjax %}Put my full page content here.{% endif %}. In fact, the search page can just submit to itself using this technique.