Solved

Page not 'active' after mobile.changePage redirect in phonegap JQM app

Posted on 2014-01-31
3
930 Views
Last Modified: 2014-10-23
I have a strange behaviour in my phonegap application which I cannot seem to find a solution for.

My app has a login form which on successful login, redirects to an update account page.

LOGIN.HTML

setTimeout(function() {
         $.mobile.changePage('update-account.html', { reloadPage: true, transition: "slide"} );
}, 2000);

Open in new window


Within the update account form

UPDATE-ACCOUNT.HTML

  <script type="text/javascript">

                    $(document).ready(function() {

                                      $('#updateAcc').tap(function(){

                                        var formData = $("#callUpdateForm").serialize();

                                        $.ajax({
                                               type: "POST",
                                               url: "/process/update-account.php",
                                               cache: false,
                                               dataType: 'json', // JSON response
                                               data: formData,
                                               success: function(res) {
                                               if (res.success) {
                                                 $("#notify .success").show(); //show success message
                                                 $("#notify .success").delay(2000).hide("slow");//fades it out
                                                 setTimeout(function() {
                                                    $.mobile.changePage('account.html', { reloadPage: true, transition: "fade"} ); //redirects to profile
                                                 }, 2000);
                                               } else {
                                               // show error message
                                                 $("#notify .error").show();  //show error message
                                                 $("#notify .error").delay(2000).hide("slow"); //fades it out
                                               }
                                               },
                                               error: function() {
                                               alert('not working');
                                               }
                                               });

                                        return false;

                                        });

                                      });

                    </script>

<script type="text/javascript">

             function getAccount() {
                     $.getJSON("/json/account.json.php", {id : localStorage.getItem("id")}, function(data){
                     $.each(data, function(key, val){ 
                     // for populatingform
                          $('#usernameField').attr('value', val.username);
                           $('#passwordField').attr('value', val.password);
                         });
                     });

 $(document).ready(function() {
          //form processing goes here and works ok
             getAccount(); 
      });

      </script>

<form id="callAccForm" enctype='multipart/form-data'>
<input type="text" name="username" id="usernameField" value="" placeholder="Username"/>
<input type="password" name="newpassword" value="" placeholder="New Password"/>
<a href"#" button id="updateAcc"  data-role="button">Save</a>
</form>

Open in new window


The key problem is that after redirect from the login page, whilst the data populates correctly, the update button does not work, in addition to and any other buttons with onclick events. They do however work if I click directly to update-account.html.

Is this something to do with how I am loading the page after redirect? Am I failing to load the content correctly somehow? It's like it requires a page reload to function correctly.
0
Comment
Question by:divascotland
3 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39823962
When you run $('#updateAcc').tap(fct); it's applied to the element present in the page
But once you replace the content of the page with the new version of update-account, the tap event is not applied anymore.
You need to use on

function myFunction() {

                                        var formData = $("#callUpdateForm").serialize();

                                        $.ajax({
                                               type: "POST",
                                               url: "/process/update-account.php",
                                               cache: false,
                                               dataType: 'json', // JSON response
                                               data: formData,
                                               success: function(res) {
                                               if (res.success) {
                                                 $("#notify .success").show(); //show success message
                                                 $("#notify .success").delay(2000).hide("slow");//fades it out
                                                 setTimeout(function() {
                                                    $.mobile.changePage('account.html', { reloadPage: true, transition: "fade"} ); //redirects to profile
                                                 }, 2000);
                                               } else {
                                               // show error message
                                                 $("#notify .error").show();  //show error message
                                                 $("#notify .error").delay(2000).hide("slow"); //fades it out
                                               }
                                               },
                                               error: function() {
                                               alert('not working');
                                               }
                                               });

                                        return false;

                                        });

 }

$("#ID_OF_TOP_CONTAINER_IN_UPDATE-ACCOUNT").on("pageshow", function(event, ui) {
          $('#updateAcc').tap(myFunction);      
});

Open in new window


Please note $.mobile.change and pageshow are going to be removed : http://api.jquerymobile.com/jQuery.mobile.changePage/
http://api.jquerymobile.com/pageshow/
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Let Bitmoji into your life. Now is the time to learn a new language of smartphone messaging with this brief introduction.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
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…

706 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now