javascript not working inside html div on slow internet - javascript

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.

Related

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

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 ?

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>

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).

3rd Party Script Breaking my JS

I have a 3rd party script that displays some data on my site. When the script loads it breaks all of the JS on any page the script is in. I remove the script and my page works without issue.
Are there ways to prevent 3rd party scripts from interacting with my page in a way the breaks the page?
Notes:
I have no access to the 3rd party script to edit.
I am using jQuery for the scripts that are breaking. I have in place jQuery.noConflict yet it still breaks the page.
I have attempted to load the script in an iframe to see if that made a difference. It did not.
The script does write data to the page, mainly CSS and HTML
Note: The below code may contain references/links to drug content, mainly marijuana.
I am building a site for a medical marijuana dispensary. I am importing the menu of the dispensary from a site called WeedMaps. Their embed code looks like this:
<script type="text/javascript">var wmenu_id = 1111;</script> //The number correlates to the menu I need to pull, I have changed it in this question
<script type="text/javascript" src="http://legalmarijuanadispensary.com/components/com_weedmenu/weedmenu-widget.js"></script>
When I use the above code the JS of my site breaks. How to I prevent my code from breaking when using 3rd party scripts over which I have no control.
UPDATE
Here is a JS Fiddle. The menu opens but doesn't close properly. Remove the script that is generating the menu from weedmaps and the menu works correctly. (The weedmaps menu script is in the bottom of the HTML panel.)
Hmm, not having much luck. I'll add what I have, since it may trigger further ideas from you. However, in short, I think their script isn't written particularly well, and that they really do need to fix it on their end.
As it stands, Firefox shows this error when animating the menus:
TypeError: jQuery.easing[jQuery.easing.def] is not a function
This blog suggests that this occurs when the Easing plugin is loaded before jQuery. Fine, I thought - we just need to load the WeedMenu script after our jQuery has loaded. So I tried the following (with help from here):
$j.getScript('http://legalmarijuanadispensary.com/components/com_weedmenu/weedmenu-widget.js');
That gave me this error:
A call to document.write() from an asynchronously-loaded external script was ignored.
Turns out that occurs as a result of the WM script using document.write, which is desperately out of date. So that lead me on to find crapLoader, which is meant to handle this sort of thing:
crapLoader.loadScript("http://legalmarijuanadispensary.com/components/com_weedmenu/weedmenu-widget.js", "menu-script");
Unfortunately that brings me back to the original Easing error.
Here's my fork - let me know if you find anything!
The script is not well written, I was able to solve my issue by removing a line of code from the script. The link I provided list to a longer script. The script had this line of code:
try {
b("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"), "function" != typeof wmenu_strains_callback && b("http://legalmarijuanadispensary.com/components/com_weedmenu/weedmenu.js", !0)
}
if I remove b("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"), then the script works and my page works. What was happening was the script was inserting jQuery into the bottom of my head and breaking the rest of my javascript.

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.

Categories