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.
Related
The issues is with existing ASP.NET MVC 4 project. The View itself is not that big but there are also several service calls and what happens is that people with slow internet connection reports that for some period of time when they request the page it stay unresponsive, so they don't know if the content is loading or something went wrong.
So in general, what I need is a way to show a loading image as the very first thing from this page (or at least fast enough) so even if it takes some time for the browser to download the full content, at least the user will know that something is going on.
However it seems that this is not as trivial as it sounds. I came up with two ideas, one was already proven to not work in all cases and the second is also something that many people doesn't recommend.
What I've tried was to use pure JavaScript in the <head> tag like so:
<html>
<head>
<script>
document.write("<div style='margin-left: 50px; margin-top : 50px;'>LOADING...</div>");
</script>
</head>
Of course the styling is just to get the idea. This seemed like it was working until recently when on a minor build of IE 11 the page broke which after some investigation was proven to be due to the usage of document.write() inside the <head> tag. Even though this seems to work on most browsers and versions the fact that it's a potential danger requires a change in the approach.
The second idea is pretty similar to this, again - writing directly in the <head> tag but this time instead of using document.write() just putting the html markup directly there. From what I've read this is also a recipe for disaster so I don't even want to try it, but those are the two ideas that I could came up with. Everything else just doesn't work for slow internet connections since the mainstream solutions relays on the fact that some part of the DOM is already loaded so you can use it to apply behaviour/style.
I hope I'm not the first one that got this problem so I would appreciate any suggestion on how to solve this issue. Since I am using ASP.NET MVC 4 there was an idea to use a dedicated controller with view which to get called first just for the sake of showing the loading image and then moving to the requested view. Even though this idea seems interesting I didn't have the time to think it over, it also sounds a pretty complicated, but anyways, all help will be appreciated.
When faced with the same issue, we did as you mentioned: Load a super-light-weight page first with a tiny loading icon & "Loading..." text, then called back to the server to pull down the heavy content in chunks using ajax.
If you content is really heavy, it's also worth mentioning that you need make sure you have gzip compression turned on at your web server layer also.
Don't block the rendering of the DOM. Load the page and call your scripts right before the closing body tag and attach to an event like DOMContentLoaded or window.load (if you're using jQuery, that would be $(document).ready). In other words, you should allow the page to load completely, even if it's empty, before running any of your JavaScript.
Then, don't worry about writing the "Loading" div dynamically. Just include it in the rendered HTML and hide it initially. The first thing your JavaScript will do, before issuing any AJAX calls, is to show this "Loading" div.
This is the screenshot of my html page. this commented area is my issue.
Your problem starts with a couple of error's :)
Your Javascript crashes because it looks for a function that doesn't exist "$(...).fancybox()". This means that either you didn't include the fancybox library or that the file where you call in the function fancybox is loaded before the fancybox library is loaded in.
Next problem is that the images that are used in your slider (I assume). Do no longer exist. Try clicking them in the console to see if you can access them in the browser.
Last but not least. You tagged your question as "java". Javascript and java are not the same thing. Your problem involves javascript. Might want to change that tag next time so you can get anwsered faster.
I Hope this helped a bit :)
Good luck!
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?
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.
Quite simply, I have a SWF embedded in an HTML web page and want to move to a specific frame when a trigger is clicked.
But nothing happens when I click the trigger, as though the js just doesnt communicate at all with the swf.
SWF is written in flash cs4 (a3)
The link to the website is http://simplywebdzine.com/test.html.
I have read the text books over and over and researched high and wide on the internet and as far as I see I have done everything correctly but I cannot get this to work.
The swf is very basic, just a green box moving accross a small stage.
The desired gotoframe would make it cross at a lower height (just a dry run for a more complicated swf)
Would really appreciate someones help if you could possibly find out from the source code what is going wrong.
Many thanks
Steve
It looks to me like you have two problems.
You do not have the correct id for your <object> according to your javascript. The object id is "mymovi.swf" while your javascript is targeting "mymovi" as the id.
Even if I change your id using firebug, the function still does not fire off in the flash and I get an error about the function not existing.
Have you added a callback method in flash? something like flash.external.ExternalInterface.addCallback("GotoFrame", gotoFrameHandler) ??