1

This is the first page where I try to open the detail.html;

<a href="detail.html" data-role="none" role="link">
    <div class="place">name</div>
    <div class="arrow"></div>
    <div class="ammount">-&euro;4,<span class="fontsize14">25</span></div>
</a>

I have problems to load the scripts on detail.html (after href link is clicked on first page)

Here is my script in header of details.html(the page I go after href is clicked on first page), Problem is I can NOT get the console test print, that function is NOT called when details.html page is loaded. It only hits after I manually refresh the page

<script>
    $(document).bind("pageinit", function(){//or $(document).ready(function ()   
          console.log('test');
    });
</script>
Spring
  • 11,333
  • 29
  • 116
  • 185
  • 2
    I read twice, but unable to understand your issue. – coding_idiot Jan 17 '13 at 12:42
  • yep me too, there are some changes of a page with anchor but I really don't get what really the goal is. @Spring please clean it up, just tell us what is the concept, the goal and then what have you tried but really clear. – kidwon Jan 17 '13 at 12:49
  • I added the `[jquery-mobile]` tag, since `pageinit` is a jQuery Mobile event. Just to confirm (since you didn't use the tag yourself), are you including the jQuery mobile library on your page? – apsillers Jan 17 '13 at 14:43
  • @apsillers tnx, yes added, just a simple load function, and everybody says try this try that, isnt here a solid way of doing this? – Spring Jan 17 '13 at 14:57
  • Spring, you asked me to "look" at this. Jack's answer seems correct. – andleer Jan 17 '13 at 15:50
  • @andleer thanks for looking up :) – Spring Jan 17 '13 at 16:17

2 Answers2

2

To understand your problem I think you need to first understand how jQuery Mobile "loads" external pages. By default when you click a link to a separate HTML page JQM loads the first data-role="page" on that page and attaches it to the DOM of the first page, the thing is JQM only loads that page div and not any scripts etc. that are outside that container.

If you want to run code for a second page, you either need to include that script on your first page and use event delegation (since the second page is not part of the DOM yet) or include the script withing the second page's date-role="page" wrapper.

Case in point in your case if you want to run code for your details page you either need to include the script on your first page for example assuming you have a div on your detail.html page like the following

<div id="details" data-role="page"> ..rest of your content 
</div>

Then on your first page you could do the following

$(document).on('pageinit', '#details', function() {
  console.log('test');
});

Or alternatively you can include a script tag withing your "details" page wrapper.

EDIT:
As I mentioned this is the default behavior, however if you wish you can tell jQuery Mobile to do a full post when loading a second page by adding in data-ajax="false" or rel="external" to your link for example

<a href="detail.html" data-ajax="false" data-role="none" role="link">
    <div class="place">name</div>
    <div class="arrow"></div>
    <div class="ammount">-&euro;4,<span class="fontsize14">25</span></div>
</a>

The difference between data-rel="external" and data-ajax="false" is if the second page is basically semantic in that data-rel="external" should be used if the second page is on a different domain.

Jack
  • 10,943
  • 13
  • 50
  • 65
  • tnx I just use href to change page I do not use $.mobile.changepage, so why Jquerry gets into the scene here? – Spring Jan 17 '13 at 15:24
  • That's the default behavior of jQuery Mobile, you can do a full page load by adding `data-rel="external"` or `data-ajax="false"` to your link. – Jack Jan 17 '13 at 15:26
  • Amazing it works, and it si that simple. but I havea little problem when try to go back to previous page it triggers again, i only want it to trigger only loading the page not leaving the page – Spring Jan 17 '13 at 15:31
  • I'm not sure I understand what you mean, what triggers again? The `pageinit` event? Where is the script located? – Jack Jan 17 '13 at 15:35
  • I put the script on second page in
    yes pageinit event
     – Spring Jan 17 '13 at 15:41
  • And its firing when you come back to the details page or when you come back to your first page? Because if you do a full post then every time you come to the page it will be reinitialized, in addition when you don't use the ajax model you lose page transitions. If you are designing your pages from scratch (as opposed to retrofitting existing pages to use JQM) then unless you have reason not to you will probably want to go with the default ajax model. – Jack Jan 17 '13 at 15:44
  • tnx if I use data-ajax="false then can I still pass paremeters and jStore objects bwteeen pages? – Spring Jan 17 '13 at 15:47
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/22923/discussion-between-jack-and-spring) – Jack Jan 17 '13 at 15:48
  • could you also look at this one tnx! http://stackoverflow.com/questions/14609080/jquery-mobile-how-to-detect-refresh – Spring Jan 30 '13 at 20:19
1

I made you an working example: http://jsfiddle.net/Gajotres/Eqzd2/ 

$("#second").live('pagebeforeshow', function () {
    console.log('This will only execute on second page!');
});

You can use on instead of live if you are using last version of jQuery.

Also take a look at my article about event flow in jQM page transition: https://stackoverflow.com/a/14010308/1848600

Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • I use 1.2 version. should I put this script on first OR second page? – Spring Jan 17 '13 at 14:59
  • and '#second' is u mean like '#details.html' – Spring Jan 17 '13 at 14:59
  • Yes, take a look at my working example. If you have few html files this code should be in first one if jQM is using ajax loading or any every page if you are not using ajax page loading. – Gajotres Jan 17 '13 at 15:01
  • tnx I have multiples files but couldnt make it work, in my case should i write "#details.html" ? as you can see how I call the other page from href – Spring Jan 17 '13 at 15:06
  • I would be glad if you edit the jsfiddle code to work with 2 html pages, I couldnt make it work in my case – Spring Jan 17 '13 at 15:16
  • Cant make it with jsFiddle but give me your email and I will send you an example with two files. – Gajotres Jan 17 '13 at 15:20
  • thank you very much for your example, while it is very helpful, jacks solution fit better to my situation – Spring Jan 17 '13 at 16:16