sorry for this request but I'm an AJAX beginner.
I have the following script and I'm trying to animate it (something like "fade").
jQuery(document).ready(function($){
$(document).on("click",".ratingemo", function(){
var rating = $(this).attr("id").substr(0, 1);
var id = $(this).attr("id").substr(1);
var data = "id="+id+"&rating="+rating;
$.ajax({
type: "POST",
url: "/ldplug/rate.php",
data: data,
success: function(e){
$("#r"+id).html(e);
}
})
});
});
How can I do that?
Many thanks!
First of all live is deprecated, check out on instead. But that being said, why not:
success: function(e){
$("#r"+id).hide();
$("#r"+id).html(e).fadeIn("slow");
}
It would be better to just have $("#r"+id) hidden to start, I just hid it to illustrate the point.
Without seeing your HTML, I have to assume that something like this will work for you. Hide the element, populate it, then fade it in.
jQuery(document).ready(function ($) {
$(".ratings").live("click", function () {
var rating = $(this).attr("id").substr(0, 1);
var id = $(this).attr("id").substr(1);
var data = "id=" + id + "&rating=" + rating;
$("#r" + id).hide();
$.ajax({
type: "POST",
url: "/ratings/rate.php",
data: data,
success: function (e) {
$("#r" + id).html(e);
$("#r" + id).fadeIn();
}
})
});
});
Related
I want to clear my previous ajax response images before appending new images please help me how can i do that ? thank u.
Ajax
<script>
$(document).ready(function(){
var preloaded = [];
$(document).on('click','.editBtn',function(){
var marchandiseId = $(this).data("id");
var file ="{{Config('wfh.file')}}";
$(".input-images-edit").empty();
$("#editModel").modal('show');
var url = "{{URL('/marchandise/edit/')}}";
$.ajax({
type:"GET",
url: url + '/' + marchandiseId,
dataType:'JSON',
success:function (response){
var data = response.marchandise.marchandise_details;
$.each(data, function(i, item) {
preloaded.push({id: item.id, src: file + '' + item.images });
});
$('.input-images-edit').imageUploader({
preloaded: preloaded,
imagesInputName: 'photos',
preloadedInputName: 'old'
});
}
});
});
http://jsfiddle.net/pdb26p3q/22/
$(".verify").click(function () {
var ID = $(this).attr('id');
var dataString = 'verify=' + ID;
$.ajax({
type: "POST",
url: "",
data: dataString,
cache: false,
success: function () {
$(".code").show('slow');
}
});
});
I have tried using my own server and is not working too
I'm not sure what is the problem, sorry Im quite near to jquery
Edited: The .code(input) is not showing. Because if submit successfully the input will be shown.
you can try like
var dataString = {verify:ID};
Still stack in these code. On any browser desktop working fine, but when try use chrome on my android, can't post value from ajax datastring.
jQuery(document).ready(function()
{
jQuery(".button").click(function()
{
var product = jQuery(".products").val().split('|')[0];
var nomortujuan = jQuery(".nomortujuan").val();
var pn = parseFloat(document.getElementById("val[pin]").value);
var dataString = 'method=sendMessage&message='+product+'.'+ nomortujuan+'.'+pn;
var web = 'ajax.php';
jQuery.ajax ({
type: "POST",
url: web,
data: dataString,
cache: true,
beforeSend: function(html) {
document.getElementById("hasil").innerHTML = '';
jQuery(".flash").show();
jQuery(".flash").html('<div style="float:left;"></div>');
},
success: function(html){
jQuery("#js_process_request input, #js_process_request select").attr('disabled',false);
jQuery(".flash").hide();
jQuery("#hasil").hide();
jQuery ("#hasil").append(html);
return false;
}
});
});
});
Maybe this problem
jQuery ("#hasil").append(html);
remove spacing to fix it
jQuery("#hasil").append(html);
I am trying to figure out ways to prevent ajax from being called multiple times. Below is my code. I created a scrollable div, my goal is, once the scroll inside this div is about to reach the bottom, I want to call the ajax. Everything works so far. But the problem is, whenever I scroll the div fast enough to the bottom, the ajax is being called multiple times.
$('.scroll_div').scroll(function(){
var scroll_pos = $(this).scrollTop();
var outer_height = $(this).height();
var inner_height = $(this)[0].scrollHeight;
var scroll_end = scroll_pos + outer_height;
if(scroll_end >= inner_height-300){
$.ajax({
type: 'POST',
url: 'ajax/get_info.php',
data: {data_type: data_type},
beforeSend:function(){
}
}).done(function(data){
alert(data);
});
}
});
I would put a timer on it - adjust the timeout accordingly, so that the ajax would only fire if the user stays put for a second or two:
$('.scroll_div').scroll(function(){
if(typeof(myTimer)!='undefined'){
clearTimeout(myTimer);
}
var scroll_pos = $(this).scrollTop();
var outer_height = $(this).height();
var inner_height = $(this)[0].scrollHeight;
var scroll_end = scroll_pos + outer_height;
if(scroll_end >= inner_height-300){
//timer
myTimer = window.setTimeout(function(){
$.ajax({
type: 'POST',
url: 'ajax/get_info.php',
data: {data_type: data_type},
beforeSend:function(){}
}).done(function(data){
alert(data);
});
}, 2500);
}
});
I have a delegate function of JQuery to remove a row of a grid which is anchor tagged remove, as below
$('#MyGrid').delegate('a.remove', 'click', function() {
// e.preventDefault();
var tr = $(this).closest('tr');
var htmlstring = tr.find("td").eq(0).html();
alert(htmlstring);
jQuery.ajax( //$.ajax( also not working
{
type: "POST",
url: "UploadDocuments/Removefile",
data: "removefile=" + htmlstring,
success: function(){
tr.remove();
}
});
});
this is where i am making delegate call in success function of JQuery
success: function(result) {
var htmlString = [result];
for (i = 0; i < htmlString.length; i++) {
$('#MyGrid tbody').append('<tr><td>Remove</td></tr>');
}
},
Now i want to make ajax call as shown but it is not hitting once i click remove ,but is loading initially.Also i need to pass the data i.e the name of the deleted row.How can i get that value?
could any of you guys help me out! got stucked !! ;)
thanking you,
michaeld
Try this where IndexOfNameColumn points to the name column index.
$('#MyGrid').delegate('a.remove', 'click', function() {
// e.preventDefault();
var tr = $(this).closest('tr'); //line#3
var htmlstring = tr.find("td").eq(IndexOfNameColumn).html();
jQuery.ajax( //$.ajax( also not working
{
type: "POST",
url: "UploadDocuments/Removefile",
data: "removefile=" + htmlstring //file name from line#3
});
tr.remove();
});
try this code-
$('#MyGrid').delegate('a.remove', 'click', function() {
// e.preventDefault();
var tr = $(this).closest('tr').find("td").eq(0).find('a').text().replace(/"/g,"").trim(); //line#3
var $this = $(this);
jQuery.ajax(
{
type: "POST",
url: "UploadDocuments/Removefile",
data: "removefile=" + tr //file name from line#3
success: function(){
$this.closest('tr').remove();
}
});
});