Search code examples
jqueryodatadatajs

Odata.read does not work in FF/Chrome (works in IE)

I wrote a small html/js as shown below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link type="text/css" rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="datajs-1.0.1.min.js"></script>
    <script type="text/javascript" src="json2.js"></script>
    <script type="text/javascript" src="jquery.tmpl.js"></script>
    <script type="text/javascript" src="DataJSCRUD.js"></script>
</head>
<body>
    <div class="page">
        <div class="header">
            <div class="title">
                <h1>
                    OData Javascript Consumer
                </h1>
            </div>
            <div class="clear hideSkiplink">
            </div>
        </div>
        <div class="main">
            <div id="customers-contain" class="ui-widget">
                <h1>
                    Customers:</h1>
                <table id="customers" class="ui-widget ui-widget-content">
                    <tr class="ui-widget-header ">
                        <th>
                            CustomerID
                        </th>
                        <th>
                            CompanyName
                        </th>
                        <th>
                            ContactTitle
                        </th>
                        <th>
                            Address
                        </th>
                        <th>
                            City
                        </th>
                    </tr>
                </table>
                <span id="loadingCustomers" style="display: none">Loading...</span>
            </div>
        </div>
        <div class="clear">
        </div>
        <div class="footer">
        </div>
    </div>
    <script type="text/javascript">
        $(OnPageLoad)
    </script>
</body>
</html>

DataJSCRUD.js

/// <reference path="jquery-1.4.1-vsdoc.js" />

//ODATA Root Service URI
var CUSTOMERS_ODATA_SVC = "http://services.odata.org/Northwind/Northwind.svc/Customers";

//Page Load Actions

function OnPageLoad() 
{
    GetCustomers();
} 

//Page Events:
//***********************Get Customers (READ)***************************
//Gets all the Customers from service
function GetCustomers() 
{
    $("#loadingCustomers").show();
    alert("ok");
    OData.read(CUSTOMERS_ODATA_SVC, GetCustomersCallback);
}

//GetCustomers Success Callback
function GetCustomersCallback(data, request) 
{
    $("#loadingCustomers").hide();
    $("#customers").find("tr:gt(0)").remove();
    ApplyTemplate(data.results)
}



//*************************Helper Functions***************************

//Helper function to apply UI template
function ApplyTemplate(data) 
{
    var template = "<tr id=\"customerRow${CustomerID}\">" +
                            "<td>${CustomerID}</td>" +
                            "<td>${CompanyName}</td>" +
                            "<td>${ContactTitle}</td>" +
                            "<td>${Address}</td>" +
                            "<td>${City}</td>" +
                        "</tr>";

        $.tmpl(template, data).appendTo("#customers tbody");
}

Could not understand what went wrong here.

Solution

  • Got it. Have to add the following line:

    OData.defaultHttpClient.enableJsonpCallback = true;

    Hopefully, this would help others.