I have a loading gif that I want to display and hide before and after Ajax request using ajaxStart and ajaxStop. Nothing works:
HTML:
<div id="loading" style="display: none"><img src="loading.gif></div>
JS:
$("#searchForm").submit(function(event)
{
$.ajaxStart(function() {
$( "#loading" ).show();
});
$.ajaxStop(function() {
$( "#loading" ).hide();
});
$.ajax({
type: 'POST',
url: 'models/fetchUsers.php', //the script to call to get data
data: $("#searchForm").serialize(), //add the data to the form
dataType: 'json', //data format
success: function(data) //on recieve of reply
{
$.each($(data), function(key, value) {
$('#itemContainer').append(value.user_id);
});
},
error: function()
{
$('#itemContainer').html('<i class="icon-heart-broken"> <?= $lang["NO_DATA"] ?>');
}
});
Try ajaxStart and ajaxStop
$(document).ajaxStart(function() {
$( "#loading" ).show();
});
$(document).ajaxStop(function() {
$( "#loading" ).hide();
});
There is problem in your HTML also ("loading.gif")
<div id="loading" style="display: none"><img src="loading.gif"></div>
Add event.preventDefault(); in your submit function, that will prevent a submit button from submitting a form.
Or Other way is to do the things in your function only, without calling global functions of ajax.
$("#searchForm").submit(function(event)
{
event.preventDefault();
$( "#loading" ).show();
$.ajax({
type: 'POST',
url: 'models/fetchUsers.php', //the script to call to get data
data: $("#searchForm").serialize(), //add the data to the form
dataType: 'json', //data format
success: function(data) //on recieve of reply
{
$.each($(data), function(key, value) {
$('#itemContainer').append(value.user_id);
});
},
complete: function(){
$('#loading').hide();
},
error: function()
{
$('#itemContainer').html('<i class="icon-heart-broken"> <?= $lang["NO_DATA"] ?>');
}
});
}
$(document).ajaxStart(function() {
$("#gif-image-id").show();
}).ajaxStop(function(){
$("#gif-image-id").hide();
});
Put this as a separate event (outside the submit event), and change the selector to what ever the image id actually is.
Related
I have an AJAX function that loads data from the database using a simple select * ... to a div. the function works fine without submit, but when I use a form, it doesn't work and the #itemContainer is empty, Am I missing something? I even tried :
$(document).ready(function() {
$("#myForm").submit(function() {
but didn't work also
My code :
<script id="source" language="javascript" type="text/javascript">
$("#myForm").submit(function() {
$.ajax({
url: 'models/fetchUsers.php', //the script to call to get data
dataType: 'json', //data format
success: function(data) //on recieve of reply
{
$.each($(data), function(key, value) {
$('#itemContainer').append(value.user_id);
});
}
});
});
</script>
You didn't cancel form submission event.
Add preventDefault() in your submit
Like this
$("#myForm").submit(function(event) {
$.ajax({
url: 'models/fetchUsers.php', //the script to call to get data
dataType: 'json', //data format
success: function(data) //on recieve of reply
{
$.each($(data), function(key, value) {
$('#itemContainer').append(value.user_id);
});
}
});
event.preventDefault();
});
Update:
event.preventDefault() is depricated.
try to use return false;
Like this
$("#myForm").submit(function(event) {
$.ajax({
url: 'models/fetchUsers.php', //the script to call to get data
dataType: 'json', //data format
success: function(data) //on recieve of reply
{
$.each($(data), function(key, value) {
$('#itemContainer').append(value.user_id);
});
}
});
return false;
});
It's because page will be reloaded on form submission.
Handle the submit event and add return false.
<script id="source" language="javascript" type="text/javascript">
$("#myForm").submit(function() {
submitForm();
return false;
});
function submitForm() {
$.ajax({
url: 'models/fetchUsers.php', //the script to call to get data
dataType: 'json', //data format
success: function(data) //on recieve of reply
{
$.each($(data), function(key, value) {
$('#itemContainer').append(value.user_id);
});
}
});
};
</script>
I have made a form submit with AJAX, the first time it submits, it has the success function, however the second time it prints the success data in accept_friend.php instead of the #requests_container, like a normal PHP form.
$('.accept_friend').submit(function(){
var data = $(this).serialize();
$.ajax({
url: "../accept_friend.php",
type: "POST",
data: data,
success: function( data )
{
$('#requests_container').html(data);
},
error: function(){
alert('ERROR');
}
});
return false;
});
here is accept_friend.php
<?php
session_start();
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
require "classes/class.requests.php";
require "classes/db_config.php";
$current_user = $_POST['current_user'];
$friend_id = $_POST['friends_id'];
$requests = new Requests($DB_con);
if($_SERVER["REQUEST_METHOD"] == "POST"){
$requests->accept($current_user, $friend_id);
}
?>
It seems that you are replacing the entire html in your $('#requests_container') and I am assuming that the .accept_friend button is also inside the same container.
If this is the case then try replacing your code with
$('#requests_container').on('submit', '.accept_friend', function(){
var data = $(this).serialize();
$.ajax({
url: "../accept_friend.php",
type: "POST",
data: data,
success: function( data )
{
$('#requests_container').html(data);
},
error: function(){
alert('ERROR');
}
});
return false;
});
This will keep your event alive even after the form button is removed and put back in the DOM
I've tested this and it does work for me (Firefox)
after you've clobbered your form, rebind the submit event to the submitter function
$('.accept_friend').submit(function submitter() {
var data = $(this).serialize();
$.ajax({
url: "../accept_friend.php",
type: "POST",
data: data,
success: function(data) {
$('#requests_container').html(data);
setTimeout(function() { // may not be needed
$('.accept_friend').submit(submitter); // rebind submit
}, 0);
},
error: function(){
alert('ERROR');
}
});
return false;
});
I have a link with onclick attr to submit my form. Like this:
lorem ipsum
function myFunc() {
$('.ajaxform').submit();
}
The problem is.. I'm using an ajax function to do a non-refresh submit.. And I have another script like this:
jQuery(document).ready(function(){
jQuery('.ajaxform').submit( function() {
$.ajax({
url : $(this).attr('action'),
type : $(this).attr('method'),
dataType: 'json',
data : $(this).serialize(),
success : function( data ) {
for(var id in data) {
jQuery('#' + id).html( data[id] );
}
}
});
return false;
});
});
If I use a input button type submit the ajax works.. But it doesnt work using the onclick submit... How can I solve this?
Thanks.
If you are using a <a> attribute then instead of inline onclick attribute write the click function seperately and then use event.preventDefault(); and then submit the form
<a id='someId' href="javascript:void(0);" onclick="myFunc()">Submit</a> //Give some id
$(function(){
$('#someId').click(function(){
event.preventDefault(); //This will prevent the default action of <a> attribute
$('.ajaxform').submit(function(){
//write the functionality here
});
});
});
Option 1
You can add css to a submit button to look like a link and replace it with your link.
Option 2
HTML
<form id="form1" method="POST" action="#" >
<input type="text" class="youwant" name="youwant" id="youwant" />
lorem ipsum
</form>
JavaScript
jQuery(document).ready(function(){
$('#myform').on("click", function(event) {
$.ajax({
url : $(this).attr('action'),
type : $(this).attr('method'),
dataType: 'json',
data : $(this).serialize(),
success : function( data ) {
for(var id in data) {
jQuery('#' + id).html( data[id] );
}
}
});
return false;
});
});
I didn't try it but it may help you, just give a try and do reply if helpful.
$(function() {
$("#tbutton").click(function(){
var frmValues = $('#validation').serialize();
$.ajax({
type: $this.attr('method'),
url: "hello.php",
data: frmValues
})
.done(function () {
$("#para").text("Serialized! Input String is " + frmValues);
})
.fail(function () {
$("#para").text("An error occured");
});
event.preventDefault();
});
});
Picture below shows simplification of the html page layout I am working with. It has 3 forms, every form has it's own submit button and can be submitted individually. At the top of the page "Master Save" is located. This button should save all 3 forms.
Every form have submit() function overloaded and they look like this:
form1.submit(function () {
Form1SubmitOverloaded(this);
return false;
});
Form1SubmitOverloaded = function (form) {
$.post(form.action, $(form).serialize(), function (data) {
//DOM manipulation, etc/
}).fail(function () {
//error parsing etc.
});
return false;
};
After pressing "Master Save" I want to submit forms in order 1 > 2 > 3. But I want Form 2 to wait until form 1 has ended.
Form1 submitted >> Form2 submitted >> Form3 submitted.
$('#masterSave').click(function () {
$('#form1').submit();
$('#form2').submit(); // wait until form1 ended
$('#form3').submit(); // waint until form2 ended
return false;
});
Please provide method to order submits in 'click' function as presented.
Thanks.
.post() method doesn't look to have a synch property. But .ajax() has.
I suggest you use the .ajax() method instead of the .post() shortcut method. That way you could force ajax to be synchronious
$.ajax({
[...]
async : false
}
you can use something like this
Form1SubmitOverloaded();
$.ajax({
type: "POST",
url: test1.php,
data: $( "#form1" ).serialize(),
success: function(){
Form2SubmitOverloaded();
$.ajax({
type: "POST",
url: test2.php,
data: $( "#form2" ).serialize(),
success: function(){
Form3SubmitOverloaded();
$.ajax({
type: "POST",
url: test2.php,
data: $( "#form2" ).serialize(),
success: function(){
alert("All submit successfully");
}
});
}
});
}
});
I am trying to remove a div using jquery, but its not working.
This is my html code:
<html>
<body>
<div id="logout">
<form class="ajax" method="post" action="">
<div id="box_22">
<div id="box_23">
<div id="box_56">
<script src="http://code.jquery.com/jquery-1.10.2.min.js">
<script src="/../js/tt.js" type="text/javascript">
</body>
</html>
and my script is : how do i delete a box .
$(".delBtn").click(function (event) {
event.preventDefault();
var clickedID = 'clickId=' + this.id;
jQuery.ajax({
type: "POST", // HTTP method POST or GET
url: "/addchannel/delUsr.php", //Where to make Ajax calls
dataType:"text", // Data type, HTML, json etc.
data:clickedID, //Form variables
success:function(response){
alert("#box_"+clickedID);
$( "div #box_"+clickedID ).remove();
},
});
});
Your selector is wrong.... "div #box_"+clickedID is searching for an element with id "#box_"+clickedID inside a div element.
In your case you can use the id-selector directly
Update: The real culprit is the variable clickedID, you created it as a param string.... so the selector will fail.
$(".delBtn").click(function (event) {
event.preventDefault();
var id = this.id;
var clickedID = 'clickId=' + id;
jQuery.ajax({
type: "POST", // HTTP method POST or GET
url: "/addchannel/delUsr.php", //Where to make Ajax calls
dataType: "text", // Data type, HTML, json etc.
data: clickedID, //Form variables
success: function (response) {
alert("#box_" + id);
$("#box_" + id).remove();
}
});
});
Remove the space:
$( "div#box_"+clickedID ).remove();
You don't need the 'div' in the Jquery selector
$( "#box_"+clickedID ).remove();