Develop Reference

Crossrider - How to trigger events on user's activities in a page?

I am new to Crossrider and I want be able to trigger events based on the user's interaction with the page.
For example, have a sound played when user hovers over an html input element:
extension.js
appAPI.ready(function() {
//the link to Alarm01 is valid
var Alarm01 = new Audio('http://localhost/playing-with-sound/jquery%20mobile%20forms/sounds/Alarm01.wav')
$('input').mouseenter(function(){
Alarm01.play();
})
});
The code above does not work. Does anyone know what is the proper way to do this?
I've also tried to put it in background.js - that does not work either. I am using Chrome as my browser.
The idea is to have the user select an event in a popup (for example, play Alarm01 on hover over an input element) and then have it immediately applied to the current web page. So that the next time the user hovers over an input element Alarm01 is played.
What is the proper way to access HTML page elements in a Crossrider extension?
Thank you!
EDIT: Follow up question
Is it possible to trigger events on user's interaction with JQuery Mobile elements? For example an element of data-role="slider":
appAPI.ready(function($) {
//the link to Alarm01 is valid
var Alarm01 = new Audio('http://localhost/playing-with-sound/jquery%20mobile%20forms/sounds/Alarm01.wav');
// Add audio to page
document.body.appendChild(Alarm01);
$('[data-role=slider]').on('change', function(){
Alarm01.play();
})
});
Thank you!!!!
EDIT:
If I include JQuery Mobile in extension.js I get double of every element on a the mobile website. So instead of getting one element of data-role="slider", I get two...
I get this:
as opposed to this:

You're almost there. As your code stands you created the audio object in the extension scope. However, to play the audio you must add it to the page scope (HTML DOM). Hence, simply add it to the body of the page and it works, something like:
appAPI.ready(function($) {
//the link to Alarm01 is valid
var Alarm01 = new Audio('http://localhost/playing-with-sound/jquery%20mobile%20forms/sounds/Alarm01.wav');
// Add audio to page
document.body.appendChild(Alarm01);
$('input').mouseenter(function(){
Alarm01.play();
})
});
[Disclosure: I am a Crossrider employee]

fire event on closing the page

I wonder if i've unset($_SESSION['enough']); and want to free it up on closing the page.
[ suppose visitor is viewing page of the website pages in new tab ]
i'm using this code
<script language="javascript">
window.onbeforeunload = function() {
console.log('event');
return false;
}
</script>
i wonder how can i apply to fire this code unset($_SESSION['login_id']); , it might look ridicules but this is the basic idea and i'm gonna give example what can be used for
For example : media website would like members not to watching more than one video in same time so the watching page drop session and free it on closing it so can watch more! js indeed is essential for website using jwplayer so no chance of talking about members with disabled js.

In order to load the killsession.php that runs the unset() command, you can run that page with ajax with async:false
Have a look at
Ajax request with JQuery on page unload
jQuery.ajax({url:"http://localhost/killsession.php", async:false})

