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

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

Related

Click on the button after the class appears in the DOM

There is a form in the popup window that sends data to Ajax. After a successful form, a message about successful submission with the .form-message--success class appears below. I would like that when this class appears in 5 seconds, the window close button with the id #close_pop a is clicked.
Is this possible when a class is added dynamically to the DOM?
I tried something like this, but it doesn't work(
jQuery(document).ready(function($) {
$('.jet-form-message--success').on(function(){
setTimeout(function(){
$('#close_pop a').click();
}, 2000);
});
});
<script>
$(function() {
$("#user-form").on("submit", function(event) {
event.preventDefault();
$.ajax({
url: "form.php",
method: "POST",
data: $( this ).serialize(),
success: function(data) {
alert('form send success');
setTimeout(function(){
$('#close_pop a').click();
}, 2000);
},
error: function(xr) {
alert("error "+xhr.status+' '+xhr.statusText);
}
});
});
});
</script>

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>

Alert when element id is in viewport with jquery appear

Can't get this plugin to work for me: https://github.com/morr/jquery.appear
Using Ajax to refer to plugin from this CDN: http://cdnjs.cloudflare.com/ajax/libs/jquery.appear/0.3.3/jquery.appear.js
What am I doing wrong? I want an alert when div id #footer is in viewport.
$.ajax({
url: '//cdnjs.cloudflare.com/ajax/libs/jquery.appear/0.3.3/jquery.appear.js',
dataType: 'script',
cache: true,
success: function() {
$("#footer").appear(function() {
alert('I see a footer!');
});
}
});
Using the demo page of the plugin I achieved to make it work.
First make the footer element able to fire 'appear' event when it becomes visible on the viewport:
$("#footer").appear();
Then listen for the event like this:
$("body").on("appear", "#footer", function() {
// Do something...
});
Code snippet:
$.ajax({
url: '//cdnjs.cloudflare.com/ajax/libs/jquery.appear/0.3.3/jquery.appear.js',
dataType: 'script',
cache: true,
success: function() {
$("#footer").appear();
$("body").on("appear", "#footer", function() {
alert('I see a footer!');
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="height: 300px">Scroll down</div>
<div id="footer">Footer</div>

JQuery function Adding progress animation

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

jquery ajaxStart/ajaxStop not working

i have very simple code that i making partial postback by jquery and i use ajaxStart/ajaxStop for doing some work. but it is not working. i just could not understand why it is not working.
here is my code
$("#imgHolder").ajaxStart(function () {
$('div#content').block({
message: '<table><tr><td><img src="../images/ajax-loader.gif" border="0"/></td><td><h3>Processing...</h3></td></tr><table>',
css: { border: '1px solid #a00' }
});
$('#imgHolder').empty();
$("#btnPrint").hide();
});
$("#imgHolder").ajaxStop(function () {
$("#btnPrint").show();
$('div#content').unblock();
});
$(document).ready(function () {
$.ajax({
type: "POST",
url: "UPSLabelFormUK.aspx/ProcessInfo",
data: JSON.stringify(DTO),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
if (data.d[0].Message == "SUCCESS") {
//alert(data.d[0].TrackNumber);
///alert(data.d[0].LabelImagePath);
var _images = [data.d[0].LabelImagePath];
$.each(_images, function (e) {
$(new Image()).load(function () {
$('#imgHolder').html("<img src='" + data.d[0].LabelImagePath + "' width='310' height='402' border=0/>");
}).attr('src', this);
});
}
} ,
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
});
i just dont not understand why my above ajaxstart/ajaxstop did not work. please help me to understand why was wrong in my code.
but my ajaxstart/ajaxstop started working when i change the code a bit like
$(document).ajaxStart(function () {
$('div#content').block({
message: '<table><tr><td><img src="../images/ajax-loader.gif" border="0"/></td><td><h3>Processing...</h3></td></tr><table>',
css: { border: '1px solid #a00' }
});
$('#imgHolder').empty();
$("#btnPrint").hide();
});
$(document).ajaxStop(function () {
$("#btnPrint").show();
$('div#content').unblock();
});
the only change is $(document).ajaxStop(function () { instaed of
$("#imgHolder").ajaxStart(function () {
so please explain why my above ajaxStart/ajaxStop code did not work. thanks
Given the fact that ajaxStart is only called if there are no other
ajax requests in progress, it makes is useless if you want to use it
as an AJAX loader indicator.
have u tried with ( tell me is it working or not)
jQuery(document).ajaxStart(function(){
alert("it begins");
})
As of jQuery 1.8, the .ajaxStop() method should only be attached to document.
from jquery api web page of "ajaxStop". You can check it here.
Try this:
$("#loading").bind({
ajaxStart: function() { $(this).show(); },
ajaxStop: function() { $(this).hide(); }
});
Essentially binding your loadingAnimationElement to the globally fired ajaxStart and ajaxStop events. Only shows up when you intend it to.
When jQuery is not performing any Ajax requests and a new request is initiated, it fires an ajaxStart event. If other requests begin before this first one ends, those new requests do not cause a new ajaxStart event. The ajaxStop event is triggered when the last pending Ajax request is completed and jQuery is no longer performing any network activity.
This combination works fine. Thanks to user #brroshan
JS of Master page
<script language="JavaScript" type="text/javascript">
$(document).ajaxStart(function () {
$("#loading").show();
});
$(function () {
// Some other code
// The end of this code block
$("#loading").hide();
$("#loading").bind({
ajaxStart: function () { $(this).show(); },
ajaxStop: function () { $(this).hide(); }
});
});
</script>
html of Master page
<div id="loading" class="display: none;">
<h2>Loading...</h2>
</div>
Try this sample code:-
var $loading = $('#div_Loader').hide();
$(document).ajaxStart(function () {
$loading.show();
})
.ajaxStop(function () {
setTimeout(function () {
$loading.hide();
}, 1000);
});

Categories

Resources