I am send request to PHP page by using jquery ajax concept, I have to display the response in dialog box. It works fine but the problem is it takes time to get response. So can I add progress bar to it.
$.ajax({
type: "POST",
url: "push/push_notify.php",
data: "pushmessage="+message+"&iphone="+iphone+"&android="+android+"&blackberry="+blackberry,
success: function(e){
var response = e;
apprise(response, {'animate':true});
}
});
return false;
You could show some spinner image before running the request and hide it after the request finishes, i the complete handler. For example:
$('#spinner').show();
$.ajax({
type: "POST",
url: "push/push_notify.php",
complete: function() {
$('#spinner').hide();
},
data: {
pushmessage: message,
iphone: iphone,
android: android,
blackberry: blackberry
},
success: function(e) {
var response = e;
apprise(response, {'animate':true});
}
});
And here's a site for some AJAX spinners.
Related
I have researched dozens of answers but can't find the solution.
I have jQuery Ajax call on mouseover.
I see one log in a browser console.
But PHP side receives 2 requests.
My JS code:
$('.df_word').off("mouseover").on("mouseover", function(){
console.log("open translation_box"); //fires once on hover
get_translation($(this),$(this).html());
}
function get_translation(word_el,word_html){
console.log('get_translation'); //fires once on hover
var params = {}
params['api'] = "2.0";
params['page'] = "translate";
params['q'] = ""+word_html+"";
console.log(params); //fires once on hover
$.ajax({
type: "GET",
crossDomain: true,
contentType: 'application/json; charset=utf-8',
url: window.api_link,
data: params,
error: function( xhr, textStatus ) {
console.log(xhr.status);
},
success: function(data){
console.log(data); //fires once on hover
}
});
}
On PHP side I see 2 requests within the same second (I save every request to the database).
What am I missing?
After $.ajax request, i cannot load other page on new tab in browser. what is the reason?
my javascript code in this url https://example.com/page1.php:
$('#myButton').on("click", function(event) {
event.preventDefault();
$.ajax({
url: "models/data.php",
type: "POST",
data: {...},
dataType: 'json',
context: this,
success: function(data) {
//...
},
error: function (asd, textStatus, errorThrown) {
//...
}
});
});
after click on myButton i cannot load another url in other tabs, As long as the ajax request ends. for example https://example.com/page2.php what is the reason?
I have an ajax call that is sending some IDs to one of my controllers.
The jQuery that is running to do this is basically searching for elements that have an ID like notification-id- and then grabbing the IDs and storing them in a JavaScript variable.
When I alert() or console.log() this variable it prints out values like 1,2 for two notifications that I have on the page notification-id-1 and notification-id-2.
For my ajax call, I am simply doing the below:
$.ajax({
url: "{{ url('/notifications/read') }}",
method: "POST",
data: notifications, // Let jQuery handle packing the data for you
success: function(response) {
// The data was sent successfully and the server has responded (may have failed server side)
alert(notifications);
},
error: function(xhr, textStatus, errorThrown) {
// AJAX (sending data) failed
},
complete: function() {
// Runs at the end (after success or error) and always runs
}
});
I'm trying to test what my controller is receiving by doing dd($request->all()); however that is just returning:
array:1 [
"undefined" => ""
]
(The ajax call does run successfully)
How can I retrieve the ID values that are being sent in this ajax call inside my controller?
Edit: Full Script
<script type="text/javascript">
$(document).ready(function() {
var count = $('#notification-counter');
var new_notifications = $('#notification-new-counter');
$('#notification-drop-down').on('click', function() {
count.empty();
var notifications = $('[id^="notification-id-"]').map(function() {
return this.id.slice(16);
}).get();
$.ajax({
url: "{{ url('/notifications/read') }}",
method: "POST",
data: notifications, // Let jQuery handle packing the data for you
success: function(response) {
// The data was sent successfully and the server has responded (may have failed server side)
alert(notifications);
},
error: function(xhr, textStatus, errorThrown) {
// AJAX (sending data) failed
},
complete: function() {
// Runs at the end (after success or error) and always runs
}
});
});
});
</script>
$.ajax({
url: "{{ url('/notifications/read') }}",
method: "POST",
data: {'notifications':notifications},
Can you please use the following line and tell me what you get in controller ?
data: {notifications:2}. If you get this value correctly, then in your original post you are not sending notifications correctly and not getting anything in controller.
Below is my Ajax code I have made using jQuery Ajax method.
$(".loading_msg").show();
$.ajax({
type: "POST",
url: "submit_ops.php?action=submit_form",
data: $( "#frmMyForm" ).serialize(),
success: function(result){
if(result=='Success'){
$("#msgContainer").html('<div style="color:#3CA322;font-weight:bold;font-size:14px;padding:10px;">Thank you.</div>');
$("#msgContainer").fadeIn();
}
else{
$("#msgContainer").html('<div style="color:red;font-size:12px;padding:10px;">' + result + '</div>');
$("#msgContainer").fadeIn();
}
},
error: function(){
//console.log('error');
},
complete: function(){
//console.log('complete');
$(".loading_msg").hide();
$("#submit").attr("disabled", false);
}
});
So the logic is, whenever the Ajax request is about to made,
the .login_msg container is displayed first
then ajax call made
and when it is completed, again the .loading_msg is hidden.
Now the problem, it is not working smoothly as it should be. So when the ajax call is made, the browser hangs for a seconds but it doesn't show the loading message. But when the request is completed, the login message appears like for half a second and then it goes away as I have set it hidden on request completion.
So I want that the .login_msg should be shown before the request is made.
Any suggestions for this? Thanks in advance.
try using beforeSend and complete settings of $.ajax:
$.ajax({
type: "POST",
url: "submit_ops.php?action=submit_form",
data: $( "#frmMyForm" ).serialize(),
beforeSend:function(){
$(".loading_msg").show();
}
complete:function(){
$(".loading_msg").hide();
}
....
....
});
I'm very new at AJAX calls from jQuery and I'm a bit stuck trying do to this; I have an AJAX call from jQuery like this:
$(document).ready(function() {
$('tr.table-row').click(function(){
$.ajax({ url: 'stats-render.php', data: {ref: $(this).attr('id')}, type: 'post', success: function(d) {//the_output_here}});
});
});
This script is inside a web page triggered when the user hits a particular row (<tr></tr>) from a table. stats-render.php outputs HTML text with some info and graphics. This answer some times takes a while (15 seconds), so I would like to show the user a waiting message when he/she triggers the script and when the call returns an answer show the output text in a div (lets call it <div id="render-div">).
So the questions are, how can I show a waiting message? If you know a good script for showing this in a modal, I would appreciate it.
How can I output the result from stats-render.php into a div?. Thank you so munch for any help!
Just display a loading message in the div where the results go in the interim.
$(document).ready(function() {
$('tr.table-row').click(function(){
$.ajax({ url: 'stats-render.php', data: {ref: $(this).attr('id')}, type: 'post', success: function(d) { $('div.for-results').html( /* d... */ ); });
$('div.for-results').html('loading...');
});
});
Or for even more fun:
$(document).ready(function() {
$('tr.table-row').click(function(){
$.ajax({ url: 'stats-render.php', data: {ref: $(this).attr('id')}, type: 'post', success: function(d) {
clearInterval(loading);
$('div.for-results').html( /* d... */ );
});
$('div.for-results').html('loading');
var loading = setInterval(function() { $('div.for-results')[0].innerHTML += '.' }, 1000);
});
});
The easiest option is probably to check out the jquery-loading plugin.
I just do a simple show the message before the call, and hide it on the success callback like this:
However I think jquery might have a callback option when the ajax call starts, and when it stops.
$(document).ready(function() {
$('tr.table-row').click(function(){
//Show the loading message, or chage a css class, or what have you.
$('#loadingmessagetext').show();
$.ajax({ url: 'stats-render.php', data: {ref: $(this).attr('id')}, type: 'post', success: function(d) {
//Hide the loading message
$('#loadingmessagetext').hide();
//the_output_here
}
});
});
});