1

I am using phonegap to build my and I am trying to create a function that will refresh certain elements on pages in my app. I have been following another solution I found here Jquery-Mobile: How to reload/refresh the internal page

The code is working perfectly in my browser but I can't get it to work on my android. I have tried changing to several different versions of both jQuery and jQuery mobile but neither works. I am new to working with phonegap and jQuery so would appreciate any help.

Javascript:

<script type="text/javascript">
                $('#page_3').live('pageshow',function(event, ui) {
                // refresh specific element
                $('#refresh').val('');
                });

                $('#page_2').live('pageshow',function(event, ui) {
                // refresh all elements
                var allInputs = $(':input');
                allInputs.val('');
                });
</script>

HTML:

<body>
      <div data-role="page" id="page_1" >    
    <div data-role="content" name="contentlogin">         
        <a href="#page_2" data-role="button" id="login">Navigate to page 2</a>   
        <a href="#page_3" data-role="button">Navigate to page 3</a>     
        Yeah Page 1        
    </div>             
</div> 

<div data-role="page" id="page_2" >
    <div data-role="content" name="contentlogin">
        <a href="#page_1" data-role="button">Navigate to page 1</a>     
        <!-- Some Form elements are there -->
        Hello we are on Page 2<br />Refresh All Elements<br /><br />
        <label for="basic1">Text Input 1 (Refresh):</label>
        <input type="text" name="name1" id="basic1" value="" />   
        <label for="refresh1">Text Input 2 (Refresh):</label>
        <input type="text" name="name21" id="refresh1" value="" />
        <br /> Enter in some values, Navigate to Page 1 and back to Page 2    
    </div>             
</div> 

<div data-role="page" id="page_3" >
    <div data-role="content" name="contentlogin">
        <a href="#page_1" data-role="button">Navigate to page 1</a>     
        <!-- Some Form elements are there -->
        Hello we are on Page 3<br />Refresh Specific Elements<br /><br />
        <label for="basic">Text Input 1:</label>
        <input type="text" name="name" id="basic" value="" />   
        <label for="refresh">Text Input 2 (Refresh):</label>
        <input type="text" name="name2" id="refresh" value="" />
        <br /> Enter in some values, Navigate to Page 1 and back to Page 3
    </div>             
</div>

    </body>
Community
  • 1
  • 1
Antonio
  • 225
  • 2
  • 12
  • 5
    FYI: `.live` is obsolete and removed from modern jQuery. You should probably upgrade and use `.on`. – Alexander O'Mara Jan 09 '16 at 01:49
  • 1
    @AlexanderO'Mara `s/probably/definitely/` – Pointy Jan 09 '16 at 01:50
  • @Pointy: the kids around here aren't going to grok that... – dandavis Jan 09 '16 at 02:06
  • 3
    @dandavis hold on I've got some people on my lawn again – Pointy Jan 09 '16 at 02:07
  • @AlexanderO'Mara No changing it to .on didn't fix it and it doesn't work in the browser either with .on. – Antonio Jan 09 '16 at 03:26
  • If you change to .on you have to also change the jquery version you are loading try version 2.1.4. You'll be better off in the long run, even if that doesn't fix the immediate issue – Wesley Smith Jan 09 '16 at 03:56
  • @DelightedD0D I tried using it with jQuery version 2.1.4 and it stops working in the browser with both .on and .live. Would I need to update the jQuery mobile as well I have it on 1.3.2 now? – Antonio Jan 09 '16 at 05:36
  • `.on()` and jQuery 2.1.4 seems to work fine with jQuery Mobile [1.2.1](http://jsfiddle.net/hcaux8qd/1/) , [1.3.2](http://jsfiddle.net/hcaux8qd/3/), or [1.4.5](http://jsfiddle.net/jccah9L7/5/) but Id use the latest version of each. To be honest, Ive never really found much use for jQuery Mobile. The whole idea of it just doesnt make sense to me. I dont think you should design a website to be specifically mobile. Id rather use Bootstrap to make my sites work everywhere. – Wesley Smith Jan 09 '16 at 05:54
  • Actually, check out [this link](https://api.jquerymobile.com/pageshow/) whcih states - jQuery( ".selector" ).on( "pageshow", function( event ) { ... } ) Note: The triggering of this event is deprecated as of jQuery Mobile 1.4.0. It will no longer be triggered in 1.6.0. The replacement for pageshow is the pagecontainer widget's pagecontainershow event. In jQuery Mobile 1.4.0, the two events are identical except for their name and the fact that pagecontainershow is triggered on the pagecontainer, whereas pageshow is triggered on the page. Might be useful to you – Wesley Smith Jan 09 '16 at 06:00
  • You have to listen for the cordova device ready event, see here: http://stackoverflow.com/questions/33974156/javascript-ondeviceready-not-firing/33974772#33974772 – Joerg Jan 09 '16 at 08:20

0 Answers0