Help with ajax and Django 1.9

Question

Help with ajax and Django 1.9

Navigation

#1 by (0 votes)

0

I find myself doing a search engine with ajax and django that throws me results as soon as I write a word in the search engine but I have not been successful. supposedly I already have everything.

in the console shows me this when I do a search.

[25/Apr/2016 20:25:22] "GET /clientes/list/ HTTP/1.1" 200 16400
[25/Apr/2016 20:25:22] "GET /static/js/ajax_buscar.js HTTP/1.1" 304 0

Create an app called ajax where I passed the Client model to access your objects. views.py

from django.shortcuts import render
from django.http import HttpResponseBadRequest, HttpResponse, HttpRequest

from django.core import serializers
import re

from clientes.models import Cliente

def search(request):

# si no es una peticion ajax, devolvemos error 400
if not request.is_ajax() or request.method != "POST":
    return HttpResponseBadRequest()

# definimos el termino de busqueda
q = request.POST['q']

#verificamos si el termino de busqueda es un documento de identidad
match = re.match(r'^(?P<CI>[0-9]{2,})$', q)
isCI = (False, True)[match != None]

# generamos la query
if isCI:
    clientes = Cliente.objects.filter(id=match.groupdict()['id'])
else:
    clientes = Cliente.objects.filter(n_empresa__Icontains=q)

# seleccionamos las columnas que deseamos obtener para el json
cliente_fields = (
    'id',
    'n_empresa',        
    'email'
)

# json!
data = serializers.serialize('json', clientes, fields=cliente_fields)


return HttpResponse(data, content_type="application/json")

ajax_buscar.js

    function __init()
{

$('#search_input')
    .val('')
    .focus()
    .keyup(function(){

        if(!$.trim($(this).val()))
            $('.results .error').empty().hide();
    });

var cache = {};
$('#search_input').autocomplete({
    minLength: 5,
    select: function( event, ui ) {
        return false;
    },
    open: function() {
        $('.results .wrapper').html($(this).autocomplete("widget").html());
        $(this).autocomplete("widget").hide();
    },
    source: function( request, response ) {

        if (cache[request.term]) {
            response(cache[request.term]);
            return;
        }

        $.ajax({
            dataType : 'json',
            method : 'POST',
            url : '/ajax/search/',
            data : {
                q : encodeURIComponent(request.term),
                csrfmiddlewaretoken : $('input[name=csrfmiddlewaretoken]').val()
            },
            success : function(data) {
                var clientes = [];

                for(var x in data)
                {
                    clientes.push({
                        id : data[x].fields['id'],
                        n_empresa : data[x].fields['n_empresa'],
                        email : data[x].fields['email']
                    });
                }

                cache[request.term] = clientes;
                response(clientes);
            }
        });
    },
    response: function(event, ui) {

        if (ui.content.length === 0) {
            $('.results .error').html('No se encontraron resultados').show();
            $('.results .wrapper').empty();
        }
        else
            $('.results .error').empty().hide();
    }
}).autocomplete('instance')._renderItem = function(ul, item) {

    var cliente_tmpl = $('<div />')
                    .addClass('Cliente')
                    .append('<a href="/" />').find('a').addClass('id').html(item.id)
                    .parent()
                    .append('<span class="identity"><strong>Identidad:</strong><span></span></span>')
                    .find('.identity > span').append(item.n_empresa)
                    .parent().parent()
                    .append('<span class="email"><strong>Email:</strong><span></span></span>')
                    .find('.email > span').append(item.email)
                    .parent().parent();

    return $('<div></div>')
        .data('item.autocomplete', item)
        .append(cliente_tmpl)
        .appendTo(ul);
};
}

$(document).ready(__init);

my html

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

<div class="search">
   <div class="searchbox">
     <label>Buscar un estudiante:</label>
     <span class="info">(Puede ser un nombre o el id de identidad)</span>
      <input id="search_input" type="text" name="q">{% csrf_token %}

     </div>
      <div class="results">
      <h1 class="error"></h1>
       <div class="wrapper"></div>
     </div>
 </div>

my urls.py

from ajax.views import search

url(r'^ajax/search/', view='ajax.views.search'),

javascript jquery ajax django

asked by wootsbot 26.04.2016 в 03:43

source

1 answer

Keep persistent bootstrap modal window when filling gridview How to edit an image in GRAILS Groovy loaded in the database

score 0 · Accepted Answer

Indeed I solved it with a smaller example. It remained like this. views.py

import json

from django.http import HttpResponse, HttpResponseRedirect, HttpResponseForbidden
from django.shortcuts import render, render_to_response
from django.template import RequestContext

from .models import Producto

def ListaProductos2(request):
if request.is_ajax:
    search=request.GET.get('start','')

    productos=Producto.objects.filter(nombre__icontains=search)

    results=[]
    for producto in productos:
        producto_json={}
        producto_json['id']=producto.id
        producto_json['nombre']=producto.nombre
        producto_json['descripcion']=producto.descripcion
        results.append(producto_json)

    data_json=json.dumps(results)

else:
    data_json='fail'
mimetype="application/json"
return HttpResponse(data_json,mimetype)

urls.py

from productos import views
urlpatterns = [
url(r'^con_ajax_cadena/$',views.ListaProductos2),
]

index.html

<div class="ui-widget">
  <label for="tags1">Array de Cadenas: </label>
  <input id="tags1">
 </div>

JavaScript

$(function(){
  function equalHeight(group) {
    var tallest = 0;
    group.each(function() {
      var thisHeight = $(this).height();
      if(thisHeight > tallest) {
        tallest = thisHeight;
      }
    });
    group.height(tallest);
  } 
  equalHeight($(".box-1 .inner"));


  $("#tags4").autocomplete({
    minLength:3,
    source: function(req, add){
      var search=$("#tags4").val();
      $.ajax({
        url:'/con_ajax_cadena/',
        async:false,
        dataType:'json',
        type:'GET',
        data:{ 'start': search,},
        success: function(data){
          var suggestions=[];

          $.each(data, function(index, objeto){
            suggestions.push(objeto.nombre); 
          });

          add(suggestions);
        },
        error:function(err){
          alert("error");
        }
      });
    }
  });


});

resources

Jquery-UI