Use AJAX to sort MySQL search results

Question

I am creating a flight search page. There's a form on the first page, when the submit button is clicked, the search results appear in the second page.

This is the first page: http://www.projectmeteor.dx.am/flights.php

Please do the following:

Select Origin: Guwahati
Select Destination: Kolkata
Click Search Fights

Something like this should appear on the second page.

Now I want to sort the results when I click on the headers(Operator, Departs,...).

I know I have to use AJAX. I've seen a few examples where they sort tables using AJAX but since my one's not implemented using tables, I'm not able to figure out how to get started.

Please ask for any code, in case you need it.

This is the first page(flights.php):



                

                    

                    

                        

                            

                                
                                One Way

                                
                                Return Trip

                            

                            

                                
                                Business Class

                                
                                Economy Class

                            

                        
 

                                  
                        
                             Origin: 

                                
                        
                    

                                  
                        
                             Destination: 

                                
                        
                    

                        
                            
                                Select Departure Date: 
                                
                                    
                                    
                                    
                                    
                                
                            
                        

                        
                            
                                Select Return Date: 
                                
                                        
                                        
                                        
                                
                        
    


                        

                        No. of adults: 
                            
                                
                            
                        

                        

                        No. of children:

This is the second page(flight_search.php):

    

    

    a

    

        

              Flights from  to        

        


    connect_error) {
            die("Connection failed: " . $conn->connect_error);
        }

        $sql = "SELECT * FROM flights WHERE origin='$origin' AND destination='$destination'";
        $result = $conn->query($sql);

        if ($result->num_rows > 0) {

    ?>

        

            

                

                    Operator

                

            

            

                

                    Departs

                

            

            

                

                    Arrives

                

            

            

                

                    Fare

                

            

            

                

                    Ticket Type

                

            

            

                

                    Seats Available

                

            

        
 

        .
 

    
 

    fetch_assoc()) {

    ?>

    

        

            

            

                

                    

                        

                    

                

                

                    

                        IndiGo

                    

                    

                        

                    

                

            

            


            

            

                

                    13:25

                

                

                    

                

            

            


            

            

                

                    15:49

                

                

                    

                

            

            


            

            

                

                    

                

                

                    incl. of GST

                

            

            


            

            

                

                    Refundable

                

                

                    

                

            

            


            

            

                

                    

                

                

                    

                

            

            

        
 

    

    

    

        

            No flights found. Please consider modifying your search query.

        

    

    

    close(); //closing the connection to the database ?>

    .

Thanks

rebduvid · Accepted Answer

First all you need to know that is better to use one of the solutions that don't use ajax, becouse all the request that your are going to use in ajax are going to make new mysql query and server processing to make the html.

But if you want to use AJAX i have an easy idea how to do it.

1- First all you need to add the jquery.js library to your code if you haven't the source, you can download it from https://jquery.com/

2 - Change the code of the headings to

 Operator
 Departs

Also i think that you need to put all the results in a general div that should be before your while sentence and to close it after the } this div is the one that should contain all the results divs when you update the page with ajax you are going to replace this div content to the new content that the flightProcesor.php return.

 
    fetch_assoc()) 
    {
    ?>
    
        
             .....

3 - Read the div order* event and dispatch the ajax event

4 - Last step you need to make the flightProcesor.php that should to make the mysql query with the orderBy parameter that you are sending via POST to order and then you need to create a php $html var that contain all the code to return:

    num_rows > 0) 
{
    $string_var = ""; //INIT STRING VAR.
    while($row = $result->fetch_assoc()) 
    {
        $string_var .= '
            
                
                
                    
                        
                    
                    
                        IndiGo
                        '.$row["flight_no"].'
                    
                
                
                
                
                    13:25
                    '.$row["origin"].'
                
                
                
                
                    15:49
                    '.$row["destination"].'
                
                
                
                
                    '.$row["fare"].'
                    incl. of GST
                
                
                
                
                    Refundable
                    '.$row["class"].'
                
                
                
                
                    '.$row["seats_available"].'
                    
 
                
                
            
 
        ';
    }
} 
else 
{
    $string_var = '
                        No flights found. Please consider modifying your search query.
                    ';
}

return $string_var;
?>

EDITED: The } to close the while need to be before the return. EDITED: ALL FLIGHT PROCESOR PHP CODE ADDED.

I hope that something like that help you.

Use AJAX to sort MySQL search results

Answers (1)

Related Questions