I have used javascript to generate 2D bar-graphs in a HTML page.
When i am trying to load this HTML page containing bar-graph in to a div tag of some other HTML page using jQuery .load() function bar-graph (i.e, scripts) are not loading.
Please help on this issue.
For example i have bar-graph in xyz.html.
I am trying to load xyz.html in abc.html div tag using jquery .load() function.
Bar-graphs are missing.
Hoping for a reply, thanks for help in advance.
You should use iframe and load the html,I think,we can not directly load html in a div.
Are you generating the xyz.html output your self or is it created by some 3rd-party app?
If you're generating bar graphs your self, I recommend to generate just the content of body, not the whole site. Then the loading into abc.html should work correctly.
If they are not generated by you, use mhasan advice, but you shouldn't get the whole content oh html tag but only content of body tag.
BTW: have you an example of the script (js and html) somewhere to look at?
In jQuery you can use the
$(document).ready(function(){
});
to load the script when the page is ready. so you better put the chart generation script
inside this function in xyz.html (as said in your example).
You can also use this document.ready in your abc.html also to load the div.
Related
I have the following problem.
I have a typo3 page without any template I made by myself, but it gets in some way the style and the behavior of the other pages (I mean navigation, footer and so on). Now I have written some HTML inside the page by creating an HTML element.
In this HTML element, I included some js-code, which uses jQuery. The problem is, that the page loads the jquery at the footer and my scripts are loading before (in the HTML element). So my script does not recognize jQuery. How can I add my scripts at the whole end of the page? I know, that it has something to do with templates, but when I create a new template for the page, the whole content disappears.
Would be nice to get any help.
Cheers,
Andrej
It is usually good practice to read all your JS from a single file placed in the footer of the page. Add this to the setup section of your page template:
page.includeJSFooter.scripts = fileadmin/js/scripts.js
Then remove the JS from the HTML template and put into this file. This file could hold all your custom JS and possibly even all the libraries you use on the page (if you are not loading them from a CDN).
Bonus: the JS doesn't have to be re-loaded on every page view but can be read from cache.
For reference: https://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Page/Index.html#includejsfooter-array
I hope by template you mean a template record where you store your TypoScript? Otherwise this answer is not what you are looking for. :)
You can just add an extension template on your page that only adds to the rest of the TypoScript but does not override anything. To do so, go to the template module, choose "info/modify" in the dropdown at the top and use this button
Explanation: an extension template has the checkboxes for clearing the constants and the setup not checked and will not mess with the rest of your site's TypoScript:
I have an image and i want, once i click it, that a particular html page is displayed into a specific div. I found several answer yet, but none of them seems to work.
I'm thinking something simple with jquery, like the answer given here: display html file in a div
What's your solution ?
Thanks in advance.
EDIT1
I want to load an internal html page ( not an external page from another webiste ) by clicking an image.
This is the code i used taking example from the answer on the link above.
<script type="text/javascript">$(document).ready(function(){$("mainscreen").load("/home/dontrythisathome/Programmazione/HTML/Progetto-Corso-Inglese/Misc/FILE/HTML/ChiSiamo.html");}</script>
"mainscreen" is the final div when i want to display the html page.
Inside the function .load() there is the path of the html page.
But no html page is displayed into the div.
EDIT2: I found the silly mistake. I use this structure: when the correct position of the elements is . I could remove also the element but i'm using CSS and i'm more comfortable to place elements than using tag options instead. Thanks for all your replies. Tomorrow i'll see if the code with jquery works.
I think your Problem is, that when you load another website using .load().
All the other websites CSS/JavaScript gets loaded and yours gets overwritten.
Could you tell us, what you are trying to accomplish?
Are you loading a html-page from your own website or an external url?
If you dont care for the styles that other website uses, you could do something like this:
.load("example.com/some.html #content");
This loads the url you specifies and just copys the content of the HTML-Element that corresponds to this selector into your target element. (ONLY INLINE-CSS will be applyed that way, you would need to do that styling manually)
EDIT: Thank you for updateing your question.
You are trying to load a file from your filesystem.
Add file:// in front of the path to your .html file.
NOTE: Especially when you are trying to use AJAX you should use a local website and work with relative paths! This makes it much easier to deploy the website afterwards as you do not have to rewrite all your URLs.
Here is jsFiddle
Your html code
<img class="img" src="http://www.lessons4living.com/images/penclchk.gif" width=100 height=100>
<div class="targetDiv"></div>
Your javascript
$(document).ready(function(){
$(".img").click(function(){ //capture the event and ignite your work
loadPage("http://fiddle.jshell.net/"); //call our function
});
});
function loadPage(link){
$.get(link,function(data){ //dont forget cross-browser rules.
$(".targetDiv").append(data) //appended in to your div
})
};
Or you can use .load function with link parametre.
Lets say you have the following HTML code.
<div id="mainscreen">click on the image to load html …</div>
<img id="js-image" src="http://cl.ly/image/0A1P1s3r2M0u/Bildschirmfoto%202014-05-24%20um%2021.59.23.png" />
And some JavaScript code (with jQuery).
var image = document.getElementById('js-image'),
mainscreen = document.getElementById('mainscreen');
$(image).on('click', function() {
$(mainscreen).load("http://fiddle.jshell.net/florianpircher/tmRy9/show/");
});
Demo: http://jsfiddle.net/florianpircher/6wXBu/1/
You can not use $("mainscreen") because that would select <mainscreen> and not #mainscreen. In jQuery, you need a CSS-selector (like $("#mainscreen")).
I have a javascript variable with a full html code (html, head, body), not just body content. Now I need to render that code into another html page.
An iframe without src works great loading the code via jquery:
$("#myIframe").contents().find('html').html(myJsVar);
But I cant catch the keyup event in that iframe and that is mandatory.
My desired solution is to use an div that can render the page, but i think that it is impossible :(
Do you have any other idea?
Very much thanks!
This seems pretty straightforward: jsFiddle example
$('#myIframe').contents().find('#myInput').keyup(function() {$(this).val('new value');});
UIWebView is loaded with a long html. How to paginate the UIWebView, without the content or image in it getting cut? I have tried using ePubjs but not sure how it works! Can anyone help?
There is JavaScript file contain function for pagination google it, and also you need to inject your HTML file to insert the HTML tags needed to make the pagination function work.
I'm trying to run an $.ajax()-call inside of an dynamicly with jQuery generated iframe.
So somehow the jQuery instance needs to get passed into the iframe after it was generated and then then "$.ajax()" must get called... maybe with eval?
So to be clear, not only the iframe should get generated dynamicly, also the content inside the iframe (the JavaScript) should get generated and executed on the fly. And the dynamicly generated JavaScript inside the iframe should be able to use the jQuery instance of the script it was generated by to make use of $.ajax().
Hopefully it's somehow clear what I mean :-)
I'm happy about any suggestions.
I would suggest creating an iframe dynamically and appending using jQuery. Afer that set src to a basic page you have already created that contains:
<script type="text/javascript">
$(document).ready(function() {
$.ajax(...)
});
</script>
That should ensure that the page fires off your ajax request once it's loaded in the iframe.