Div doesn't fade out after completion in jQuery - javascript

#cal div doesn't fade out after completion in jQuery.
<div id="main">
<div id="price"></div>
<div id="cal">Calculating...</div>
</div>
And here is my Javascript/jQuery code:
<script type="text/javascript">
$('#cal').hide();
$('#price_submit').click(function() {
var my_data = {
//successfully sends data
};
$('#price').fadeOut('fast', function(){
$('#cal').fadeIn();
});
$.ajax({
url: "proccess.php",
type: 'POST',
data: my_data,
success: function(msg){
$('#cal').fadeOut('fast', function() {
$('#price').fadeIn().html(msg);
});
}
});
return false;
});
</script>
at last it will successfully retrieve data and shows it but it still shows the #cal div bellow price. I'd appreciate your help.

I'll suggest you to stop previous animations and see:
$('#cal').stop().fadeOut('fast', function () {
$('#price').stop().fadeIn().html(msg);
});

I have just put your code
$('#cal').hide();
$('#price_submit').click(function() {
var my_data = {
//successfully sends data
};
$('#price').fadeOut('fast', function(){
$('#cal').fadeIn();
});
$.ajax({
url: "/echo/json",
type: 'POST',
data: my_data,
success: function(msg){
msg = '1134141234';
$('#cal').fadeOut('fast', function() {
$('#price').fadeIn().html(msg);
});
}
}
);
return false;
});
on
http://jsfiddle.net/pfpqv/ and it works just fine.
Can you give some more info to proper reproduce this your problem?

Related

Set interval to ajax form

So I'm trying to send the form info to php with ajax form every second, but for some reason it doesn't want to.
Here is my latest attempt, I tried every other similar combination(like put everything in the function or just put everything into the setInterval).
$(document).ready(function() {
var ajaxCall=function() {
$("#myForm").ajaxForm(function(e) {
$.ajax({
type:'post',
url:'php1.php',
data:$("#myForm").serialize(),
success:function(data) {
document.getElementById("result").innerHTML=data;
}
});
});
}
setInterval(ajaxCall,1000);
});
EDIT
Solved with M.M answer, thank you for the help!
Simply change ajaxForm to ajaxSubmit
See this (question) and this (documentation) for more information on AjaxForm vs AjaxSubmit
Essentially AjaxForm submits when the user clicks the button and AjaxSubmit does it immediately so your code should be:
$(document).ready(function()
{
var ajaxCall=function()
{
$("#myForm").ajaxSubmit(function(e)
{
$.ajax(
{
type:'post',
url:'php1.php',
data:$("#myForm").serialize(),
success:function(data)
{
document.getElementById("result").innerHTML=data;
}
});
});
}
setInterval(ajaxCall,1000);
});
Update after comment explanation
$(document).ready(function(){
//live feed
var ajaxCall=function(){
$("#myForm").ajaxSubmit(function(e){
ajax_submit();
});
}
setInterval(ajaxCall,1000);
//real submit
$("#myForm").ajaxForm(function(e){
ajax_submit();
});
function ajax_submit(){//ajax_code
$.ajax({
type:'post',
url:'php1.php',
data:$("#myForm").serialize(),
success:function(data) {
document.getElementById("result").innerHTML=data;
}
});
}
});
If you wish to differentiate the feed from the submit you can pass a parameter to the ajax_submit function
Getting rid of the ajaxForm() call seems to accomplish what you are trying to do:
$(document).ready(function() {
var ajaxCall = function() {
$.ajax({
type: 'post',
url: 'php1.php',
data: $("#myForm").serialize(),
success: function(data) {
document.getElementById("result").innerHTML = data;
}
});
}
setInterval(ajaxCall, 1000);
});

Hiding the first table when the second table is loaded

