I am using phonegap + jquery mobile and have a submit function that works

Question

0

Asked: May 26, 20262026-05-26T05:24:19+00:00 2026-05-26T05:24:19+00:00

I am using phonegap + jquery mobile and have a submit function that works

0

I am using phonegap + jquery mobile and have a submit function that works and after it submits it transitions to another page. these pages are inner pages such as data-role=”pages” like jquery mobile uses. The problem is that before it finally transitions to the right inner page, it shows the first page with the data-role=”pages” set for a split second. It doesn’t prevent it from working I am just trying to prevent it from flashing the first page as its irrelevant and for it to transition properly to the proper page. Here is my javascript:

function addarticle(){


  var truth=$("#addform").validate().form()

if(truth==true){
var headlinetemp=$('#headline').val();
var articletemp=$('#article').val();
navigator.notification.activityStart();
$.ajax({
type:'POST',
url: "http://server.net/droiddev/backbone1/index.php/welcome/addarticle/",
data: { 'headline': headlinetemp, 'article': articletemp},
success:function(){
$('#headline').val('');
$('#article').val('');

 $.mobile.changePage($('#thanks'), { transition: "slide"});
//above is suppose to take you to thank you page without blinking the first page

 navigator.notification.activityStop();
},
error:function(xhr){
navigator.notification.activityStop();
alert('Error: Article was not added.');
}



});

}
else{alert('Please Correct the Form');}

}

here is the html

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
     <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.js"></script>
     <script type="text/javascript" charset="utf-8" src="main.js"></script>
     <style type="text/css">  #ajaxarea1{width:308px;
  display:block;
  margin:2px auto;
  height:50px;
  overflow:hidden;} 
  #errorarea ul li{ color:red;}
  .center{text-align:center;}
  </style>
</head> 

<body onload="init()" style=""> 

<!-- Start of first page -->
<div data-role="page" id="foo" data-title="Page Foo" data-theme="d" >

    <div data-role="header" data-theme="d" data-position="fixed">
        <h1>Foo</h1><a href="#" data-role="button" style="float:left;" data-rel="back" data-icon="arrow-l" data-iconpos="notext">Back</a>
    </div><!-- /header -->

    <div data-role="content">   
        <p>I'm first in the source order so I'm shown as the page.</p>  

        <p>View internal page called <a href="#bar" data-role="button" data-theme="d" data-transition="slide">bar</a></p>   
     <a href="#addart" data-role="button" data-theme="d" >Add Article</a>
    <!--<input type="text" id="numinput" placeholder="Enter a number.."></input>-->
    <div id="ajaxarea1"><p>This should change by hitting the button below</p></div>
    <button type="button" id="calcbtn" onclick="change_ajaxarea1()">Ajax call</button>

    </div><!-- /content -->

    </div>
</div><!-- /page -->


<!-- Start of second page -->
<div data-role="page" id="thanks" data-theme="d">

<p> testing thank you page!</p>
</div>



<div data-role="page" id="bar" data-theme="d" data-title="Page bar ya fool!">

    <div data-role="header" data-theme="d">
        <h1>Bar</h1>
        <a href="#" data-role="button" style="float:left;" data-rel="back" data-icon="arrow-l" data-theme="d" data-iconpos="notext">Back</a>
    </div><!-- /header -->

    <div data-role="content">   
        <p>I'm first in the source order so I'm shown as the page.</p>      
        <p><a href="#foo">Back to foo</a></p>   
        <a href="http://server.net">Test ajax</a>
        <div style="margin-top:10px;"><input type="text" placeholder="Testing placeholder.." style=""></input></div>
    </div><!-- /content -->

    <!--<div data-role="footer" data-position="fixed">
<p style="width:100%;margin:0 auto;display:block;padding:5px;">The footer is over here and i hope this doesnt get cut off. </p>
    </div> -->

    <!-- /footer -->
</div><!-- /page -->


<!-- Start of third(add) page -->
<div data-role="page" id="addart" data-theme="d" data-title="Page bar ya fool!">

    <div data-role="header" data-theme="d">
        <h1>Add article</h1>
        <a href="#" data-role="button" style="float:left;" data-rel="back" data-icon="arrow-l" data-theme="d" data-iconpos="notext">Back</a>
    </div><!-- /header -->

    <div data-role="content">   
        <form id="addform" style="text-align:center;"> <div id="errorarea"><ul>
            </ul></div><label for="Headline">Headline</label><br/><input type="text" name="Headline" title="Enter a title for the Headline at least 5 chars" class="required" id="headline" style="margin: 10px auto 20px auto;" placeholder="enter article headline.."></input>
<br/>   
 <label for="Article">Article</label><br/><textarea cols="40" rows="8" name="Article" id="article" class="required" title="Enter a article" name="textarea" style="margin: 10px auto 20px auto;" placeholder="enter article content.." id="textarea"></textarea>
        <br/>
        <input data-inline="true" style="display:inline-block;clear:both;text-align:center;" type="submit" value="Add Article"  onclick="addarticle()"></input>

        </form>



    </div>



    <!-- /content -->

    <!--<div data-role="footer" data-position="fixed">
<p style="width:100%;margin:0 auto;display:block;padding:5px;">The footer is over here and i hope this doesnt get cut off. </p>
    </div> -->

    <!-- /footer -->
</div><!-- /page -->

</body>
</html>

I hope I made my problem clear. thank you