html5 audio + javascript + ajax - ajax

I have a problem to keep working the controls of a player in html5 "" via javascript on the page after an ajax request occurs.
When the page is loaded, the player starts playing and "Play, Pause, Next, Prev" controls work, but after I access any other page with ajax request, the controls no longer work.
The controls are within div.content which has its recharged every ajax request content.
If they want to see in practice http://devintec.com/dev/jjsv

Probably you're attaching your event handler after page load, so whenever the controls div is updated, the event handlers disappear (because the DOM elements that had them attached are removed). You'll have to attach the event handlers again after your AJAX call completes, or use event delegation.

Related

History back for ajax

Is there a way to go back in history only for ajax calls ?
I'm looking for a history back button that only works for ajax calls on the current page.
So the button should not have the power to leave the page as we know it from browser back button.
You can use the History API for this.
Basically what you are doing is calling history.pushState() when doing an AJAX call and listening for the popstate event on the window object. But the logic that will manipulate your DOM to show the last state will have to be implemented by yourself.

How to know when WebView has refreshed due to JavaScript?

My webView has an HTML page with JavaScript that changes the appearance of the page when button is pressed in the HTML page. I can have the hosting program receive a callback through JavaScript when the button is pressed, and I can change values on the web page side of things. However, when these callbacks are made, the appearance change of the page has not yet changed:
WebViw is loaded and frameLoadDelegate is called
??? WebView is rendered and displayed
Customer clicks on the button, JavaScript `onClick' calls a JavaScript function which makes appearance changes, and then calls my Objective-C function.
Objective-C function checks appearance of WebView
??? WebView is rendered and displayed
In Apple's WebKit framwork, a WebView that has finished loading its resources sends a webView:didFinishLoadForFrame: message to its frameLoadDelegate. However, this only means that resources have been loaded, not that rendering is done… How can I detect that the WebView rendering is done? Among all the delegates of WebView, I couldn't find one that has the method I would need…

Is there a way to make Omniture capture the url/page loaded via ajax as a "Load" event and not a "Click" event?

I am currently working on a Ajax based mobile website project and am not able to get Omniture to work correctly. Here is a brief detail of the problem.
Assume a mobile site which has multiple pages, like example.com/a, example.com/b, example.com/c, example.com/d, example.com/e, example.com/f, etc.
Each page of the site, has Omniture's code, like:
<html><head></head><body>
<script type="text/javascript" src="//domain-and-path-to-omniture-code-files/s_code.js">
<script type="text/javascript">
s.pageName = "blah";
// some other ... s.blahBlah ... properties here...
/************* DO NOT ALTER ANYTHING BELOW THIS LINE ! **************/
var s_code=s.t();if(s_code)document.write(s_code);
</script>
<div id="content">SOME CONTENT</div>
</body>
User opens the browser and opens one url/page, like example.com/a
The page (example.com/a) has multiple links to the content on the same page, like #topic1, #topic2, #topic3, etc. and also has links to other static pages of the site, like example.com/b, example.com/c, example.com/d, etc.
I use jQuery to control click events on these links.
When user clicks on a named link, like #topic1, #topic2, etc., the page is animated/smooth-scrolled to the target element/content-section; and Omniture's "s.tl()" function is triggered, to track/capture the click event with relevant/required details.
## THIS IS THE PROBLEM AREA ## When user clicks on a link to a different static page, like example.com/b, example.com/c, etc., instead of allowing the browser to do a full page-load, the Ajax version of the target page is loaded into the content holder (by Ajax version, I mean to say that the page only has bare-minimum markup/content and not the entire html/head/common-css/js includes/etc).
Now the problem is that, when the page is loaded normally, Omniture captures it correctly as a "Load" event, but when it's loaded via JavaScript/Ajax, Omniture captures it as a "Click" event!
The Ajax/version of the page, does not include Omniture library "s_code.js" JS again (for obvious reasons, its already there on the parent/main page). Along with the required content, this page only has a script-tag, which sets required "s.blahBlah" values for the new page and the call to "s.t();".
I also tried to keep the Omniture code separate, in a common JS file, which is already loaded with the parent page, and only set the required "s.blahBlah" values in the Ajax call/function (which is also in a global/already loaded JS file), but still Omniture captures it as a "Click" event.
// s.tl(); ... gets captured as a click event
// s.t(); ... on normal page load... gets captured as a load event
// s.t(); ... after DOM-ready/page loaded via Ajax... gets captures as a click event
Any ideas! How can I make Omniture capture a load event? Is there a function like "s.l()" or something to trigger Omniture's "Load" event on demand.
The problem was not Omniture capturing it incorrectly, it was the tool "Omnibug", which I use to see the requests.
Omnibug 0.5.448 logs all "s.t()" calls made before page load event as Omniture "Load" event and any "s.t()" call made afterwards is captured as "Click" event.
Apparently, I was not the only one facing this issue. Others had already reported this to the developer of Omnibug (https://github.com/simpsora/omnibug/issues/4) and a fix has been made by him/a new version Omnibug 0.5.500 has been released.
The new version of Omnibug 0.5.500 captures all "s.t()" calls as "Load" events correctly and all "s.tl()" calls as "Click" event.
Thanks!

How can I make an animated gif appear when the site is loading and disappear after it's done loading?

I've been using the plugin in here: http://contextllc.com/tools/jQuery-showLoading which works perfectly when it's an ajax request or any other element interaction but how to get the animation appear when the site is first loading and have it disappear after it finishes loading?
You can use javascripts onLoad event to show the animation and jquery .ready()-function to remove it. More about onload event and more about .ready()-function

Wicket: concurrent Ajax requests limited to one?

Situation
In my Wicket application, I have a page which contains two tags. Each time a tab is selected, its content is fetched via Ajax so that every time you switch to a different tab its content it loaded fresh from the server.
On one of the tabs I have an input field which has an onblur event which saves the contents of the field via Ajax.
Problem
If the focus is on the input field and I click to a blank area of the page, the Ajax request it fired and the data saved.
If, instead of clicking on a blank area of the page, I click on the other tab, the Ajax request to save the input field is fired but not the Ajax request to switch tabs.
Is the number of concurrent Ajax requests limited in Wicket to one?
Yes, concurrent requests to a page instance are limited to one. Wicket Ajax will queue subsequent Ajax requests in the client side channel. See the wicket Ajax debugger for details in your running application.
This is done to make building your application easier: no need to work around concurrency issues on the server. Page access is always one done from one single thread: the current active request thread. If we didn't do this, we would have to synchronize on the component tree and make the whole programming model go yuk.
The problem was our AjaxIndicator which overlays a DIV over the entire page for the duration of each Ajax request. The "mouseup" (and consequently "click") events arrived when the overlay was in place, and thus lost. By holding the mouse button down and releasing it after the first Ajax request had completed and overlaying DIV removed, the second ajax request was fired.
It seems obvious now as the whole reason why we have such an overlay is to prevent users clicking while an Ajax request is running.
I think my solution will be to disable the ajax indicator on certain, very quick requests such as these where it makes no sense to have an indicator (disregarding the potential that requests could take much longer in case of unusually high server load).
May be the response of the onblur ajax request may have error or the process you are performing after the ajax response may have error.
If possible can you paste the code sniplet.

Resources