loading content with jQuery / Ajax
I am working on a small code snippet.
The Issue: I want to have a couple of buttons, that on click load content into a div, using ajax.
I can get it working absolutely fine, with say images, and text. But cannot load with css and js.
Example: the index page:
<input type="button" onclick="example_ajax_request()" value="Click Me!" /> | <input type="button" onclick="example_ajax_request2()" value="Or Me!" />
<div id="example-placeholder">
<p>Placeholding text</p>
</div>
<script type="text/javascript">
function example_ajax_request() {
$('#example-placeholder').html('<p><img src="images/loader.gif" width="220" height="19" /></p>');
$('#example-placeholder').load("fat.html");
}
</script>
<script type="text/javascript">
function example_ajax_request2() {
$('#example-placeholder').html('<p><img src="images/loader.gif" width="220" height="19" /></p>');
$('#example-placeholder').load("joined_today.html");
}
</script>
The page joined_today.html is a ful开发者_高级运维l blown webpage ( which contains a div element ) only, and shaows AMCHARTS. Which obviously utilise js inc Raphael.
Anyhoo, the issue arises, from any webpage with headers, html and body tags. The script above doesnt render these.
So what am i doing wrong. Seemingly, we can only load into div id example_placeholder content that doesnt include JS, or CSS
Is there a better way.
Essentially our scenario is this ( I want to avoide iFrames )
We have web page, and a content div, with 3 buttons above the div. On click of each button, the div gets loaded with a chart ( using amcharts js version ) On click of another button , another chart gets loaded inplace of the first chart, etc etc
Perhaps I am going about this wrong, any help appreciated.
Ste
You need to insert the <style>, <link> and <script> tags in another place, e.g. <head> or end of <body> with something like:
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'somescript.js';
document.getElementsByTagName('head')[0].appendChild(script);
One potential problem is to check whether a file (css or javascript) has been inserted. You may need to maintain a global list to check whether a file is already included.
Take a look at this source for "DOM-based On-Demand JavaScript".
Easy way to do this: load the js and CSS files on the parent page.
加载中,请稍侯......
精彩评论