I'm creating a Java Script widget for the site based on CodeIgniter. The site using templates and Blade library. I need to load my java script right after the page has been loaded. I have added it into template scripts.blade.php:
<script src="{{apps_url('assets/my_widget/js/my_widget.js')}}"></script>
Unfortunately, it seems, what my script was executed before controller has been loaded and therefore the script can not find required SVG object:
(function() {
var container = d3.select(".myContainer");
alert("container: " + container);
})();
This alert show what container is null even if the myContainer object actually exists on the page and was recognized by CSS. The d3 library has been loaded properly and there is no errors in the Firefox console.
Is there a way to execute this script right after the object has been loaded?
use
$(document).ready(function() {
(function() {
var container = d3.select(".myContainer");
alert("container: " + container);
})();
});
Related
I have a few web pages that load Javascript files with the same basic structure.
page.html
<script src="js/common.js"></script>
<script src="js/page_specific.js"></script>
I now want to make a change to my pages to load some data from a backend server before running the page_specific.js.
The way I have done this so far is to remove the page_specific.js script tag from the HTML, create a Promise in the common.js that resolves once it has the data from the server. Then in the page.html I load the page_specific.js once the Promise is resolved:
// Load the options first (in common.js) and then load page specific js.
loadOptions.then(() => {
var js = document.createElement("script");
js.onload = () => {
page_specific.Init();
}
js.src = "js/page_specific.js";
document.body.appendChild(js);
});
This works but it, of course, means I have to change each of my pages (remove the script tag and add JS to load it dynamically later as per above).
Is there a way to achieve something similar that doesn't require changing every page (e.g. within common.js)? If not, is there any downside to the above method?
ETA: there is also a page specific function that is called from the HTML (different names). I've added the onload in code above.
i have a problem with my page.
When i click on a link on my page, it will load a external html inside a div in the page. the div with the id="div1". (AJAX)
It works perfect.
the external html-page which has been loaded includes a div with the id="rex".
My Problem is:
i have a script, which must add content in the div (with the id="rex")
i wrote the script in the external file, but it doesn't run.
probably i must write my script in the page and not in the external html-file.
here the script Number 3:
$('#rex').ready(function() {
var url="genredetail.php";
var activitydetail = sessionStorage.activitydetail;
$.getJSON(url,function(json){
$.each(json.genredetail,function(i,item){
if(item.name == activitydetail){
$('<p class="excerpt">' + item.beschreibung3 + '</p>').appendTo('#rex');
}
});
});
});
This script must run when the external file (with the div id="rex") has been loaded. But it doesn't :-(
What can i do? Is the problem that the script runs before the page get the <div id="rex">?
Thanks in advance, and sorry my bad english :-S
A picture for more clearness
the script number 1 makes the link.
when i click on a link, the script number 2, let the site load in the div1.
The script number 3 must fill the div="rex" with informations. but it doesn't run.
try onload
$('div').on("load","#rex",function() {
do something
});
Try using setInterval, so it check the element rex every 0.5 s
var myInterval = setInterval(function(){
if ($("#rex").length)
{
var url="genredetail.php";
var activitydetail = sessionStorage.activitydetail;
$.getJSON(url,function(json){
$.each(json.genredetail,function(i,item){
if(item.name == activitydetail){
$('<p class="excerpt">' + item.beschreibung3 + '</p>').appendTo('#rex');
clearInterval(myInterval);
}
}, 500);
You need to reload the script if it is already loaded. As you said you are loading the external html inside a div, does it include the external js file you are using? if not please include it.
I'm trying to run my site's script.js main javascript file inside my tinyMCE instance. The idea is to have functionality, such as my sites slideshow, also running inside tinyMCE for optimal realistic editing.
I'm not even sure this is possible how I intend it.
Here's the function I use to initialize:
function set_html_tinymce() {
tinymce.init({
selector:'#edit_html_textarea',
... ...
});
// LOAD jQUERY AND SCRIPT.JS INSIDE TINYMCE
var scriptLoader = new tinymce.dom.ScriptLoader();
scriptLoader.add('http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js');
scriptLoader.add('../js/script.js');
scriptLoader.loadQueue(function() {
alert('All scripts are now loaded.');
});
}
Here's the contents of my test script.js:
$( document ).ready(function() {
alert('a');
$('.slideshow').on('click', function() {
alert('b');
});
$('.slideshow').click(function() {
alert('c');
});
});
I get the first alert a and All scripts are now loaded., so the script.js is indeed loaded. However when I click on a .slideshow class div inside tinyMCE I get neither b nor c alert.
How can I load and run a jQuery/JS file inside tinyMCE, and have it execute in the same manner it would on the site itself?
I would love an officially supported solution but if this isn't possible I will settle for a 'hack'.
the problem is that TinyMCE uses designMode, so in order to add a js file to the iframe, you must first turn off designMode.
This solution worked for me:
var editor = $(tinymce.activeEditor.getBody())[0];
var iframe = $R('txtTinyMCE_ifr');
editor.designMode = 'off';
var script = iframe.contentDocument.createElement('script');
script.setAttribute('src', '../../scripts/tinymce/iframe.js');
editor.appendChild(script);
editor.designMode = 'on';
You should add this code to the init_instance_callback function for TinyMCE.
On a page i try to fill an empty <iframe id="myFrame"></iframe> with the HTML code of an ajax result. That works well, except script tags in the code are not being executet, so i have to readd them to the iframe's page:
$.post('page.php', function(code) {
$("#myFrame").contents().find("html").get(0).innerHTML = code;
$("#myFrame").contents().find("script").each(function() {
$old_script = $(this);
$frame = document.getElementById("myFrame");
$new_script = $frame.contentWindow.document.createElement("script");
$new_script.type = "text/javascript";
$new_script.src = $old_script.attr("src");
$old_script.remove();
$frame.contentWindow.document.head.appendChild($new_script);
});
});
That works basically, but the document seems to load the Javascript files in a different order. There are 3 js files to load: jquery.min.js, a jquery plugin and a main.js file to control the bahavior inside the iframe:
// main.js:
$(document).ready(function() {
alert("frame document loaded");
// call the jquery plugins etc...
});
The page alerts me "frame document loaded", but cannot execute the jquery plugins. Double-checked the script paths, but they're right. Seems that the jquery.min.js and main.js are loaded before the plugin files.
How could i achieve to load the javascript files one by one as specified originally in the code returned by the ajax request?
EDIT: Forgot to say that sometimes everything works well and the javascript seems to be loaded correctly. On reload it breaks again.
I'm using window.open to create an empty window and then populating it using jquery DOM manipulation methods. One thing I'd like to do is make sure the new window has all the same scripts available in it that are in the parent window. I'm also duplicating all the style sheets, plus any other data that's in the parent window HEAD section, so what I decided to do is this:
$(floatingMap.window.document.head).append(
$("<base>", {"href": location.href})).append(
$("head").children().clone()));
This first creates a <base> tag that ensures the relative URLs in the source document are interpreted correctly, then injects a copy of all the tags from the head section of the source document. I can inspect the injected objects in the new window using Chrome's DOM inspector, and everything looks OK, but the problem I'm having is that the scripts aren't loading. The stylesheets, on the other hand, are loading fine. Any ideas what I can do to make the scripts load correctly?
Update:
In a potentially related problem, I've found that the following code has unexpected results:
$(floatingMap.window.document.head).append(
$("<script>").text("window.opener.childWindowReady()"));
This causes the specified code to execute in the context of the parent window, not the child window. Any ideas why this would be the case?
This appears to be a jquery bug. Excluding the script tags from the jquery operation and then adding those using pure javascript works as expected:
var scripts = document.getElementsByTagName("script");
function loadScript (index)
{
if (index == scripts.length)
onChildWindowReady ();
else if (scripts[index].src)
{
console.log ("injecting: " + scripts[index].src);
var inject = document.createElement("script");
inject.src = scripts[index].src;
floatingMap.window.document.head.appendChild(inject);
inject.onload = function () { loadScript (index + 1); };
}
else
loadScript (index + 1);
}
loadScript (0);
In addition with document.writeln it is possible to add all contents dynamically and also execute them.
For example,
jQuery(document).ready(function(){
jQuery('body').append("jquery loaded");
var w = window.open();
var htmlContent = document.documentElement;
w.document.writeln("<html>"+htmlContent.innerHTML+"</html>");
w.document.close();
});
This demostrates opening a clone of the jsfiddle result window that will include jquery as well as script content within head.
http://jsfiddle.net/6Qks8/