Loading js multiple times – Chrome problem - javascript

I am trying to use external js file to load content in divs.
The js file needs to be loaded as much as divs loaded.
For example:
<div class="classname1" userId="101010" unitId="111"></div>
<script src="//example.com/js/thefile.js"></script>
<div class="classname2" userId="101010" unitId="222"></div>
<script src="//example.com/js/thefile.js"></script>
<div class="classname2" userId="101010" unitId="333"></div>
<script src="//example.com/js/thefile.js"></script>
This code will be provided to the users to embed it in their websites. Say, it would be embeded in example2.com and example3.com.
When the js loads at thise sites, the code reads the attributes and depending on them it shows the related content inside the div.
The script works fine in Firefox (eg: if there are 3 pieces of embed code, then the browser shows 3 contents), but it doesn't work well on Chrome (it shows one content only).
As I noted that, Chrome detects the number of js loads, for example 3 times, however the first piece of code works and the other pieces doesn't.
Note: when I used a trick it worked in Chrome, but I don't want to use this easy solution: I changed the src url for each embed code by adding ?v=1 , ?v=2 and ?v=3 after the .js file.
Any ideas for solving this issue will be appreciated.

The real problem here isn't that the file wasn't loaded 3 times, rather it's that the code wasn't executed three times.
Browsers are expected to cache the files. And, you can expect inconsistent behaviour around what happens when same file's included more than once. Using a nonce, like v1 etc will disable caching. The best thing to do here would be wrap the functionality of your JS file in a function, and then load the file only once. You can simply call the function three times, or as many times as required.

Related

GWT: Can I include js in html page or do I need `ScriptInjector`?

