Connecting To Restful WCF Web Service and Jquery Mobile/HTML

Question

I have created a small web application which i am trying to connect to my web service. For some reason, i am receiving the error '200'.

The functionality is simple:
1 ) The user enters a value (product number) on the Home.html page.
2 ) The service is called and performs a search based on the value entered.
3 ) If a result is found, output the product number on the SearchResult.html page.

Home.html

<!DOCTYPE html>
<!--[if IEMobile 7 ]>    <html class="no-js iem7"> <![endif]-->
<!--[if (gt IEMobile 7)|!(IEMobile)]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="cleartype" content="on">

    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch/apple-touch-icon-144x144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch/apple-touch-icon-114x114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch/apple-touch-icon-72x72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-57x57-precomposed.png">
    <link rel="shortcut icon" href="img/touch/apple-touch-icon.png">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="img/touch/apple-touch-icon-144x144-precomposed.png">
    <meta name="msapplication-TileColor" content="#222222">

    <script src="js/vendor/modernizr-2.6.1.min.js"></script>    
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js">    </script>

</head>
<body>

    <header class="Navigation">            
        <div class="headerImage"><img src="images/logo-small.png" alt="Home"/</div>        
    </header>

    <div id="product" class="Banner">
        Product Search
    </div>

       <br />
        <div class="nine-tenths">
            Please enter a product number.
        </div>

            <input id="productNum" class="productNum" type="text" placeholder="Enter Product Number"/>           

        <br />                                 

        <button type="button" id="btnSearch" onclick="btnSearch()">Search</button>   

        <script src="js/main.js"></script>
</body>

main.JS

function btnSearch() {
//  document.location.href = 'SearchResult.html';

var productNum= $("#productNum").val(); 
alert(productNum);

var ajaxSearch = "http://localhost:8008/Product/ProductList/GetProduct.php?prod_num?" + productNum;
alert(ajaxSearch);

$.ajax(ajaxSearch,

{
    beforeSend: function (xhr) {
    // $.mobile.showPageLoadingMsg();
},

complete: function () {
// $.mobile.hidePageLoadingMsg();
},
    contentType: 'application/json',
    dataType: 'jsonp',
    jsonp: 'callback',
    type: 'GET',
    error: function (xhr, ajaxOptions, thrownError) {
    alert(xhr.status);
    alert(xhr.responseText);
    //alert(thrownError);
},
success: function (data) {
    var result = data.GetEmployeeListingResult;

    $.each(result, function (index, output) {
        $('#EmployeeList').append('<li> <a href=SearchResult.html?productNum=' + output.prod + '> </a>   .....</li>');
    });

    //$('#EmployeeList').listview('refresh');
}
});

}

SearchResult.html

<table style="width:100%;" class="searchResultFound">
        <tr>
            <td style="width: 10%;">
                <img src="images/resultFound.png" align="left">
            </td>
            <td>
                <input id="productNum" type="text" class="no-outline " disabled="disabled" value="">
                <label>Was found</label>
            </td>
        </tr>
    </table>

    <table style="width:100%;" class="searchResultNotFound">
        <tr>
            <td style="width: 10%;">
                <img src="images/resultNotFound.png" align="left">
            </td>
            <td>
                <input id="productNum" type="text" class="no-outline " disabled="disabled" value="">
                <label>Was not found</label>
            </td>
        </tr>
    </table>

I have tried using this site as an example (why you may see references to Employee's):

http://wrvishnu.wordpress.com/2012/07/29/step-by-step-tutorial-restful-wcf-web-service-and-jquery-mobile/

Thanks

Answer 1

declaration of URL is wrong in main.js.. 'prod_num',

use "'GetProduct.php?prod_num=' + productNum"

instead of "'GetProduct.php?prod_num?' + productNum"

try using this:

var ajaxSearch = "http://localhost:8008/Product/ProductList/GetProduct.php?prod_num=" + productNum;

Connecting To Restful WCF Web Service and Jquery Mobile/HTML

Question

1 answers

solution1
0 2013-05-31 10:07:46

Connecting To Restful WCF Web Service and Jquery Mobile/HTML

Question

1 answers

solution1 0 2013-05-31 10:07:46

solution1
0 2013-05-31 10:07:46