CODEWITHSUNDEEP
javascriptandroidjqueryjquery-mobile
Vinod
Vinod

Reputation: 2311

issue with page change in jquery mobile?

I am unable to change page with onClick event I am getting the following error, "uncaught typeerror cannot call method 'page change' of undefined", I am able to see alerts so control is going to mobileapp.js but page is not loading? Why ? Control is not going to smsPage and savedList page

This is my HTML code:

<body>

<!-- Home page..-->
<div data-role="page" id="homePage">
         <div data-role="header" data-theme="b">
            <h1>
              Gps Coordinates
            </h1>
         </div>

 <div data-role="content">
<div id="demo" STYLE="font-family: verdana;  color: black">
 <p>Searching for GPS..</p>
</div>
<div id="location" STYLE="font-family: verdana;  color: black">
<p>Searching for Location Name</p>
</div>
<br></br>
<input id="SMS" type="submit" onClick='goToSms()' data-theme="b" value="Send SMS" data-mini="false">
<input id="EMAIL" type="submit" onClick='gomail()' data-theme="b" value="Send E-mail"  data-mini="false">
<input id="save" type="submit" onClick='showList()' data-theme="b" value="Save"  data-mini="false">
<div id="MailLatlongs" style="display: none">
<p>Searching for GPS..</p>
</div>
</div>
</div>


<!-- Sms page..-->
<div data-role="page" id="smsPage">
 <div data-theme="b" data-role="header">
            <h4>
               Send SMS
            </h4>
 </div>
         <div data-role="content">
            <div data-role="fieldcontain">
               <input name="" id="numberTxt" placeholder="Enter mobile number" value=""  type="tel" data-mini="true"><br>
               <textarea name="" id="messageTxt" placeholder="Enter message" data-mini="false" ></textarea>
                <br>
               <input id="btnDefaultSMS" type="submit" data-theme="b" value="Send SMS" data-mini="false">
            </div>
         </div>        
</div>


<!-- viewDBList page..-->
<div data-role="page" id="savedList">
 <div data-theme="b" data-role="header">
            <h4>
              Save Location
            </h4>
 </div>
         <div data-role="content">
            <div data-role="fieldcontain">
             <input name="" id="defendLatlongs" value=""  type="text" data-mini="true"><br>
             <input name="" id="defendLocation" placeholder="Enter Location name" value=""  type="text" data-mini="true"><br>
             <label for="select-choice-1" class="select">Choose category</label>
             <select name="select-choice-1" id="select-choice-1">
                 <option value="standard">Select category</option>
             </select>
             <input name="" id="defendCategory" placeholder="Enter category name" value=""  type="text" data-mini="true"><br>
         </div>        
        </div>
 </div>

</body>

My Java script and Js code is 

<script type="text/javascript" src="static/mobileapp.js"></script>
<script type="text/javascript">    
 function goToSms()
       {
       alert("sms");
        selectSMS();
       }
       // Redirect to list Page
       function showList()
       {
       alert("save page");
       selectList();

       }
</script>

Code for mobileapp.js

function selectOrganisation()
{
        $.mobile.changePage('#homePage', "slide", false, true);        
}
function selectSMS()
{
alert("test1");
        $.mobile.changePage('#smsPage', "slide", false, true);        
}
function selectList()
{
alert("test2");
        $.mobile.changePage('#savedList', "slide", false, true);        
}

Upvotes: 0

Views: 75

Answers (1)

system7
system7

Reputation: 127

You can use a tags for change page. It is not necessary to use input buttons. For example

<a href="#homePage" class="nav-buttons next" data-transition="slide"></a>

Upvotes: 1

Related Questions