How to make an ajax call using jQuery Mobile

mmpd
mmpd used Ask the Experts™
on
Hello and thank you for helping me.

I am developing a jQuery Mobile application that needs to make an ajax call to an OData service.  I am stumped on how to do this.  

OData.org has made a public OData service available for testing.  The uri is: http://services.odata.org/OData/OData.svc/Categories()

Using LinqPad I can successfully connect to this service and I get the following results back:
Food, Beverages and Electronics.

Will you please provide a short snippet of code using jQuery Mobile, the jQuery Mobile apis and ajax that will demonstrate how to make this call and return the results?

Thank you very much
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Data Scientist
Most Valuable Expert 2014
Commented:
Because you're dealing with data on another domain, you'll need a server side script to fetch the data. I'm including a php script.

Here is a sample jquery ajax call that returns the categories:


<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8"/>
    <style>


    </style>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
        $(function(){
           var path = "http://services.odata.org/OData/OData.svc/Categories()";
          
          
          $.get("getfile.php", {u:path}, function(data){
            
            var xmlDoc = $.parseXML(data);
            var content = $(xmlDoc);
            
            content.find("entry").each(function(){
              var curr = $(this);
              var title = curr.children("title").text();
              
              var entryItem = $("<div/>", {
                className : "entryItem"
              }).appendTo("#results");
                
                $(entryItem).append("<p>"+title+"</p>");
             
      
                }); // end find each function
      
      
            }); // end .get function
      
     
        });
    </script>
    <body>
        <div id="results"></div>

    </body>
</html>

Open in new window



and the php file: save as getfile.php in same directory

<?php
  
  
  if (isset($_GET["u"])){
     $file = file_get_contents($_GET["u"]);
   
     if (!$file) die("there was an error");
    
     echo $file; 
    
  }

Open in new window

Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
Here is the result of the above code:

http://candpgeneration.com/EE/EE-ajax.html
Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
You could also look into $.mobile.changePage, which will enable jquery mobile transitions if you want, but you'll still probably need the php 'cause of the same domain restriction.

http://jquerymobile.com/demos/1.1.0/docs/api/methods.html

Author

Commented:
Thank you very much.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial