<p>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.</p>

<p>In your search template file:</p>

<pre><code>&lt;div id="contacts"&gt;&lt;!-- results will get inserted here. --&gt;&lt;/div&gt;

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

<p>In your search template javascript file (make sure to include jquery):</p>

<pre><code>$(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");
        });
    });
}
</code></pre>

<p>In your contacts.html template:</p>

<pre><code>{% 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 %}
                &lt;img src="{{ contact.image.first.url" }}"&gt;&lt;br&gt;
                {{ contact.firstName }} {{ contact.lastName}}&lt;br&gt;
                T {{ contact.telephone}}&lt;br&gt;
            {% endfor %}
        {% else %}
            No contacts found with the zip {{ zip }}.
        {% endif %}
    {% endif %}

{% endif %}
</code></pre>

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

CC BY-SA 3.0
2014-10-28T17:06:38.180Z
2017-01-16T23:48:03.850Z
2017-01-16T23:48:03.850Z
Douglas McDonald
<p>I'm new to Craft and I'm trying to achieve the following with a Craft Plugin</p>

<p>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.</p>

<p>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.</p>

<p>I'm afraid I have no idea how to start.</p>

<p>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?</p>

<p>I'd really appreciate your help.</p>

CC BY-SA 3.0
2014-10-28T17:48:44.793Z
This question covers a lot of ground: creating plugins, structuring plugins, creating custom tables, ajax loading content, importing data, etc. You may need to break this up into more specific questions.
Douglas McDonald
<plugin-development><database><ajax>
Search Contact Person Plugin via Ajax
# Search Contact Person Plugin via Ajax

(Asked by: username_0 on 2014-10-28)

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.

**Tags:** plugin-development, database, ajax

> **Comments:**
> **username_1**: This question covers a lot of ground: creating plugins, structuring plugins, creating custom tables, ajax loading content, importing data, etc. You may need to break this up into more specific questions.  

---

## 1 answers

### Answer by username_1 on 2014-10-28. Score: 5 | Accepted answer

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:


          
    Zip Code
    
    
     


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 %}
                
                {{ contact.firstName }} {{ contact.lastName}}
                T {{ contact.telephone}}
            {% 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.


---

