$(".content-short").click(function() {
var ID = $(this).attr('data-id');
$('.loadingmessage').show();
$.ajax({
type: "post",
url: "collegeselect.php",
data: 'ID=' + ID,
dataType: "text",
success: function(response){
$(".content-full").html(response);
$('.loadingmessage').hide();
}
});
});
//collegeselect.php// is for loading data from database, //.loadingmessage// is for gif
when i am using this for the first time it displays gif,but the gif is not displayed after the 1st click as the data retrieved is already available in content-full from previous ajax request,
how to display it on every click on content short class?
That happens because you are replacing the actual content with loading GIF image with your response.
So, when you click first time it displayed and after the ajax call sucess as per the code you have replaced the content of .content-full and there is no GIF available then.
Solution : To resolve either send the same image tag with response or Move the loader image out side the .content-full.
Add beforeSend : function() before success in your request.
try
$(".content-short").live(function() {
var ID = $(this).attr('data-id');
$('.loadingmessage').show();
$.ajax({
type: "post",
url: "collegeselect.php",
data: 'ID=' + ID,
dataType: "text",
beforeSend : function()
{
$('.loadingmessage').show();
},
success: function(response){
$(".content-full").html(response);
$('.loadingmessage').hide();
}
});
});
From the comments, I gather that the img is within the .content-full container. The problem is that the img is removed when ajax succeeds since you're doing $(".content-full").html(). One way to fix it is to move the img out of the container. Another way is to store a reference to the img and add it back along with the response via .append() or .prepend() as below.
$(".content-short").click(function() {
var ID = $(this).attr('data-id');
$('.loadingmessage').show();
$.ajax({
type: "post",
url: "collegeselect.php",
data: 'ID=' + ID,
dataType: "text",
success: function(response) {
var $content = $(".content-full");
var $loaderImg = $content.find('.loadingmessage').hide();
$content.html(response).prepend($loaderImg);
}
});
});
Here is a demo mimicking the behaviour thru setTimeout.
Related
Hi I have function in javascript where I delete photos from database and from server. It work fine, I delete photo but this photo is still in my browser. I have question. How can I refresh only on javascript side?
container.addEventListener("click", function(e){
if(e.target.tagName == 'BUTTON'){
var id = e.target.dataset.type;
var r = confirm("Are You sure to delete?");
if (r == true) {
$.ajax({
type: 'POST',
url: 'index.php?r=gallery/deletep&name='+id,
dataType: 'html'
});
}
}
});
Now I treid to add
location.reload();
after ajax but I don't want to refresh all page. How Can i delete dynamically from browser?
OK in this type of situation you have two options. Either you load contents using AJAX request or remove the element from DOM either using class or id of that element.
So what happens is if you have loaded content using AJAX you can load all those contents again after successful deletion of image.
$.ajax({
type: 'POST',
url: 'index.php?r=gallery/deletep&name='+id,
dataType: 'html',
success: function(response) {
$(e.target).remove();
}
});
OR,
$.ajax({
type: 'POST',
url: 'index.php?r=gallery/deletep&name='+id,
dataType: 'html',
success: function(response) {
// use next ajax query to load content on DOM
}
});
you don't need to reload the whole page to remove the image. Use remove() API from jQuery in the success callback in AJAX call.
$.ajax({
type: 'POST',
url: 'index.php?r=gallery/deletep&name='+id,
dataType: 'html',
success: function(response){
$('img#id').remove();
}
});
$(".content-short").click(function() {
$(".content-full").empty();
var contentid=$(this).parent().find(".content-full").attr('data-id');
var content=$(this).parent().find(".content-full");
alert(contentid);
var collegename = $(this).attr('data-id');
$.ajax({
type: "post",
url: "contenthome.php",
data: 'collegename=' + collegename,
dataType: "text",
success: function(response) {
$content.html(response);
}
});
});
here the alert displays the specific data-id but
content=$(this).parent().find(".content-full");
this didn't displays data in content-full div with that specific data-id
anything wrong in the code or something else?
the query displays data if i use(."content-full"); instead of
$(this).parent().find(".content-full");
Inside the ajax callback you are using $content, but you declare your variable as content. May that be the problem?
Your question is not clear. What are you trying to achieve?
I am processing my html form with jquery / ajax request. It's calling by jquery 'change()'. So when request is success it's showing me success result which is
Successfully Updated
Well, but if it again request it's showing
Successfully UpdatedSuccessfully Updated
It's just added last success result text to new one. I want to show only onnce. Can you tell me why it's happening ?
my code:
$("#corp_www_eng, #domestic_www_japaness").change(function(){
var cid = $("#cid").val();
var corp_www_eng = $("#corp_www_eng").val();
var domestic_www_japaness = $("#domestic_www_japaness").val();
$.ajax({
url: 'edit_companyinfo.php',
type: 'POST',
dataType: 'html',
data: {
"cid" : cid,
"corp_www_eng" : corp_www_eng,
"domestic_www_japaness" : domestic_www_japaness,
},
}).done(function ( data ) {
$('#result').append(data);
$('#result').show();
$('#result').delay(3000).fadeOut('slow');
});
});
Try substituting .html() for .append()
$("#result").html(data);
I believe it is because your are appending the data to the #result div. You could try adding
document.getElementById('result').innerHTML = '';
This would clear that div of any content before appending the new content.
I want to insert data using ajax and show that newly inserted data in a div, but the record (i.e. image and name ) does not get updated it.
I don't want to reload page, the newly entered record should be shown without page reload, but it shows only the initial name and image.
I can't understand whats the problem. Please help. Following is the code i am using static data which is stored in a variable as an example:
jQuery.ajax({
type: "POST",
url: 'add.php',
data: data,
mimeType:"multipart/form-data",
contentType: false,
cache: false,
processData:false,
dataType: 'json',
success: function (data) {
d = new Date();
var img_name='amit.png'+'?'+d.getTime();
var s_name='Ashish';
$('#main').prepend('<img alt="client" id="p_img"><h1>'+s_name+'</h1>');
$('#p_img').attr("src", "image/Amit.png");
},
error: function (error)
{
}
});
Shouldn't the src attribute use the response/variable/generated file name?
Like this:
$('#p_img').attr("src", '/image/' + img_name);
Instead of this:
$('#p_img').attr("src", "image/Amit.png");
It can be two reasons :
the image you are prepending to the DOM is not yet in the DOM when you are trying to add the src
or the src is not existing (should be an absolute or relative path)
Try to prepend the image with the src
$('#main').prepend('<img alt="client" src="ABSOLUTE_OR_RELATIVE_PATH/image/Amit.png"><h1>Amit</h1>');
Also there is no need to create a variable s_name which you only use once.
you can done it easily by returing List of data and populating the div with ajax success result.
jQuery.ajax({
type: "POST",
url: 'add.php',
data: data,
mimeType:"multipart/form-data",
contentType: false,
cache: false,
processData:false,
dataType: 'json',
success: function (data) {
// in data you are getting your result ...
// now for ease split json format data and store in list
// m not sure about your formate so m assuming at first index it
//should be image URL so..
var res = data.split(",");
var imgSrc = res[0];
$('#main').prepend('<img alt="client" id="p_img"/>');
$('#p_img').attr("src", imgSrc);
},
error: function (error)
{
}
});
Following are two pieces of jquery code. First one prints a text message when clicked on a link, and the second slides down a div when click on a link. I want to merge second code into first one, so that when I click the link, it displays the message (as the first code does), and also slides down the #votebox (as done in second code, and show content in that.
I will be very thankful for any help.
$("a.vote_up").click(function(){
the_id = $(this).attr('id');
$("span#votes_count"+the_id).fadeOut("fast");
$.ajax({
type: "POST",
data: "action=vote_up&id="+$(this).attr("id"),
url: "votes.php",
success: function(msg)
{
$("span#votes_up"+the_id).fadeOut();
$("span#votes_up"+the_id).html(msg);
$("span#votes_up"+the_id).fadeIn();
//Here, I want to slide down the votebox and content div (from code below).
}
});
});
The following code slides down votebox div and displays content in it, I want to include that in the above code.
$("a.vote_up").click(function(){
var id=$(this).attr("id");
var name=$(this).attr("name");
var dataString = 'id='+ id + '&name='+ name;
//I want to include this votebox in above code.
$("#votebox").slideDown("slow");
$("#flash").fadeIn("slow");
$.ajax({
type: "POST",
url: "rating.php",
data: dataString,
cache: false,
success: function(html){
$("#flash").fadeOut("slow");
//and want to use this div as well.
$("#content").html(html);
}
});
});
Thanks for any help.
Simple way is to define a seperate function for voteDown and call it from the success function:
e.g
$("a.vote_up").click(function(){
the_id = $(this).attr('id');
$("span#votes_count"+the_id).fadeOut("fast");
$.ajax({
type: "POST",
data: "action=vote_up&id="+$(this).attr("id"),
url: "votes.php",
success: function(msg)
{
$("span#votes_up"+the_id).fadeOut();
$("span#votes_up"+the_id).html(msg);
$("span#votes_up"+the_id).fadeIn();
var that = this;
voteDown.call(that);
}
});
});
function voteDown()
{
var id=$(this).attr("id");
var name=$(this).attr("name");
var dataString = 'id='+ id + '&name='+ name;
$("#votebox").slideDown("slow");
$("#flash").fadeIn("slow");
$.ajax({
type: "POST",
url: "rating.php",
data: dataString,
cache: false,
success: function(html){
$("#flash").fadeOut("slow");
//and want to use this div as well.
$("#content").html(html);
}
});
}
Edit: Corrected the JS for Votedown function.