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