IE never stops loading image - javascript

I have a page that creates a static google map based on data retrieved from a database using PHP and displays it using a javascript function that is embedded inline within the code.
The javascript function is automatically executed when the page loads or refreshes and also will execute when the user explicitly requests a map (onclick) to be displayed.
It works exactly how I expect on FF.
On IE8 it also works exactly as I expect, up to a point. The problem is it never seems to return from loading the image although the image is, in fact, fully displayed on the screen with all the map locations. The real problem is there are other javascript functions on the page that never get called because of the infinite load operation.
If during this prolonged loading process the user explicitly displays a map it will display correctly AND the subsequent javascript code also executes, effectively resetting the display.
BTY, if I put an alert just after the return from the javascript function it triggers but the next function, that needs to load an image never loads its image.
I know I am probably looking for trouble mixing PHP and javascript but I have tried to be real careful to respect the client/server relationship and make sure that everything on the server (php) is finished before the page containing the javascript is actually loaded.
Unfortunately, the application doesn't lend itself to creating a simple demo to reproduce it and I'm working under an NDA so I can't point you to the page.
Any thoughts or debug suggestions would be welcome.

I don't know if this is THE answer but I have a work a round.
In the javascript I thought I was doing the right thing by destroying any existing image and creating a new image with:
image = document.createElement ('img');
If I remove this code and assign the new image to the existing image object, overwriting the src attribute, everything works for both FF and IE.
Does IE fully support document.createElement ('img')?
The thing I don't get is that the code works fine when the user explicitly selects the function so I know that IE supports createElement in some situations but it's not clear why it doesn't work all the time.
My function now works in both IE and FF.

Related

Using javascript to alter element's CSS display property works inconsistently on Chrome

I've got what should be a fairly simple "please wait" overlay that should pop up during a variety of different tasks on a data-review/dashboard website I'm working on (data queries, chart rendering using ChartJS, putting data into a file for download, etc.) that is not consistently working as desired in Chrome.
I toggle the overlay via Javascript at the beginning and end of each function that I need it for. The overlay successfully displays/turns off on IE11 and Firefox every time I do a function that calls it, but on Chrome it is consistently inconsistent (ALWAYS displays during specific functions, NEVER displays during other functions) despite calling the same few lines of code every time. When it does not display, the console confirms that the method to toggle it is being called and I can see the page's HTML update, but the user's display does not change.
The functions that the overlay does not display for involve creating/updating ChartJS charts, including an AJAX call to get data. I have functions that the overlay displays properly on that involve just doing AJAX requests. On the functions where it does not display, it never shows up on the user's screen at all, even well before I get to ChartJS stuff. It's confusing as heck. I can give out a little of that code if it would be useful, but again since the overlay never even shows despite toggling the overlay as the first line of those functions, I don't think that's the the problem...
It's a style thing more than a function thing; I also disable other user-interface elements while the overlay is supposed to be active (which Chrome's display also does NOT reflect but again definitely occurs). But I'd still like the overlay to consistently display, particularly since those ChartJS functions can take a few seconds, and I'm wondering if people have any ideas.
HTML for overlay, as it appears on page-load
<div id="overlay">
<img src="img/loader.gif"></img><br><strong>Data loading, please wait</strong>
<div id="overlayAdditonalMesages">
</div>
</div>
Javascript for overlay toggle
function overlayToggleOn(additionalMsg) {
console.log("overlay should be on");
document.getElementById("overlay").innerHTML = '<img src="img/loader.gif"></img><br><strong>Data loading, please wait</strong>'+additionalMsg;
document.getElementById("overlay").setAttribute("style", "display: flex;");
$("overlay").show(); //just trying to fix the thing with Chrome
}
function overlayToggleOff() {
console.log("overlay should be off");
document.getElementById("overlay").innerHTML = '<img src="img/loader.gif"></img><br><strong>Data loading, please wait</strong>';
document.getElementById("overlay").removeAttribute("style");
}
Like I said, should be simple, and I struggle to understand why it's not working consistently in Chrome. Thoughts appreciated.
Why using .setAttribute() for you inline styles.
I also saw where you added a closing tag for your image element </img> why?
Use
id.style.property = value
Instead of setAttribute()

Update HTML5 page text before render

I've written a small HTML5 page that I need to be able to support multiple languages. I've implemented the language control by making the page load a JSON file into memory (in the HEAD) and then running a jQuery command to change the text of any element as required.
Everything works fine except that as the change is being called post render (if the document ready function) there is a slight flash as the language gets changed.
Is there an event that is called before the page is rendered but after the DOM is available? If not, are there any suggestions to change implementation.
Cheers..
UPDATE
I've found a few answers to this on other sites. The general consensus appears to be that this isn't possible as most browsers render as they parse. The workaround that is suggested is to hide (display:'none') the body in script and then show it (display:'') after the updates in the document ready function. It sort of works for me although isn't 100% perfect.
Sounds like you are having an issue with FOUC (Flash Of Unstyled Content)
There are a few ways to get around it. You could add this to your body:
<body class="fouc">
And then have this CSS:
.fouc{display:none;}
And finally this script:
$(function(){
$('.fouc').show();
});
This works by initially hiding the page, and then once you are ready, turning it on with javascript. You may need to ensure your manipulation occurs ahead of the $('.fouc').show(); call.
One effective solution, though not the one you are probably looking for, is to use OUTPUT BUFFERING ... What is output buffering?

