JQuery function Adding progress animation - javascript

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

Related

ajax modal doesn't fire after setInterval reload

<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 have a form modal and need to replace/hide/ toggle it upon submit

So basically I have a form modal, I need it to hide and show my second modal upon submission, without leaving the page.
This is what I'm using, I'm not great at this stuff and this is probably an easy fix.
<script type="text/javascript">
$(document).ready(function () {
$('#myModal').modal('show');
});
</script>
<script type="text/javascript">
$(document).ready(function () {
var $form = $('form');
$form.submit(function () {
$.post(
$(this).attr('action'), $(this).serialize(), function (response) {
$('#myModal').modal('hide');
$('#myModal2').modal('show');
},
'json'
);
return false;
});
});
</script>

Using fadeIn() and fadeOut() to animate AJAX response

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();

How to call function when load page and when submit form?

How to call function when load page and when submit form ?
when i load page i want to call function function xxx()
and when i submit form , i want to call function xxx() again , how can i do that ?
NOTE: this example code call `function xxx()` when submit form only but not call `function xxx()` when load page
index.php
.
.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<form method="post" id="f1">
<input type="checkbox" id="one" name="number" value="one" onclick="xxx()">1<br>
<input type="checkbox" id="two" name="number" value="two" onclick="xxx()">2<br>
<input type="checkbox" id="three" name="number" value="three" onclick="xxx()">3<br>
</form>
<div id="overlay" style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; text-align: center; padding-top: 25%; cursor: wait; font-size: 24px;">
LOADING
</div>
<div id="result">
<script>
function xxx(){
$('#result').hide();
$('#overlay').show();
$.ajax({
url: 'test.php',
type: 'POST',
data: $('#f1').serialize(),
success: function(data){
$('#overlay').hide();
$('#result').show();
$('#result').html(data);
}
});
return false;
}
</script>
</body>
</html>
$(document).ready(function() {
function xxx() {
$('#result').hide();
$('#overlay').show();
$.ajax({
url: 'test.php',
type: 'POST',
data: $('#f1').serialize(),
success: function(data) {
$('#overlay').hide();
$('#result').show();
$('#result').html(data);
}
});
return false;
}
xxx(); // called when page is loaded.
$("form#f1").submit(function(event) {
xxx(); // call function when form is submitted.
event.preventDefault();
});
});
//when the page is loaded
$.ready(function(){
// call of your function
xxx();
$('#f1').submit(function(){
// new call of your function
xxx();
});
});
Do this:
$(document).ready(function(){
function xxx(){
$('#result').hide();
$('#overlay').show();
$.ajax({
url: 'test.php',
type: 'POST',
data: $('#f1').serialize(),
success: function(data){
$('#overlay').hide();
$('#result').show();
$('#result').html(data);
}
});
return false;
}
xxx();
$("form#f1").submit(function(e){
e.preventDefault();
xxx();
});
});
Or, if you don't want to stop your form from submitting, use this:
$(document).ready(function(){
xxx();
$("form#f1").submit(xxx);
});
You can wrap your JavaScript in
$(document).ready( function() {
/* JS HERE */
});
That only applies when the DOM is ready.
I can't see a submit button in your HTML, but you could bind a click event on that button and then execute a function.
On page load, just run the method on document.ready:
$(xxx);
For a form submission, hook it onto the form submit event:
$("#f1").on("submit", xxx);
Place the function which is supposed to be runned inside of the document ready function.
$(document).ready(function() {
your code here
});
This will call a function, whenever the document is loaded and ready.
In fact that you dont have a submit button in your form, you can do
$("#overlay").click(function() {
your code here
});
This will run the code inside the function, whenever the div with the id #overlay is clicked.
If you want to do it on load with jquery
//Remember to use closure, always!!
(function ($) {
$(document).ready( function () {
function xxx () {
//Do your magic
}
xxx();
$('#your-form').submit(function (e) {
xxx();
//if you want to avoid the default submit
e.preventDefault();
});
})
})(jQuery);

Call a js function inside of modal window

I'm applying some css3 effects using a function it works fine on body page but my problem is how to call that function inside a modal window? created dynamic by Ajax.
this is the function:
$(document).ready(function() {
if (window.PIE) {
$('.secondary, .primary, .light_gray_sub').click(function() {
PIE.attach(this);
alert("alert XXX");
});
}
});
i think what your saying is u want the styling to be on the elements you retrieved through ajax:
$(document).ready(function() {
if (window.PIE) {
go();
}
});
function go(){
$('.secondary, .primary, .light_gray_sub').click(function() {
PIE.attach(this);
alert("alert XXX");
});
}
$.ajax({
url: 'ajax/test.html',
success: function(data) {
//append the data to the body here
go();
}
});

Categories

Resources