You can use jQuery to fire on unload with the unload function (http://api.jquery.com/unload/).
$( window ).unload(function() {
// On the unload, we can fire a request back to the server
// .get(), .post(), and .ajax() may be useful.
});

Reload page asynchronously or setTimeout?

I'm a bit lost.
I have two pages; Results and Detail. Whenever user navigates from Detail to Results using the browser back button, Results page should refresh, this way I can show what product user just seen on Detail (like amazon does with recently viewed items)
I don't know if it is better to load page asynchronously,
or use setTimeout as seen here (the example below works, but page refreshes forever)
if(window.top==window) {
// you're not in a frame so you reload the site
window.setTimeout('location.reload()', 3000); //reloads after 3 seconds
} else {
//you're inside a frame, so you stop reloading
}
and when I try reloading just a div also doesn't work
$('#div-id').triggerevent(function(){
$('#div-id').html(newContent);
});
I've also came across a lot of examples leading to this but didn't managed to make it work.
Any suggestion is welcome.
Thank you

The onload event should be fired when the user hits the back button. Elements not created via JavaScript will retain their values. I suggest keeping a backup of the data used in dynamically created element within an INPUT TYPE="hidden" or TEXTAREA set to display:none then onload using the value of the textbox to rebuild the dynamic elements to the way they were.
If you don't care about rebuilding the page and want to actually reload it, then you could do:
<input type="hidden" id="refreshed" value="no">
<script type="text/javascript">
onload=function(){
var e=document.getElementById("refreshed");
if(e.value=="no")e.value="yes";
else{e.value="no";location.reload();}
}
</script>

I believe you should reload the page asynchronously.
Maybe attaching the event ready to the body will work.
$(function(){
$('body').ready(function(){
alert('worked');
//Code to reload the page or data
});
});

Clicked linked withing iframe

If I have a website loaded inside an iFrame, like this:
$("#myIframe").attr("src",url);
...is it possible to capture a URL of a new page when a user clicks a link withing that site?

You can attach to the onLoad Event
<iframe src="/test.html" onLoad="alert(this.contentWindow.location);"></iframe>
or
$('#myIframe').load(function() {
alert("the iframe has been loaded, pull the src");
});
Working Sample per Muthu Kumaran:
http://jsfiddle.net/muthkum/DuRTR/

You cannot access the content of an iframe from the page containing it since that would allow you to do alot of evil stuff like steal session cookies, make the user click stuff he didn't want to on another site, etc..
Glennulars answer will apparently work tho. :)

I don't know if events bubble up to the iframe, but you could try:
$("iframe").click(function(e){
console.log('something was clicked');
});

jquery mobile trigger 'create' not working except the first time

I am using jQuery Mobile to create a site, in the index page I placed here a form for a search. I hooked submit event for ajax post. When ajax success get the resource
(html,<ul>...</ul>), placed in the target container, then trigger the create event for enhance the view. This work fine in the first time. When I click back to index page and search again I got a raw listview without enhance, who can tell me why? ps: I have tried many methods but there is more and more problem, the official document was so poor.
$(document).bind('pageinit',function(){
$("#search").submit(function(){
var searchdata = $("#search").serialize();
$.ajax({
'type':"POST",
'url':"/server/jnulib.php?action=search",
'data':searchdata,
'success':function(data){
$("#searchresultfield > ul").remove();
$("#searchresultfield").html(data).find('ul').trigger('create');
try{
$("#searchresultfield > ul").listview('refresh');
}catch(e){
}
$.mobile.changePage("#searchresult");
//$("div[data-role='header'] > a").
}
});
return false;
});
});
EDIT： Test Url： http://ijnu.sinaapp.com
Another problem: the second ajax request failed and the browser navigate to the ajax target straightly.

You could try changing:
$("#searchresultfield").html(data).find('ul').trigger('create');
to:
$("#searchresultfield").html(data).find('ul').listview().listview('refresh');
Anytime you append or remove elements you need to refresh, and if you remove the whole list, you need to reinitialize it.
Also I have had issues with listview('refresh') rendering improperly if it was not visible.
$(document).on('pageshow','div',function(event, ui){
if($("#searchresultfield > ul").is(":visible")) $("#searchresultfield > ul").listview('refresh');
});

For me, .trigger('create'); always works if applied to the element with data-role="page"
For example
HTML Code
<div data-role="page" id="somePage">
...
</div>
Javascript Code
$('#somePage').trigger('create');
Hope it helps

Try:
$("#searchresultfield > ul").empty();
instead of
$("#searchresultfield > ul").remove();

I think the problem is that jquery mobile loads all pages despite all being from different files into one big page and navigation is based off going to different points in this page, so that when you go onto it the first time the page you access is considered created however when clicking the back button and navigating away from the page that page is still considered created so the event well not fire again,
What I used was:
$('#oppList').live('pageshow',function(event){
getList();
});
Where #opplist is the id of the data-role="page" for the page I just load, this does not matter whether this happens the first time the page is loaded or after because the event is fired whenever the page is displayed.
See Here foe jquery mobile events
Also see here for jquery mobile navigation
Hope this helps !

Maybe you should try to unhook the submit event once it's been handled. And initiate it again once you go back to the page where you were before. Adding eventhandlers multiple times can cause a lot of problems.