Loading external html using jquery.load() function gives unexpected results - javascript

I had a previous post related to this problem but I guess I was not clear enough or some other reason, I did not get a solution.
Old post here
I now have minimized the whole html to just demonstrate the problem and uploaded the html.
Here the link to the loaded HTML
There are two html files - main.html and sample.html. Main.html loads sample.html using jQuery.load(). There is a JavaScript inside the sample.html which query the width of a div and visibility of a div. Both queries gives wrong results. You can look at the debug console of the browser for the results returned. I have tried FF, IE and chrome and all gives the consistent wrong values. I guess I am not doing something correctly. What could be wrong here ?

Related

javascript not working inside html div on slow internet

I am putting html content dynamically base on condition.
Inside html content i also have javascript in script tag.
My problem is on slow internet my javascript not load on page.
It's work fine on fast internet.
The same case faced.
Try with console.log() before and after your script.
You can see log print but not display here. Means this happens because of date picker js does not load properly or display any error so your script goes to stop.
Please load data picker js properly so resolve our issue.

Using HTML5 tooltip gets page ruined on Google Chrome

So I wrote this page from scratch, using php, python and bash. The page collects data from the server, and displays it.
I would like to add tooltips on the world map, such that the user could see the station name on click/mouseover. I followed this tutorial.
1- I wrapped my world image with #wrapper
2- I added the CSS code
3- I added the Javascript code.
This appeared to look fine in the beginning and the tooltip is working, but on Google Chrome, like 90% of the time (I'm on Windows 10 viewing this) I suddenly see that the world map gets messed up, as follows, getting over the data plots:
While it should look like this:
I noticed that this problem happens in Google Chrome, and not on Mozilla Firefox or Microsoft Edge... Why is this happening? I have the feeling that a simple float command could fix it. Could you please help me with this? Why is this happening?
If you require any additional information please ask.
UPDATE:
I noticed removing this part of the script solves the problem:
$('#wrapper').css({'width':$('#wrapper img').width(),
'height':$('#wrapper img').height()
})
But then the tooltip doesn't work.
You have your rome.js included in head section. If it will be loaded earlier then html body, it will be executed earlier then dom content loaded.
So the first time evertything works, because js is loading with dom content. After first refresh js will be taken from cache and executed too early.
So you should prevent that using jquery $(document).ready() method or DOMContentLoaded event.
Or you could simply include your rome.js in the end of the body section.
There are two things not working out here:
You don't have a doctype.
You have some <style> and <script> tags before your <html>. They should be inside your <head> or <body>

Debugger displaying HTML instead of JavaScript

I am passing an html template of the previewer of Impressionist App for ownCloud, I am working on in js/templ.js and obviously impress.js will be called in the template via it. The src is correct, but then also my chrome debugger displays html as content in my impress.js file and console also gives javascript syntax error, due to the html being called. Why does it happen? Any clue?
The source code of my app can be found here.
Also, I am attaching an image of what I see in the debuggerhere

JS is not loading correctly, where is the fault?

I have a website where I want to use MagicZoom.
Everything would be fine since it is easy to implement, but there seems to be an error when loading the js file.
I will send you the website which is currently under construction.
MagicZoom should be implemented there, where you chose your fabric, for a close-up.
I think, but of course this is only my opinion and I'm not an expert, that the problem occurs because the div container with the picture is created dynamically from another PHP file and not present onload. Therefore the JavaScript does not work properly.
You will see that in the second step the zoom does not load although the class is set correctly.
Your error says "prettyPhoto is not a function". This tells me that some script is trying to use the "prettyPhoto" object before that script has been included on the page.
Looking at your HTML header, I see that is among the last of the <script> tags. Try moving the <script> tag where you include that library in your HTML header up a couple of lines, above some of the other includes. Be aware - you can't move it above the includes for jQuery!
Try that out, let us know.

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)

Categories