Jump to content

Echo A Jquery Script


chasethemetal

Recommended Posts

Hey all! I can't figure out how to echo a script onto a page. This is my situation. I have index.php loading process.php via jQuery $(#div1).load('process.php'); on process.php I have some jQuery like so. echo ' <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script><script>jQuery in here</script>'; if I go to process.php everything is displayed properly. But if I go to index.php nothing get's loaded into the div. Any tips n tricks again would be awesome! thanks.

Link to comment
Share on other sites

Javascript code loaded through ajax doesn't get executed automatically. You need to return only the Javascript code, no HTML or <script> tags, and you can add that code to the page to execute. There's probably no reason to try and include the jQuery code if you're already using jQuery to send the ajax request. You only need to load jQuery once. I'm not sure how jQuery would do it, but you need to create a new script element, add the code to it that was returned from PHP, and append the script element to the head. This is how you would do it in plain Javascript: var el = document.createElement('script');el.setAttribute('type', 'text/javascript');el.innerHTML = code_from_ajax;document.getElementsByTagName('head')[0].appendChild(el);

Link to comment
Share on other sites

I guess I should explain more of whats going on. And I apologize I'm not actually loading jQuery I am in fact loading javascript. Whats going on on in the process.php page is the Google Charts API, and I have php graphing information into the API. So the code looks more like this <div id="chart"></div><script that points to the api></script><script>graph script here</script> and when I load() this into index.php the only thing that comes through is the <div id="chart"></div> the scripts don't seem to execute, though using safaris inspect element everything is listed as a resource. Any more thoughts anyone?

Link to comment
Share on other sites

That's exactly what I'm talking about, when you just add text that contains code like that it does not execute the code. That's what I explained in the first post. The deal about including jQuery is that it is not necessary to put a script tag pointing to that API in the output. You are already using jQuery to send the ajax request in the first place, so jQuery is already there. You don't need to include it again. All of this code ends up executing on the same page, where jQuery is already loaded. If you need to return both elements and Javascript code, then you'll need to split them up. You can send a JSON object that contains one section for the HTML to add to the page, and one section for the Javascript code to execute. You would add the HTML portion wherever you want it, and then attach the Javascript code like I already showed.

$output = array();$output['html'] = '<div id...';$output['javascript'] = 'function test() ...';echo json_encode($output);

Link to comment
Share on other sites

Thanks. Well I do need to include the script, its pointing to the google charts API, not jQuery, and the charts API is written in javascript. This is exactly what I am attempting to load from process.php through the load() method onto index.php. echo "<script type='text/javascript' src='https://www.google.com/jsapi'></script> <script type='text/javascript'> google.load('visualization', '1', {packages:['corechart']}); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Year'); data.addColumn('number', 'Sales'); data.addColumn('number', 'Expenses'); data.addRows([ ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, title: 'Company Performance', hAxis: {title: 'Year', titleTextStyle: {color: '#FF0000'}} }); } </script><div id="chart_div"></div>"; Now I am not familiar with json, or how that works at all. I am really just beginning to learn javascript and jQuery... Maybe this topic should be moved into the javascript forum, but maybe the answer still lies in the php....

Link to comment
Share on other sites

The only thing you're using PHP for is to echo the code. It's the same situation though, except you need to add one more element in the array for the URL of the script to include.

$output = array(  'html' => '<div id="chart_div"></div>',   'javascript' => "google.load('visualization', '1', {packages:['corechart']});google.setOnLoadCallback(drawChart);function drawChart() {var data = new google.visualization.DataTable();data.addColumn('string', 'Year');data.addColumn('number', 'Sales');data.addColumn('number', 'Expenses');data.addRows([['2004', 1000, 400],['2005', 1170, 460],['2006', 660, 1120],['2007', 1030, 540]]);var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));chart.draw(data, {width: 400, height: 240, title: 'Company Performance',hAxis: {title: 'Year', titleTextStyle: {color: '#FF0000'}}});}",   'scripts' => array(    'https://www.google.com/jsapi'  )); echo json_encode($output);

So you have an array with 3 elements, 'html', 'javascript', and 'scripts'. The scripts element is another array of URLs to add as scripts, right now there is only one there. You'll need to look into the details about how jQuery works with JSON, but the end result should be that after the ajax request you have the same array in Javascript that you had in PHP. If you name that Javascript array "result", then you would add result.html to wherever you want to put the div, you would use result.javascript for the Javascript code in the example I posted earlier, and the result.scripts array would be an array to loop through where you add each item to the head:

for (var i = 0; i < result.scripts.length; i++){  el = document.createElement('script');  el.setAttribute('type', 'text/javascript');  el.setAttribute('src', result.scripts[i]);  document.getElementsByTagName('head')[0].appendChild(el);}

Since your other code depends on that script being loaded, you'll need to add those scripts to the head before you add the Javascript code. You can use this same model whenever you need to send back other mixed content through ajax.

Link to comment
Share on other sites

Thanks for the pointers. I've got my work cut out for me. After some reading I realize that the google charts api has special ways to call the graphs using ajax and the such. You can just do it that way and thats most likely why the charts won't render for me. I'll post any findings! thanks!

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...