1

I use jQuery Mobile in my application. I have and index.html page, and I try to add another page to my application. So on the index.html page I have a link to the Camera.html page:

<a href="Camera.html">Take a photo</a>   // A. version

When I click on the link, the camera's page swipes in (it redirects to the Camera.html page with swipe animation), but none of the event handlers are called on the Camera page (load, DOMContentLoaded, etc.). I think that jQuery Mobile uses ajax for redirecting to other pages and that's why the event handlers are not called.

If I change it to the following, the events are called, but the page redirection won't be animated:

<a href="Camera.html" data-ajax="false">Take a photo</a>   // B. version

I'd like to keep the animation and I also prefer that on the Camera page some event to be called (I'd like to use it for initialization). So I have the following questions.

  1. Do you know at least one event, that will be called, if I use the A. version for redirecting to other page?
  2. If I use version A., could I somehow call some event on the other page manually?
  3. Should I redirect to another page in some other way?

Could you give me some code samples, please?

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Zsido Maria-Aliz
  • 23
  • 4

2 Answers2

0

Please Clarify when you mean it swipes in, are you animating a div tag into the screen?

If the page is redirecting to Camera.html, then if you include your scripts in a script tag in Camera.html, they will only get executed when Camera.html loads

Additionally Try:

  • If you are animating a div tag use the $('div').load() event

  • Try adding 

    $('body id="camerabody"').load(function(){ alert("Body Loaded"); })

where camerabody is the id of the body tag in your Camera.html file

  • If you are causing the animation using jquery.animate, you can specify a callback when the animation completes

    $('div').animate(
         {height:'+=50'},
         1000,
         function(){ alert("animation complete"); 
});
DRAKO
  • 112
  • 1
  • 2
  • 9
  • thank you for your replay! I meant redirection to another page. I tried and document.addEventListener("DOMContentLoaded", load, false);, and some other variations with document.addEventListener, window.addEventListener, but none of them works – Zsido Maria-Aliz Apr 26 '12 at 11:16
0

I'd like to keep the animation and I also prefer that on the Camera page some event to be >called (I'd like to use it for initialization).So I have the following questions.

Try using this to initialize your page with pageinit, or pageshow

jQuery('[data-role="page"]').live('pageinit', function(){
  /* page initialization */
})

pageinit is fired once - when page is created in DOM, and pageshow is fired every time the page is shown

Michał Kluczka
  • 143
  • 6
  • thank you for your reply! where should I place this code snippet? I placed it, like:
    ... etc. But it's not working. :(
     – Zsido Maria-Aliz Apr 26 '12 at 11:29
  • This is a pretty good solution! Thanks :-) the only problem is, that in this case I have to put all the html code on the index.html page.. – Zsido Maria-Aliz Apr 26 '12 at 14:04
  • Not necessarily, you should just try move page "p2" to another file, change corresponding url in link on page "p1". It should work without problems – Michał Kluczka Apr 27 '12 at 12:09