Read only works in Safari

Dec 20, 2012 at 8:49 AM
Edited Dec 20, 2012 at 8:50 AM

Hello,

i only want to read from an odata service. what i´ve coded only works on safari browser. Do you have any idea why?

Thank you in advance!

(index.html):

<!DOCTYPE html>
<html>
<head>
    <title>ODataConnect</title>
    <!-- javascript -->
    <!--jQuery-->
    <!--DataJS-Framework-->
    <!--functionality script-->
</head>

<body>


</body>

</html>


 

(script.js):

OData.read(
    "http://odata.netflix.com/v1/Catalog/Genres",
    function (data) {
        var html = "";
        $.each(data.results, function(l) { html += "" + (l+1) + ". " + data.results[l].Name + ""; });
        $(html).appendTo($("#values"));
    }
);

Coordinator
Dec 22, 2012 at 12:00 AM
Edited Dec 22, 2012 at 4:54 AM

Hi FloK,

There are two things here that can cause the problem:

1 -  In $(html).appendTo($("#values"));  the html value must be an html element so can change it to

$('<p>' + html + '</p>').appendTo($("#values")); 

2 - Some browsers doesn't allow cross domain requests like Firefox for Chrome, in order to work around this you can add a parameter in the request "enableJsonpCallback = true" and that can make it work.

So the final code can look like:

         OData.read( 
		{requestUri:"http://odata.netflix.com/v1/Catalog/Genres",  enableJsonpCallback: true}, 
		function (data) { 
			var html = "";
			$.each(data.results, function(l) { 
				html+= "" + (l+1) + ". " + data.results[l].Name + ""; 
			}); 
			$('<p>' + html + '</p>').appendTo($("#values"));	
                  }
	);
	

 

 

- To learn more about cross domain requests, you can check

 http://datajs.codeplex.com/wikipage?title=Cross%20Domain%20Requests&referringTitle=OData%20Security

 

 

Regards,

Hussein

Jan 14, 2013 at 8:35 AM

Thanks for your answer, Hussein. Now i understand the problems with CrossDomainRequest.

But this doesn't work for me. When i add the "enableJsonpCallback=true" the Code doesn't work any more in any browser. 

 

OData.read( 
	{
		requestUri:"http://odata.netflix.com/v1/Catalog/Genres", 
		enableJsonpCallback: true
	}, 
	function (data) { 
		var html = "";
		$.each(data.results, function(l) { html += "
  • " + data.results[l].Name + ""; }); $(html).appendTo($("#values")); } );
  • Coordinator
    Jan 14, 2013 at 8:41 PM

    Is there any error that appears when you issue the request ?

    Also if you can give me the network trace ( request and response headers and body ), that would help me a lot to know the problem.

    -------

    Hussein

    Jan 15, 2013 at 7:53 AM
    Edited Jan 15, 2013 at 7:59 AM

    GET index.js

    Response Headers

    Accept-Ranges bytes
    Connection Keep-Alive
    Content-Encoding gzip
    Content-Length 484
    Content-Type text/html
    Date Tue, 15 Jan 2013 08:46:05 GMT
    Etag "458-4d34fc8d04327-gzip"
    Keep-Alive timeout=8, max=500
    Last-Modified Tue, 15 Jan 2013 08:45:31 GMT
    Server Apache/2.4
    Vary

    Accept-Encoding

    Request Headers
    Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
    Accept-Encoding gzip, deflate
    Accept-Language en-US,en;q=0.5
    Connection keep-alive
    Host fktest.bplaced.net
    If-Modified-Since Tue, 15 Jan 2013 08:45:31 GMT
    If-None-Match "458-4d34fc8d04327-gzip"
    User-Agent Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:18.0) Gecko/20100101 Firefox/18.0

    GET script.html

    Response Headers
    Accept-Ranges bytes
    Connection Keep-Alive
    Content-Encoding gzip
    Content-Length 252
    Content-Type application/javascript
    Date Tue, 15 Jan 2013 08:46:05 GMT
    Etag "138-4d34fc905aac9-gzip"
    Keep-Alive timeout=8, max=500
    Last-Modified Tue, 15 Jan 2013 08:45:35 GMT
    Server Apache/2.4
    Vary Accept-Encoding

    Request Headers

    Accept */*
    Accept-Encoding gzip, deflate
    Accept-Language en-US,en;q=0.5
    Connection keep-alive
    Host fktest.bplaced.net
    If-Modified-Since Tue, 15 Jan 2013 08:45:35 GMT
    If-None-Match "138-4d34fc905aac9-gzip"
    Referer http://fktest.bplaced.net/odataConnect/index.html
    User-Agent Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:18.0) Gecko/20100101 Firefox/18.0

     






    HTML(index.html)
    <!DOCTYPE html>
    <html>
    <head>
    	<title>ODataConnect</title>
    	<!-- meta-tags for mobile devices -->
    	<meta name="apple-mobile-web-app-capable" content="yes" />
    	<meta name="viewport" content="width=device-width, initial-scale=1, user-sclable=no" />
    	
    	
    	<!-- stylesheets -->
    	<link rel="stylesheet" type="text/css" href="style/jquery.mobile-1.2.0.min.css">
    	<link rel="stylesheet" type="text/css" href="style/jqm-icon-pack-2.1.2-fa.css">
    
    	
    	<!-- javascript -->
    	<script type="text/javascript" src="script/jquery-1.8.3.min.js"></script><!--jQuery-->
    	<script type="text/javascript" src="script/jquery.mobile-1.2.0.min.js"></script><!--jQuery mobile-->
    	<script type="text/javascript" src="script/datajs-1.1.0.min.js"></script><!--DataJS-Framework-->
    	<script type="text/javascript" src="script/script.js"></script><!--functionality script-->
    
    </head>
    
    <body>
    <!--the jQuery page-->
    <div data-role="page" id="seite1">
    
    	<!--header-element-->
    	<div data-role="header">
    		<h1>OData Connect</h1>
    	</div><!-- /header -->
    	
    	<ol data-role="listview" id="values">
    	</ol>
    			
    </div><!-- /page -->
    </body>
    
    </html> 
    

     

     

    JavaScript(script.js)

     

    OData.read( 
    	{
    		requestUri:"http://odata.netflix.com/v1/Catalog/Genres",
    		enableJsonpCallback: true
    	}, 
    	function (data) { 
    		var html = "";
    		$.each(data.results, function(l) { html += "
  • " + data.results[l].Name + ""; }); $(html).appendTo($("#values")); $('ol').listview('refresh'); } );
  •  

    THANK YOU!

    Coordinator
    Jan 17, 2013 at 10:46 PM
    Edited Jan 17, 2013 at 11:03 PM

    Hi Flok,

    Thank you for posting your code.

    The problem here is not about your OData request implementation.

    In order to use JsonP your html document needs to be loaded before issueing the request.

    To do that you can change the code to be like:

    function run(){
      OData.read(
        // The rest of the code.
      )
    }
    

    And in the html file you can add:

    < body onload="run()" > 
    <!-- Your html code -->
    < /body >
    

     

    Jan 18, 2013 at 8:38 AM

    Thank you very much! That works perfect!

     

    I know i am annoying but i have another question:

    I want to connect with a odata service (http://gw.esworkplace.sap.com/sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT/CarrierCollection) from SAP which is locked by user and key. When i´m trying to use the same code as above and replace the request the uri, the browser asks for user and password, but after i filled in the credentials it doesnt load any data. 

     

    It would be great if you can help me with this problem, too! ;)

     

    Tank you!

    Regards, FloK