Solved

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

Posted on 2014-01-31
3
970 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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Learn new improvements released by Google for Google Calendar. Noted in this article are simple tips and tricks that can make your everyday use of Google Calendar better.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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)
This video demonstrates how to sync Microsoft Exchange Public Folders with smartphones using CodeTwo Exchange Sync and Exchange ActiveSync. To learn more about CodeTwo Exchange Sync and download the free trial, go to: http://www.codetwo.com/excha…

679 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