Using jQuery pass data to PHP and retrieve data for display in another page

Question

I'm currently having 2 pages that is "index.php", "retrieve_search_forklift.php" and "search_forklift.php".

I try to passing the "txtSearch" input from index.php using jQuery $.post method to "retrieve_search_forklift.php" for execute the select query and echo the $output. In "search_forklift.php" will use a function to load the "retrieve_search_forklift.php" when page is load and display the $output in a table.

Index.php

$('#txtSearch').keydown(function(e) {
        var code = (e.keyCode || e.which);
        if((code == 13)){
            txtSearch = $('#txtSearch').val();
            $.post('php/retrieve_search_forklift.php',{
                txtSearch : txtSearch
            },
            function(data){
                //alert(data);
                window.location.replace("search_forklift.php");
            })
        }
    });

Retrieve_search_forklift.php

<?php
require('../database_connection.php');
if($txtSearch = $_POST['txtSearch']){
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }
$query = "SELECT f_brand, f_ftype, f_image, f_code, f_description, f_sale, f_rental FROM tblforkliftdetail WHERE f_brand='Toyota'";
$result = mysqli_query ($mydatabase, $query);

$counter = 0;
while($info = mysqli_fetch_array( $result )) 
{  
    if( $counter % 3 == 0 )
        $output .= "<tr>";
        $output .= "<td style='background-color:yellow; '><img src=".$info['f_image'] ." width=210px height=210px ></img></p></td>";
        $output .= "<td style='background-color:black;'>";
        $output .= "</td>";
    if( $counter % 3 > 1)
         $output .= "</tr>";

    $counter++;
}
echo $output;
}
@mysqli_close($mydatabase);
?>

Search_forklift.php

$(document).ready(function(){
loadsearchtblForklift();
});

function loadsearchtblForklift(){
$('#tblsearchForklift').load('php/retrieve_search_forklift.php');
}


<table id="tblsearchForklift">
    <tbody>
    </tbody>
</table>

Answer 1

I shall simplify this.

You are making a request from A to B; then asking C to show the data that B has generated earlier. This boy, is not possible unless you store the data of B somewhere(DB/file system).

why?

A --> B is a separate request and C --> B is separate. The server does not know that it has to store the data for future request use. You have to change the approach to fulfill this logic.

My Suggestion -

Discard 'Search_forklift.php' and directly show the results in the 'index.php' page directly.

changed index.php file

$('#txtSearch').keydown(function(e) {
        var code = (e.keyCode || e.which);
        if((code == 13)){
            txtSearch = $('#txtSearch').val();
            $.post('php/retrieve_search_forklift.php',{
                txtSearch : txtSearch
            },
            function(data){
                $('#tblsearchForklift').html(data);
            })
        }
    });


<table id="tblsearchForklift">
    <tbody>
    </tbody>
</table>

Or, store the result of 'Retrieve_search_forklift.php' in a txt file or into a CLOB column in database with a session key and retrieve it using the same key to display in the 'Search_forklift.php'.

This approach shall ensure that, the person after you who is going to curse everyday of their life maintaining it. May be you yourself may do that after an year or two. :) Don't get me wrong here. but i just want to make you understand the way web and programming life works.

EDIT: reading again, i got another approach (bad) idea. You can do this in one more way.

Once your ajax call in index.php is returned, POST the results to the 'Search_forklift.php' page and in there just say

<table id="tblsearchForklift"><?php echo $_POST[results]; ?></table>