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.
Related
I've searched other articles and jQuery documentation, but have not quite found (or understood) the solution I need.
I'm including Sharing buttons on our site using another online service. The procedure is to add a snippet of HTML (a closed with a specific class name) and include a call to their Javascript file.
<div class="specific_class_name"></div>
<script type="text/javascript" src="path to script.js#pubid=my-account-id" async="async"></script>
This works well on pages for which I have access to edit HTML and include scripts.
My challenge is how to include the Share buttons on pages for which I only have access to run Javascript and not to include specific HTML. I can add the closed element using jQuery .append and include the Javascript call, but this does not work as needed. If I inspect the page after it is fully loaded, I see that the dynamic element has been added correctly and the script has been called. Viewing the Page Source, the is not present.
Of course, I have no means of editing this service's script. I need the called script to find the dynamic element either during or following page load, not following any user / mouse action.
Thanks for any feedback.
Create the div and then use the getScript command to include it like:
$(window).on('load', function(){
$('<div class="class_name"></div>').appendTo("someIDyouhave");
$.getScript('path to script.js#pubid=my-account-id');
});
http://api.jquery.com/jquery.getscript/
Have you tried something like this? Append the element and then add a click event?
$(function() {
var appendedElement = $('<div id="myID"></div>')
$('.specific_class_name').append(appendedElement).on('click', '#myID', function(){
whatever();
});
});
This should work.
I'm working on a code playground type of web app. On each page there are upto 6 iframes containing results of whatever HTML/JS/CSS code a user creates/plays with.
I want to make jQuery available inside the head of each iframe as default.
Note that jQuery is available in the of the parent window so I was thinking if there could be a way to avoid six independent requests being fired from each of the iframe [heads] for the same script?
The only way to make jQuery available with a unique and consistent state that belongs solely to the iframe is to include the <script> tag that points to the jQuery script in each frame or dynamically load the script from each frame. This will reinitialize the jQuery state separately for the frame. There is no other way to get a new instance of jQuery for the iframe.
The browser will have the script in its cache after the first one so it won't be reloaded over the web each time.
You can do this:
When you create the iframe's content, you add the following code (or altered to use the "$"):
<!-- This goes in the "head" tag -->
<script type="text/javascript">
//We're creating jQuery
var jQuery = window.parent.jQueryLoader.getJQuery();
</script>
In your parent, you'd have this:
var jQueryLoader {
getJQuery: function() { return JQuery );
};
I am using a service that creates a form that I load on my website within an iframe. I can put custom javascript to load inside the iframe when the form loads (I add the javascript in the form creator on the service's domain). I believe the function must use either both or one of the parameters "form" and "function". Like so:
function(field,form){
code
}
Is there a function I can call so that it will load a css file from a different domain that will apply to the content inside of the iframe?
The domain in the iframe does load jQuery, but I'm not sure if it will allow me to call a jQuery function. If you give me a jQuery function, that would normally work inside of an iframe, I will test it out.
If you append a stylesheet link tag to the header, jQuery will handle creating and loading the stylesheet.
jQuery("head").append('<link rel="stylesheet" type="text/css" href="URL_TO_CSS_FILE" />');
Note that this does depend on your ability to add JavaScript that runs inside the iframe.
With jQuery you could simply inject a CSS tag in the head section of the page :
As soon as the tag is inserted, it will load the CSS
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.
I have a site which pulls pages into a dynamic interface. Currently, the main page requires that any javascript the external pages will need be loaded with the main page. Most javascript the external pages have are objects that are built when the page gets pulled in, but first, which causes issues.
It's a little hard for me to explain for some reason so here's a simple walk through of process.
1.Request a page be pulled in
2.Based on a variable passed to function create a specific object which will be associated with the physical html coming from the page ( This is the external Javascript)
3.Load page into the objects frame
This flow requires that the external javascript be attached to the main page not the page being pulled in.
I want to switch steps 2 and 3, but I assume that I will need a way to know that the page and all its scripts have fully loaded before attempting to create the designated object, but I have no idea how to do that.
I am using jQuery and hope that this can be accomplished without a plugin but if it is needed then so be it.
Thanks
Update
Good questions. So the pages are local pages that we build at this point, so we know what to expect. Also the pages are loaded just into basic div structure.
Specifically the main page makes a request to get a page. That page is returned in the form of a string and is then pasted into a div element that is on the main page. The pages are more like fragments I guess. But they can range from fairly complicated and require a bit of javascript to not using any javascript at all.
And the external javascript would generally be added via a script tag and is not inline.
Due to the dynamic nature of the page we do NOT use IFRAME's, they cause issues with the movement of our modules.
If you're using an iframe then I imagine you are changing it's src attribute. To get an alert on when that iframe is done loading you should include a script on the page within the iframe:
<script>
$(window).load(function() {
alert("All Done");
});
</script>
If you are just requesting a string version of a page via AJAX and populating a div you need some extra JavaScript to detect when those dynamically loaded script files have finished downloading to the client.
I would visit this link to get you started.
A combination of Nick and Mic's solution.
In your IFRAME pages, you need a way to determine when the content is done loading, or ready, and then alert your main page:
<script>
$(function() {
parent.frameReady();
});
</script>
In your main page, you can code in the hook from your IFRAMEs:
<script>
function frameReady() {
// attach custom js to iframe here
}
</script>