Question

In my Jqmobile code, i am trying to transit pages by applying data-transition="slide" for anchor links..
The Problem is that the linked pages have custom jquery coded by myself…
When i hit an anchor with data-transition=”slide” and href then it surely transit but the linked page custom jquery scripts do not run…
I tried using data-ajax-"false" but in this case custom script runs but not data-transition="slide"…
I want both together to run… Can it be possible…??

Here is the simple custom, in this i am show/hiding input boxes..

<script type="text/javascript">
$(document).bind("pageinit", function(){
      $('#near_index').hide();
      $('#find').click(function() {
             $('#near_index').show();       
      });
    });
</script>

Here is the HTML,

<a href="category.html" data-transition="slide" data-ajax-"false"><img src="images/23-bird.png" alt="Category 2" class="ui-li-icon iconSmall">Category 2</a>

Answer 1

pageinit is for plugin intialization – see here.

So this event will only fire once when JQM first loads. After your “page” (DOM) is initialized. Any other pages you load will be pulled into the DOM, but will not trigger another pageinit.

Just use any of the other available events (link above), such as pagebeforeshow or pageshow. These will fire with every page that is loaded into the DOM. Just put a console.log(“HELLO”) inside the event handler and see if it fires.

EDIT Transitions:
You cannot set data-ajax=”false” and have a transition (slide from page A to page B), because the transition is the result of using AJAX to load the new page INTO the DOM vs. a regular link (data-ajax=”false”) dropping the old DOM and loading the new page (new DOM).

The concept of JQM is to always stay in the SAME “Page” and just load in/out new pages via Ajax. That’s how you can do transitions (load a new page, position it next to the old one and then slide).

This may also be the reason your custom code is not firing, because if you say data-ajax=”false” you are telling JQM “I’m done here”, and load a new page.

If you don’t need data-ajax=”false”, leave it out.