Javascript firefox issue

I developed a .htm document with an in-built script for javascript to run a program. In google chrome, the program works fine, but I got a beta test complaint that it didn't work on firefox 14.01 or opera. On testing with firefox 14.01, I can confirm it doesn't work (I assumed opera to be the same). I cannot insist the audience upgrade their browsers, as this is supposed to be widely compatible.
Doing a little tracing of the issue, I installed Firebug, which, on clicking the Javascript button to generate a coordinate the first time, it worked (clearly showing the function is defined and exists), but the second time, Firebug complained that:
"ReferenceError: GenerateCoord is not defined".
This wouldn't be so ironic if it only did this after generating an (encrypted) coordinate (thus calling GenerateCoord that is supposedly 'undefined').
If one looks in the code, one can clearly see that the function GenerateCoord is clearly defined before it is called. I would say firefox has an 'onclick' issue, but then it begs the question why did it work the first time I clicked it (calling GenerateCoord via 'onclick') but not the second?
Reloading the file allows the button to work the first time, and the first time only. I am baffled as to how firefox can call a function one time that it then says is undefined the next. Am I missing something here?
Javascript and HTML code can be viewed here:
http://pastebin.com/4qykTfEW
-
How do I solve the problem, and is there an easier solution than re-writing the code to avoid onclick (that seems to work in certain circumstances but not others)?
The problem is that using document.write overwrites the entire HTML page, thus inadvertently removing the GenerateCoord script. I'd suggest appending the link to the document (in ShowTarget) rather than attempting to re-write it.
For example, have a container element where the link should be:
<div id="links_container"></div>
Then to append the links, use:
document.getElementById('links_container').innerHTML = Link;

Execute JavaScript function after SharePoint is initialized

I have a custom JS script which I load into SharePoint and have problems to get my init method executed after SP is finished with its own initializing.
_spBodyOnLoadFunctionNames
I tried the "official" way first and added my function name to the list of executed functions after body load with _spBodyOnLoadFunctionNames.push("myInitMethod"); but that does not fire on every page load, I can't rely on that.
ExecuteOrDelayUntilScriptLoaded
Then I tried to use ExecuteOrDelayUntilScriptLoaded(myInitMethod, "sp.js"); function but it does not fire on every page load either.
Both ways work - but not every time. I assume that my script is loaded sometimes before the SP is initialized. This happens mostly on Chrome but on IE as well.
How can I make sure that my script is executed when SP is ready?
Note: There is an interesting behaviour when the page is loaded and the SP object is not fully initialized (the registered functions in ExecuteOrDelayUntilScriptLoaded has not been called): As soon as I click on the "Navigate Up" anchor in the page (where you can see the hiarchy of the subsites) the following files gets loaded and my init function (registered in ExecuteOrDelayUntilScriptLoaded) gets called!
core.debug.js
sp.core.debug.js
ScriptResx.ashx
sp.ui.dialog.debug.js
sp.runtime.debug.js
sp.debug.js
So everything is fine after that click - but why not on pageload as it should be?
It seems that this behaviour is related to some issues between SP 2010 and Google Chrome - I don't have this issues on other browsers.
This is a timing issue that somehow occurs only on non-IE browsers.
See http://withinsharepoint.com/archives/256 for an explanation and very easy fix.
Hey I came across your question when I was looking for a way to delay my JavaScript from loading until sp.js has.
The reason your code you provided works some of the time is because (some of the time) SharePoint doesn't initialize all of it's codebase. This is a big problem in Google Chrome, but can happen in other browsers (non-IE) as well. To work around that particular issue you can do something like this:
if (typeof(_spBodyOnLoadWrapper)!='undefined'){_spBodyOnLoadWrapper();}
I put mine inside of $(document).ready().
And thanks for answering my question :)

AJAX call that returns flash video

I have an AJAX web service call that returns a chunk of HTML that I then apply to a DIV element on my page. This works fine for any html element except a flash video which comes up with 'Movie not loaded'.
I've double-checked the html that is being returned and it's all fine, and it works if I don't use AJAX, but when I use AJAX and then add it using JS it doesn't seem to attempt to load the playlist.
Any ideas?
Thanks
Kev
If you use swfobject, you can dynamically insert flash into your html, which might fix your issue.
Perhaps the player SWF is to blame: it might be waiting for some kind of cue that the browser usually provides that you're not giving it with AJAX. Now there's no way to find that out, but try another player SWF, it might fire right up.
If that's not possible to do (a custom player, for instance), try using something like #Jasper suggested above (the added 1kb or so of overhead is negligible), but wrap all of your ajax in a JSON object and pass whether it's flash or not. Then you can do some logic to make it work that way.
I'm sorry to have wasted your time on this everyone, it turns out that there is actually an issue with some of the attributes in the HTML, and the reason I 'thought' it was OK was because it was running OK when I initially tested it and just assumed that the problems were because it was being added dynamically.
The issue was with the location of the SWF file, and the reason it wasn't being populated correctly is because the AJAX call resulted in the loading of the controls independently and certain properties weren't being initialised. It's all working fine now.

Categories