Ajax search and pagination

I have this AJAX pagination code.

 $('document').ready(function() {
    $("#pagination a").trigger('click'); // When page is loaded we trigger a click

});

    $('#pagination, #searchFormTop').on('click', 'a', function(e) { // When click on a 'a' element of the pagination div
        e.preventDefault();
        var page = this.id; // Page number is the id of the 'a' element
        var pagination = ''; // Init pagination     


        $('#articleArea').html('<img src="images/ajax-loader.gif" alt="" />'); // Display a processing icon
        var data = {term: term, page: page, per_page: 9}; // Create JSON which will be sent via Ajax
        // We set up the per_page var at 4. You may change to any number you need.

        $.ajax({ // jQuery Ajax
            type: 'POST',
            url: 'includes/fetch-pages.php', // URL to the PHP file which will insert new value in the database
            data: data, // We send the data string
            dataType: 'json', // Json format
            timeout: 3000,
            success: function(data) {


                $('#articleArea').html(data.articleList); // We update the page with the event list
                console.log(data.num);


                // Pagination system
                if (page == 1) pagination += '<div class="cell_disabled"><span>Primero</span></div><div class="cell_disabled"><span>Anterior</span></div>';
                else pagination += '<div class="cell"><a href="#" id="1">Primero</a></div><div class="cell"><a href="#" id="' + (page - 1) + '">Anterior</span></a></div>';

                for (var i=parseInt(page)-3; i<=parseInt(page)+3; i++) {
                    if (i >= 1 && i <= data.numPage) {
                        pagination += '<div';
                        if (i == page) pagination += ' class="cell_active"><span>' + i + '</span>';
                        else pagination += ' class="cell"><a href="#" id="' + i + '">' + i + '</a>';
                        pagination += '</div>';
                    }
                }

                if (page == data.numPage) pagination += '<div class="cell_disabled"><span>Siguiente</span></div><div class="cell_disabled"><span>Último</span></div>';
                else pagination += '<div class="cell"><a href="#" id="' + (parseInt(page) + 1) + '">Siguiente</a></div><div class="cell"><a href="#" id="' + data.numPage + '">Último</span></a></div>';

                $('#pagination').html(pagination); // We update the pagination DIV
            },
            error: function() {
            }
        });
        return false;
    });

Now I want to add a search form:

<form class="form-inline col-xs-12 col-sm-5 col-md-4 hidden-xs" id="searchFormTop">
          <div class="row buscar">
              <div class="form-group col-xs-9">
                <input type="text" placeholder="" class="form-control" name="searchTerm" id="searchTerm" value="test">
              </div>                
              <button type= "submit" class="btn col-xs-3" id="searchButton"> BUSCAR </button>
          </div>
        </form>

How can I get the value from the form and pass it to the AJAX call? I’m trying to add another event to trigger the ajax call when the form in submited and then get the search term value using val(), but I cannot make in work.

$('document').ready(function() {
    $("#pagination a").trigger('click'); // When page is loaded we trigger a click
});

$('#pagination, #searchFormTop').on('click', 'a', function(e) { // When click on a 'a' element of the pagination div
    e.preventDefault();
    var page = this.id; // Page number is the id of the 'a' element
    var pagination = ''; // Init pagination     
    var term = $('#searchTerm').val();

Maybe, you guys, can help me see what I’m doing wrong.

Thanks in advance
Sonia


Source: php

Leave a Reply