retrieve results from mysql using jquery/php/ajax

Question

Hi all, I'm using codeigniter for this project. I have a search form and search form results.

Now when I click search in search form I'm being redirected to search form result and I get results.

Is it possible to create div or table in search form which is hidden at first then call the search procedure and which results it returns to get them back in the page without reloading it?

Using jquery/ajax/php ? Thank you

Answer 1

Yes, it is in fact possible.

for CodeIgniter, I'd write a controller function & view for what you would like to display. then, make an AJAX call to the page, which will be whatever you want to display on the page, and load it onto the current page.

If you are using jQuery, you can look into their Various AJAX Functions to make the ajax call and retrieve the data

Answer 2

I assume your search result view contains just a block of HTML for the search results (like a TABLE or somesuch, not a full HTML page with BODY)? If not update the view so it just contains the code for the results. Then you can just use the $.post method to submit the form get the view and then inject it into a DIV (or element of your choice):

$(document).ready(function() {
    $('#myformid').submit(function() {
        var seralizedForm = $(this).serialize();
        var url = $(this).attr('action');
        $.post(url, serializedForm, function(results) {
            $('#resultsDiv').html(results);
        }, "html");
        return false;
    });
});

This should plug into your code with minimal modification. Change the "myformid" to an ID you set on the form tag, and change "resultsDiv" to the ID of an empty DIV you want the results to go into.

What this is going to do is bind this function to be called when the form is submitted (either by pressing enter or clicking a submit button). It will serialize the form (so you can send the values of the inputs to your controller) and get the URL to submit to by the normal "action" attribute that forms have.

It will then submit the form to that URL via a post, and the results will be loaded into a DIV with the ID of resultsDiv.