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.
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 want to change the value of a label on mouse over. This is what I have done so far:
$(function () {
var hoverOff = "";
$("[id*=GV] td").hover(function () {
hoverOff = $("label", $(this).closest("td")).text();
$.ajax({
type: "POST",
url: "MyMethode.aspx/GetNewValue?text=" + hoverOff,
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$("label", $(this).closest("td")).html(data.d);
}
});
},
function () {
$("label", $(this).closest("td")).html(hoverOff);
}
);});
At the beginning I save the current text in hoverOff and send that value to the method GetNewValue wich returns the new value and inside ajax success I want to apply that value to the label. The problem is that the text for label never changes, although data.d contains the new text. Should I use something else instead of .html()?
this inside ajax callback isn't referring to the current hovered TD but to the jqXHR object. You can use $.ajax context option:
context: this,
BTW, $(this).closest("td") is quite unrelevant because obviously, even you have nested TDs, $(this).closest("td") will always return the current TD, so you could just use this:
hoverOff = $("label", this).text();
And data: "{}", could be data: {},, no point of setting a string here. >> because you are setting contentype to JSON
It's a context problem you can't use this inside success function, try this code:
$(function () {
var hoverOff = "";
$("[id*=GV] td").hover(function () {
var label = $("label", $(this).closest("td"));
hoverOff = label.text();
$.ajax({
type: "POST",
url: "MyMethode.aspx/GetNewValue?text=" + hoverOff,
data: {},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
label.html(data.d);
}
});
},
function () {
label.html(hoverOff);
}
);});
You could use this solution from https://stackoverflow.com/a/10701170/3421811
$('.btn').hover(
function() {
var $this = $(this); // caching $(this)
$this.data('initialText', $this.text());
$this.text("I'm replaced!");
},
function() {
var $this = $(this); // caching $(this)
$this.text($this.data('initialText'));
}
);
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 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);
}
});
});
});