Ad

Jquery Id Is Matched But Won't Work At All

- 1 answer

I have python/django app, need search engine and for search engine I'm using the power of jquery. I'm still very new to Jquery(actually whole Javascript) but I think this seems right to, I'm not sure why this won't work.

so I have this code:

 <li class="nav-header">search for community</li>
      {% csrf_token %}
      <input type="text" id="search" name="search" />

      <ul id="search-results">

      </ul> 

I have input id search. and another id search-results. then I have this javascript file.

$(function(){

    $('#search').keyup(function() {

        $.ajax({
            type: "POST",
            url: "/search/",
            data: { 
                'search_text' : $('#search').val(),
                'csrfmiddlewaretoken' : $("input[name=csrfmiddlewaretoken]").val()
            },
            success: searchSuccess,
            dataType: 'html'
        });

    });

});();

function searchSuccess(data, textStatus, jqXHR)
{
    $('#search-results').html(data);
}

I'm matching id search here. using keyup function. Is it because the function is wrong?It's very unlikely because the whole thing works fine. by whole thing , I mean the functionality of searching works here http://127.0.0.1:8000/search/ which has search.html

{% extends 'base.html' %}

{% block content %}
    <h2>Search</h2>

    <form method="get" action=".">
        <table>
            {{ form.as_table }}
            <tr>
                <td>&nbsp;</td>
                <td>
                    <input type="submit" value="Search">
                </td>
            </tr>
        </table>

        {% if query %}
            <h3>Results</h3>

            {% for result in page.object_list %}
                <p>
                    <a target="_blank" rel="nofollow noreferrer" href="{{ result.object.get_absolute_url }}">{{ result.object.name }}</a>
                </p>
            {% empty %}
                <p>No results found.</p>
            {% endfor %}

            {% if page.has_previous or page.has_next %}
                <div>
                    {% if page.has_previous %}<a target="_blank" rel="nofollow noreferrer" href="?q={{ query }}&amp;page={{ page.previous_page_number }}">{% endif %}&laquo; Previous{% if page.has_previous %}</a>{% endif %}
                    |
                    {% if page.has_next %}<a target="_blank" rel="nofollow noreferrer" href="?q={{ query }}&amp;page={{ page.next_page_number }}">{% endif %}Next &raquo;{% if page.has_next %}</a>{% endif %}
                </div>
            {% endif %}
        {% else %}
            {# Show some example queries to run, maybe query syntax, something else? #}
        {% endif %}
    </form>

{%endblock%}

I'm trying to use what works in search.html to work in a search bar in index.html and with Jquery keyup function. can you please tell why I can't use jquery function that has matched id?

For detail: this is how my code works Inside urls.py I have url(r'^search/$',include('haystack.urls')), and other haystack settings. then inside views.py

def search_titles(request):
    categories = SearchQuerySet().autocomplete(content_auto=request.POST.get('search_text', ''))            

    return render_to_response('ajax_search.html', {'categories' : categories
        })

for ajax_search.html

{% if categories.count > 0 %}

{% for category in categories %}
    <li><a target="_blank" rel="nofollow noreferrer" href="/category/{{post.category}}">{{ category.title }}</a></li>
{% endfor %}

{% else %}

<li>None to show!</li>

{% endif %}

The problem is occuring from ajax I'm almost sure

Ad

Answer

If you're just practicing AJAX, your approach is ok, but jQuery has a neat method to do this..

$(function(){
    $('#search').keyup(function() {
            $('#search-results').load("/search/", { 
                'search_text' : $('#search').val(),
                'csrfmiddlewaretoken' : $("input[name=csrfmiddlewaretoken]").val()
            });
    });
});
Ad
source: stackoverflow.com
Ad