I am trying to drill down to detail rows when a user clicks on a cell in table R.So when a cell is clicked Table L is loaded and Table R has to be hidden . I tried to use $('#RegionTable').hide but it hides the table when it is loaded .but i want it to be hidden only on second click
`<script type="text/javascript">
$(document).ready(function($) {
$('#lsearch').click(function(){
makeAjaxRequest();
});
$('form').submit(function(e){
e.preventDefault();
makeAjaxRequest();
return false;
});
function makeAjaxRequest() {
$.ajax({
url: 'php/l_search.php?op=1',
data: {name: $('#l').val()},
type: 'get',
success: function(response) {
$('table#R tbody').html(response);
}
});
}
});
$(document).on('click','#loc_code',function() {
var url = $(this).text();
url = 'php/l_search.php?op=2&l_code='+url ;
$.ajax({
url: url,
type: 'get',
success: function(response) {
$('table#L tbody').html(response);
}
});
return false;
$('#R').toggle("slide", { direction: "right" }, 1000);
});
</script> `
Instead of:
.on('click')
do:
$('#loc_code').dblclick(function(){
https://api.jquery.com/dblclick/
actually I used $("#R").hide(); and it works

Display one item of my choice rather than the whole list items in ajax upon success

I've got an AJAX code, that does POST reqeusts and displays results upon success. The displayed results are in JSON format and from a different website. The result displays all of the list items, but now I want to display only one item of my choice at the same time, instead of displaying all the items. I've been trying to use the each() and slice() functions, but I think I'm not using them correctly or I don't have any idea of how to deal with the problem. Please help, I'm new to AJAX and JQuery.
This is the code I have:
jQuery.ajax({
async:false,
url : "http://brandroot.com/index.php?option=com_brands&controller=brands&task=getbrandsbyuser",
data: postData,
type : "post",
dataType : "jsonp",
jsonp: "jsoncallback",
success : function(jsonData){
if (jsonData.product_display!=='') {
/**The code below will display all the items under a div="product_dispay"*/
jQuery('#product_display').append(jsonData.product_display);
//I want a code that will display one item of my choice at this section.
}else{
alert(jsonData.error);
}
},
error:function(){
alert('fail');
}
});
You can access the contents of the #product_display element with jQuery. The API returns HTML data so you can render it in the page, then using jQuery find the data within the HTML and do whatever you want with it.
I have added this code into your original code.
(function($){
var data = [];
var creatik = null;
$('#product_display .business_list').each(function(){
var price = $(this).find('p a span.price').text();
var bld = $(this).find('p a span.bld').text();
var img = $(this).find('.image_area a img').prop('src');
//How to check each logo
if("Creatick" === bld){
creatik = $(this).clone();
}
data.push({
price: price,
bld: bld,
img: img
});
});
//You can use this data as you please
console.log(data);
//you can replace the contents of the #product_display container with the one logo that you want
$('#product_display .business_detail').html(creatik);
//
})(jQuery);
This is the final code.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script></script>
<script type="text/javascript">
function getbrandsbyuser(user) {
var postData = {user: user};
jQuery.ajax({
async: false,
url: "http://brandroot.com/index.php?option=com_brands&controller=brands&task=getbrandsbyuser",
data: postData,
type: "post",
dataType: "jsonp",
jsonp: "jsoncallback",
success: function (jsonData) {
console.log(jsonData);
if (jsonData.product_display !== '') {
jQuery('#product_display').append(jsonData.product_display);
(function($){
var data = [];
var creatik = null;
$('#product_display .business_list').each(function(){
var price = $(this).find('p a span.price').text();
var bld = $(this).find('p a span.bld').text();
var img = $(this).find('.image_area a img').prop('src');
//How to check each logo
if("Creatick" === bld){
creatik = $(this).clone();
}
data.push({
price: price,
bld: bld,
img: img
});
});
//You can use this data as you please
console.log(data);
//you can replace the contents of the #product_display container with the one logo that you want
$('#product_display .business_detail').html(creatik);
//
})(jQuery);
} else {
alert(jsonData.error);
}
},
error: function () {
alert('fail');
}
});
}
jQuery(".image_area").each(function ()
{
jQuery(this).hover(
function () {
id = jQuery(this).attr("rel");
jQuery(this).children(".published_content_" + id).stop(true, true).fadeIn('slow', function () {
jQuery(this).children(".published_content_" + id).css("display", "block");
jQuery(this).children(".published_content_" + id).stop(true, true).animate({"opacity": 1}, 400);
});
},
function () {
id = jQuery(this).attr("rel");
jQuery(this).children(".published_content_" + id).stop(true, true).fadeOut('slow', function () {
jQuery(this).children(".published_content_" + id).css("display", "none");
jQuery(this).children(".published_content_" + id).stop(true, true).animate({"opacity": 0}, 400);
});
}
);
});
</script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function () {
getbrandsbyuser("Sarfraz300");
});
</script>
</head>
<body>
<div id="product_display"></div>
</body>
</html>
I hope it helps.
This is the code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script></script>
<script type="text/javascript">
function getbrandsbyuser(user) {
var postData = {
user: user
};
jQuery.ajax({
async:false,
url : "http://brandroot.com/index.php?option=com_brands&controller=brands&task=getbrandsbyuser",
data: postData,
type : "post",
dataType : "jsonp",
jsonp: "jsoncallback",
success : function(jsonData){
if (jsonData.product_display!=='') {
jQuery('#product_display').append(jsonData.product_display);
}else{
alert(jsonData.error);
}
},
error:function(){
alert('fail');
}
});
}
jQuery(".image_area").each(function ()
{
jQuery(this).hover(
function () {
id = jQuery(this).attr("rel");
jQuery(this).children(".published_content_"+id).stop(true, true).fadeIn('slow', function(){
jQuery(this).children(".published_content_"+id).css("display","block");
jQuery(this).children(".published_content_"+id).stop(true, true).animate({"opacity": 1}, 400);
});
},
function () {
id = jQuery(this).attr("rel");
jQuery(this).children(".published_content_"+id).stop(true, true).fadeOut('slow', function(){
jQuery(this).children(".published_content_"+id).css("display","none");
jQuery(this).children(".published_content_"+id).stop(true, true).animate({"opacity": 0}, 400);
});
}
);
});
</script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
getbrandsbyuser("Sarfraz300");
});
</script>
</head>
<body>
<div id="product_display"></div>
The result displayed upon success is in html format.
jsonData.product_display[i]
has not worked.

