We Keep Coding

How to do multiple Ajax calls when page is first loaded while using the same HTML divs

I currently have my HTML site set up where I pass a div id as data into my Ajax.
<div id="1" class="stats">
DATA GOES IN HERE
</div>
<div id="2" class="stats">
DATA GOES IN HERE
</div>
I have it so that when the page first loads, an Ajax call is loaded that finds the div id and makes use of it back-end to bring the DATA forward.
$(document).ready(function(){
var fId = $(".stats").attr("id");
$.ajax({
url: 'get_stats',
type: 'GET',
data: {fId : fId},
success: function(data) {
$("#"+fId).html(data);
},
error: function(data){
alert("ERROR: " + data);
}
});
});
The data can be brought. However, I have about 26 of these divs and I need to do this call 26 times. The problem is, the call is only made once and the data is only loaded for the very first div.
How can I make it so that I pass the data from all 26 divs into the Ajax call and bring it into the HTML when the page is first loaded?

Please try this
$(document).ready(function(){
$(".stats").each((i,e)=>{
let fId=$(e).attr("id");
$.ajax({
url: 'get_stats',
type: 'GET',
data: {fId : fId},
success: function(data) {
$("#"+fId).html(data);
},
error: function(data){
alert("ERROR: " + data);
}
});
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1" class="stats">
DATA GOES IN HERE
</div>
<div id="2" class="stats">
DATA GOES IN HERE
</div>

You can just do that with a loop like:
let divs = $(".stats");
$.each(divs, function (div) {
//..do your ajax request here
});

Getting Error value when I try to send value from JavaScript to PHP with ajax post

I use if (isset($_POST['category_drop'])) {...} to check for the post condition in PHP.
Kindly provide me a solution.
$('.category_filter .dropdown-menu li a ').on('click', function(e) {
e.preventDefault();
var category = $(this).text();
$.ajax({
type: "POST",
url: 'page_author.php',
data: {
category_drop: category
},
success: function(data) {
// do something;
alert(category);
}
});
});

Try this:
var params = {'category_drop':category};
$.post('page_author.php', params, function(data) {
//do stuff
}, 'json');

OK, main problem was in your event setting. Check these codes:
page_author.php (v1.0)
<?php
if (isset($_POST['category_drop'])) echo $_POST['category_drop'];
else echo 'Nothing!';
?>
index.html (v1.0)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script>
$(function(){// <---------------- document.ready event
$('.category_filter .dropdown-menu li a').on('click', function(e){
e.preventDefault();
var category = $(this).text();
$.ajax({
type: "POST",
url: 'page_author.php',
data: {
category_drop: category
},
success: function(data) {
console.log(category); // <----- using `data` is correct but using category has no problem, *I changed alert() to console.log()*
}
});
});
});
</script>
<div class="category_filter">
<div class="dropdown-menu">
<ul>
<li>
<a href="javascript:void(0);">
Click Me :)
</a>
</li>
</ul>
</div>
</div>
I created the click event inside document.ready and everything works now.
Just another thing, that you have to send enough code that people can help you. I added some html and other codes to test the code.
and I used console.log() instead of alert(), alert() is good, but console.log() is more pro. and you can see result in console's log, for example in Console of Firebug or something else.
UPDATE - 21/SEP/2016
[cause: questioner needs to change html face after success ajax]
You want to show the result in your page, just do this:
page_author.php (v1.1)
<?php
if (isset($_POST['category_drop'])) echo $_POST['category_drop'];
// else echo 'Nothing!'; // <-------- REMOVE THIS
?>
index.html (v1.1)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script>
$(function(){// <---------------- document.ready event
$('.category_filter .dropdown-menu li a').on('click', function(e){
e.preventDefault();
var category = $(this).text();
$.ajax({
type: "POST",
url: 'page_author.php',
data: {
category_drop: category
},
success: function(data) {
$("#outdiv").html($("#outdiv").html()+"<b>This is the result from AJAX: </b> "+data+"<br/>"); // <------ This will change output div inner html after success ajax
}
});
});
});
</script>
<div class="category_filter">
<div class="dropdown-menu">
<ul>
<li>
<a href="javascript:void(0);">
Click Me :)
</a>
</li>
</ul>
</div>
</div>
<div id="outdiv"></div><!------------ Result will show here -->
Just copy above code.

Thanks for all your supportive answers, Finally I got the output by the below method
$('.category_filter .dropdown-menu li a').on('click',function(e) {
e.preventDefault();
var category = $(this).text();
console.log(category);
$.ajax(
{
type: "post",
url: 'category_drop.php',
data: {
category_drop: category
},
cache: false,
success: function(response) {
$('#ajax_section').html(response);
}
});
});

Hide and show the child div based on condition

I have a parent div with two child.When button clicks it shows only one div based on condition.
<div id="table">
<div id="result_table" >
</div>
<div id="new">
</div>
</div>
Am assigning the data to table depends on the data retrieved from the page.So i want to hide the result _table while the new table is visible.
$('#BUTTON').click(function(){
$.ajax({
url: PAGE.PHP,
type:'POST',
dataType: 'json',
success: function(data){
$("#result_table").html(data.table);
$("#new").html(data);
}
});
});

You can check data results
$('#BUTTON').click(function(){
$.ajax({
url: PAGE.PHP,
type:'POST',
dataType: 'json',
success: function(data)
{
if(data.table)
{
$("#result_table").show().html(data.table);
$("#new").hide();
}
else
{
$("#new").show().html(data);
$("#result_table").hide();
}
}
});
});

Display 'loading' image when AJAX call is in progress

I have the following jQuery Ajax call:
$.ajax({
type: "POST",
url: "addtobasket.php",
data: "sid=<?= $sid ?>&itemid=" + itemid + "&boxsize=" + boxsize + "&ext=" + extraval,
success: function(msg){
$.post("preorderbasket.php", { sid: "<?= $sid ?>", type: "pre" },
function(data){
$('.preorder').empty();
$('.preorder').append(data);
});
}
});
I want to display an image when the ajax call is in progress. How can I do that?
Thanks,

try this :
<script type="text/javascript">
$(document).ready(function()
{
$('#loading')
.hide()
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
});
});
</script>
<div id="loading">
Loading....
</div>
This will show the loading image each time you are doing an ajax request, I have implented this div at the top of my pages, so it does not obstruct with the page, but you can always see when an ajax call is going on.

