CODEWITHSUNDEEP
jquery-mobile
naresh
naresh

Reputation: 10392

Jquery-Mobile: How to call the another page using ID

I have 2 pages with different id in the container page. first page have one button if you click on that then it will call one java script function. I want to implement the following one. In java script function, condition is true then only it will redirect to the next page using id. Otherwise don't redirect.How to do this please can anybody help me. is it clear?

CODE

< !DOCTYPE html> 

< html> 

< head> 

    < meta charset="utf-8"> 
    < meta name="viewport" content="width=device-width, initial-scale=1"> 
    < title>Single page template</title>

      < link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
     < script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
     < script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

< /head> 

< body>

< !-- BMR Screen page -->

  < div data-role="page" id="BMR_screen">

  < div data-role="header" data-theme="e" id="hdrBMRScreen">

  < h1> BMR Screen< /h1>
  < /div>

  < div data-role="content" id="contentBMRScreen"> 

        < div data-role="fieldcontain">  

             < label for="BMR_age">Age(in years):</label> 

             < input type="text" id="BMR_age" /> 

        < /div> 

        < a href="#BMR_Result" onclick="BMR_Cal()"  data-role="button">submit</a> 

  < /div>

 < /div>

 < !-- End BMR Screen -->

   < div data-role="page" id="BMR_Result">

       < div data-role="header" data-theme="b" >

            < a data-role="button" data-rel="back" data-icon="back">back</a>

            <h1>BMR Result</h1> 

       < /div>

        < div data-role="content">      

          < p id="W_Range">Weight Range:</p>   

        < /div>
    < /div>

  < script type="text/javascript"> 

  var agevar;


  $(document).ready(function () {   
    // Initialize variables 
    ageVar = $('#BMR_age');     
  });

  function BMR_Cal()
  {    
    if(ageVar.val() > 0)
    {       
        // then only it will redirect to the next page i.e, BMR_Result          
    }

  }
  < /script>
  < /body> 
< /html>

Upvotes: 0

Views: 5297

Answers (2)

Ricardo Amores
Ricardo Amores

Reputation: 4687

In jQuery mobile you shouldn't use the ready event. Use the mobileinit event instead, as init code for jQuery mobile runs before the DOM is ready. See

Also, consider using $.mobile.changePage method to perform a page change in javascript as it's safer and more configurable.

Upvotes: 1

Infra Stank
Infra Stank

Reputation: 816

Ok the problem is your assigning the variable when the page loads (before the user has inputted anything).

lets pop it all in the document ready .

 $(document).ready(function () {
// Initialize the variable by declaring it
var ageVar ;

function BMR_Cal() {
//then tie it to the input element AFTER the user has inputted .
ageVar = $('#BMR_age');
if(ageVar.val() > 0) {

document.location.href="yourpagename#BMR_Result";
}
});

Upvotes: 0

Related Questions