$.ajax function not called after clicking link

Question

I'm using jquery mobile and I'm in dealing with a problem:

I have 2 html pages: index.html and page.html

//index.html
...
<script src="script.js"></script>
<body>
<div id='contents'></div>
</body>
...

//script.js
$(document).ready(function(){
   $.ajax({
      ...
       success:
       $("#contents").html(content_to_display).trigger('create');
       ...
   });
});

and another page that calls the previous

//page.html

...
<body>
<a href="index.html" data-icon="arrow-l" data-role="button">Back</a>
</body>
...

the problem is that when I click on the Back button (after refreshing the page.html), the page index.html is displayed correctly, except the that stays empty unless I manually refresh the page (F5 or Ctrl+R) displaying the content I want to be displayed.

how to load the index.html page without manually refreshing the page every time?

Could you show us how you are showing the backbutton? Is it with data-add-back-btn="true" or with $(document).bind("mobileinit", function(){ $.mobile.page.prototype.options.addBackBtn= true; }); — jasonflaherty, Feb 06 '13 at 16:22
the back button: it's just as you see, plain html. a simple tag — Dario Rusignuolo, Feb 06 '13 at 16:24
Validates as in it has all the correct , the , ect... all close... that type of stuff. — jasonflaherty, Feb 06 '13 at 17:00
yes, the html tags are all valid. I think it's a matter of jquery...see the @EliteOctagon answer. is it write? — Dario Rusignuolo, Feb 06 '13 at 17:04

score 1 · Accepted Answer · edited May 23 '17 at 12:27

1

Refresh is your problem, this is a timeline of what have happened:

index.html is loaded
page is changed to page.html and its body content is loaded into index.html DOM but link is still domain/page.html
Because of full page refresh, page.html is reloaded without a HEAD content of index.html.
page is changed to index.html and its body content is loaded into page.html DOM WITHOUT its HEAD part and that is a reason why javascript is not triggered

This problem will be fixed if both index.html and page.html have identical HEAD content, mainly reference to the same custom js file. For more solution to this problem (with solution) take a look at this ARTICLE, to be more transparent it is my personal blog. Or it can be found HERE.

edited May 23 '17 at 12:27

Community

1
1

answered Feb 06 '13 at 18:12

Gajotres

57,309
16
102
130

I do have the same head contents. except that index.html and page.html have different references to different js files in the body not in the head – Dario Rusignuolo Feb 06 '13 at 18:19
If you want, send me your full example to my email and I will fix it for you. – Gajotres Feb 06 '13 at 18:33
email sent. sorry for the italian language – Dario Rusignuolo Feb 06 '13 at 18:57
Can you send it once more, I didn't received it. My mail: dragan.gaic@gmail.com – Gajotres Feb 06 '13 at 19:10
I am on it, give me 15-30 min. – Gajotres Feb 06 '13 at 20:22
1

I have made necessary changes, please take a look and tell me is this it? – Gajotres Feb 06 '13 at 20:57

score 0 · Answer 2 · answered Feb 06 '13 at 16:10

0

I think you are looking for something like:

 window.onbeforeunload = function () {
     // stuff do do before the window is unloaded here.
 }

this runs before the user is navigated away from the current page.

this means you can force the user to navigate to your page which will refresh correctly.

answered Feb 06 '13 at 16:10

SoluableNonagon

11,541
11
53
98

it doesn't work. I edited my previous question. The issue appears only if I refresh the page.html page and after I click on Back. If I don't refresh the page.html before the click, the index.html page is displayed correctly... – Dario Rusignuolo Feb 06 '13 at 16:17
ah, maybe I understand what you say... you are saying to move the js include on the page.html instead of index.html? so that the jquery loads the contents of the index.html before it lefts the page.html page? – Dario Rusignuolo Feb 06 '13 at 17:01

jasonflaherty · Answer 3 · 2013-02-06T17:38:07.977

0

Try this instead of the backbutton if you are just navigating back one page:

<a href="javascript:history.go(-1)">BACK</a>

Or give this a shot:

$.mobile.changePage(href, {changeHash: false });

edited Feb 06 '13 at 17:38

answered Feb 06 '13 at 17:07

jasonflaherty

1,924
7
40
82

already tried. it's the same thing... it's a matter of jquery. – Dario Rusignuolo Feb 06 '13 at 17:08
Does this help: http://stackoverflow.com/questions/14502807/jquery-mobile-page-blank-when-following-direct-link or try this in the js: $.mobile.changePage(href, {changeHash: false }); – jasonflaherty Feb 06 '13 at 17:36
also, are you looking at this in Chrome or FF or a more modern browser? – jasonflaherty Feb 06 '13 at 17:38
I tried both $.mobile.changePage(...) and change the browser. same results (except that I can for example assign the transition effect to the page :-) ) – Dario Rusignuolo Feb 06 '13 at 17:59

$.ajax function not called after clicking link

3 Answers3