If you have a URL with a hash, for example:
www.my_jqm_site.com/#some_page_request
... at what point during the jqm page event sequence does jqm read the hash?
Event sequence when navigating from jqm_page_A to jqm_page_B ... thanks Muhammed Basil.
- document --- script time (js is readable, but DOM is not ready yet)
- document --- ready
- page B --- pagebeforecreate
- page B --- pagecreate
- page B --- pageinit
- page A --- pagebeforehide
- page B --- pagebeforeshow
- page A --- pageremove
- page A --- pagehide
- page B --- pageshow
- body --- onLoad
EDIT: if I change the hash at script time:
<script>
window.location.hash = "#some_other_page_request"
</script>
it will override the incoming hash, '#some_page_request', and thus jqm will navigate to instead.
This suggests that jqm reads the hash at-or-after script-time (ie. at, or after, $(document).ready(...)).
During the pagebeforehide event.
This is the first element to be dispatched during the transition prom page A to page B.
Description: Triggered on the "fromPage" we are transitioning away from, before the actual transition animation is kicked off.
This is the first page to receive data object as their 2nd arg. This data object has the object that contains the page DOM element that we are transitioning to.
Official documentation: http://api.jquerymobile.com/pagebeforehide/
All events before it are events common to page creation and they will also trigger during the initial app loading when first page is about to be shown:
- page B ---pagebeforecreate
- page B ---pagecreate
- page B ---pageinit
During those 3 events system don't have knowledge is this a app loading or page transition. They are here just to create a new page.
Related
I need to relaod a sj:tab in struts2-jquery 3.3.3, so far i tried:
Add a listenTopic to sj:tab, didn't work as i read it wasn't yet
implemented in that version
Upon any event, reload the tab like:
$('#myPanel').tabs("load", "#myTab");
It works and reloads, but some more event handlers bind and when i submit via sj:submit, it submits twice, i've tried to remove all event handlers with jquery before reload, but i doesn't make any difference. So the event handlers grow exponetially:
> $('#myPanel').tabs("load", "#myTab");
1 event handler per button
> $('#myPanel').tabs("load", "#myTab");
2
> $('#myPanel').tabs("load", "#myTab");
4 .. 16 .. 32
How do i kill all those event handlers in sj:submit?
This was probably a bad smell from me as i needed to change a tab upon a new 'state' in the app, so i thought this would be a good idea:
( ajax call fired by a sj:submit --> POST )
# in the server check if the state changed, if so returns success and the client asks to reload.
$.subscribe("change_state"){
...
$('#myPanel').tabs("load", "#myTab");
# (http GET new tab)
};
The tab loads smoothly, but to prevent the old events to fire i had to setup variables for each button
$.subscribe("change_state", function(event){
if (!reloaded){
$('#myPanel').tabs("load", "#myTab");
reloaded = 1;
}
)};
$.document.ready(function(){
reloaded = null;
});
If someone have the right design for this version of struts i'd gladly offer the 100 bounty
I have the following:
$(document).on("pageinit", function (event) {
alert("pageinit called");
$('#logout').bind('click', function() {alert("clicked!");});
});
The first time the page runs you get a single alert 'pageinit called'. Clicking the element with id #logout fires the alert 'clicked!'. If I click any other links in this page I still get the 'pageinit called' alert (and I get it multiple times, apparently for each page I have previously navigated as well) but subsequently the handler for #logout is gone and never never re-established.
Can anyone tell me how I can get the handler for #logout to remain? I've tried:
$('#logout').die('click').live('click', function() {alert("clicked!");});
to no avail.
After looking more closely (and as commented by Omar), this problem is caused by a combination of the jquery mobile paging system AND trying to attach to a 'single' element by id.
In my case each time I clicked a link within the page it would load into the jqm paging system a separate page, each one containing its own #logout element. My solution was to query for all the buttons and attach handlers to each one:
var buttons = $("*[id='logout']");
buttons.each(function() {
// handle click or whatever here
});
Instead of:
var button = $('#logout'); // Only hooks into the first #logout element
I have this chunk of code in my coffeescript:
$('.asdasd').ready ->
$.ajax '/splunk/100000000',
type: 'GET'
cache: false
success: (html) ->
$('.splunk_results').append html
The asdasd div doesn't even exist -- however, in my console, I can see a call to /splunk/10000000" being made. Why is this happening?
EDIT:
I think the issue might have to do with the fact that the div in question isn't loaded with the initial page -- the page is full of partials, and the div is only loaded with the click on another js button that modifies the DOM. I basically want to see when that div exists, and when it does, make a new request and populate the div with the results of that request.
(heavily edited in response to question edit)
.ready is only a valid event for document. jQuery's documentation for ready doesn't define behavior for cases where the argument to $ isn't document. That said, there's nothing stopping you from defining an event that acts the way you want! Rather than listening for the ready event, invent a custom event (say, readyForSplunk) and trigger it at the appropriate time.
The document, or some nearer parent of the to-be-created asdasd div, should have a delegate handler listening for the readyForSplunk event. The js button that creates the asdasd div should also triggerHandler('readyForSplunk') the new div.
ready runs when the DOM is ready. If you only would like it to run if the element in question is in the page, you could do something like this instead:
_get = ->
$.ajax '/splunk/100000000',
type: 'GET'
cache: false
success: (html) ->
$('.splunk_results').append html
$('.asdasd').each ->
_get()
_get = ->
In my jquery-mobile (1.0RC2) application, I have two pages: test1.html, test2.html
The first page, test1.html, includes an collabsible-set, where I expand one collabsible item via script in the pageinit event listener (tried both pageshow and pageinit):
$('#page1').live( 'pageinit', initPage);
function initPage() {
alert('initPage!'); // this line seems to be always getting executed
$('#my_expandable').trigger('expand'); // ... but this line doesn't when coming back via a back link!
}
This works fine on the first call of the page.
Then I have a link that leads me to the second page test2.html, as follows:
<script>
function goPage2(criteria) {
$('#page1').die( 'pageinit', initPage);
$.mobile.changePage( "test2.html", {reverse: false, reloadPage: true} );
}
</script>
page 2
When I then go back to the first page via
<script>
function goPage1() {
$.mobile.changePage( "test1.html", { reverse: true, reloadPage: true} );
}
</script>
test
only the alert message in the pageinit event listener of test1.html is executed, but the collapsible is not being expanded through the
You can see the sample in action here: http://bit.ly/rr0dq3
How to reproduce the problem:
load test1.html at http://bit.ly/rr0dq3
you will get an alert message, and the collapsible will be expanded
click on the button 'GoTo page2' and you will come to the second page test2.html
on this second page, click on the gray button 'test', and you will come back to the first page test1.html
the problem now: as you can see, the alert command of the pageinit event of test1.html is being executed, but expanding the collapsible isn't - why not? Obviously the pageinit event listener method is being entered properly, but only the collapsible seems to have a problem here.
I think it might be a bug (filed a report here https://github.com/jquery/jquery-mobile/issues/2791), but maybe somebody else has an idea for that.
Workaround:
Both the alert and the collapsible expanding is being executed when I use a different way to to open the second page test2.html, using
window.location.href = "test2.html";
instead of
changePage(...);
But it's not very satisfying. Why does it not work properly if I use the the page injection way? I already call the die() method when I open the different pages in order not to have multiple pageinit event listeners keeping hanging around.
Have you tried using the data-attribute for collapsible content areas that makes them load expanded:
data-collapsed="false"
Here is a link to the docs for this behavior: http://jquerymobile.com/demos/1.0rc2/docs/content/content-collapsible.html
I am trying to understand the following jQuery Mobile example.
$( '#aboutPage' ).live( 'pageinit',function(event){
alert( 'This page was just enhanced by jQuery Mobile!' );
});
What is #aboutPage in this context? What is the object pageinit is binding to?
aboutPage should be the id of the page.(i.e.div with data-role="page").live() attaches the funcion you have defined which contains thealert to the pageinit event of aboutPage.pageinit is triggered on a page when the page is initialized.
So in short What your code does is
it will execute the alert statement when aboutPage is initialized
The page might be initialized even if it is not in view.So even before you go to that page,the pageinit of the div will be triggered.If you are loading another html file as the new page pageinit for that page will be triggered only when you load that page into view.So,in your case if you want to do something when your div comes into view,you can try the pagebeforeshow and pageshow.pagebeforeshow will be triggered on the new page before animation starts and pageshow after animation is over.