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();
}
});
});
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'
});
}
});
});
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);
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();
}
})
});
});
This is the ajax code for the form submission:
$('form[class^="ajaxsubmit_"]').live('submit', function(e){
e.preventDefault();
var classname = $(this).attr('class');
var classnamesplit = classname.split("_");
var container = classnamesplit[1];
if (container == 'parent'){
container = $(this).parent();
}
$(container).show();
$(container).html('<img src="public/images/web/ajax.gif"/>');
$(this).ajaxSubmit(container);
});
(function($){
jQuery.fn.ajaxSubmit =
function(container) {
var url = $(this).attr('action');
$.ajax({
url: url,
type: "POST",
data: $(this).serialize(),
dataType: "html",
success: function(msg) {
$(container).html(msg);
}
});
return this;
};
})(jQuery);
This is like a general function for all forms, it reads the action and sends the data to it. Then outputs in the parent or the specified div. It works perfectly fine in Chrome, Firefox and Opera. How can I solve this?
here is the code I'm using:
$(function() {
$(".fav").click(function() {
var page = $('#page').attr('value');
var user = $('#user').attr('value');
var time = $('#time').attr('value');
var info = "page="+ page +"& user="+ user +"& time="+ time;
$("#loading").html('<im g src="loader.gif" />');
$.ajax({
type: "POST",
url: "favorite.php",
data: info,
success: function() {
$("#loading").ajaxComplete(function(){}).slideUp();
$('#fav').fadeOut(200).hide();
$('#unfav').fadeIn(200).show();
}
});
return false;
});
});
</script>
<script type="text/javascript" >
$(function() {
$(".unfav").click(function(){
var page = $('#page').attr('value');
var user = $('#user').attr('value');
var info = "page="+ page +"& user="+ user;
$("#loading").html('<im g src="loader.gif" />');
$.ajax({
type: "POST",
url: "notfavorite.php",
data: info,
success: function(){
$("#loading").ajaxComplete(function(){}).slideUp();
$('#unfav').fadeOut(200).hide();
$('#fav').fadeIn(200).show();
}
});
return false;
});
});
Everything is working fine, it acts as a "like" "follow" button, the only problem is that the ajaxComplete() function only runs once.
Cheers!
$(function(){
$(".fav").click(function(){
var page = $('#page').attr('value');
var user = $('#user').attr('value');
var time = $('#time').attr('value');
var info = "page="+ page +"& user="+ user +"& time="+ time;
$("#loading").html('<im g src="loader.gif" />');
$('#follow').hide();
$.ajax({
type: "POST",
url: "favorite.php",
data: info,
success: function(){
$('#loading').empty();
$('#remove').fadeIn(200).show();
}
});
return false;
});
})();
same for .unfav