The data search works fine for normal table data. When Iam filling the table body with Ajax call the search is not working.
I am using AJAX call to fill the table body. My table search works well If there is some Dummy Data without Ajax call. After the Ajax call the search is not working...
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="myTable" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tbody id="userdetails1">
</tbody>
</table>
</body>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<script src="js/admin-dashboard.js"></script>
<script>
$(document).ready(function() {
$('#myTable').DataTable();
});
$('#myTable input').on('keyup', function() {
table.search(this.value).draw();
});
</script>
</body>
</html>
The issue is not with your ajax calls
rather it's with your data-table initializing
with reference to your codepen link:
https://codepen.io/jithendraathipatla/pen/JQMxvg?editors=1111
do this: in document.ready
$(document).ready(function() {
$('#myTable').DataTable();
function filterGlobal () {
$('#myTable').DataTable().search(
$('#global_filter').val(),
).draw();
}
function filterColumn ( i ) {
$('#myTable').DataTable().column( i ).search(
$('#col'+i+'_filter').val(),
).draw();
}
$('input.global_filter').on( 'keyup click', function () {
filterGlobal();
} );
$('input.column_filter').on( 'keyup click', function () {
filterColumn( $(this).parents('tr').attr('data-column') );
} );
} );
and in your js file replace your code with:
var waitlistTable=[];
waitlistdatashow();
function waitlistdatashow(){
console.log("hi");
var data = {"hosted_event_id": "testkonfhub-php-ban963c6ec2",
"user_id" : "1548232247"
};
// document.getElementById("userdetails").innerHTML = "<i class=\"fa fa-refresh fa-spin\" style=\"font-size:48px\"></i> ";
$.ajax({
url: "https://mr6akjmp7f.execute-api.us-east-2.amazonaws.com/default/konfhub_event_display_wailist_details",
type: "POST",
data: JSON.stringify(data),
dataType: "json",
async:false,
success: function (data) {
console.log(data);
waitlistTable=data.participant_details;
console.log(waitlistTable);
//document.getElementById("event_name1").innerHTML = waitlistTable.event_name;
for(var i=0; i < waitlistTable.length; i++){
$("#userdetails1").append(
//"<th>Date & Time of Purchase</th>" +
"<tr>"+
"<td style='cursor: default'>" + waitlistTable[i].name + "</td>" +
"<td style='cursor: default'>" +
" <span class=\"block-email\" >" + waitlistTable[i].email_id.slice(0, 25) + "</span>" +
"</td>" +
"<td class=\"desc\">" + waitlistTable[i].phone_number + "</td>" +
"<td class=\"desc\">" + waitlistTable[i].organisation + "</td>" +
"<td class=\"desc\" id=\"waitlisttext\" style=\"color:orange\">" + waitlistTable[i].ticket_status + "</td>" +
// "<td><textarea id=" + "lead_text".concat(no_of_participant) + " rows=\"1\" cols=\"50\" type=\"text\" style=\"width:100%;border: 1px solid lightslategrey;padding: 4px;border-radius: 4px;\" placeholder=\"write comments here..\">" + returnLeadText(king[no_of_participant].misc) + "</textarea></td>" +
// "<td><span id=" + "approve".concat(no_of_participant) + " class='fas fa-check-circle click-check' onclick=\"approveWaitlist(" + no_of_participant + ")\" style=\"cursor:pointer;font-size: 25px;color:green\" data-toggle=\"tooltip\" title=\"Approve\">  </span>"+
//"<div id=" + "delete-waitlist".concat(no_of_participant) + " class='far fa-times-circle click-check1' onclick=\"deleteWaitlistRecord(" + no_of_participant + ")\" style=\"cursor:pointer; font-size: 25px;color:red\" data-toggle=\"tooltip\" title=\"Reject\"></div></td>" +
"<\tr>"+
"<hr>"
);
// if(waitlistTable[i].status=="ACTIVE"){
// document.getElementById("refundbtn".concat(i)).style.display = "block";
// document.getElementById("cancelbtn".concat(i)).style.display = "block";
}
$('#myTable').DataTable();
}
});
}
Related
I want to sort the table data as alphabetical order. The HTML needs not to be reloaded again.
The JSON data hosted on an online server, The button can be added when clicking the table should be sorted automatically with the column "title" alphabetically.
$(document).ready(function() {
$.getJSON("my json file", function(data) {
var movie_data = '';
$.each(data.movies, function(key, value) {
movie_data += '<tr>';
movie_data += '<td>' + value.title + '</td>';
movie_data += '<td>' + value['imdb-id'] + '</td>';
movie_data += '<td>' + value.rank + '</td>';
movie_data += '<td>' + value.rating + '</td>';
movie_data += '<td>' + value['rating-count'] + '</td>';
movie_data += '<tr>';
});
$('#movie_table').append(movie_data);
});
});
<!DOCTYPE html>
<html>
<head>
<title>JSON data to HTML table</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<h1>TOP MOVIES</h1>
<br />
<table class="table table-bordered table-striped" id="movie_table">
<tr>
<th>Title</th>
<th>IMDB-ID</th>
<th>RANK</th>
<th>RATING</th>
<th>RATING-COUNT</th>
</tr>
</table>
</div>
</div>
</body>
</html>
I'd do something like this:
$(document).ready(function() {
var data = null;
$.getJSON("my json file", function(jsonData) {
data = jsonData.movies;
reloadTable();
});
$("#btn-sort").click(function() {
data.sort(function(a,b) {
return a.title < b.title ? -1 : 1;
});
reloadTable();
});
function reloadTable() {
var movie_data = '';
$.each(data.movies, function(key, value) {
movie_data += '<tr>';
movie_data += '<td>' + value.title + '</td>';
movie_data += '<td>' + value['imdb-id'] + '</td>';
movie_data += '<td>' + value.rank + '</td>';
movie_data += '<td>' + value.rating + '</td>';
movie_data += '<td>' + value['rating-count'] + '</td>';
movie_data += '<tr>';
});
$('#movie_table').slice(1).remove(); // To remove everything except first row
$('#movie_table').append(movie_data);
}
});
<!DOCTYPE html>
<html>
<head>
<title>JSON data to HTML table</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<h1>TOP MOVIES</h1>
<button id="btn-sort">Sort</button>
<br />
<table class="table table-bordered table-striped" id="movie_table">
<tr>
<th>Title</th>
<th>IMDB-ID</th>
<th>RANK</th>
<th>RATING</th>
<th>RATING-COUNT</th>
</tr>
</table>
</div>
</div>
</body>
</html>
When displaying my list in a html table I only want to bring in the items in that list if it equals something. For example, if client is equal to x then bring in the contact details associated with it.
The code I have currently is below and just brings in specific columns such as client etc.
Any help would be appreciated.
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/dataTables.jqueryui.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://www.datatables.net/release-datatables/extensions/ColReorder/js/dataTables.colReorder.js"></script>
<!--SPServices Javascript-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.min.js"></script>
<!--SpServices JavaScript get items from list 'files'-->
<script language="javascript" type="text/javascript">
$(document).ready(function() {
var myQuery =
"<Query>" +
"<OrderBy>" +
"<FieldRef Name='Client' />" +
"</OrderBy>" +
"</Query>";
$().SPServices({
webURL: "https://ext.kier.co.uk/teams/Utilities/",
operation: "GetListItems",
async: false,
listName: "UtilitiesContracts",
CAMLQuery: myQuery,
CAMLRowLimit: 100,
completefunc: function(xData, Status) {
var liHtml = "<tbody>";
$(xData.responseXML).SPFilterNode("z:row").each(function() {
liHtml = liHtml + " <tr><td>" + $(this).attr("ows_Client") + "</td><td>" + $(this).attr("ows_OperationalContacts")+ "</td><td>"$(this).attr("ows_CommercialContacts")"</td></tr>";
});
liHtml += "</tbody>";
$("#ContractsTable").append(liHtml);
}
});
$('#ContractsTable').DataTable({
"dom": 'Rlfrtip'
});
});
</script>
<table id="ContractsTable" class="display" cellspacing="0" width="50%">
<thead>
<tr>
<th>Client</th>
<th>Operational Contacts</th>
<th>Commercial Contacts</th>
</tr>
</thead>
</table>
News
<br>
Operational
You need to use CAML query with the Where condition. In the Where condition, you can pass the name of the client. Check the below sample code:
var myQuery = "<Query><Where><Eq><FieldRef Name='Client'/><Value Type='Text'>" + X + "</Value>
</Eq></Where><OrderBy><FieldRef Name='Client' /></OrderBy></Query>"
Now, you can use this myQuery in your SPServices code and it will filter out the results.
I modify the code as below:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/dataTables.jqueryui.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://www.datatables.net/release-datatables/extensions/ColReorder/js/dataTables.colReorder.js"></script>
<!--SPServices Javascript-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.min.js"></script>
<!--SpServices JavaScript get items from list 'files'-->
<script language="javascript" type="text/javascript">
$(document).ready(function() {
var myQuery =
"<Query>" +
"<Where><Eq><FieldRef Name='Client'/><Value Type='Text'>X</Value></Eq></Where>"+
"<OrderBy>" +
"<FieldRef Name='Client' />" +
"</OrderBy>" +
"</Query>";
$().SPServices({
webURL: "https://ext.kier.co.uk/teams/Utilities/",
operation: "GetListItems",
async: false,
listName: "UtilitiesContracts",
CAMLQuery: myQuery,
CAMLRowLimit: 100,
completefunc: function(xData, Status) {
var liHtml = "<tbody>";
$(xData.responseXML).SPFilterNode("z:row").each(function() {
liHtml = liHtml + " <tr><td>" + $(this).attr("ows_Client") + "</td><td>" + $(this).attr("ows_OperationalContacts")+ "</td><td>"$(this).attr("ows_CommercialContacts")"</td></tr>";
});
liHtml += "</tbody>";
$("#ContractsTable").append(liHtml);
}
});
$('#ContractsTable').DataTable({
"dom": 'Rlfrtip'
});
});
</script>
<table id="ContractsTable" class="display" cellspacing="0" width="50%">
<thead>
<tr>
<th>Client</th>
<th>Operational Contacts</th>
<th>Commercial Contacts</th>
</tr>
</thead>
</table>
News
<br>
Operational
I have had a look around on here and a number of other sites for the correct way to create an HTML table from and external json link and have come up with the below.
I am trying to pull the username and number of votes and display them in the table, multiple rows are created, all populated with "undefined".
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link re="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table table-bordered table-striped table-hover" id="ragnarok_table">
<tr>
<th>Username</th>
<th>Votes</th>
</tr>
</table>
</div>
<script>
$(document).ready(function(){
$.getJSON("https://ark-servers.net/api/?object=servers&element=voters&key=[REMOVED]&month=current&format=json", function(data){
var ragnarok_data = '';
$.each(data, function(val){
ragnarok_data += '<tr>';
ragnarok_data += '<td>'+val.nickname+'</td>';
ragnarok_data += '<td>'+val.votes+'</td>';
ragnarok_data += '</tr>';
});
$('#ragnarok_table').append(ragnarok_data);
});
});
</script>
</body>
</html>
I can see that others have run into this issue too, however, this is my first time diving into Javascript; the other questions have completely different code and the answers dont seem to work here. Any help would be much appreciated, thanks.
Just use a .forEach on data.voters.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link re="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table table-bordered table-striped table-hover" id="ragnarok_table">
<tr>
<th>Username</th>
<th>Votes</th>
</tr>
</table>
</div>
<script>
$(document).ready(function() {
$.getJSON("https://ark-servers.net/api/?object=servers&element=voters&key=R72Uo7jcAXCVBjx1eGtDm8itWlrU59GHnuy&month=current&format=json", function(data) {
var ragnarok_data = '';
data.voters.forEach(function (val) {
ragnarok_data += '<tr>';
ragnarok_data += '<td>' + val.nickname + '</td>';
ragnarok_data += '<td>' + val.votes + '</td>';
ragnarok_data += '</tr>';
});
$('#ragnarok_table').append(ragnarok_data);
});
});
</script>
</body>
</html>
Or, if you are dead set on jQuery, modify your $.each to be on the array you want data from data.voters, and to properly get the value:
$.each(data.voters, function (ignore, val) {
The second argument is the value, the first argument is the index. See more here:
https://api.jquery.com/jQuery.each/
You can use .each as below:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link re="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table table-bordered table-striped table-hover" id="ragnarok_table">
<tr>
<th>Username</th>
<th>Votes</th>
</tr>
</table>
</div>
<script>
$(document).ready(function() {
$.getJSON("https://ark-servers.net/api/?object=servers&element=voters&key=R72Uo7jcAXCVBjx1eGtDm8itWlrU59GHnuy&month=current&format=json", function(data) {
var ragnarok_data = '';
/*data.voters.forEach(function (val) {
*/
$(jQuery.parseJSON(JSON.stringify(data.voters))).each(function() {
ragnarok_data += '<tr>';
ragnarok_data += '<td>' + this.nickname + '</td>';
ragnarok_data += '<td>' + this.votes + '</td>';
ragnarok_data += '</tr>';
});
$('#ragnarok_table').append(ragnarok_data);
});
});
</script>
</body>
</html>
I am making admin portal, where admin can see the total number of current booking, for this we have to refresh table every 10 sec automatically and there will be also refresh button, which also refresh the table, I am using the JQuery, Ajax, Json, Spring MVC, I am trying to make more than one Jquery table which are refreshing theirself every 10 seconds, But only one table is refreshing, other is not. , Thanks in advance for help and any suggestion,
<html>
<head>
<title>Service for home - New Page - Next Generation of Service Provider - Admin Home Page</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
<link href="assets/styles.css" rel="stylesheet" media="screen">
<link href="assets/DT_bootstrap.css" rel="stylesheet" media="screen">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="vendors/flot/excanvas.min.js"></script><![endif]-->
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="vendors/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
function fetchData(){
$(".data-contacts1-js tbody").empty();
$.get("http://localhost:8080/HotelServiceProvider/getAllHotelBookingDetails", function(data) {
$.each(data, function(i, contact) {
$(".data-contacts1-js").append(
"<tr><td>" + contact.custId + "</td>" +
"<td>" + contact.custName + "</td>" +
"<td>" + contact.custMobile + "</td>" +
"<td>" + contact.custEmail + "</td>" +
"<td>" + contact.custAddress + "</td>" +
"<td>" + contact.Date + "</td>" +
"<td>" + contact.Time + "</td></tr>"
);
});
});
}
$(document).ready(function(){
$(".data-contacts1-js tbody").empty();
setInterval(function(){
fetchData();
},10000); // this will call your fetchData function for every 5 Sec.
});
$(document).ready(function(){
$(".data-contacts1-js tbody").empty();
$('#fetchContacts1').click(function() {
fetchData();
});
});
</script>
<script type="text/javascript">
function fetchData(){
$(".data-contacts2-js tbody").empty();
$.get("http://localhost:8080/PGServiceProvider/getAllPgBookingDetails", function(data) {
$.each(data, function(i, contact) {
$(".data-contacts2-js").append(
"<tr><td>" + contact.custId + "</td>" +
"<td>" + contact.custName + "</td>" +
"<td>" + contact.custMobile + "</td>" +
"<td>" + contact.custEmail + "</td>" +
"<td>" + contact.custAddress + "</td>" +
"<td>" + contact.Date + "</td>" +
"<td>" + contact.Time + "</td></tr>"
);
});
});
}
$(document).ready(function(){
$(".data-contacts2-js tbody").empty();
setInterval(function(){
fetchData();
},10000); // this will call your fetchData function for every 5 Sec.
});
$(document).ready(function(){
$(".data-contacts2-js tbody").empty();
$('#fetchContacts2').click(function() {
fetchData();
});
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<!--/span-->
<div class="span9" id="content">
<div class="row-fluid">
<!-- block -->
<div class="block">
<div class="navbar navbar-inner block-header">
<div class="muted pull-left">Carpenter Services</div>
</div>
<div class="block-content collapse in">
<div class="span12">
<table class="data-contacts1-js table table-striped" >
<thead>
<tr>
<th>ID</th>
<th>Customer Name</th>
<th>Customer Mobile</th>
<th>Customer Email</th>
<th>Address</th>
<th>Date</th>
<th>Time</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<button id="fetchContacts1" class="btn btn-default" type="submit">Refresh</button>
</div>
</div>
<!-- /block -->
</div>
<div class="row-fluid">
<!-- block -->
<div class="block">
<div class="navbar navbar-inner block-header">
<div class="muted pull-left">Carpenter Services</div>
</div>
<div class="block-content collapse in">
<div class="span12">
<table class="data-contacts2-js table table-striped" >
<thead>
<tr>
<th>ID</th>
<th>Customer Name</th>
<th>Customer Mobile</th>
<th>Customer Email</th>
<th>Address</th>
<th>Date</th>
<th>Time</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<button id="fetchContacts2" class="btn btn-default" type="submit">Refresh</button>
</div>
</div>
<!-- /block -->
</div>
</div>
</div>
</div>
<!--/.fluid-container-->
<script src="vendors/jquery-1.9.1.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="vendors/datatables/js/jquery.dataTables.min.js"></script>
<script src="assets/scripts.js"></script>
<script src="assets/DT_bootstrap.js"></script>
<script>
$(function() {
});
</script>
</body>
</html>
You defined fetchData twice. Because you call the functions in your callback it does not matter that those functions are defined in two different script tags.
Both fetchData are defined in the global scope, and the second one overwrites the first one. Thats why .data-contacts2-js is only update.
This example shows the different behaviors when functions a looked up.
<!-- script block 1 -->
<script>
setTimeout(test,100);//will call test #1
setTimeout(function() {
test();//will call test #2
},100);
//test #1
function test() {
console.log(1);
}
</script>
<!-- script block 2 -->
<script>
setTimeout(test,100); //will call test #2
setTimeout(function() {
test(); //will call test #2
},100);
//test #2
function test() {
console.log(2);
}
</script>
First the script block 1 is evaluated, because of that setTimeout(test,100); refers to the test #1 function.
Then the second script block is evaluated, before it is executed the test #2 is already known and because of that the setTimeout(test,100); in the second script block refers to test #2.
When the cllback for both setTimeout(function() {test();},100); executed after 100ms the test() inside this callback will call test #2 for both script blocks, as test #2 is shadowing test #1
I'm a newbie programmer and i've been reading the Instagram search tutorial over at EduVoyage (http://eduvoyage.com/instagram-search-app.html). Impressed by this, i've decided to try my hand at it to learn jquery and such. Problem is, I cant get his example to work. I've dumbed my app down and can get it to display the default "cat" search, but when i search on the web form, i get nothing. No errors, no results, nothing. I'm banging my head here trying to find out what I'm doing incorrectly. i know its probably something simple im missing, but any help is greatly appreciated.
Here is js code:
var Instagram = {};
(function () {
function toScreen(photos) {
$.each(photos.data, function (index, photo) {
photo = "<div class='photo'>" +
"<a href='" + photo.link + "' target='_blank'>" +
"<img class='main' src='" + photo.images.low_resolution.url + "' width='250' height='250' />" +
"</a>" +
"<img class='avatar' width='40' height='40' src='" + photo.user.profile_picture + "' />" +
"<span class='heart'><strong>" + photo.likes.count + "</strong></span>" +
"</div>";
$('div#photos-wrap').prepend(photo);
});
}
function search(tag) {
var url = "https://api.instagram.com/v1/tags/" + tag + "/media/recent?callback=?&client_id=XXXXXXXXXXXXXXXXXX"
$.getJSON(url, toScreen);
}
$(function () {
$('form#search button').click(function () {
var tag = $('input.search-tag').val();
Instagram.search(tag);
});
Instagram.search('cats');
});
Instagram.search = search;
})();
and the HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript' charset='utf-8'></script><script src='javascripts/application.js' type='text/javascript' charset='utf-8'></script>
<link href="stylesheets/application.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div id='photos-wrap'>
<form id='search'>
<button type='submit' id='search-button' tabindex='2'>
<span class='button-content'>Search</span>
</button>
<div class='search-wrap'>
<input class='search-tag' type='text' tabindex='1' />
</div>
</form>
</div>
</body>
</html>