0

I am getting JSON data list of collage within given distance in K.M. Now I have to add this collage list to the JQuery Mobile List View. In register page student information will fill. Then after pressing Register button javascript will execute and In Java script we are passing the distance as parameter, On server will fetch list of collage located within given distance. I intentionally did not mentioned longitude and latitude simplify reason. Letter We will pass two parameter current longitude and latitude instead of distance. Now fetched data which will in json formate I have to add this information to page CollageOptions under ul view. Please tell me what should I write inside success: function(response) in javascript. Structure of database is

enter image description here

<div data-role="page" id="register" data-theme="d" style="width: 100%;">           
    Name :<input type="text" placeholder="Name" name="userName">
    Email: <input type="text" placeholder="Email" name="eMail">
    Mobile: <input type="number" placeholder="Mobile" name="mobNumber">
    Distance: <input type="text" id="distance_id" name="distance" />
    <a href="#CollageOptions" class="ui-btn" style="background-color: #B6B6BC; color: black;"                         
       id="btnReg">Register</a>
</div>

enter image description here

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

   <ul id="listOfCollage" data-role="listview">
        Here I have to list list of collage available with in given distance
   </ul>
</div>

Now suppose distance is 35 k.m. then list of collage will fetch

enter image description here

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

<script> 
            $(document).ready(function(){  
               $("#btnReg").click(function(){  
                  var distance = document.getElementById('distance_id').value;                
                  $.ajax({ 
                              url:"http://192.168.1.4/Experiements/webservices/getBuddy.php", 
                              type:"GET", 
                              dataType:"json", 
                              data:{type:"login", Distance:distance}, 
                              ContentType:"application/json", 
                              success: function(response){



                              }, 
                              error: function(err){ 
                                  alert(JSON.stringify(err)); 
                              } 
                  }) //ajax
               });  //click
            }); //ready
    </script>
Improve this question
3
  • If you search SO you'll find plenty of examples. Commented Jan 6, 2015 at 11:26
  • @Omar, thanks for your replay I am new in web technology, so please tell me best site because i urgently need it.. Commented Jan 6, 2015 at 11:27
  • stackoverflow.com/… Commented Jan 6, 2015 at 11:31

1 Answer 1

Reset to default
3

You can use an each loop to read the Json Data and prepare the list items

var output = ""; // declare an empty variable inside click function

$("#listOfFoodOptions").empty(); // empty the list

.
.
.

success: function(response){ 

$.each(response, function(index,value){ // loop through the data

output += "<li>"+value.Chef.Name+"</li>"; 

}); 

$("#listOfFoodOptions").append(output).listview().listview('refresh'); // refresh the list

}

.
.
.

.

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

@Tasos, thanks for your replay but where is Ajax like $.ajax({, Or we don't need $.ajax({ In Post method, I am waiting for your reply...
@neelabhsingh Its the simplified version you have exactlty, minus the GET ofcource. see here api.jquery.com/jquery.post
@Tasos , I see your link it was HTTP post request but I need XMLHTTP request, sorry But I am new in webTechnology, I got this project I need to complete it.
@Tasos As you say that GET will not work In this question(posted by me) I am using GET stackoverflow.com/questions/27731448/…
@neelabhsingh you are correct. my bad.ill amend the answer to reflect that. anyway if you want to use GET then you use the (each) function to loop through data and make the list. Have you tried it yet?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.