Upon fetching a result (it is simply a decimal) from a php file using ajax GET, I would like to fade out the old result and fade in a new one.
This is my current attempt to do this, but the problem is is that it will fade in and out occur every 30 seconds rather when there is a change in data.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
function update() {
$.ajax({
type: "GET",
url: "balancefetch.php",
dataType: "html",
success: function(response){
$("#response1").html(response);
}
});
}
setInterval(update, 30000);
update();
setInterval(fadein, 30000);
$("#response1").fadeIn();
setInterval(fadeout, 30000);
$("#response1").fadeOut();
});
You should change your success callback to
success: function(response){
if ($("#response1").html() != response) {
$("#response1").fadeOut(200, function() {
$("#response1").html(response);
$("#response1").fadeIn();
});
}
}
and just have
setInterval(update, 30000);
update();
Related
<script>
$(document).ready(function () {
setInterval( function() {
$("#myDiv").load(location.href + " #myDiv");
}, 10000 );
});
</script>
<script>
$.ajax({
type: "GET",
url: "/edit-nurse/" + addmission,
success: function (
) {
console.log(response.addmission\[0\]);
$('#amid').val(response.addmission\[0\].amid);
$('#room_list_id_now').val(response.addmission\[0\].roomid);
$('#patient_fname_changeroom').val(response.addmission\[0\].patient_fname);
$('#patient_lname_changeroom').val(response.addmission\[0\].patient_lname);
$('#patient_id_changeroom').val(response.addmission\[0\].patient_id);
$('#room_list_numbers_changeroom').val(response.addmission\[0\].room_list_numbers);
$('#room_list_status_changeroom').val(response.addmission\[0\].room_list_status);
$('#nursed_warding').val(response.addmission\[0\].nursed_warding);
$('#checkin').val(response.addmission\[0\].checkin);
}
});
});
});
</script>
When I do console.log the data comes but my modal doesn't show up.
help me...
I want the modal to be able to press normally like before the setInterval code runs.
I want to generate dynamic html content with php and jQuery (1.11).
It works but updates don't appear in source code and i'm worry about that because i think it's not good for search engines. For example, i can't test structured data (schema.org) on google tools.
index.php
<script>
function displayRecords(numRecords, pageNum) {
$.ajax({
type: "GET",
url: CalRoot+"/events-by-agenda.php",
data: "show=" + numRecords + "&pagenum=" + pageNum,
dataType: "html",
cache: false,
beforeSend: function() {
$('.loader').show();
},
success: function(data) {
$("#results").html(data);
$('.loader').hide();
}
});
$(function() {
$(".pagination").click(function() {
$('html,body').animate({
scrollTop: $(".contentDescription").offset().top
}, 2000, 'swing');
});
});
}
$(document).ready(function() {
displayRecords(20, 1);
});
</script>
HTML section of index.php
<div id="results"></div>
<div class="loader"></div>
events-by-agenda.php contains mysql query, results in html and
pagination
I read a lot of things about this, event delegation, use context(this), add .on method on a button for example but nothing works
I have a simple AJAX request and I'm wondering if it's possible to combine the loading state button with my request. Is it possible to make the button reset to default when the request is completed, instead of choosing for example 5 seconds before reset as per now?
Loading state button
$("button").click(function() {
var $btn = $(this);
$btn.button('loading');
// simulating a timeout
setTimeout(function () {
$btn.button('reset');
}, 1000);
});
AJAX request
$(function () {
$('form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'POST',
dataType:'html',
url: '/m/core/_processEditEntry.php',
data: $('form').serialize(),
success: function () {
$(".message").fadeIn(0);
$(".message").delay(5000).fadeOut('slow');
}
});
});
});
It's best to keep your code in the same place. Remove the click handler and add these lines to the ajax call:
$(function () {
$('form').on('submit', function (e) {
//save button so we can use later
var my_button = $(this).find("button");
//give button loading state
my_button.button('loading');
e.preventDefault();
$.ajax({
type: 'POST',
dataType:'html',
url: '/m/core/_processEditEntry.php',
data: $('form').serialize(),
success: function () {
//reset state
my_button.button('reset');
$(".message").fadeIn(0);
$(".message").delay(5000).fadeOut('slow');
}
});
});
});
You can add a span with a class to the button when it was clicked
if ($(this).is(".btn, .page-link, .df-link")) {
// disable button
$(".btn").prop("disabled", true);
// add spinner to button
$(this).html(
`<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> ` + $(this).text()
);
}
and then in Ajax complete remove that element:
complete: function(response) {
$(".btn").prop("disabled", false);
$(".spinner-border").remove();
}
The code which changes the active class to the currently clicked pagination class. Removing it works but adding the new class doesn't work.
http://jsfiddle.net/spadez/qKyNL/35/
$('a').click(function(event){
event.preventDefault();
var number = $(this).attr('href');
$.ajax({
url: "/ajax_json_echo/",
type: "GET",
dataType: "json",
timeout: 5000,
beforeSend: function () {
$('#content').fadeTo(500, 0.5);
},
success: function (data, textStatus) {
// TO DO: Load in new content
$('html, body').animate({
scrollTop: '0px'
}, 300);
// TO DO: Change URL
$('#pagination li.active').removeClass("active");
$(this).parent().addClass("active");
},
error: function (x, t, m) {
if (t === "timeout") {
alert("Request timeout");
} else {
alert('Request error');
}
},
complete: function () {
$('#content').fadeTo(500, 1);
}
});
});
Can anyone please tell me where I am going wrong?
The problem is that this in the success callback isn't your element.
You may do this :
$('a').click(function(event){
var element = this; // <= save the clicked element in a variable
event.preventDefault();
var number = $(this).attr('href');
$.ajax({
...
success: function (data, textStatus) {
...
$('#pagination li.active').removeClass("active");
$(element).parent().addClass("active"); // <= use it
},
...
});
});
This this in ajax callback isn't what you expect it to be. Add this to your ajax parameters:
context: this,
No need to build custom object saving system and making code more messy, as jQuery already has this functionality.
Edit: In this case it should look like:
$('a').click(function(event){
event.preventDefault();
var number = $(this).attr('href');
$.ajax({
context: this,
url: "/ajax_json_echo/",
...
I would like to add a progress animation to a function so that it displays at the begining of the function and then disappears at the end of it.
Something like:
<script type="text/javascript">
function myfunction() {
//Display progress animation here
$('input[type=submit]#submit').click();
etc...
//Hide the progress animation here
}
?>
UPDATE:
Here is my current Ajax code:
<script type="text/javascript">
function myfunction() {
$("#ajax-form").submit(function(){
$.post("submit.php",
$("#ajax-form").serialize(),
function(data){
mysubmitForm();
}
);
return false;
});
}
</script>
What anix said:
<div class="loader">Loading...</div>
<script type="text/javascript">
$(function(){
$.ajax({
url: 'the url',
data: {},
success: function() {
$('.loader').fadeOut();
}
});
});
</script>
Update:
<script type="text/javascript">
function myfunction() {
$("#ajax-form").submit(function(){
//show loader here
$.post("submit.php", $("#ajax-form").serialize(),
function(data){
mysubmitForm();
//and hide it here
}
);
return false;
});
}
if you are using something like $.ajax() then you can have a div with progress image visible befor ajax call and make ot invisible on the sucess event of ajax call