if you can edit the title please do! Revised version!!! This is main.php $(document).ready(function(e) { $("#searchForm").submit(function(e) { e.preventDefault(); $("#result").load("process_search.php",{"searchKeyID":$("#searchKeyID").val()}, function(response,status) { alert(response); }); }); }); <body> <form id="searchForm" method="post"> <table> <tr> <td> <input type="text" id="searchKeyID" /> </td> <td> <input type="submit" id="searchButtonID" value="Search" /> </td> </tr> </table> </form> <div id="result"></div> </body> This is process_search.php //search is done echo json_encode($results); print_r will show me the contents of the array in a non organized manner. I'm fully aware that I can just echo it in process.php in an organized way so that it'll appear in main.php as a proper organization of data. However, I want the array/obj to return to main and IN MAIN, the organized printing takes place. This is where I put ????? in my code How can I do that? I came across this link . Made me more confused. I don't know how the answer that got 57 votes works. How is it printing the second index. I copied the code the way it is and ran it. It printed the Damskie and Muskie. How did it know which index/val to go after? If I type alert(response); in place of the question marks, it works. I see the entire obj/array properly organized. I did see topics for printing an array but not like a record. ... I forgot to look for sites that print records in jquery :D ill look right away EDIT: i figured out how the code in the link I included worked.

printing ajax response which is print_r

Reputation: 23

Ok first of all, thanx to zombiecode for helping. His answer contributed to the solution I arrived at.

I have records retrieved from a database. I want to print these in the form of a table inside a div. There are two solutions: echo the table in process_search.php and it'll appear in the div container in mainpage.php where the load() method is used. The second solution is to receive the records in mainpage.php and dynamically create a table using jquery.

The first solution is easy. It's the second one I had trouble with. And I'm "experimenting".

Here's the solution using my own code

<script>
$(document).ready(function(e)
 {
     $("#searchForm").submit(function(e)
      {
          e.preventDefault();
          //linebegin
          $("#result").load("process_search.php", {searchKeyID:$("#searchKeyID").val()}, function (response,status)
           {
               var x = $.parseJSON(response);  //1
               var table = $('<table></table>');
               for (i = 0; i < x.length; i++)
                {
                   var row = $('<tr></tr>').text(x[i].email);
                   table.append(row);
                }

               $('#result').html(table); //3
           }); //lineend
      });
 });
</script>

<body>
 <form id="searchForm" method="post">
 <table>
    <tr>
       <td> <input type="text" id="searchKeyID" /> </td>
       <td> <input type="submit" id="searchButtonID" value="Search" /> </td>
    </tr>
 </table>
 </form>
 <div id="result"></div>
</body>

In process_search.php

    //do search using any method you want
    //echo the result
    //4
    echo json_encode($rows); // <--- zombiecode's contribution

In //4, if you change zombie's code to print_r($rows), this is what I'll see:- Array ( [0] => Array ( [id] => 13 [name] => abc [email] => [email protected] [username] => wildheart25c [password] => aaaaaa ) )

Ugly.

Here's how it looks when i echo json and parse it (mainpage.php //1) [{"id":"13","name":"abc","email":"[email protected]","username":"wildheart25c","password":"aaaaaa"}]

Much better right?

There is one problem here. The method LOAD prints the retreived content in the location/container specified ex: $("#result").load("process_search.php",etcetc). So that's why I wrote that line //3. It'll write over it. So I'm printing/displaying twice. The array the way it is and the contents of the array in the way that I want.

I'm assuming this is why zombie suggested I use post instead of load. Unless there's another reason. This link helped too If there's another reason please let me know.

If I want to use zombie's answer, I exchange the contents between //linebegin and //lineend with this

$.post("process_search.php", {searchKeyID:$("#searchKeyID").val()},function (data)
 {
     $("#result").append(data[0].email); //5
 },"json");

I showed you the "ugly" array and how in JSON it looks better and easier for you to go through. To accomodate zombie's code, if I want to print data to see the "easier better" content, I type alert( JSON.stringify( data ) );

If I want to see the first record only alert( JSON.stringify( data[0] ) );

In //5 I'm printing the email value of the first record in the object. I can just say data[0] and it'll print the entire array. Since I have one record returned then it's data0. If I had more records then data1 data2 and so on.

You can use the answer in this topic for printing the table. You'll need to do minor changes.

I hope this clears things everyone.

Upvotes: 0

Robin

Reputation: 1216

I would suggest to use $.post() instead of $.load(). If you do so, try to use this code:

$(document).ready(function(e) {
    $("#searchForm").submit(function(e) {
        e.preventDefault();
        $.post("process_search.php", {searchKeyID:$("#searchKeyID").val()},function (data) {
            // data is now the same Array as the one you had in process_search.php ; You can now work with it as you like ; e.g.:
            alert(data[0]);
        },"json");
    });
 });

<body> 
    <form id="searchForm" method="post">
        <table>
            <tr>
                <td> <input type="text" id="searchKeyID" /> </td>
                <td> <input type="submit" id="searchButtonID" value="Search" /> </td>
            </tr>
        </table>
    </form>
    <br />
    <br />
    <div id="result"></div>
</body>

When doing so, you need to change the printing in your process_search.php from:

print_r($result);

to:

echo json_encode($result);

Upvotes: 3

printing ajax response which is print_r

Answers (2)

Related Questions