Response title
This is preview!
Move this topic
I am migrating up from jquerymobile 1.2 to 1.4.5 the content for each of my pages on my app commences with the following syntax, I have been able to figure out i need to transition the .live to .on so the above becomes each page reference however i realise that the above format is still not compliant for 1.4.5 hence why the content is not loading can someone please provide me the correct syntax to be able to change to the correct syntax for compliance with 1.4.5 I have read over the jquery docs but cannot fully understand what the correct syntax needs to be (very new to jquery mobile) if you could alert the code provided above to be correctly formatted i would be very greatful |
1
Replies(8)
There are MANY changes from 1.2 to 1.4.5. Most of the changes came from 1.3 to 1.4.
Unfortunately, it is a LOT of work to bring a site from 1.2 to 1.4.x. If you are a newbie, and you are migrating somebody else's code from 1.2 to 1.5, it will be a difficult task. Frankly, I wouldn't recommend it. It would be easier starting a project from scratch. And even then, not sure I'd recommend it, as JQM I think has seen it's best days in the rear-view mirror.
live -> on has nothing to do with jQuery Mobile. It was an ancient change to jQuery itself.
Even at 1.2, you shouldn't have been using .live! In the jQuery that was current then, it was "deprecated". (Which means "going away soon"...) Now it's gone away.
pagecontainershow isn't used the same way as pageshow. It's an event for a new widget, the "page container". You can still use pageshow. It was supposed to go away in 1.5, but the developers have promised it will stay in 1.5. Maybe it will go away in 1.6.
It's unclear to me there will ever even be a 1.5, though.
To answer your question, though, this will probably work for you:
$(document).on('pageshow', '#DemoAccountRegistrationPage', function() {
Take a look at the documentation for .on(). The order of parameters is different, and you specify the element that the events "bubble up to" where they are caught. (In this case document.)
Use of IDs for pages is a bad omen! Hope you didn't do it on pages that might be duplicated! (Like a detail page.) It's better to use CSS classes, then write all your code to find things relative to the page.
Hi thanks
i have applied the syntax to the js the content populates on the home page however the header and footer have disappeared its only showing the content thats present in the HomePageContent pageshow function. So the content from the PageShow function is now displaying but the header and footer are not.
When i load the page as my code has an alert that loads and i can see the header and footer information displaying correctly however as soon as i acknowledge the alert the pasgeshow loads with its content but the header / footer disappear
I thank you for your advise so far and thank you in advance for assistance with this additional issue
Also you suggest starting over, what do you suggest i use as i have limited coding experience in app dev and have no object-c skill set hence why i opted for Cordova JQuery Mobile
$(document).on('pageshow', '#HomePageContent', function() {
my html page is
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="js/findlonglatlocation.js"></script>
<script type="text/javascript" charset="utf-8" src="js/myworkmate.js"></script>
<!--- <script type="text/javascript" charset="utf-8" src="js/mycode.js"></script> --->
<body style="background: #ffffff;">
<style>
r {
color: red;
}
bl {
color: black;
}
dblu {
color: darkblue;
}
y {
color: yellow;
}
g {
color: green;
}
</style>
<div data-role="page" id="HomePageContent">
<div data-role="header" id="myheader" style="color: #ffffff; background: #ffffff;"> </div>
<div data-role="header" id="myheader" style="color: #ffffff; background: #000033;"><!---data-position="fixed"--->
<img border="0" src="img/logo_120x120.fw.png" width="42" height="42" alt="Logo" style="float:right; valign:middle; display:inline"/><h1>My demo</h1>
</div>
<div data-role="content">
<div class="example-wrapper" data-iscroll>
<ul data-role="listview" data-theme="b" class="ui-listview ui-group-theme-b" id="HomePageContent">
</ul>
<center><B>Your App ID:<br><span id="appId"></span></b><BR><BR>
<img src="img/logo_120x120.fw.png"><br><br><br><br>
</center>
</div>
</div>
<div data-role="footer" class="ui-btn-a" data-position="fixed" data-id="myfooter" align="center" style="color: #ffffff; background: #000033;";>
<a href="DemoAccountRegistration.html?AppId='+localStorage['appid']+' class='ui-btn'">Request A Demo Account</a>
<a href="Information.html?EmployerId=" data-role="button">More Info</a>
</div>
</div>
</body>
</html>
Leave a comment on watusiware's reply
Where did you get the 1.2 stuff from? Did you "inherit" it? Did you write it yourself? (If so, then you are not a newbie, as 1.2 was several years ago!) Did you use an obsolete book or tutorial to start your project?
It's not a job for a newbie. You'll need to first understand an obsolete version of JQM, and then figure out how to rewrite it for 1.4.5.
Trying to understand the context of what you are trying to accomplish.
Hi I worked with 2.1 from when i started teachiong myself how to write and app with cordova and the jquerymobile code used in the examples i was working off was 2.1
I have a fully operational app in 2.1, its released on app store etc and people are using it
The app extracts data from web services i have created etc so it works wth one main bug scroll freezing of pages, i need to solve the scroll freezing issue
despite many hours searching for similar problems and asking for assistance in stack overflow etc the best i gained was to upgrade to 1.4.5
Leave a comment on watusiware's reply
Please don't try to debug with alerts! They interfere with asynchronous operations, and will definitely cause problems with JQM. Use console.log to debug, and/or use debugging tools (breakpoints, examination of variables, etc.) built-in to every modern desktop browser.
Leave a comment on watusiware's reply
"Also you suggest starting over, what do you suggest i use as i have limited coding experience in app dev and have no object-c skill set hence why i opted for Cordova JQuery Mobile "
Start over with jQuery Mobile 1.4.5. Not 1.2! If you have books about 1.2, throw them out!
I an trying to work based on 1.4.5, following examples for creating the pages etc have made come progress given your earlier advise however as mentioned earlier the page loads dynamically showing the content from the web service call displaying listview page content just as it did with the 1.2 version
the issue is as mentioned earlier when the page loads the dynamic content is there however the header and footer information from the index.html page is not.
I had hoped me sending the code in earlier post may have assisted you to see what was causing the header / footer not to load correctly
(ps the page alert was not for testing purposes rather this the geolocation plugin that fires with each load of the app requesting user permission for app to access location geo data) all those functions work in the 2.1
Just need to get the screen lock problem when entering form data resolved, thought moving to 1.4.5 may also open other functionality that 1.2 does not have hence other reason to migrate up
I look forward to your assistance and thank you for your time thus far
Leave a comment on watusiware's reply
See the upgrade guide! There is a lot to it.
Frankly, I would approach it as if it were a new project. Forget everything you know about 1.2, and start with the 1.4.5 docs.
A lot of your JS code will not work.
A lot of your CSS will not work.
The generated HTML is a LOT different. (Much more simple, which is a good thing - but it is different from before.)
The is no single magic bullet.
Just start over.
Or use Bootstrap. I don't think JQM really brings a lot to a Cordova app.
Leave a comment on watusiware's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to claiude raiola's question