CODEWITHSUNDEEP
jqueryajaxcodeigniter
Markus
Markus

Reputation: 616

Use returned data from Ajax call, dynamic content

I'm trying to dynamically create some content using Ajax, php/Codeigniter and Javascript by submitting a form from a view to a controller that fetches and populates an array. The idéa is to fetch data using input from the form and create the charts (based on the fetched data) in the first view to be displayed in a pop up div.

I call this from the main view to submit the form: 

function test() {
    var url = "path/to/controller/"; 
    $.ajax({
        type: "POST",
        url: url,
        data: $("#myForm").serialize(), 
        success: function(data) {
            $('#test-container').show();
            $('#test-container').html(data);
        }
    });
}

to a function in the controller script that fills an array, let's call it fetchedData;

function getSomeData() {
    /* ..Fetching data.. */
    return fetchedData;
}

now I want to use that populated array in the first view where the Ajax call was made from in a pop up div like: 

<div>
    /* ...Use the content of the returned array (fetchedData) to make some charts with javascript and php..  */
</div>

Nothing is being displayed since I am unsure of what to do to get a hold of the data in the array. Is this possible or it the wrong approach? Should I perhaps load the content as a new view in the controller and try to present that in the pop up div..?

Upvotes: 1

Views: 1962

Answers (2)

DFriend
DFriend

Reputation: 8964

Different data types can be returned to the ajax request. This code

$('#test-container').html(data);

implies that - at the very least - plain text is being returned, although most likely the text includes html markup too. You need to know what type data is going to be in order to utilized it. Understand too that data is whatever you echo out of your php function. The most common data types returned are text/html and json.

if fetchedData is an array then you want to return json which typically shows up at the browser as a javascript object.

By constructing an associative array in PHP like 

$foo = 'fooish';
$bar = 123;
$out = array('somedata' => $foo, 'otherdata' => $bar);

and then echoing the json encoded version of this back to the client

echo json_encode($out);

the data object of success will look like 

{somedata: 'fooish', otherdata: 123}

You can use standard javascript notation to access the properties of the object like this data.somedata or data.otherdata.

On the other hand, if you create some html and echo that back from the server

echo "<div class='cool-stuff'>The value of $foo is $bar</div>";

then data will contain the string "The value of fooish is 123" and using the call $('#test-container').html(data); will likely produce an output in the browser. (It should anyway if an html element with the id of 'test-container' exists.)

I hope this help you get a handle on possible ways to get the results you want.

Upvotes: 0

Sylver
Sylver

Reputation: 8967

The "return fetchedData;" of a php function returns the data in PHP.

It does not however return "data" to the ajax function that called the PHP script.

To get the data back, you need to convert $fetchedData to a string and echo that string which then gets to the browser where your javascript function is running. And of course, you need to parse the string to turn it into an object.

So your php must encode the data, like so:

$data_json = htmlentities(json_encode($data));
echo $data_json;

And then you can parse the resulting json data into an object;

var data = $.parseJSON(json_data);

Upvotes: 0

Related Questions