locked
How to do a jquery ajax call while consuming a web api RRS feed

  • Question

  • User1818914577 posted

    Hi All,

    I have a task of achieving something like , I have a button and a textbox . The input is some 4 digit. When I click on the button, I should bind the data in an HTML table. All this should be achieved with $.ajax() method.

    Now the problem is, when I hit on the button. It returns nothing. i.e. the error part of the ajax method is triggered all the time.

    Can anyone help me out in this. I am just a beginner in WEB API's. Below is my code.

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Tables Example</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="http://cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <style>
    body { font-size: 140%; padding : 30px; }
    </style>
    </head>
    <body>
    <form class="form-horizontal">
    <div class="form-group">
    <label for="fullName" class="col-sm-2 control-label">Id</label>
    <div class="col-sm-7">
    <input type="text" id="txtId" name="Id" class="form-control" />
    </div>
    <!--Trying to get the label right next to the control-->
    <div class="col-sm-3">
    </div>
    </div>

    <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
    <input type="button" id="btnLoad" value="Click" class="btn btn-primary" />
    </div>
    </div>

    <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10" id="result">
    </div>
    </div>
    </form>

    <table class="table table-striped table-bordered" id="tblComponents" cellspacing="0">
    <thead>
    <tr>
    <th>First Id</th>
    <th>Second id</th>
    <th>Date</th>
    <th>Name</th>
    <th>Type</th>
    <th>Build Number</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
    <th>First Id</th>
    <th>Second id</th>
    <th>Date</th>
    <th>Name</th>
    <th>Type</th>
    <th>Build Number</th>
    </tr>
    </tfoot>
    <tbody>

    </tbody>

    <script type="text/javascript">
    $(document).ready(function () {
    $('#tblComponents').dataTable();
    });

    $("#btnLoad").click(function () {
    var data = $("#txtTypeId").val();

    $.ajax({
    type: 'GET',
    async: true,
    dataType: 'JSON',
    url: 'http://www.something.com/API/JSON/Repository',

    data: {

    tId : '9999', userkey : 'abcd-abcd-abcd-abcd' 

    }
    success: function (response) {
    $('#divResult').html(response);
    },
    error: function (jqxhr, status, errorMsg) {

    alert(error);

    }
    });
    });

    </body>
    </html>

    The url will fetch data using this url : http://www.something.com/API/JSON/Repository?tId=9999&userkey=abcd-abcd-abcd-abcd

    I need to build a string out my application and bring it back in the form of JSON. 

    Thanks,

    Lokesh

    Friday, June 12, 2015 2:23 PM

All replies

  • User438962230 posted

    Hi Lokesh,

    Firstly you got some errors in the HTML code, missing </Table>,</Script> end tag, as well as a <div> tag with id="divResult", the alert method receives the wrong parameter, the parameter should be "errorMsg".  So please paste your code in some HTML editor and make sure it is well formated. Then please also make sure the Web API is available, browse the Web API link in your web browser, see if you can get the correct JSON data.

    I modified your code, and test it with my own Web API service, this code works fine for me:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Tables Example</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="http://cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js"></script>
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <style>
            body {
                font-size: 140%;
                padding: 30px;
            }
        </style>
    </head>
    <body>
        <form class="form-horizontal">
            <div class="form-group">
                <label for="fullName" class="col-sm-2 control-label">Id</label>
                <div class="col-sm-7">
                    <input type="text" id="txtId" name="Id" class="form-control" />
                </div>
                <!--Trying to get the label right next to the control-->
                <div class="col-sm-3">
                </div>
            </div>
    
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <input type="button" id="btnLoad" value="Click" class="btn btn-primary" />
                </div>
            </div>
    
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10" id="result">
                </div>
            </div>
        </form>
    
        <table class="table table-striped table-bordered" id="tblComponents" cellspacing="0">
            <thead>
                <tr>
                    <th>First Id</th>
                    <th>Second id</th>
                    <th>Date</th>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Build Number</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>First Id</th>
                    <th>Second id</th>
                    <th>Date</th>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Build Number</th>
                </tr>
            </tfoot>
            <tbody></tbody>
        </table>
        <div id="divResult">
    
        </div>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#tblComponents').dataTable();
            });
    
            $("#btnLoad").click(function () {
                var data = $("#txtTypeId").val();
    
                $.ajax({
                    type: 'GET',
                    async: true,
                    dataType: 'JSON',
                    url: 'http://www.something.com/API/JSON/Repository',
                    data: {
    
                        tId: '9999', userkey: 'abcd-abcd-abcd-abcd'
    
                    },
                    success: function (response) {
                        $('#divResult').html(response);
                    },
                    error: function (jqxhr, status, errorMsg) {
    
                        alert(errorMsg);
    
                    }
                });
            });
        </script>
    </body>
    </html>
    

    Monday, June 15, 2015 4:56 AM