Update div content using ajax

Question

I would like to update some divs within my page with database data through a click event. I have tried this but to no avail

MainPage.php

   function getResults(){
        $.ajax({
          type: "POST",
          url: "ajax.php",
          data: "profile=1",
          dataType: 'text'
        });
    }

ajax.php

 if($_POST['profile']){
    $sql="SELECT col1, col2, col3, col4, last_punch FROM table WHERE ID = 123";
    $result=mysqli_query($con,$sql);
    $row = $result->fetch_assoc();
    $row["col1"];
    $row["col1"];
    $row["col1"];
    $row["col1"];
    $row["col1"];

    echo "<script>";
    echo "$('#div1').text('$row["col1"]');";
    echo "$('#div2').text('$row["col2"]');";
    echo "$('#div3').text('$row["col3"]');";
    echo "$('#div4').text('$row["col4"]');";
    echo "</script>";
 }

EDITED

 function getResults(){
    $.ajax({
    type: "POST",
    url: "ajax.php",
    data: "profile=1",
    dataType: 'text',
    success: function(data){
    $('#div1').text(data.col1);
    $('#div2').text(data.col2);
    $('#div3').text(data.col3);
    $('#div4').text(data.col4);
}

AJAX

    $sql="SELECT col1, col2, col3, col4, last_punch FROM table WHERE ID = 123";
    $result=mysqli_query($con,$sql);
    $row = $result->fetch_assoc();
    $row["col1"];
    $row["col1"];
    $row["col1"];
    $row["col1"];
    $row["col1"];


echo json_encode( array( 
'col1' => $row["col1"], 
'col1' => $row["col2"], 
'col1' => $row["col3"], 
'col1' => $row["col4"] 
) );

This looked like it would work, but unfortunately didn't.

score 2 · Answer 1 · edited May 23 '17 at 11:53

You need to define a success callback to your ajax function:

function getResults(){
    $.ajax({
      type: "POST",
      url: "ajax.php",
      data: "profile=1",
      dataType: 'text',
      success: function(output) {
          // Do something with output
      }
    });
}

The 'output' is anything that is echo'd or print'd from your PHP script. You can also return a JSON object from PHP as well, if that makes your task easier (I would suggest it, in this case, since you have many different elements you want to update). See the jQuery documentation for $.ajax.

I would not suggest returning javascript from PHP that you want the client to then execute (because eval is bad). Instead, return the data itself and have your javascript do something with it.

This would mean changing your server script to output this:

echo json_encode( array( 
    'col1' => $row["col1"], 
    'col1' => $row["col2"], 
    'col1' => $row["col3"], 
    'col1' => $row["col4"] 
) );

And your client-side script to this:

function getResults(){
    $.ajax({
      type: "POST",
      url: "ajax.php",
      data: {profile:1},
      dataType: 'json',
      success: function(json) {
          // Here you should be able to access the contents of json.col1, etc
      }
    });
}

Thanks for the answer, i've just been trying to get it to work but can't seem to make it work, can you look at my edited version of my question please — , Jan 09 '14 at 20:38
You need to change the `dataType` parameter in your ajax call to `json`. If you do that, you also need to change the `data` parameter to be `{profile:1}` — Jeff Lambert, Jan 10 '14 at 15:13

score 0 · Answer 2 · answered Jan 09 '14 at 20:00

After getting success response append it in your div:

function getResults(){
        $.ajax({
          type: "POST",
          url: "ajax.php",
          data: "profile=1",
          dataType: 'text',
          success: function(data) {
            $("#your_div_id").append(data);
          }
        });
    }

DJ22T · Answer 3 · 2014-01-09T20:06:01.700

You need a callback function to add the data to the page.

function getResults(){
    $.ajax({
      type: "POST",
      url: "ajax.php",
      data: "profile=1",
      dataType: 'text',
        success: function(data){
            $("#your-target-div").html(data);               
        }
    });
 }

And in your php script.

<?php
 if($_POST['profile']){
    $sql="SELECT col1, col2, col3, col4, last_punch FROM table WHERE ID = 123";
    $result=mysqli_query($con,$sql);
    $row = $result->fetch_assoc();
    $row["col1"];
    $row["col1"];
    $row["col1"];
    $row["col1"];
    $row["col1"];


    $dump = "<script>";
    $dump.= "$('#div1').text('".$row["col1"]."');";
    $dump.= "$('#div2').text('".$row["col2"]."');";
    $dump.= "$('#div3').text('".$row["col3"]."');";
    $dump.= "$('#div4').text('".$row["col4"]."');";
    $dump.= "</script>";

     echo $dump;


 }
?>

It's also considered a good practice just to return the resource using json and set the html structure in javascript itself. But that's up to the coder's choice.

score 0 · Answer 4 · answered Jan 09 '14 at 20:01

You should paste result into the DOM to make it change.

In your example data is dumped.

You should attach a success handler to your ajax-call and push data to DOM inside it.

I.e.:

function getResults(){
    $.ajax({
      type: "POST",
      url: "ajax.php",
      data: {profile: 1},
      dataType: 'text',
      success: function(data) {
          $('.loaded_content').html(data);
      }
    });
}

score 0 · Answer 5 · answered Jan 09 '14 at 20:02

the $.ajax function can be define as

  $.ajax({
    url: "ajax.php",
    type: "post",
    data: 'profile=1',
    success: function(data){
       $("div#res").html(data);

    },
    error:function(){
        alert("failure");

    }
});

i think it work

Update div content using ajax

5 Answers5