Solved

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

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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Suggested Solutions

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this article we will discuss all things related to StageFright bug, the most vulnerable bug of android devices.
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…

803 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