Retrieve Records Using Ajax And Display Them In Php

I currently have a webpage that works great. I select my load number and a ajax query gets the information and puts the results in textboxs. The page is split, one part displays in

Solution 1:

Why not just make a new div after your load selection and simply append all those results into it?

Solution 2:

There are different options to use Ajax as per your Requirement. You can replace the Entire div with the new Data or with the Entire HTML or you can change the selected part alone. It is up-to you who have to choose the suitable method which will be easy for you.

These are the methods available:

Method 1:

function testAjax(handleData) {
  $.ajax({
    type: 'POST'  
    url:"yourpostpage.php", 
    data: "&s=1", 
    success:function(data) {
      handleData(data); 
    }
  });
}

This above method will replace the Ajax success with the data that is available after your process is completed.

Method 2:

function testAjax(handleData) {
  $.ajax({
    type: 'POST'  
    url:"yourpostpage.php", 
    data: "&s=1", 
    success:function(html) {
      handleData(html); 
    }
  });
}

The above function will replace the entire success div with the new HTML part.

Now i will illustrate it with a simple example of how to replace the div using PHP and HTML using AJAX.

Scenario: User Has to select the city and the City Details will load up in Ajax.

HTML:

<select name="city" onchange="selectcity(this.value)">
    <option value="">Please Select</option>
    <option value="1">USA</option>
    <option value="2">Europe</option>
</select>
<div id="ajax_output">
</div>

While selecting the city it will load up the function by using onchange attribute in jQuery and the Ajax will be passed.

JS:

function selectcity(a) {
  $.ajax({
    type: 'POST'  
    url:"yourpostpage.php", 
    data: "&city="+a, 
    success:function(html) {
      $('#ajax_output').html(html);
    }
  });
}

In the JS am getting the selected value using a since i have passed a parameter to the function and passing it to the Ajax Page.

Ajax Page:

Note: Ensure that if you are going to display the information form the DB you have to connect the DB file to the Ajax page.

<?php
$city_id = $_POST['city']; // Jquery Data that i am retriving on Ajax Page
$select="SELECT * FROM TABLENAME WHERE `city_id`='".$city_id."'";
$query = $con->query($select);
$count = $query->num_rows;
if($count==0)
{
    echo 'No Data Found';
}
else
{
    while($fetch = $query->fetch_assoc())
    {
    ?>
        <div class="col-sm-6">
            <label>City</label>
            <span><?php echo $fetch['city_name']; ?></span>
        </div>
        <div class="col-sm-6">
            <label>Place</label>
            <span><?php echo $fetch['place']; ?></span>
        </div>
    <?php   
    }
}
?>

Now in my example i am going to replace the #ajax_output div with the content that is going to come from the Ajax page.

As per the request made in the question i hope so this would be the easiest method so that PHP will execute faster when compared to the JS and the Errors will also be minimal when you use this method.

Hope so my explanations would be clear for you and if you face any hindrance in development let me share thoughts and i will provide you with a solution.

Happy Coding :)