HTML output through JSON, activated by ajax

Question

Background:

I have a page which dynamically pulls up a modal window, which displays extended information on a row (with multiple columns) through mySQL. I am having issues where my JSON code will not populate the information correctly so that it can be outputted. I have tried multiple nested arrays, while loops and for loops. However, I only need to return one full row of information from the database. After scratching my head, I am asking the help of all the SO experts. Any pointers are much appreciated.

Ajax Code For Div Population (Works)

  var data_id = $(this).data('id');
                $.ajax({
                    url: 'view_agency_info.php',
                    type: 'POST',
                    data: {id: data_id},
                    dataType: 'json',
                    success: function(data){
                        $('.view_modal_content').html(data.html); // LOAD THE DATA INTO THIS DIV
                    },
                    error: function(jqXHR, textStatus, errorThrown){
                        $('.view_modal_content').html(''); // LOAD THE DATA INTO THIS DIV
                        alert('Error Loading Information');
                    }
                });

JSON Code To Pull Information and return HTML

<?php
$customer_id=$_SESSION['customer']['customer_id'];
$id = (int)$_POST['id'];
$query = "SELECT * FROM collections_list WHERE id={$id} && customer_id=$customer_id LIMIT 1"; //expecting one row
$result = mysql_query( $query );
//$message = mysql_fetch_assoc( $result ); //expecting just one row
$message=array();

while ($row = mysql_fetch_assoc($result)) {
    $message[]=$row['agency_name'];
    $message[]=$row['account_number'];
    $message[]=$row['phone'];
}

$json = array();
$json['html'] = '<p><pre><code>id:'.$id.'.<br>Agency Name: '.$message[0].'<br>Account Number:'.$message[1]."<br>Phone:".$message[2].'</code></pre></p>'.'<br><br>test';

header('Content-Type: application/json');
echo json_encode( $json );
?>

Additional Question:

Is it possible to reference the headers in the array using " $message['agency_name'] "inside the html that gets returned?

After solving this problem, I will need to turn the outputted html into a structure to allow my users to view the information in a properly understandable format. I know how to do this in html, but I am unfamiliar with JSON... Is there a way to output the information without having to manually code the structure?

Thank you in advance.

Like a bad idea, you can also set field: $json['data'] = array('id'=> $id, 'Agency Name', $message[0], 'Account Number' => $message[1], 'Phone' => $message[2]); And use it later in JS like data.data :) — dikirill
– dikirill, Commented Apr 5, 2013 at 17:59
I apologize, I am a complete json&ajax newbie: I understand what setting the array would do, but how in that instance could I use it to return FORMATTED HTML with the variables inserted? Also, what advantage would that have for my particular implementation? — hawkhorrow
– hawkhorrow, Commented Apr 5, 2013 at 19:03
It is just dirty way of passing HTML thru json. Try to build html after you got JSON data. — dikirill
– dikirill, Commented Apr 5, 2013 at 19:39
why are you spitting out the rows in your php? bad practice use javascript to decode json — Dnaso
– Dnaso, Commented Apr 5, 2013 at 20:11

Dnaso · Accepted Answer · 2013-04-05 21:44:44Z

2

$con = mysql_connect("localhost","user","password");
 if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db(db_nname", $con);



$result = mysql_query("SELECT phone,agency_name FROM  '''' ");

 $rows = array();
 while($r = mysql_fetch_assoc($result)) {
  $rows['results'][] = $r;

 }

print json_encode($rows);


   ?>

and in your html

       <table id ="listtable"></table>

  var listdiv = $("#listtable");

      $.getJSON("whatever.php",function(json){
  $.each(json.results,function(i,data){ 
         listdiv.append("<tr><th>" + data.phone + "</th><th>" + data.agency_name + "</th></tr>");

    });     
      });

and in the append use data. and whatever your fields are data.agency_name data.phone

etc....

edited Apr 5, 2013 at 21:44

answered Apr 5, 2013 at 20:15

Dnaso

1,3554 gold badges22 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

hawkhorrow Over a year ago

Ok, thats a clearer explanation of how it can be populated, but for example, in the html... how could I use this code to make a formatted table. i.e. <table><tr><td>Name: $name</td><td>Account: $account</td></table>

hawkhorrow Over a year ago

I may also point out that the reason why I can't output the full rows for your answer is because I am not going to use all columns for the populated information. Any way to modify your code so that it only returns necessary columns, or would you just recommend to only use data.#1 data.#3 data.#5 for example

Dnaso Over a year ago

yes you limit the rows in your php select statement . select phone, account_number from whatevertable ... or you can restrict it in js and just use this for the append......'look at edited code'

Dnaso Over a year ago

and just an fyi, web development is starting to veer away from the table structure, you can get the same look and a more flexible layout using lists.

msanford Over a year ago

mysql_* functions are deprecated; use PDO instead.

|

Collectives™ on Stack Overflow

HTML output through JSON, activated by ajax

Background:

Ajax Code For Div Population (Works)

JSON Code To Pull Information and return HTML

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Background:

Ajax Code For Div Population (Works)

JSON Code To Pull Information and return HTML

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related