Tengo una aplicación Symfony que permite operaciones CRUD en algunos eventos y también buscarlos. El problema que tengo es cuando intento que se muestren los resultados que estoy buscando sin actualizar la página. Es la primera vez que uso ajax y creo que hay algún problema con la función. Cuando busco una palabra en cualquier nombre de evento, la página no se actualiza y se muestra sin definir en lugar de mostrar las entradas. ¡Agradezco cualquier ayuda!

Aquí está el método del controlador:

public function ajaxListAction(Request $request){

        //fetch the data from the database and pass it to the view
        $em = $this->getDoctrine()->getManager();
        $searchTerm = $request->get('search');

        $form = $this->createFormBuilder()
        ->add('search', SubmitType::class, array('label' => 'Search', 'attr' => array('class' => 'btn btn-primary', 'style' => 'margin-bottom:15px')))->getForm();

        $organizer = array();
        if($searchTerm == ''){
            $organizer = $this->getDoctrine()->getRepository('AppBundle:Organizer')->findAll();
        }

        elseif ($request->getMethod() == 'GET') {
            $form->handleRequest($request);
            $em = $this->getDoctrine()->getManager();
            $organizer = $em->getRepository('AppBundle:Organizer')->findAllOrderedByName($searchTerm);
        }

        $response = new JsonResponse();
        $results = array();

        foreach ($organizer as $value) {
            $results[] = json_encode($value);
        }

        return $response->setData(array(
            'results' => $results
        ));
    }

Y aquí está el script para la búsqueda:

    $(document).ready( function(event) {
    $("#search").submit(function(event) {
        event.preventDefault(); //prvent default submission event

        $form = $(this);

        var data  = $('#search_term').val();

        $.ajax({
            url: '/ajax',
            type: "GET",
            data: {'search' : data },
            success: function(response){
                var output = '';
                for (var i = 0; i < response.length; i++) {
                    output[i] = output + response;
                }
                $('#ajax_results').html('<tr><td>' + response.id + '</td></tr>' + '<tr><td>' + response.name + '</td></tr>' + '<tr><td>' + response.dueDate + '</td></tr>');
            }
        })

    });
});

Y el archivo index.html.twig para mostrar los datos:

{% extends 'base.html.twig' %}

{% block body %}
    <h2 class="page-header"> Latest events </h2>
<form id="search" method="GET" action="">
        <input type="text" name="search" id="search_term" />
        <input type="submit" name="submit" value="Search" />
</form>
    <hr />
    <table  class="table table-striped">
         <thead> 
         <tr> 
             <th>#</th> 
             <th>Event</th> 
             <th>Due Date</th>
             <th></th>
         </tr>
         </thead> 

         <tbody id="ajax_results"> 
         {% for Events in organizer %}
         <tr> 
             <th scope="row">{{Events.id}}</th>
             <td>{{Events.name}}</td>
             <td>{{Events.dueDate|date('j F, Y, g:i a')}}</td>
             <td>
             <a href="/organize/details/{{Events.id}}" class="btn btn-success">View</a>
             <a href="/organize/edit/{{Events.id}}" class="btn btn-default">Edit</a>
             <a href="/organize/delete/{{Events.id}}" class="btn btn-danger">Delete</a>
             </td>
         </tr>

         {% endfor %}

    <table class="table table-striped">

        {% if organizer|length > 0  %}
           {% for items in organizer %}

           {% endfor %}
        {% else %}
                <tr>
                   <td colspan="2">No matching results found!</td>
                </tr>
        {% endif %}
    </table>
         </tbody> 
    </table>
{% endblock %}
0
Dutchman08 14 dic. 2016 a las 18:01

2 respuestas

La mejor respuesta

Primero intentemos refactorizar su código. Quizás te acerque a la solución.

public function ajaxListAction(Request $request){

    $searchTerm = $request->get('search');
    //don't need form here

    if($searchTerm == ''){
        $organizer = $this->getDoctrine()->getRepository('AppBundle:Organizer')->findAll();
    }else{
        //repository should search by searchterm in next step
        $organizer = $this->getDoctrine()->getRepository('AppBundle:Organizer')->findAllOrderedByName($searchTerm);
    }

    return new JsonResponse($organizer);
}

Y javascript:

$(document).ready( function(event) {
    $("#search").submit(function(event) {
        event.preventDefault(); //prvent default submission event

        $form = $(this);

        var data  = $('#search_term').val();

        $.ajax({
            url: '/ajax',
            type: "GET",
            data: {'search' : data },
            success: function(response){
                $('#ajax_results').html('');
                $.each(response, function(key, value) {
                    console.log(key, value);
                    $('#ajax_results').append('<tr><td>' + response[key].id + '</td></tr>' + '<tr><td>' + response[key].name + '</td></tr>' + '<tr><td>' + response[key].dueDate + '</td></tr>');
                });

            }
        })

    });
});

Por favor, diga qué ve en la consola js después de enviar la búsqueda.

0
Rawburner 16 dic. 2016 a las 10:51

Me las arreglé para que funcionara. El problema era que no tenía todos los campos enviados a la matriz en el método jsonSerialize () en el archivo Entity y, por lo tanto, los campos se mostraban indefinidos.

También completé el método de adición en el archivo .js para que todo el marcado se replicara en la llamada ajax.

¡Gracias a Rawburner por las sugerencias!

0
Dutchman08 6 ene. 2017 a las 09:34