0

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.

Community
  • 1
  • 1
user3340667
  • 23
  • 2
  • 6
  • what's it take to get 2 more rep points? I need to start a chat with him if he accepts and like the other topics I started, I want to vote on the right answer. – user3340667 Mar 09 '14 at 11:38

2 Answers2

3

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);
Robin
  • 1,208
  • 8
  • 17
  • 1. Please tell me how your code is organized when you copy it here. Do you actually keep clicking space until it looks good in the preview panel? 2. does this mean that it can't be done with print_r? Obviously all solutions are welcomed including plugins BUT can it be done MY WAY? :D – user3340667 Mar 09 '14 at 10:47
  • Copy pasting it from editor.. ;-) To your question: I wouldn't know an easy method to do it with print_r(); because print_r() ist just printing your array as plain text. You could parse that text with JS again and create an array so you can organise it again.. What I wrote you is a simple exchange via Ajax where you array is handled as an JSON object between php and JS. ;-) – Robin Mar 09 '14 at 10:49
  • good enough good enough. That's what I wanted. To be able to navigate through it. If my way can be done but it's a hassle and I have a solution such as yours then obviously I'll go with yours :D so data.array is now a json obj and i can make it skip rows or indexes and print specific data right? – user3340667 Mar 09 '14 at 10:52
  • Yes, didn't test my code, but should work that way. If not, let me know, I'll correct it ;-) – Robin Mar 09 '14 at 11:01
  • i was about to tell u it didnt work. the alert showed Object object. Like it wasn't defined or something – user3340667 Mar 09 '14 at 11:02
  • No, this is right. Sorry, forgot to add something, of course you get Object object wenn your alerting an complete array. But if you want so see e.g. the first entry of the array type alert(data.array[0]); - Edited my post above & simplified the handling in the *.php file as well. – Robin Mar 09 '14 at 11:15
  • forgive me but it's not working. still getting object Object in the alert. i even tried editing my code a bit and still no luck. i changed print_r($rows) to echo json_encode($rows) and the alert showed me an array of two rows. i deleted the question marks and put the loop from the link i included in my post. nothing >.< it should work. any chance i can email you? – user3340667 Mar 09 '14 at 12:28
0

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] => issmon441@hotmail.com [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":"issmon441@hotmail.com","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.

Community
  • 1
  • 1
user3340667
  • 23
  • 2
  • 6