I would like to chage a div content with ajax, but before hide it and after the change, show it with jQuery animation.
My current code:
$(document).on("click", ".menuItem", function(){
var contentName = $(this).attr("name");
$( "#content > div" ).hide(1000, function(){
$.ajax({ type: "GET",
url: contentName,
dataType: 'html',
success : function(responseText){
$("#content").html(responseText);
$("#content").show(1000);
}
});
});
});
But it isn't working, because when html method invoked, the new content sudden appear.
Is there any way to solve this issue?
Thanks in advance!
Richard
The problem here is that the $("#content") element is always visible. Before ajax call you are hiding a div inside #content -> $("#content > div").
You can hide the $("#content") before adding content.
$("#content").hide().html(responseText).show(1000);
or
$("#content").hide(1000, function(){
$.ajax({ type: "GET",
url: contentName,
dataType: 'html',
success : function(responseText){
$("#content").html(responseText).show(1000);
}
});
});
Try this
$(document).on("click", ".menuItem", function(){
var contentName = $(this).attr("name");
$( "#content > div" ).hide(1000, function(){
$.ajax({ type: "GET",
url: contentName,
dataType: 'html',
success : function(responseText){
$("#content").hide().html(responseText).show(1000);
}
});
});
});
You can try to hide content first :
$(document).on("click", ".menuItem", function(){
var contentName = $(this).attr("name");
$("#content > div" ).hide(1000, function(){
$.ajax({ type: "GET",
url: contentName,
dataType: 'html',
success : function(responseText){
$("#content").hide();
$("#content").html(responseText);
$("#content").show(1000);
}
});
});
});
Related
my html:
<span id="loading"><img src="ajax-loader.gif" /> Please Wait</span>
#loading{display:none;}
my js:
var Progressajax = false;
$(function() {
$(".commentmoreview").click(function(){
if(Progressajax) return;
Progressajax = true;
var element = $(this);
var id = element.attr("id");
$('#loading').show();
var value = $('.pagecont'+id).val();
var info = 'id='+id+'&pagecont='+value;
$.ajax({
type: "POST",
url: "php-comments/php/loadmorecomments.php",
data: info,
success: function(data){
$('#loading').hide();
Progressajax = false;
value = parseInt(value)+parseInt(5);
$('.pagecont'+id).val(value);
$(data).hide().prependTo('#loadmorecomments'+id).fadeIn(1000);
//$('#loadmorecomments'+id).prepend(data);
}
});
});
});
what is wrong that loading span is not working?
thank you friends!
The best way to show loader image while making ajax calls is using Ajax Global Events
$(document).bind("ajaxSend", function(){
$("#loading").show();
}).bind("ajaxComplete", function(){
$("#loading").hide();
});
can you change
$('#loading').show();
to
$('#loading').attr("display","block");
and try to use it like this
$.ajax({
type: "POST",
url: "php-comments/php/loadmorecomments.php",
data: info,
beforeSend: function(){
$('#loading').attr("display","block");
},
success: function(data){
$('#loading').attr("display","none");
Progressajax = false;
value = parseInt(value)+parseInt(5);
$('.pagecont'+id).val(value);
$(data).hide().prependTo('#loadmorecomments'+id).fadeIn(1000);
//$('#loadmorecomments'+id).prepend(data);
}
});
I am trying to run an ajax call function but I am running into issues. I'd like to grab the id as the data item for this. My code is below but I haven't seen any signs of it working yet.
Thanks for your help
<a class='ajax-read' id='133' href='#' >read more</a>
<script type="text/javascript">
$(function(){
$('.ajax-read').click(function(){
var elem = $(this);
$.ajax({
type: "GET",
url: "/inc/read-more.php",
data: "id="+ id,
dataType:"json",
success: function(data) {
if(data.success){
elem.hide();
$('#read-more-content').html(data.message);
}
}
});
return false;
});
});
</script>
You need to get the anchor id inside the AJAX call:
<script type="text/javascript">
$(function(){
$('.ajax-read').click(function(){
var elem = $(this);
$.ajax({
type: "GET",
url: "/inc/read-more.php",
data: "id="+ elem.attr('id'),
dataType:"json",
success: function(data) {
if(data.success){
elem.hide();
$('#read-more-content').html(data.message);
}
}
});
return false;
});
});
</script>
Change
data: "id="+ id,
to
data: "id="+ elem.attr('id'),
I have a vote function in one of my projects. Please see following code.
$(function () {
$(".vote").click(function () {
var id = $(this).data("id");
var name = $(this).data("name");
var dataString = 'id=' + id;
//var dataId = id;
var parent = $(this);
if (name == 'up') {
$(this).fadeIn(200).html;
$.ajax({
type: "POST",
url: "vote_up.php",
data: dataString,
cache: false,
success: function (html) {
parent.parent().find(".display-vote").html(html);
}
});
} else {
$(this).fadeIn(200).html;
$.ajax({
type: "POST",
url: "vote_down.php",
data: dataString,
cache: false,
success: function (html) {
parent.parent().find(".display-vote").html(html);
}
});
}
return false;
});
});
and I'm using jQuery infinite scroll to load rest of the pages/posts. I'm using following code in main page and second page which i load rest of the data
('#left').infinitescroll({
navSelector: '#page-nav', // selector for the paged navigation
nextSelector: '#page-nav a', // selector for the NEXT link (to page 2)
itemSelector: '.post-box', //
}, function (newElements, data, url) {
$(".vote").click(function () {
var id = $(this).data("id");
var name = $(this).data("name");
var dataString = 'id=' + id;
//var dataId = id;
var parent = $(this);
if (name == 'up') {
$(this).fadeIn(200).html;
$.ajax({
type: "POST",
url: "vote_up.php",
data: dataString,
cache: false,
success: function (html) {
parent.parent().find(".display-vote").html(html);
}
});
} else {
$(this).fadeIn(200).html;
$.ajax({
type: "POST",
url: "vote_down.php",
data: dataString,
cache: false,
success: function (html) {
parent.parent().find(".display-vote").html(html);
}
});
}
return false;
});
});
Issue is after 2nd 3rd or any other page load, vote function is triggering twice. How can I fix this issue. Any help will be appreciated.
Maybe if you unbind the click event and then bind it
function(newElements, data, url){
$(".vote").unbind( "click" );
$(".vote").click(function() {
You need to unbind the click event before binding it again.
[...]
$(".vote").unbind('click').click(function()
[...]
or
[...]
$(".vote").off('click').click(function()
[..]
depending on the version of jQuery you are using.
I want to empty content of div with class dialogBody and then append returned ajax response. See the code below please. The problem I have is .html(response) doesn't do anything because clicked element is removed. How can I carry over the target element which is $this.closest('.dialogBody') after clicked element was removed?
<div class="dialogBody">
<p>Some contentClick to show question</p>
</div>
<script>
$(".ajaxReplace").live("click", function(e){
e.preventDefault();
var $this = $(this);
$this.closest('.dialogBody').empty();
ajaxUrl = $(this).attr("href")+"?ajax=1";
$.ajax({
type: "POST",
url: ajaxUrl,
success: function(response){
$this.closest('.dialogBody').html(response);
console.log(response);
}
})
});
</script>
Assign it to a variable:
$(".ajaxReplace").live("click", function(e){
e.preventDefault();
var $this = $(this);
var $dBody = $this.closest('.dialogBody').empty(); // <------
ajaxUrl = $(this).attr("href")+"?ajax=1";
$.ajax({
type: "POST",
url: ajaxUrl,
success: function(response){
$dBody.html(response); // <------
console.log(response);
}
})
});
Save a reference to the element you need instead of saving a reference to the element that will be removed:
$(".ajaxReplace").live("click", function(e){
e.preventDefault();
var ajaxUrl = $(this).attr("href")+"?ajax=1",
$thisDialog = $(this).closest('.dialogBody').empty();
$.ajax({
type: "POST",
url: ajaxUrl,
success: function(response){
$thisDialog.html(response);
console.log(response);
}
})
});
You'd also need to move the ajaxUrl assignment to before you remove the this element.
I want to make an ajaxlink, but it is not working:
My html:
<td class="apris"><p><a class="current desc" href="/?direction=asc&sort=pris">Pris pr. md.</a></p></td>
My Jquery:
$('.apris').live('change', function() {
var form=$(this).closest('form');
$.ajax({
type:'post',
url:"\/finder\/" + $(this).val(),
data:form.serialize(),
success:function(msg){
$('#formcontent').html(msg);
}
});
});
I'm not quite sure, because your code doesn't really match up with what you're trying to do, but maybe you want:
$('.apris a').live('click', function() {
var form=$(this).closest('form');
$.ajax({
type:'post',
url:"\/finder\/" + $(this).val(),
data:form.serialize(),
success:function(msg){
$('#formcontent').html(msg);
}
return false;
});
});
I think this is what you're trying to do:
$('.apris a').live('click', function() {
var form=$(this).closest('form');
$.ajax({
type:'post',
url: $(this).attr("href"),
data:form.serialize(),
success:function(msg){
$('#formcontent').html(msg);
}
return false;
});
});