Re-Run a Ajax script?

If I have a script like below that's ran to load a table with data injected into it from an external PHP file on to the page.
<script>
$(document).ready(function(){
var response = '';
$.ajax({ type: "GET",
url: "Records.php",
success : function(text)
{
response = text;
}
});
alert(response);
});
</script>
I have another script down below where a user can add records to the database.
<script id="sosurce" language="javascript" type="text/javascript">
$("#newitemadd").click(function(){
$('#New').modal('show');
$("#insertResults").click(function(){
var getname = $('#getname').val();
var getquant = $('#getquant').val();
var getprice = $('#getprice').val();
var getdesc = $('#getdesc').val();
$.ajax({
url: 'api2.php',
data: "name="+getname+"&quantity="+getquant+"&price="+getprice+"&description="+getdesc,
success: function(data)
{ $('#New').modal('hide');
$("#success").html(data);
$('#success').slideDown().delay(3000).slideUp().reload
},
error: function() {
$("#failure").alert('show');
}
});
});
});
</script>
It works fully as intended but, how can I get the first script to Re-Run so the table that's inserted onto the page is refreshed to show the new results that were just added?
you can do like this .
<script>
var renderTable = function() {
var response = '';
$.ajax({ type: "GET",
url: "Records.php",
success : function(text)
{
response = text;
}
});
alert(response);
}
// Call function onload
jQuery(function($){
renderTable();
$(".refreshBtn").click(function(){
renderTable();
})
});
</script>
Move first code into an function like
<script>
$(document).ready(LoadData);
function LoadData() {
var response = '';
$.ajax({
type: "GET",
url: "Records.php",
success : function(text) {
response = text;
}
});
alert(response);
};
</script>
And call this function from other function, example does it on success
<script id="sosurce" language="javascript" type="text/javascript">
$("#newitemadd").click(function() {
$('#New').modal('show');
$("#insertResults").click(function() {
var getname = $('#getname').val(),
getquant = $('#getquant').val(),
getprice = $('#getprice').val(),
getdesc = $('#getdesc').val();
$.ajax({
url: 'api2.php',
data:
"name="+getname+"&quantity="+getquant+"&price="+getprice+"&description="+getdesc,
success: function(data) {
$('#New').modal('hide');
$("#success").html(data);
$('#success').slideDown().delay(3000).slideUp().reload
// Call load data again to refresh the table
LoadData();
},
error: function() {
$("#failure").alert('show');
}
});
});
});
</script>

Getting error on remove var data

I'm making hover card on click for every users so i did for one and its working but i want this to work on every user like i have given them unique title and based on that the server will get the data of that particular users but the problem is this is working on only 1 links not for all the links...maybe its because var data is kept store (please correct me if i'm wrong) so i tried to do this on ajax cache: false but didn't help then i tried return false;, return data; still not use.
So, here is the users links example :
<a class="hover" title="user101" href="#">John</a>
<a class="hover" title="user102" href="#">Tonya</a>
Ajax :
$(document).ready(function () {
$.ajaxSetup({
cache: false
});
$('.hover').click(function () {
var get_val = $('.hover').attr('title');
var data = 'vall=' + get_val + '';
$.ajax({
type: 'POST',
url: 'xx.php',
data: data,
success: function (data) {
box.dialog({
message: data
});
return false;
}
});
});
});
I would do it this way.
HTML
<div class='links'>
<a title="user101" href="#">John</a>
<a title="user102" href="#">Tonya</a>
</div>
JS
$(document).ready(function () {
$.ajaxSetup({
cache: false
});
$('.links').on('click', 'a', function (event) {
event.preventDefault();
var get_val = $(this).prop('title');
$.ajax({
type: 'POST',
url: 'xx.php',
data: {vall: get_val},
success: function (data) {
box.dialog({
message: data
});
}
});
});
});
the problem is this is working on only 1 links not for all the links...maybe its because var data is kept store (please correct me if i'm wrong)
you are wrong.. only 1 links is working beacuse you have same id for multiple elements.. each elements should have unique id.
use class instead
<a class="hover" title="user101" href="#">John</a>
<a class="hover" title="user102" href="#">Tonya</a>
and a class selector and return false after ajax success callback function , at the end
$('.hover').click(function () {
var get_val = $('.hover').attr('title');
....
$.ajax({
....
success:function(){
....
}
});
return false;
..
or simply use preventDefault() instead of return false
$('.hover').click(function (e) {
e.preventDefault();
var get_val = $('.hover').attr('title');
.....

Categories