Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2014-01-31
3
Medium Priority
?
1,020 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
[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
3 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 2000 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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

Short answer to this question: there is no effective WiFi manager in iOS devices as seen in Windows WiFi or Macbook OSx WiFi management, but this article will try and provide some amicable solutions to better suite your needs.
Are you having trouble connecting or getting your iPhone / Samsung device(s) to sync with Microsoft Exchange Server?   What have you tried?   What haven't you tried?
The viewer will learn how to dynamically set the form action using jQuery.
CodeTwo Sync for iCloud (http://www.codetwo.com/sync-for-icloud?sts=6554) automatically synchronizes your Outlook 2016, 2013, 2010 or 2007 folders with iCloud folders available via iCloud Control Panel. This lets you automatically sync them with…

636 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