I am adding an html file to my GWT page like so:
HTML htmlPanel = new HTML();
String html = MyHtml.INSTANCE.getHtml().getText();
htmlPanel.setHTML(html);
RootPanel.get().add(htmlPanel);
and that works ... but the embedded script files don't run. I see the line in Chrome's Elements tab where the script should be loaded, but apparently it is not (doesn't show up in the Scripts tab, and debugger lines are not hit).
As a test, I loaded the html file straight into my browser (not via GWT), and the script does show up in the Scripts tab and it does run the code (so it's not an issue with the script tag itself).
So ... why/how do the scripts not run when embedded by GWT? (I wouldn't know how to keep an embedded script from running if I tried!) ;o)
Do I have to use the ScriptInjector to make this work (I'm having my own problems with getting that working, which is a subject for another thread)? If so ... why?
Thanks for your help!
Creating the script by adding it to an HTML widget and appending it to the page will not work, this is not supported by the browser. GWT isn't doing this, the browser is, or rather, the browser is doing it because of how the HTML widget works. For specifics on why this is the case, see the great answer at https://stackoverflow.com/a/13392818/860630 that digs into the details.
There are several other ways you can do this, but they all boil down to the work that the ScriptInjector is already doing - if ScriptInjector doesn't work for you, it seems unlikely that the other options will behave either. Maybe edit your question to use ScriptInjector and describe your issues, or ask a new question with it? The only cases where I've seen ScriptInjector not work is related to $wnd, or which page the script is appended to (see com.google.gwt.core.client.ScriptInjector#TOP_WINDOW).

Downloaded aspx website does not display well

I have downloaded a aspx webpage and saved it as html. I open it in IE and chrome and it takes time to load + some parts are missing. All the text is there but the onmouseover is not working properly and some css is not displaying correctly. Was the content not downloaded completely? i.e is it missing sme javascript, css or else?
I have done what you describe on many occasions for the purposes of putting together a prototype of new functionality in an existing application.
You will likely need to do a couple of things:
Ensure the paths to your JS and CSS resources are right (removing the unneccessary JS files, if any)
Also, you will likely need to update the paths in your CSS to any image resources in your page

How to run multiple internal javascript codes asynchronously and not block?

I have a webpage created by a php script that upon loading will contain 0 to N div elements. For each div I run a specific javascript code that manipulates data relevant to that div.
One of the things this code does is create an img element and set its 'src' attribute to a certain url of an image of a known (but variable) size. This is done for caching. Those images are not supposed to be displayed in the initial page layout - but each should appear after a certain user input (mouse hover) - so I'm trying to cache the images so it won't take long for them to appear.
The loading of the images of-course takes time - and each time an image loads the code blocks resulting in high load times. an example:
<div id="i1">
<script type="text/javascript">
/* run code relevant to 'i1', and amongst other things load some image
into a detached img element for later use. let's call this code 'bcode' */
</script>
<div id="i2">
<script type="text/javascript">
/* run 'bcode' for i2 */
</script>
<div id="...and so on">
To try having the code run asynchronously, I tried this:
<div id="i1">
(function() {
var asyncScriptElement = document.createElement('script');
asyncScriptElement.async = true;
var scriptText = document.createTextNode ('here I put all of the relevant "bcode"');
asyncScriptElement.appendChild (scriptText);
document.getElementById ('Img_1_2').appendChild (asyncScriptElement);
}());
It works under FF (still not fast enough), and it obviously doesn't work under IE.
Do you have any suggestion as to how to achieve this?
Also note, that I don't really need to get anything from another external php (i.e. to use XMLHttpRequest) - I got all the data I need in this php. I just need a way to make the loading of the images unblocking...
Looks like you need the waitfor/and construct provided by the apollo library: http://onilabs.com/stratifiedjs#waitfor-and
Javascript is single threaded and always runs synchronously.
There are browser extensions to get around this, notably the concept of Javascript Workers in Mozilla
I would wrap your scripts in an HTML page (eventually generated by PHP) and download it as an iframe to assure the same behaviour for any browser.
There are other more elegant options with pros and cons; here you can find a comparison of viable options, browser compatibility and a nice decision tree.

JavaScript SRC path not working

I have searched this web looking for an answer, but it seems that this time I'm not so lucky, so I am forced to ask. I apologize if it's already answered (could not find it). And yes, English is not my first language, so I also apologize for my spelling mistakes, I try my best.
This is my problem, using Tomcat 5.5, Struts 1.3, JRE 1.5 and I'm using firefox 3.5.6.
In my jsp page I cannot seem to put any src="path/path" in my <script> I have tried deleting the src and all works well, but my project is going to need a lot of use from jquery and I do not want to copy/paste all the js file in every jsp.
This is my code:
<script type="text/javascript" src="js/jquery-1.3.2.js">
function showMySelf(){
alert("Hello World!");
}
(... plus other stuff code that actually uses jquery functions)
</script>
and the submit button:
<input type="submit" onclick="showMySelf()">
When I click the button, nothing happens (well it actually repaints the page) and when I delete the "src" tag from the script and add all the jquery code to the page it all works well.
I have tried putting another slash in the path as "/js/jquery-1.3.2.js" and returns an error.
I have tried using ResolveURL and it doesn't seem to give me better results.
I have also tried changing the js file to another file ("generics.js" and "js.js"), I also tried with "js/*.js".
Any of theese solutions have archived anything.
I have also tried using the struts tags (like html:submit) but it also did not work.
The path is actually right, since looking the code in my web browser gives me a link to the js file. So I suposse the browser knows were to look for my js file, it does not give me an error or a broken link to the file.
Any ideas of why this is happening?
Thank you all.
Random.
You can not use a script element to load an external file and put code in it at the same time. You need to use two script elements:
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
function showMySelf(){
alert("Hello World!");
}
(... plus other stuff code that actually uses jquery functions)
</script>
I think Gumbo solved it.
As a sidenote, a very good way to find out whether a browser can load a JS file is the "Net tab" in Firebug in Firefox. It shows all loaded (and failed) requests of the current page.
The two most likely options are:
a) You are including HTML in your JS file (i.e. <script> tags)
Take it out.
b) You have the wrong URI and when you attempt to resolve your relative URI manually you do so incorrectly
Look at your server access logs to see what is actually being requested (or use a tool such as Firebug)
The first thing to do in such case. Install Firebug and look at the "Console" panel (for possible syntax errors) and the "Net" panel to see whether your jQuery sources are being fetched correctly. The 2nd column there shows the request status code.
alt text http://img46.imageshack.us/img46/6224/jqueryfirebugtmp.jpg
(full size image)

Embed javascript as base64

I'm working on a small GreaseMonkey script where I would like to embed a jQuery plugin (Markitup) so that the script is fully self contained (images + js) except for jQuery which is served from google.
I found the site http://www.greywyvern.com/code/php/binary2base64 which says that you can embed javascript with the href if you base64 encode the script, much like serving images as basse64 from CSS.
<script type="text/javascript" href="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>
So i tried that but couldn't get it to work at all, using Firefox 3.0.5 on OS X.
I put together a small test page to isolate the problem but couldn't get it to work at that page either.
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
</head>
<body>
<script href="data:text/javascript;base64,YWxlcnQoJ2FzYWRhc2QnKTsK"></script>
<script>alert('a');</script>
</body>
</html>
The base64 string (YWxlcnQoJ2FzYWRhc2QnKTsK) says alert('asadasd'); so I'm supposed to get two alerts but the only one I see is the second one where the alert is located as text inside the script tag.
Am I doing something wrong or why isn't this working, any ideas?
maybe just a thought but maybe the "href" should be "src" instead.
If you'd check script tag syntax you'd get
<script src="..."
^^^
src NOT href
Using data URIs here doesn't work in IE 6 btw.
That's funny, I am working on precisely the same problem: making a Greasemonkey script to add markItUp to all textareas of a page.
Now, I don't have an issue with the library script itself. I don't see why you want to insert it as Base64, anyway. As pointed out, it will be larger.
You can put it directly in the GM script if you want (some people do that with jQuery), or add dynamically a <script src="someURL"></script> to the document and wait for loading (there are numerous examples of that on the Net)(inconvenience: creates a traffic on the sites holding the files), or, like I am currently trying, using the latest (0.8) feature of GM:
// #require jquery.js
// #require markitup.js
// #resource miuStyle style.css
The required JS files are automatically loaded into the GM script from a local copy, which is fast and always available. Don't use the packed versions, they don't work here. I also had issues with set.js so I just put in directly in the script.
It works well, but I don't have style nor icons yet.
I must put the miuStyle text in the Web page, I think, and change it so all background images refer to the same image hosted on Photobucket or similar, with offset. I haven't found a way to use local images (in CSS), alas, even with #resource.
My response doesn't address your problem, alas (but John's remark seems valid), but it might put you to another, simpler solution.
Base-64 makes the file larger, but it makes it more machine readable so it actually increases pagespeed. I can definitely see why you'd want this, unless you want to look at 50 lines of gibberish in your file. FYI, I just read a study that base 64 actually loads slower on mobile so if your app is heavy mobile I'd stay away

Categories