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 information, but when "print" is selected, it formats the results to print a bubble sheet.

Here is the problem. Instead of displaying the "On Screen" results in textboxs, I would rather just display as normal text.

The active page is located at this address

The retrieval code is quite long, here is a sample.

<script>

  $(document).ready(function(){ /* PREPARE THE SCRIPT */

    $("#loads").change(function(){ /* TRIGGER THIS WHEN USER HAS SELECTED DATA FROM THE SELECT FIELD */

      var loadnumber = $(this).val(); /* STORE THE SELECTED LOAD NUMBER TO THIS VARIABLE */

      $.ajax({ /* START AJAX */

        type: "POST", /* METHOD TO USE TO PASS THE DATA */
        url: "actionprt.php", /* THE FILE WHERE WE WILL PASS THE DATA */
        data: {"loadnumber": loadnumber}, /* THE DATA WE WILL PASS TO action.php */
        dataType: 'json', /* DATA TYPE THAT WILL BE RETURNED FROM action.php */
        success: function(result){
          /* PUT CORRESPONDING RETURNED DATA FROM action.php TO THESE TEXTBOXES */
    for (i = 1; i < 14; i++) { 
        $("#prtDescription" + i).val("");
        $("#prtMethod" + i).val("");
        $("#prtPONumber" + i).val("");
        $("#prtGallons" + i).val("");
        $("#prtAmount" + i).val("");
    } 

      $("#NumberStops").val(result.NumberStops);
      $("#ShipperName").val(result.CustomerName);
      $("#prtship").val(result.CustomerName);
      $("#ShipperAddr1").val(result.CustomerAddress);
      $("#ShipperAddr2").val(result.CustomerAddress2);
      $("#ShipperCity").val(result.CustomerCity);
      $("#prtshipcity").val(result.CustomerCity);
      $("#ShipperState").val(result.CustomerState);
      $("#prtshipstate").val(result.CustomerState);
      $Phone = result.CustomerPhone
  $Phone = '(' + $Phone.substring(0,3) + ') ' + $Phone.substring(3,6) + '-' + $Phone.substring(6,10)
      $("#ShipperPhone").val(result.CustomerPhone);
      $("#ShipperContact").val(result.CustomerContact);
      $("#PickupDate").val(result.PickupDate);
      $("#prtdate").val(result.PickupDate);
      $("#PickupTime").val(result.PickupTime);
      $("#CustomerPO").val(result.CustomerPO);
      $("#Weight").val(result.Weight);
      $("#prtweight").val(result.Weight);
      $("#Pieces").val(result.Pieces);
      $("#prtpieces").val(result.Pieces);
      $("#BLNumber").val(result.BLNumber);
      $("#prtbol").val(result.BLNumber);
      $("#TrailerNumber").val(result.TrailerNumber);
      $("#prttrailer").val(result.TrailerNumber);

...

I tried document.write() but that cleared the page which is not what I am looking for. I want to keep my images and combobox selection box on the page so I can select other loads when needed rather then just one at a time.

Please help.... If you require more information to answer the question, please ask and I will post.

Answers:

Answer

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

Answer

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 :)

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.