I am adding some comments with AJAX and get return formatted HTML and adding it to HTML with DOM manipulation,
jQuery.ajax({
url: baseURL + "index.php/user/news/add_comment",
data: $("#comment_fm").serialize(),
type: "POST",
success: function(data) {
var objData = jQuery.parseJSON(data);
if (objData.cival == 1) //Success..
{
$("#comment").val('');
$("#comment_box").replaceWith(objData.comment);
$("#commentcounts").replaceWith(objData.commentcounts);
}
} // Success End
}); //AJAX End
With above code i can see my comments are added,
Now in same return formatted HTML, there is delete button which have JS function associated,
Below is delete JS,
function deletecomment(commentid) {
jQuery.ajax({
url: baseURL + "index.php/user/news/deletecomment",
data: {
comment_id: commentid
},
type: "POST",
success: function(data) {
var objData = jQuery.parseJSON(data);
if (objData.cival == 1) {
$("#commentcounts").replaceWith(objData.commentcounts);
$("#commentbox" + commentid).remove();
}
}
});
}
Below is my delete button which fire to function deletecomment()
<i class="fa fa-trash text-info"></i>
But my problem is that i can not delete this comment just after adding function is run,
If i refresh page, then delete function works a needed,
So question is, how to make multiple function work without reloading page?
Thanks in advance,
I would suggest you to try as below:
<a class="deleteComment" data-id="<?php echo $comment['comment_id'];?>" href="#"><i class="fa fa-trash text-info"></i></a>
Your JS would be:
$(document).on('click','.deleteComment',function(){
jQuery.ajax({
url: baseURL + "index.php/user/news/deletecomment",
data: {
comment_id: $(this).data('id');
},
type: "POST",
success: function(data) {
var objData = jQuery.parseJSON(data);
if (objData.cival == 1) {
$("#commentcounts").replaceWith(objData.commentcounts);
$("#commentbox" + commentid).remove();
}
}
});
});
Related
I'm have an html table with modal column (see image below for your reference)
Upon click the Order modal, I can access the its ID using onclick event in JavaScript
(var customer_id = $(this).val();)
I wanted to access and used it in my Add function using ajax but I'm having an error of "customer_id is not defined" when I tried to use it. Is there a way to fix it or do it properly.
This is my script
<script>
$(document).ready(function () {
// START OPEN CART MODAL FUNCTION
$(document).on('click', '.viewCart', function (e) {
e.preventDefault();
var customer_id = 0;
var customer_id = $(this).val();
console.log(customer_id);
$.ajax({
type: "GET",
url: "/get-cart/"+customer_id,
dataType: "json",
success: function (response) {
if (response.data != null) {
console.log(response);
$('.OrderTbody').html("");
$.each(response.data, function (key, item) {
$('.OrderTbody').append('<tr>\
<td>' + item.p_name + '</td>\
<td>' + item.c_qty + '</td>\
<td class="total">' + item.p_amt + '</td>\
<td><button type="button" value="' + item.c_id + '" class="btn btn-danger deleteListBtn btn-sm">Delete</button></td>\
\</tr>');
});
}
}
});
});
// END OPEN CART MODAL FUNCTION
// START ADD DATA FUNCTION
$(document).on('click', '.addToCart', function (e) {
e.preventDefault();
var data = {
'store': $('.sel_store').val(),
'product': $('.sel_product').val(),
'quantity': $('.sel_qty').val(),
// HOW TO INPUT Customer ID here, I tried this but im having an error of
// customer_id is not defined
'customer_id': customer_id,
}
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: "POST",
url: "/cart-list",
data: data,
dataType: "json",
success: function (response) {
}
});
});
// END ADD DATA FUNCTION
});
</script>
I have problem regarding on real time count of likes using ajax and laravel, so once the response success the result of response will append to the specific class, however it happen when i click the like button. each class added the result. to understand more well. please see the attached images below.
w
Problem: How to append the result on the specific like button.
illustration:
Html Loop Data:
echo '<a class="nav-link btn_like_each_content" data-attri-like-content="'.$latest_news_data->content_id.'" style="color:#757a91; font-size:13px;"><i class="far fa-thumbs-up" style="color:#757a91; font-size:13px;" ></i> <label class="total_count_of_like_each_content" >0</label> Likes</a>';
Front End:
$('a.btn_like_each_content').on('click',function(){
var content_id = $(this).attr("data-attri-like-content");
var data = content_id;
$.ajax({
url: "/total_count_like_each_comment",
type:'post',
data:{like_id:data},
success: function( response ) {
if(response == 'Clicked') {
$.ajax({
url:"/retrive_like_count_each_content",
type:'get',
data:{content_id: data},
dataType:'JSON',
success:function(res) {
var total_count_of_specific_content = res[0]['count_like'];
var parseTotalLike = parseInt(total_count_of_specific_content);
$('.total_count_of_like_each_content').text( parseTotalLike );
},
error:function(err) {
alert('Failed To Insert');
}
})
}
}
});
});
Thank you..
Give a unique id to each class
echo '<a class="nav-link btn_like_each_content" id="content_'.$latest_news_data->content_id.'" data-attri-like-content="'.$latest_news_data->content_id.'" style="color:#757a91; font-size:13px;"><i class="far fa-thumbs-up" style="color:#757a91; font-size:13px;" ></i> <label class="total_count_of_like_each_content" >0</label> Likes</a>';
Now Track which content was clicked by defining a variable
$('a.btn_like_each_content').on('click',function(){
var content_id = $(this).attr("data-attri-like-content");
var actual_content_id = $(this).attr("id");
var data = content_id;
$.ajax({
url: "/total_count_like_each_comment",
type:'post',
data:{like_id:data},
success: function( response ) {
if(response == 'Clicked') {
$.ajax({
url:"/retrive_like_count_each_content",
type:'get',
data:{content_id: data},
dataType:'JSON',
success:function(res) {
var total_count_of_specific_content = res[0]['count_like'];
var parseTotalLike = parseInt(total_count_of_specific_content);
$('#' + actual_content_id).text( parseTotalLike ); //Pass actual content ID here
},
error:function(err) {
alert('Failed To Insert');
}
})
}
}
});
});
There have been similar questions like this already on SO. Unfortunately none of them seems to be worked for me.
I have an accordion tab where there can be multiple accordions depending upon the number of devices the logged in user has. I am storing a key for each device in the accordion which I need to pass as a parameter to the function calling to refresh device status.
$(document).ready(function() {
$('.accordion').on('show.bs.collapse', function(e) {
var deviceId = $(e.target).attr('device-id');
var data = {
'host_name': $(e.target).attr('device-host-name'),
'host_key': $(e.target).attr('device-host-key')
};
updateAppsStatus(deviceId, data)
});
});
function updateAppsStatus(deviceId, data) {
var spinner = '<div class="m-3 text-center"><i class="fas fa-spinner fa-spin"></i><br>Loading...</div>';
if ($('#appsStatus-' + deviceId).is(':empty')) {
$('#appsStatus-' + deviceId).html(spinner);
$.ajax({
url: "{{ path('app_apps_status') }}",
type: "POST",
dataType: "json",
data: data
}).done(function(data) {
$('#appsStatus-' + deviceId).html(data);
})
}
setTimeout(updateAppsStatus, 5000, deviceId, data)
}
I have chat and i am loading these by ajax
$.ajax({
type: "GET",
url: "chat/mini.php",
success: function(chat){
$('.chat-message').html(chat);
},
error: function(err) {
console.log(err);
}
});
And i Have in chat/mini.php link to delete
X
and script
$(".delbutton").click(function () {
//Save the link in a variable called element
var element = $(this);
//Find the id of the link that was clicked
var del_id = element.attr("id");
//Built a url to send
var info = 'id=' + del_id;
if (confirm("Sure you want to delete? There is NO undo!")) {
$.ajax({
type: "GET",
url: "chat/delete.php",
data: info,
success: function () {
}
});
}
return false;
});
And these cod working when i not loading chat with ajax but when i loading these with ajax these don't working. I must add something to work?
I am a decent PHP programer and recently I got stuck in a javascript code.
I have the code below:
$(function () {
$('.more').live("click", function () {
var ID = $(this).attr("id");
if (ID) {
$("#more" + ID).html('<img src="moreajax.gif" />');
$.ajax({
type: "POST",
url: "scripts/loadmore.php",
data: "lastmsg=" + ID,
cache: false,
success: function (html) {
$("div#updates").append(html);
$("#more" + ID).remove();
}
});
} else {
$(".morebox").html('The End');
}
return false;
});
});
This code submit without problems one PHP variable to the process page loadmore.php using this input
<div id="more<?= $load_id ?>" class="morebox" style="margin-bottom: 200px;">
<a href="#" class="more" id="<?php echo $load_id; ?>">
load more
</a>
</div>
How can put more variables in the input and the javascript code to work with them on the process page?
I want to set one or two more variables.
UPDATE:
I updated the code like this:
HTML input:
<div id="more<?= $load_id ?>" class="morebox" style="margin-bottom: 200px;">
load more</div>
JAVASCRIPT CODE:
<script type="text/javascript">
$(function() {
$('.more').live("click",function()
{
var ID = $(this).attr("data-id");
var ACT = $(this).attr("data-act");
if(ID)
{
$("#more"+ID).html('<img src="moreajax.gif" />');
$.ajax({
type: "POST",
url: "scripts/loadmore.php",
data: {"lastmsg="+ ID, "act="+ ACT},
cache: false,
success: function(html){
$("div#updates").append(html);
$("#more"+ID).remove();
}
});
}
else{
$(".morebox").html('The End');
}
return false;
});
});
</script>
I am not sure if the data lines was writed properly because the script looks like it's frozen now
SOLVED:
I just used a datastring like this
<script type="text/javascript">
$(function() {
$('.more').live("click",function()
{
var ID = $(this).attr("data-id");
var ACT = $(this).attr("data-act");
var dataString = 'lastmsg='+ ID + '&act=' + ACT;
if(ID)
{
$("#more"+ID).html('<img src="moreajax.gif" />');
$.ajax({
type: "POST",
url: "scripts/loadmore.php",
data: dataString,
//data: {"lastmsg="+ ID, "act="+ ACT },
cache: false,
success: function(html){
$("div#updates").append(html);
$("#more"+ID).remove();
}
});
}
else{
$(".morebox").html('The End');
}
return false;
});
});
</script>
Just send data as an object:
data: {
"lastmsg": "lastmsg="+ ID,
"anotherData": "someData"
}
You'll retrieve them in your PHP script as follows:
$_POST["lastmsg"];
$_POST["anotherData"];