?
Solved

problems with jquerymobile page to page

Posted on 2014-09-10
27
Medium Priority
?
361 Views
Last Modified: 2014-09-11
Hi,

I need to know what i have to do to jquerymobile runs a function when it's load.

I have a page in jquerymobile that when i link a <li><a> in page1 then sends me to another page, not using #page2 for example. I am using href="page2.php" for example. All works well, i try many things including document. ready and others, but only works when i press the refresh button. How i can do that when the page2 loads then runs a script when i press the link in page1
<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<meta http-equiv="Cache-control" content="no-cache">

<title>WEB</title>
<link href="jquery-mobile/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/mobile.css">
<script>

$(document).ready(function(e) {
    
alert ("test")

});
</script>

</head> 
<body>

<div data-role="page" id="cargaActual" data-add-back-btn="true" data-theme="b"> <!--comienzo de pagina-->
<div data-role="header"><h1><?php echo $feeder ?></h1><a href="javascript:location.reload(true)" data-role="button" data-icon="refresh" data-iconpos="notext" class="ui-btn-right"></a>
        <a href="ali.php" data-icon="arrow-l" data-iconpos="notext" class="ui-btn-left"></a></div>
  <div data-role="content"> <!--comienzo de contenido-->
  
  <ul data-role="listview" class="classEventos"> <!--comienzo de lista de eventos-->
  
  <li id="mensaje"></li>
  

</ul> <!--fin de lista de eventos-->
</div> <!--fin de contenido-->
</div> <!--fin de pagina-->
</body>
</html>

Open in new window

0
Comment
Question by:joyacv2
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 14
  • 9
  • 4
27 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40315191
0
 
LVL 1

Author Comment

by:joyacv2
ID: 40315198
hi Gary,

I try pagecreate but the same problem, any other?
0
 
LVL 58

Expert Comment

by:Gary
ID: 40315217
Post your code. You may need to do an hard refresh
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Comment

by:joyacv2
ID: 40315256
what is a hard refresh?
0
 
LVL 1

Author Comment

by:joyacv2
ID: 40315257
my code is in my post
0
 
LVL 58

Expert Comment

by:Gary
ID: 40315264
The code using pagecreate
0
 
LVL 1

Author Comment

by:joyacv2
ID: 40315314
i change pagecreate in the past, can you provide an example?
0
 
LVL 58

Expert Comment

by:Gary
ID: 40315319
The example is right there in the link
jQuery(document).on( "pagecreate", function( event ) { 
     // page load events here
})

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 40315322
use pagechange : http://api.jquerymobile.com/pagechange/

$( document ).on( "pagechange", function( event ) {
  alert ("test");
});

Open in new window

0
 
LVL 1

Author Comment

by:joyacv2
ID: 40315344
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<meta http-equiv="Cache-control" content="no-cache">

<title>WEB</title>
<link href="jquery-mobile/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/mobile.css">
<script>
jQuery(document).on( "pagecreate", function( event ) {
     alert("yes");
})
$(document).ready(function(e) {
   
alert ("test")

});
</script>

</head>
<body>

<div data-role="page" id="cargaActual" data-add-back-btn="true" data-theme="b"> <!--comienzo de pagina-->
<div data-role="header"><h1><?php echo $feeder ?></h1><a href="javascript:location.reload(true)" data-role="button" data-icon="refresh" data-iconpos="notext" class="ui-btn-right"></a>
        <a href="ali.php" data-icon="arrow-l" data-iconpos="notext" class="ui-btn-left"></a></div>
  <div data-role="content"> <!--comienzo de contenido-->
 
  <ul data-role="listview" class="classEventos"> <!--comienzo de lista de eventos-->
 
  <li id="mensaje"></li>
 

</ul> <!--fin de lista de eventos-->
</div> <!--fin de contenido-->
</div> <!--fin de pagina-->
</body>
</html>

don't work, also don't work with pagechange
0
 
LVL 1

Author Comment

by:joyacv2
ID: 40315351
when the page comes from the other page, the code doesn't execute, then i press refresh and works!
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40315363
check this page : http://jsfiddle.net/fgoen7zb/4/
look like it work
0
 
LVL 1

Author Comment

by:joyacv2
ID: 40315387
hi leakim,

This works, but it comes from another page. My code works if i refresh the page after load, but initially nothing happens. Do you test with a link from other page?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40315396
I think when you click on the link from Experts-Exchange to go to jsfiddle it's what happen :)
0
 
LVL 1

Author Comment

by:joyacv2
ID: 40315419
so,

what do you think is the problem? because in my code doesn't work. My other page contains this link

echo '<li><a href="cargaActual.php?feeder='.$paraloop['Feeder'].'">'.$paraloop['Feeder'].'</li>';
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40315423
I don't think it's relevant of your link
You've so many scenario, it would be better to see your page
Maybe a javascript error which break the code
0
 
LVL 1

Author Comment

by:joyacv2
ID: 40315467
which page do you need to see?, the one that i submit is my complete page, the page with the link is a page with some links
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40315475
what the jQuery versions ?
Here the one used on the jsfiddle :
  <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
  <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.js"></script>
  <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.css">

Open in new window

0
 
LVL 82

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 40315476
paste this with chrome or firefox : view-source:http://fiddle.jshell.net/fgoen7zb/4/show/
0
 
LVL 1

Author Comment

by:joyacv2
ID: 40315488
works, what is that? i cannot see the code
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40315496
this is the code of the jsfiddle
0
 
LVL 1

Author Comment

by:joyacv2
ID: 40315535
do you see something abnormal in my code?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40315679
did you tried the 1.9 instead 1.8 jQuery version?
0
 
LVL 1

Author Comment

by:joyacv2
ID: 40316685
let me try
0
 
LVL 1

Author Comment

by:joyacv2
ID: 40316695
same problem with 1.9
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40316741
ok, could you provide a link to your page or build one with the same issue ?
0
 
LVL 1

Author Comment

by:joyacv2
ID: 40316803
i test your code and there will be an error in some part of my code, i decided to make it simple including in the same page and works with a little problem that i am going to create in a new problem, i will credit the points to this answer and open a new one, thanks!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Recently, we decided that in order to stay competitive in today's IT world, we were going to have to develop and deploy a mobile app for our users and do it quickly. We felt that we were already behind the curve. Users of technology today are mov…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month14 days, 5 hours left to enroll

800 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question