Using jQuery or Ajax get function to pull in text from another page

Question

The short story is our CMS limits us to using solely html/js. I'm creating a dynamic graph page that has a lot of data that will be updated monthly. There is a separate php form on the server the staff member will fill out, that content is stored in the database, and there's another php file that displays the information. Jquery/Ajax needs to pull that info from the outside php page, which I've done on one other project. This difference this time is that I need to target specific sections of code to pull in, because the results will be going into a javascript variable for use in populating a graph.

With me so far? What I need jquery/ajax to do is target specific div ID's on the populating php page so I can direct it to the proper js variable.

I've looked at jston, but am not strong with JS, and thus that looks like Greek. Thoughts, Ideas, Suggestions?

EDIT:

I've tried this code:

$('#hiddenDiv').load('test.php #newdata');

Which imported nothing, even though there is text on the test.php page with a div with the id "newdata".

Any why don't you make a php file that displays just the info you need instead of making some sort of hack in the JavaScript layer? — epascarello
– epascarello, Commented Jul 22, 2011 at 12:19
So displaypage.html (within our CMS) has javascript code to display 2 graphs. There are roughly 10 parts to the graph that need to be updated dynamically based on the database. I need to update the javascript code on displaypage.html with some function grabbing the specific items and plugging them in. If I created the entire javascript code in php, how then can I pull it into the displaypage.html correctly? — Casey
– Casey, Commented Jul 22, 2011 at 12:55
@Treffynnon - The only code currently on that page is the hard coded graphs (using HighCharts). Any JavaScript lead I find I'm testing on another page though, so just looking for possible directions at this point, and which will give the best result. — Casey
– Casey, Commented Jul 22, 2011 at 12:57
@Casey as this is using Highcharts your PHP script should really be supplying an array structure of data that you can feed straight into the charting scripts as JSON. — Treffynnon
– Treffynnon, Commented Jul 22, 2011 at 15:08

James Allardice · Accepted Answer · 2011-07-22 14:00:18Z

3

You can use the jQuery load function:

$('#loadIntoMe').load('somepage.php #onlyLoadMe');

If there is a space in the URL provided as a parameter to the load function, it's assumed to be a jQuery selector and is used to extract the specified elements, instead of returning the entire document. See the docs for more information.

Update (based on comments)

To store the result in a variable, you could use a hidden div and a callback function:

var yourVariable;
$('#loadIntoMe').load('somepage.php #onlyLoadMe', function() {
    yourVariable = $(this).html();
});

edited Jul 22, 2011 at 14:00

answered Jul 22, 2011 at 12:18

James Allardice

166k22 gold badges335 silver badges316 bronze badges

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

6 Comments

Casey Over a year ago

This has some promise, but I'm not updating a DIV on the html page, I'm updating JavaScript code. How would I change the "#loadIntoMe" to reflect a JS variable?

James Allardice Over a year ago

You could update a hidden div, and use a callback function to get the content of the div into a JS variable when the load is completed.

Casey Over a year ago

Okay, where can I find a tutorial or information on how to do that?

Casey Over a year ago

Just saw that. Here's my Javascript: **JS var yourVariable; $('#hidden').load('test.php #data', function() { yourVariable = $(this).html(); }); I have a hidden div on that page with #id of "hidden", and on my php page the div's ID is "newdata". The variable doesn't seem to be pulling in any info (document.write came up empty).

James Allardice Over a year ago

Well if you've copied your code correctly in your comment, that would be because you are looking for an element with id "data" in the loaded page, but you said the div in question has id "newdata".

|

Treffynnon · Accepted Answer · 2011-07-22 12:21:47Z

0

All javascript graphing libraries I have employed have required a javascript object to be passed to them. In this instance I would be use jQuery $.get to get a json_encoded set of data.

PHP

<?php
header('Conent-type: application/json');
$array_of_data = array(
    'axes1' => array( // data goes here
    ),
    // etc and so on
);
echo json_encode($array_of_data);
?>

JS

$.getJSON('/url/to/php.php', function(data) {
    // console.log(data);
    // generate graph from data
});

answered Jul 22, 2011 at 12:21

Treffynnon

21.6k6 gold badges68 silver badges99 bronze badges

3 Comments

Casey Over a year ago

As I posted, I'm not overly familiar with JS, and the json functions are far above my head. Do you have a link to a good tutorial on how to implement? The way php is displaying the json code doesn't seem helpful in the least (most likely because I have no idea what I'm looking at).

Treffynnon Over a year ago

Try google.com . You aren't supposed to be looking at the JSON coming from the PHP directly, but through the jQuery $.getJSON method I mentioned above. Open up your firebug in Firefox to the console tab and un-comment my console.log() line above.

Casey Over a year ago

Thanks for your time, but as I said, I have little to no JS experience, and JSON seems a bit too advanced. Even with firebug, I don't have the experience using the "script" tab.

Collectives™ on Stack Overflow

Using jQuery or Ajax get function to pull in text from another page

2 Answers 2

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related