如何将外部数据库中的记录填充到phonegap应用程序中的未排序列表

Question

I am making a college admission application where students can register themselves and after registering the application will immediately open the next page which contains a list of colleges near them. I am developing this application in phonegap. I am fetching the records in JSON format. I have to populate this data in an unsorted dynamic list.

Structure of Student Registration:

The page id is "Registration". When I click the Register button, the Records(Student Info) is inserted and I immediately call page id ListOfColleges in which I have to show the list of Colleges.

<div data-role="page" id="Registration" data-theme="d" style="width: 100%;">        
    <div data-role="main" style="width: 100%;">

        <div  style="width: 76%; margin-left: 10%; margin-top: 3%;" id="studentRegister">
            <input type="text" placeholder="Name" name="userName">
            <input type="text" placeholder="Email" name="eMail">
            <input type="number" placeholder="Mobile" name="mobNumber">
            <input type="number" placeholder="Course" name="Course">
            <a href="#ListOfColleges" class="ui-btn"  id="btnReg" style="background-color: #B6B6BC; color: black;">Register</a>
        </div>
    </div>        
</div>  

Structure of List of Colleges Page

 <div data-role="page" id="ListOfColleges">     
            <div style="width: 100%; margin-top:21%; margin-left: 1%; color: black;">
                <ul data-role="listview">
                    <li>

                    </li>
                </ul>
            </div>
    </div> 

Format of JSON Data and php Code

<?php
header('Access-Control-Allow-Origin: *');//Should work in Cross Domaim ajax Calling request
mysql_connect("localhost","root","1234");
mysql_select_db("demo");
if(isset($_GET['type']))
{       
    if($_GET['type']=="login"){
        $query="Select * from collages";
        $result=mysql_query($query);
        $totalRows=mysql_num_rows($result); 
        if($totalRows>0){
            $recipes=array();
            while($recipe=mysql_fetch_array($result, MYSQL_ASSOC)){
                $recipes[]=array('Collage'=>$recipe);
            }
            $output=json_encode(($recipes));
            echo $output;
        }
     }
  }
else{
    echo "Invalid format";
}

I am trying to write the following JavaScript to populate the "ListOfColleges" page. "btnReg" is the id of the button on the page Registration.

Please help me to write this script and suggestions for modification of structure are welcome..

<script> 
            $(document).ready(function(){ 

               $("#btnReg").click(function(){ 
                  $.ajax({ 
                      url:"http://192.168.1.4/Experiements/webservices/api.php", 
                      type:"GET", 
                      dataType:"json", 
                      data:{type:"login", UserName:userId,Password:userPassword}, 
                      ContentType:"application/json", 
                      success: function(response){    
                           //
                              // *Logic for populate the dynamic list*
                           //   

                      }, 
                      error: function(err){ 
                          alert(JSON.stringify(err)); 
                      } 
                  }) 
               });  
            }); 
        </script>

Answer 1

I should look for tutorials but here is a guide...

in the HTML, add an ID to the ListView:

<ul id="listCollege" data-role="listview">

Then in the Javascript button click function do the following Loop:

$("#listCollege").empty;
for (i=0; i< iElements; i++)
{
  $("#listCollege").append("<li><a href=''>College 1</a></li>");
}

Obviously you have to create the "li" element with the json data... but that's the text structure.

Some JQMobile versions or in some cases you may need to add AFTER THE "FOR LOOP" the following:

$("#listCollege").listview("refresh")

but sometimes you don't have to, and if you write it YOUR CODE WILL FAIL, so take into account to try WITH or WITHOUT the listview("refresh") instruction.

Hope it helps!