CODEWITHSUNDEEP
phpjqueryhtmlarrays
w1nter
w1nter

Reputation: 367

Using array result in html from php page

I have the following code in my html page:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("#button0").click(function(){
        $responses.get("*url here*",$("#form0").serialize());
        $("#div0").load($responses[key1]);
    });
});
</script>

</head>
<body>
<div id="div0">One response will appear here</div>
<form id="form0">
    <input type="text" name = "query" />
    <button type="button" id="button0"> enter your question here </button>
</form>
</body>

and then in my php page I have:

<?php
$query = $_GET['query'];
$array = array(
        key1 => $query,
        key2 => "hello"
);
echo $array;
?>

First of all, the php page simply returns "Array". Is this simply the name of the array, or will it be usable in the html page to get the values out of it?

Secondly, when I do "$responses.get..." I am hoping that it will create a variable "reponses," then set it to be whatever the php sends out (currently, key1 of the array is set to be whatever is inputted to the form, but I will update this later of course). It should then load what is in key1 of the array into div0. Not only is it not setting $responses as anything, but I am confident that even if it did, div0 would not be set as intended either. How do I solve this?

I was originally thinking I could do it more directly with:

$("#div0").load("*url here*",$("#form0").serialize())[key1];

but this didn't work so I decided to split the problem up, and as you can see had no luck there either.

Thanks in advance for your help.

____UPDATE1____

I have changed the code in the php page to this:

echo json_encode($array);

and the code in the html page to this:

$.get("url/here",$("#form0").serialize(), function(response){
        $.each(response, function(index){
            $("#div0").load(response);
        });
    });

which throws the following error: Uncaught TypeError: Cannot use 'in' operator to search for 'length' in {"key1":"","key2":"hello"}

alternatively, writing

$(response).each(function(index){
            $("#div0").load(response);
        });

throws the error: Uncaught Error: Syntax error, unrecognized expression: {"key1":"","key2":"hello"}

But this is progress! Thank you all so far for your helpful answers.

____UPDATE2____

I have decided to do this instead of iterating through the array:

$.get("url/here",$("#form0").serialize(), function(response){   
        $("#div0").load(response.key1);
        $div0answer = response.key2;
        $("#div1").load(response.key3);
        $div1answer = response.key4;                
    });

where response will be something along the lines of {"key1":forminputhere,"key2":"hello","key3":forminputhere,"key4":"hello"}

However, response.key1, response.key2 etc are all "undefined". So this is clearly not how to extract elements from an array in html. response[0] gives "{" too, which is not ideal. Similar questions online all seem to involve iterating with each (as I did after update1, not that that was successful either!) - is what i'm trying to do even possible?

____UPDATE3____

Doing this:

$.get("http://community.dur.ac.uk/matthew.poyser/assessment.php",$("#form0").serialize(), function(response){
        $.each(JSON.parse(response), function(index){
            $array.push(index)                  
        });
    });

just makes the $array = key1,key2,key3,key4, and completely ignores all values of the array.

Upvotes: 1

Views: 1803

Answers (2)

w1nter
w1nter

Reputation: 367

____UPDATE 4____ 

$.get("url/here",$("#form0").serialize(), function(response){
    $.each(JSON.parse(response), function(index){
        $array.push(JSON.parse(response)[index])
    });
});

Upvotes: 0

Zarathuztra
Zarathuztra

Reputation: 3251

That's because you're just using echo $array, which just prints out the reference to the array.

If you need to output the contents of an array you need to use print_r($array) or vardump($array)

However, it doesn't look like that's what you want here.

What you seem to want is for the PHP script to output something to your AJAX call, is that right? Well, you need to send back your response in something jQuery will understand, and PHP var dumps are not the way you go. You need to use a very important function in PHP called json_encode(), and it'll accept an array

json_encode($array);

This will encode your array as a json response which you can then echo out

echo json_encode($array);

Now, in your javascript, you need to intercept this return value. What you're doing is not the way to do it.

You have the following

$(document).ready(function(){
    $("#button0").click(function(){
        $responses.get("*url here*",$("#form0").serialize());
        $("#div0").load($responses[key1]);
    });
});

This won't work at all. $responses isn't defined anywhere. What you're looking for is the jQuery function .get() so you just need $.get(). The $.get() function takes a few parameters, namely your response callback, the most important

$.get('url/here', function(response) {
    // stuff
});

That response variable being passed into the function via callback contains the json response we output before using echo json_encode($array). From there, you can use the response as a hash, or as a regular json object. The hash version is quite simple to iterate through

$(response).each(function(val) {
    //do stuff
});

Please checkout the jQuery document on $.get() before going any further, and I would also read up on AJAX a little more.

Upvotes: 5

Related Questions