Dynamically Loading Files Containing Bunch Of Data
Apr 28, 2011
Here's what I'd like to do using pure JavaScript and HTML (no Ajax or PHP): My website loads different JavaScript files dynamically which contain a bunch of data, that I will display on the website. The dynamical loading function is placed in the <HEAD> and looks like that:
Code:
function loadJsFile(filename){
console.log("loading js file")
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)
fileref.onload = dataIsLoaded;
if (typeof fileref!="undefined"){
document.getElementsByTagName("head")[0].appendChild(fileref)
}}
The dataIsLoaded method in there is a callback that is triggered when the JavaScript file has been loaded:
Code:
function dataIsLoaded(){
console.log("loading js file done")
dataLoaded = true;
data = new Data();
}
DataLoaded is simply a global boolean that is per default false and the 'data' variable contains all the data I want to display on my site. While the JavaScript file is being loaded, the browser continues building the site. When it gets to the <body> that wants to access some information from the data variable, I get the unsurprising error that 'data' is undefined. I looked for a way to wait until 'data' is defined and then continue with building the <body> but couldn't find a solution.
Alternatively I wanted to reload the divs in the <body> when the 'data' is available:
Code:
function reloadDivs(){
if(dataLoaded){
console.log("data available, reloading divs");
document.getElementById('someDiv').innerHTML = document.getElementById('someDiv').innerHTML
}else{
console.log("data is not yet available");
setTimeout('loadReportData();', 500);
}}
This does not work, I get a blank div when I do that.
View 10 Replies
ADVERTISEMENT
Apr 14, 2006
I have been struggling with a cross browser solution to loading
external javascript files on the fly.
I have been successful using the following code in IE6:
var newScr = document.createElement("SCRIPT");
newScr.src = "newScr.js";
newScr.type="text/javascript";
document.getElementsByTagName("head")[0].appendChild(newScr);
I believe the reason is that IE is loading the external file
syncronously while Firefox is not. Is there an onload event for
creating an element (if so I do not see it in Venkman). I have seen the
solution of using XMLHTTP to load the script but I am trying to get
around any dependency (atleast at this stage of the library) on
activex.
View 1 Replies
View Related
Feb 6, 2010
I came up with some code to load javascript files dynamically. But I've got problems..
When the script element is dynamically added to the head section of html, i think that the document.ready event fires once again and therefore the code sort of runs twice.
In the html page I call this method:
In the script test.js I have the function SayHi():
The SayHi method never gets called and alert('begin') & alert('getScript') get called twice in this sequence:begin begin getScript getScript.
View 1 Replies
View Related
Aug 20, 2011
I'm not sure if I'm calling it the right thing, but I'm trying to dynamically create a bunch of key => value pairs in a javascript object.
Something like this:
Code JavaScript:
But the console gives me errors, and I haven't been able to find a way to do this. I've tryed putting the keys in square brackets, as was suggested somewhere online, but that didn't work.
View 2 Replies
View Related
Feb 5, 2008
is it possible to load .js files conditionally? suppose i have a.js b.js c.js
and then inside a table y have a drop down box that has A B C
I want to be able to load a.js if I select A, b.js if I select B and c.js if I select C.
View 7 Replies
View Related
Jan 20, 2011
I'm using the asynchronous example from [URL] to load a backup jQuery CDN if the main Google fails or goes undefined for some reason. The default script loads the backup (ASPNET CDN) but if I want to add a local copy backup to the ASPNET CDN, it will not load if the ASPNET CDN is down. I tried different variations with no success. Here is the code:
Code JavaScript:
// Setup backups
var jqbackup1 = '//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js';
var jqbackup2 = '/js/jquery-1.4.4.min.js';
// Setup getScript function
function getScript(url, success) {
[Code]...
View 2 Replies
View Related
May 4, 2011
now im loading css files in that way:
$('head').append('<link rel="stylesheet" type="text/css" href="' + file + '">');
after i need to work with values from this css file.
For example i need to get the width and height of one of element and to put it in another:
$('#myContainer').css({
width: $('#anotherContainer').width(),
height: $('#anotherContainer').height(),
});
so...the problem is that my javascript code is executed before the new css file are successfully loaded...and script goes to get wrong values
is it possible to fix?...or exists another ways to load css filessyncronously???
View 13 Replies
View Related
May 15, 2010
I'm actually doing a firefox extension in which i would like to implement the jWebsocket API in order to build a small chat. I got my main script file, named test.js, and the jWebsocket lib into a js folder. Just for you to know, this is my first firefox extension ever. So in my XUL file I got this :
[Code]....
View 1 Replies
View Related
Feb 1, 2011
I'm working at a college in Michigan and we have an issue with the files not loading correctly for our website. The issue appears to be a javascript problem. When I try to access a page, it will load, but the javascript functions for instance will show up on the page as if it is just html text. So I right-clicked the page, clicked "view source" and when the source code for the file opens up it shows the javascript portion in the head section as:
<disabled-script type="disabled-text/javascript">
function somefunction(){}
</disabled-script>
However, the code I have in the file of course is written as:
<script type="text/javascript">
function somefunction() {}
</script>
I do not have javascript disabled on my browser or anything, so that is not the issue. For some reason it appears it is getting disabled though on page load.
View 1 Replies
View Related
Nov 17, 2011
The application I'm debugging is throwing a very general jquery error (H is undefined) based on my obfuscated js file. There are jquery methods in this file. The file has been tested and is used successfully in other applications. I noticed the application that throws the error is loading two versions of jquery:
jquery-1.4.2.js and jquery-obf-1.4.2.cache.js
Typically our applications only load the obfuscated version of jquery. if loading 2 versions of JQuery into a page could cause the confliction I'm seeing?
View 1 Replies
View Related
Apr 27, 2006
Consider the following code as seen in the Scriptaculous library:
Code:
require: function(libraryName) {
// inserting via DOM fails in Safari 2.0, so brute force approach
document.write('<script type="text/javascript" src="'+libraryName+'"></script>');
}
This will make the browser load more libraries, which is cool.
However, when using Content-Type application/xhtml+xml, Firefox gives an error in the JS Console:
Code:
Error: uncaught exception: [Exception... "Object cannot be created in this context" code: "9" nsresult: "0x80530009 (NS_ERROR_DOM_NOT_SUPPORTED_ERR)" location: "http://localhost/script/scriptaculous/scriptaculous.js Line: 26"]
It seems that XHTML 1.1 documents sent with the correct application/xhtml+xml cause Firefox not to like document.write(). Fair enough
How can I change the above code to inser the script through DOM? Would that be something like:
document.createElement('javascript');
View 3 Replies
View Related
Feb 15, 2010
I'm starting to use JQuery ajax and am seeing a second-2 delay in the loading of a line of text when I click on the link.
Here is the JQuery code
Content should load when the slideUp is done but it normally doesn't change the content till halfway through the slide down because of the delay.
I've tried without the slideup/down but it still has this delay.
The content to load is at most 8 words.
View 1 Replies
View Related
Nov 2, 2011
How can I dynamically get all files name from a directory?I need to have a directory with pictures, and when I copy new ones, on my website to have them listed inside of a div. If jQuery can't do this, there is otherpossibility
View 1 Replies
View Related
May 30, 2007
i'm using a little "ajax" loader script to dynamically load files into
different "div" tags on my main site. the code for this part looks
like:
View 13 Replies
View Related
Sep 2, 2011
I'm trying to create a function to load a js file and instance a object.
I'm trying something like this:
Code:
function Load(element)
{
var e = document.createElement("script");
e.type = "text/javascript";
[Code]....
I'm creating the files with the same name as the object. I'm trying to load a file/object name Manager. It's loading the js file, but it says that the object does not exits.
What's the best way to load a js file and create the instance of the object dynamically?
View 1 Replies
View Related
Aug 26, 2010
I am trying to write a class that dynamically loads scripts and css files, but ran into a problem I just can't seem to solve. Below is a simplified version of the class:
Code:
function DynamicResources(baseUrl)
{
this.baseUrl = baseUrl;
}
DynamicResources.prototype.loadScript = function(file, onLoad)
[Code]...
The loadScripts function should keep track of the scripts that have finished loading by removing them from the loadingFiles array. The problem is, that the changes made to the array in one call to the local function fileLoaded won't show up in the next call (no elements are ever deleted). I suspect this has something to do with scoping rules, but I can't quit get a grip on it.
View 2 Replies
View Related
Feb 22, 2006
I am working on JS navigation for my web page. Contents of 3 subpages
are located in the array as shown below. When certain key is pressed on
the page, div is filled with data taken from one of the array rows.
***
var content=new Array()
content[1]='<p>some text</p>'
content[2]='<p>some other text</p>'
content[3]='<p>yet another text</p>'
***
The question is: is it possible in some simple way to put the data from
those 3 rows into 3 separate files and make the JS code to take the data
from those files? (I want to have 3 files with plain HTML) If so, please
show me some example how to do that. Or give me some address where I can
read about it, please. I have been using Google for several hours -
unfortunately without any luck.
In general - here is what I would like to do:
***
var content=new Array()
content[1]=[contents of Ƈ.html' file]
content[2]=[contents of ƈ.html' file]
content[3]=[contents of Ɖ.html' file]
***
How can I put the above into JS code?
View 3 Replies
View Related
Feb 11, 2011
I have written some JAVA code that pulls and image from a DB and writes out the byte stream.When I call the URL directly I can see my image, however when I use something like:
function loadImage(filename) {
$(document).ready(function() {
alert('loadImage Called with ' + filename);
[code]....
View 4 Replies
View Related
Mar 16, 2006
I have a set of scripts which rely on the ability to dynamically load css by constructing <link> elements via DOM scripting, and appending them into the page header. It works, for the most part, extremely well, but I need to be able to attach an onload function to said links. Unfortunately, this only seems to work in IE, not in FireFox or Safari (the three being my 'target' browsers under which the whole system needs to work.) Any means by which I can determine via Javascript whether such a link has finished loading? It doesn't have to be via onload if it's unsupported, but I need to be able to implement it across IE / Mozilla / Safari.
View 12 Replies
View Related
Jan 4, 2007
I'm writing a small async webapp. in JavaScript and I'm using <script> element technique to load data. I'm usign <scriptbecause of cross domain restrictions with XmlRequest.
The problem is when I remove a element that is currently loading from DOM (with removeChild) Firefox still loads it and waits with other scripts.
What I want is to break this process and load a new data without waiting for old one.
Here is example script:
View 2 Replies
View Related
Jan 25, 2007
I'm using a function like this to load divs dynamically (and hide
current one..)
function get_img(curr_img,curr_nav,new_img,new_nav2) {
var img_top = eval('document.getElementById(' + "curr_img" + ')');
var img_new = eval('document.getElementById(' + "new_img" + ')');
var nav_top = eval('document.getElementById(' + "curr_nav" + ')');
var nav_new = eval('document.getElementById(' + "new_nav" + ')');
img_top.style.visibility = "hidden";
img_new.style.visibility = "visible";
nav_top.style.visibility = "hidden";
nav_new.style.visibility = "visible";
curr_img = new_img;
curr_nav = new_nav;
}
problem I always run into in situations like this is I can't tell which
one is currently loaded.. how do you detect which div is currently loaded?
this is in JSP, divs generated with loops...
for (int i = 0; i < photos.length; i++) {
%>
<div id="nav<%=photos[i]%>">
etc...
View 1 Replies
View Related
Aug 12, 2010
I'm experimenting with dynamic loading of javascript using JQuery. So basically I have a loadScript function that accepts either the URL of a JS file or a javascript source in a string. For the former, I create a 'script' element, set its src attribute to the URL of the file and insert the element into the DOM's head element. So far it seems to work nicely. For the latter, I create a 'script' element, set its innerHTML to the JS string and insert it into the DOM's head element. This doesn't work so well. I *think* it's because the JS source in question contains:
$(document).ready(function() {
// put all your jQuery goodness in here.
});
It looks like the JS source in my string is stomping over parts of the DOM it shouldn't and changing existing elements.
View 2 Replies
View Related
Mar 30, 2006
While testing my pages in IE and Firefox, I have noticed that when I
remove an image from the DOM before it has finished downloading in IE,
that the status bar gets stuck at Downloading Picture https://....
Which means the page never finishes loading, I have tested by just
making the images style.display = "none" and I no longer get the error,
but since this is an AJAX app, that would just leak memory as images
would never get deleted when people traverse the web app. Has anyone
else experienced this behavior or have a possible solution?
View 1 Replies
View Related
Jan 9, 2010
I'm using this piece of code to find a set of selected check boxes that are selected abd build a comma separated list from their values
'txt' custom attribute
. Is this a jQuery standard method?
e.g
<input type="checkbox" id="chkGenre" rel="genre" value="12"
txt="Rock" /> <br />
<input type="checkbox" id="chkGenre rel="genre" value="13" txt="Jazz" /
View 5 Replies
View Related
Oct 25, 2005
I've got a script that I'm using to render a list of links. The data comes from an xml file.
If I run the code in IE, I get all the data formatted the way I want it to.
If I run the code in Firefox, I get squat.
I suspect the problem lies in "xmlDoc.getElementsByTagName".
I'm using it to collect elements for rendering.
Any suggestions? Code:
View 4 Replies
View Related
Apr 1, 2010
I am familiar with the user built addEvent function used to load multiple functions in the window.onload property. However, I am curious as to the best way to do this across multiple JavaScript files. I thought I had seen somewhere code similar to the addEvent function was native to JavaScript now but I can't seem to find that anywhere.
Just to clarify, suppose I have 3 JavaScript files:
Code:
function foo() {
// do something here
}
fileB
[Code]....
note that it is not feasible to combine those functions into one file as they aren't always loaded together. What's the best way to load them all as a window.load?
View 1 Replies
View Related
