jQuery Cross-Domain Dynamic Client of a Web App

Labels
AJAX(112) App Studio(7) Apple(1) Application Builder(245) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) Barcode(2) Barcodes(3) BLOB(18) Business Rules(1) Business Rules/Logic(140) BYOD(13) Caching(2) Calendar(5) Charts(29) Cloud(14) Cloud On Time(2) Cloud On Time for Windows 7(2) Code Generator(54) Collaboration(11) command line(1) Conflict Detection(1) Content Management System(12) COT Tools for Excel(26) CRUD(1) Custom Actions(1) Data Aquarium Framework(122) Data Sheet(9) Data Sources(22) Database Lookups(50) Deployment(22) Designer(177) Device(1) DotNetNuke(12) EASE(20) Email(6) Features(101) Firebird(1) Form Builder(14) Globalization and Localization(6) How To(1) Hypermedia(2) Inline Editing(1) Installation(5) JavaScript(20) Kiosk(1) Low Code(3) Mac(1) Many-To-Many(4) Maps(6) Master/Detail(36) Microservices(4) Mobile(63) Mode Builder(3) Model Builder(3) MySQL(10) Native Apps(5) News(18) OAuth(9) OAuth Scopes(1) OAuth2(13) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(11) PKCE(2) Postgre SQL(1) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(183) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(81) SharePoint(12) SPA(6) SQL Anywhere(3) SQL Server(26) SSO(1) Stored Procedure(4) Teamwork(15) Tips and Tricks(87) Tools for Excel(2) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(338) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(40) Web.Config(9) Workflow(28)
Archive
Blog
Tuesday, September 25, 2012PrintSubscribe
jQuery Cross-Domain Dynamic Client of a Web App

A fictitious company Northwind Traders had a fair amount of success with the statically exposed product catalog that allows third parties to display the catalog on their own web sites. An exceptionally small amount of code is required to create a jQuery cross-domain static client of the back office web app created with Code On Time.

Northwind Traders have decided to offer search capabilities of the back office web app to their premium integration partners.

A possible implementation of a search client is shown next.

If a user clicks Find without entering a search sample,  then the first one hundred products are retrieved in alphabetical order.

The search result displayed in jQuery cross-domain dynamic client of the demo web app when a search criteria is not specified

This is the result that matches “40 biscuit” search criteria.

The search result displayed in jQuery cross-domain dynamic client of the demo web app with '40 biscuit' search sample

The back office web app at http://demo.codeontime.com/northwind/pages/products.aspx displays the same exact result as follows.

The 'Quick Find' result for '40 biscuit' search sample in the demo web app created with Code On Time

The HTML page implementing a sample search client works across domains in any web browser.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Cross-Domain Client</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#ProductListPanel').hide();
            $('#Query').focus();
            $('#FindButton').click(function (e) {
                e.preventDefault();
                var query = '?_sortExpression=ProductName&_q=' +
                    encodeURIComponent($('#Query').val());
                $.ajax({
                    url: 'http://demo.codeontime.com/northwind/appservices/Products' + query,
                    cache: false,
                    dataType: 'jsonp',
                    success: function (data) {
                        $('#ProductList option').remove();
                        $.each(data.Products, function (index, product) {
                            $('<option>')
                                .text(
                                    product.ProductName + ' / ' +
                                    product.CategoryCategoryName + ' / ' +
                                    product.SupplierCompanyName + ' / ' +
                                    product.UnitPrice)
                                .attr('value', product.ProductID)
                                .appendTo($('#ProductList'));
                        });
                        $('#ProductListPanel').show();
                    }
                });
            });
        });
    </script>
</head>
<body>
    <input id="Query" type="text" />
    <button id="FindButton">
        Find</button>
    <div id="ProductListPanel">
        <select id="ProductList" size="10">
        </select>
    </div>
</body>
</html>

The page statically links jQuery library from CDN provided by Google.

The search starts when a user clicks on the Find button.

The “click” handler declares a query variable that contains “_sortExpression” and “_q” parameters. The first parameter specifies the sort order of returned products. The search parameter “_q” is the sample for the Quick Find feature of the web app.

Next, the “click” handler invokes ajax method to retrieve data from the web app. The key parameters of the method are url and dataType. The first parameter defines the REST URI of Products data controller. The second parameter indicates that a cross-domain web request must be executed by jQuery library.

If the request is successful, then a list of products populates the list box.