Something along these lines (showLoadingImage and hideLoadingImage are up to you):
// show the loading image before calling ajax.
showLoadingImage();
$.ajax({
// url, type, etc. go here
success: function() {
// handle success. this only fires if the call was successful.
},
error: function() {
// handle error. this only fires if the call was unsuccessful.
},
complete: function() {
// no matter the result, complete will fire, so it's a good place
// to do the non-conditional stuff, like hiding a loading image.
hideLoadingImage();
}
});

You can display the image just before this call to $.ajax() and then hide/remove the image in the post handler function (just before your .empty()/.append(data) calls.

It works. I have tested it.
<script type='text/javascript'>
$(document).ready(function(){
$("#but_search").click(function(){
var search = $('#search').val();
$.ajax({
url: 'fetch_deta.php',
type: 'post',
data: {search:search},
beforeSend: function(){
// Show image container
$("#loader").show();
},
success: function(response){
$('.response').empty();
$('.response').append(response);
},
complete:function(data){
// Hide image container
$("#loader").hide();
}
});
});
});
</script>
<input type='text' id='search'>
<input type='button' id='but_search' value='Search'><br/>
<!-- Image loader -->
<div id='loader' style='display: none;'>
<img src='reload.gif' width='32px' height='32px'>
</div>
<!-- Image loader -->
<div class='response'></div>

loading a element of same file through jquery

I have a file data.php, when a user clicks update the database is updated in background with jquery but in response i want to reload the particular table whose data was updated.
my html:
<div id="divContainer">
<table id="tableContainer" cellspacing='0' cellpadding='5' border='0'>
<tr>
<td>No.</td>
<td>Username</td>
<td>Password</td>
<td>Usage Left</td>
<td>%</td>
</tr><!-- Multiple rows with different data (This is head of table) -->
my jquery:
$('#UpdateAll').click(function() {
$.ajax({
type: 'post',
url: 'update.php',
data: 'action=updateAll',
success: function(response) {
$('#response').fadeOut('500').empty().fadeIn('500').append(response);
$('<div id="divContainer" />').slideUp('500').empty().load('data.php #tableContainer', function() {
$(this).hide().appendTo('#divContainer').slideDown('1000');
});
}
});
});
Everything is working fine the database is getting updated and in success #response is getting loaded with success message but the table is not refreshing.

You already have a div with an id of divContainer but you are creating this element again
$('<div id="divContainer " />').slideUp....
you need
$('#divContainer')
.slideUp('500')
.empty()
.load('data.php #tableContainer', function() {
$(this).slideDown('1000');
});

$('#UpdateAll').click(function () {
$.ajax({
type: 'post',
url: 'update.php',
data: 'action=updateAll',
success: function (response) {
$('#response').fadeOut('500').empty().fadeIn('500').append(response);
$('#divContainer').slideUp('1000').load('data.php #tableContainer', function () {
$(this).hide().appendTo('#tableContainer').slideDown('1000');
});
}
});
});