Stop button action after press it - javascript

I have a JS function that loads the comments of a certain answer. The idea is to call an API function and to return the comments.
The problem is that everytime I press the button it loads the comments, the same exact comments.
I want something that after you press comment, you cannot load more comments. I though stopPropagation would do the trick but nothing happened.
Is it possible to when I press the Comment button after I call it, it closes my #showarea
<div class="post-button clearfix">
<div class="post-button clearfix">
<button class="btn icon-chat show-textarea" title="Add a comment on this answer" type="button" data-answer="{$answer['publicationid']}">Comment</button>
<div class="textarea">
{include file="comment_form.tpl"}
</div>
</div>
</div>
comment_form.tpl
$('.comment-form').hide();
var commentsFetched = false;
$("body").on("click", ".show-textarea", function(){
if (commentsFetched) { // check the flag
return;
}
$.getJSON("/controller/api/comments/comment.php", {
answerid : answerid
}, function (data) {
commentsFetched = true;
$.each(data, function(i, comment) {
console.log(comment);
$('.comment-form').append('<article class="tweet-data">' +
'<div class="comment-items">' +
'<div class="qa-c-list-item hentry comment" id="c3574">' +
'<div class="asker-avatar">' +
'<a>' +
'<img width="40" height="40" src="' +
comment.user_photo +
'"></a>' +
'</div>' +
'<div class="qa-c-wrap">' +
'<div class="post-button">' +
'<button name="" onclick="" class="btn icon-flag" title="Flag this comment as spam or inappropriate" type="submit">flag</button>' +
'<button name="" class="btn icon-answers" title="Reply to this comment" type="submit">reply</button>' +
'</div>' +
'<span class="qa-c-item-meta">' +
'commented' +
' 1 day' +
' ago' +
' by ' +
'<a style="display: inline" href="" class="qa-user-link url nickname">' +
comment.username +
'</a> ' +
'<span class="qa-c-item-who-points"> ' +
'<span class="qa-c-item-who-points-pad">(</span><span class="qa-c-item-who-points-data">140</span><span class="qa-c-item-who-points-pad"> points)</span> ' +
'</span> ' +
'</span> ' +
'</span> ' +
'<div class="qa-c-item-content" style="color: #2d2727; font-size: 13px"> ' +
'<a name="3574"></a><div class="entry-content">' +
comment.body +
'</div> ' +
'</div> ' +
'</div> <!-- END qa-c-item --> ' +
'</div> ' +
'</div>');
});
});
$('.comment-form').show();
});
$("body").on("click", ".textarea-ok, .textarea-cancel", function(){
commentsFetched = false;
$('.comment-form').hide();
});

set a flag to know if you already fetched the comments.
var commentsFetched = false;
$("#showarea").click(function() {
if (commentsFetched) { // check the flag
return;
}
$.getJSON("/controller/api/comments/comment.php", {
answerid : answerid
}, function (data) {
commentsFetched = true; // set the flag
$.each(data, function(i, comment) {
...
You should probably disable the button to give your users a visual indication no more comments can be loaded

Related

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience

<script>
$.ajax({
method: "POST",
url: "API/actions/getAllCategories",
async: false,
success: function(msg) {
newdiv = "";
var count = 1;
msg.forEach(function(row) {
if (count == 1) {
newdiv += ' <li class="active">' +
'<a data-toggle="tab" href="#tab' + count + '" aria-expanded="true">' +
'<span>' + row.name + '</span>' +
'</a>' +
'</li>';
} else {
newdiv += ' <li>' +
'<a data-toggle="tab" href="#tab' + count + '" aria-expanded="true">' +
'<span>' + row.name + '</span>' +
'</a>' +
'</li>';
}
$.ajax({
method: "POST",
url: "API/actions/getProductsbycatId",
async: false,
data: {
"categoryId": row.id,
"countryId": `<?php echo $_SESSION['evoucher']['countryId'] ?> `
},
success: function(msg1) {
var active = '';
if (count == 1) {
active = "active in";
}
newdiv1 = ' <div id="tab' + count + '" class="tab-pane fade ' + active + '">' +
' <div class="bbb_viewed">' +
' <div class="row">' +
' <div class="col">' +
' <div class="bbb_main_container">' +
' <div class="bbb_viewed_title_container">' +
' <div class="bbb_viewed_nav_container">' +
' <div class="bbb_viewed_nav bbb_viewed_prev"><i class="fas fa-chevron-left"></i></div>' +
' <div class="bbb_viewed_nav bbb_viewed_next"><i class="fas fa-chevron-right"></i></div>' +
' </div>' +
' </div>' +
' <div class="bbb_viewed_slider_container">' +
' <div class="owl-carousel owl-theme bbb_viewed_slider">';
msg1.forEach(function(row1) {
newdiv1 += ' <div class="owl-item">' +
' <div class="bbb_viewed_item1 discount d-flex flex-column align-items-center justify-content-center text-center">' +
' <div class="bbb_viewed_image"><img src="' + row1.pathimage2 + '" alt=""></div>' +
' <div class="bbb_viewed_content text-center">' +
' <div class="bbb_viewed_name">' + row1.name + '</div>' +
' </div>' +
' </div>' +
' </div>';
})
newdiv1 += ' </div>' +
' </div>' +
' </div>' +
' </div>' +
' </div>' +
' </div>' +
'</div>';
$("#tabs").append(newdiv1);
},
error: function(error) {
alert("error");
}
})
count++;
})
$("#bestsellernav").html(newdiv);
},
error: function(error) {
alert("error");
}
})
</script>
I am making an AJAX call to different APIs and I am making many ajax calls at the same time but I am getting this error in my console.
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects for the end user’s experience.
I think it is related to async:false, but I can't get rid of it because my page is not staying the way it is. Any alternatives for async:false?

How can i get current Index using for each loop in javascript and update into realtime database

I am working with javascript also am a newbie in js so actually, I want to get the current index and then update a specific field to the realtime if somebody helps me out I will thankful to him here is my script where I fetch the data in realtime firebase and I put my value inside inner HTML format so I want when user press specific buttons its pending data update to booked.
userDataRef.once("value").then(function(snapshot) {
snapshot.forEach(function(childSnapshot, index) {
console.log(childSnapshot.val());
key = childSnapshot.key;
userid = childSnapshot.val().userid;
var carid = childSnapshot.val().carid;
var imageload = childSnapshot.val().imgurl;
var loadfirstname = childSnapshot.val().userfirstname;
var loadcarname = childSnapshot.val().carname;
var loadlastname = childSnapshot.val().userlastname;
var loadphonenumber = childSnapshot.val().phoneNumber;
var loaddropoffadd = childSnapshot.val().dropoffaddress;
var loadpickupadd = childSnapshot.val().pickupaddress;
loadprice = childSnapshot.val().price;
var appenddata =
'<div class="container rounded" style="background-color: #00829E" id="datalist">' +
'<div class="row">' +
'<div class="col-md-12">' +
'<div class="row">' +
'<div class="col-md-4 mt-2 mb-2 ml-2">' +
'<div class="container rounded"style="background-color: #efefef">' +
'<center>' +
'<img src="' + imageload + '" id="loadimage" style="height: 100px; width: 100px;">' +
'</center>' +
'</div>' +
'</div>' +
'<div class="col-md-6 mt-2 mb-2">' +
'<div class="container rounded para">' +
'<h5 id="loadcarname">' + loadcarname + '</h5>' +
'<p id="loadfirstname">First Name: ' + loadfirstname + '</p>' +
'<p id="loadlastname">Last Name: ' + loadlastname + '</p>' +
'<p id="loadphone">Phone Number: ' + loadphonenumber + '</p>' +
'<p id="loadpickup">Pickup Address: ' + loadpickupadd + '</p>' +
'<p id="loaddropoff">Dropoff Address: ' + loaddropoffadd + '</p>' +
'</div>' +
'</div>' +
'<div class="col-md-2"></div>' +
'</div>' +
'<div class="row">' +
'<div class="col-md-4"></div>' +
'<div class="col-md-4"></div>' +
'<div class="col-md-2 para1 mt-2">' +
'<p id="loadprice">Price:' + loadprice + ' Sum/Day</p>' +
'</div>' +
'<div class="col-md-2 mb-3">' +
'<button class="btn btn-info btn-sm rounded-pill check" id="approvebutton" value ="Booked" onclick="myFunction(this.value)" aria-pressed="true">Approve</button>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
$("#listshow").append(appenddata);
});
});
when user press the button I call function named Myfunction I just want to update specific id in that function
my function name script
function myFunction(value) {
approvecar = document.getElementById('loadprice').value;
firebase.database.ref("carBooking/" + userid).update({
status: ""
});
}
To be able to write a value in the database, you need to know the complete path to that node. Right now, you know what value to write, but you've lost information about what key (the -M.... value) to write it to.
So you'll need to pass the key of the item the user clicked on, from your HTML into the myFunction function.
The simplest way to do that is something like:
'<button class="btn btn-info btn-sm rounded-pill check" id="approvebutton" value ="Booked"
onclick="myFunction(\''+key+'\', this.value)" // 👈 is changed
aria-pressed="true">Approve</button>' +
There may be some syntax problems in this part as I'm having a hard time parsing your HTML construction code.
Now that you're passing both the key and the value, you can update the correct node with:
function myFunction(key, value) {
approvecar = document.getElementById('loadprice').value;
firebase.database.ref("carBooking").child(key).update({
status: ""
});
}

Checking channel id with JavaScript

My form is like this , it may has manual social network
I want to a user enter the id of channel, with #.
for example
#oxbir
#website
May a user enter with URL, for example https://t.me/oxbir .
how to get validate with JavaScript?
I don't want to enter URL, I want to enter if of channel. #oxbir
blade
function showDynamicSocial() {
let html = '' +
'#foreach(auth()->user()->socials as $social)\n'+
'<div class="col-md-6 position-relative">\n' +
'<i class="fas fa-times text-danger position-absolute"></i>' +
'<div class="row">\n' +
'<div class="col-md-4">\n' +
'<div class="form-group">\n' +
'<label for="social_id">Social Network</label>\n' +
'<select id="social_id" name="social_id[]" class="form-control">\n' +
'#foreach($socials as $socialData)\n'+
'<option value="{{ $socialData->id }}" {{ $socialData->id == $social->id ? 'selected' : ''}}>\n'+
'{{ $socialData->name }}\n' +
'</option>\n' +
'#endforeach\n' +
'</select>\n' +
'</div>\n' +
'</div>\n' +
'<div class="col-md-8">\n' +
'<div class="form-group">\n' +
'<label for="link">Profile ID</label>\n' +
'<input id="link" value="{{ $social->pivot->link }}" name="link[]" class="form-control">\n' +
'</div>\n' +
'</div>\n' +
'</div>\n' +
'</div>\n ' +
'#endforeach';
$('#showSocial').append(html);
}
javascript
$('div .btn-next').on('click', function() {
var parent_fieldset = $(this).parents('fieldset');
var next_step = true;
var current_active_step = $(this).parents('div').find('.form-wizard.active');
var progress_line = $(this).parents('div').find('.progress-line');
if( next_step ) {
parent_fieldset.fadeOut(400, function() {
current_active_step.removeClass('active').addClass('activated').next().addClass('active');
bar_progress(progress_line, 'right');
$(this).next().fadeIn();
scroll_to_class( $('.wizards'), 20 );
});
}
});

How to change the product listing to show 2 items on each row? [duplicate]

This question already has answers here:
Split array into chunks
(73 answers)
Closed 3 years ago.
This is the jsfiddle link please refer here for the full set of HTML and Javascript codes. http://jsfiddle.net/6ge12hLs/3
It is currently only showing the whole row itself. Would appreciate if someone could help out to change it to show 2 items per row.
'''
ProductContent += '<tr>';
//Looping the products out
$.each(resp.message, function (index, value) {
ProductContent +=
'<td>' +
'<div class="col-xs-4">' +
'<div class="panel panel-info" style="width: 12rem;">' +
'<div class="panel-heading">' + value.product_name + '</div>' +
'<div class="panel-body">' +
'<img src="https://bitmp08.projectsbit.org/product_images/' + value.product_picture + '"style="width:100px; height:100px;"/>' +
'</div><div class="panel-heading">$' + value.product_price + '.00' +
'<br>' + value.product_brand +
'<br>' + value.product_color +
'<br>' + value.product_category +
'<br>' +
'<button align: center onclick="myFunction()" class="btn btn-danger btn-xs">View</button></div></div></div></td>';
});
ProductContent += '</tr>';
$("#product_list").html(ProductContent);
}
}
})
}
});
'''
In my opinion table here is completely unnecessary You have bootstrap to Your disposition so You can delete table, and use col-xs-6 in every product to achieve exactly 2 products per row.
I forked Your code and make some changes:
First change in HTML:
<div class="table-responsive">
<div id="product_list">
</div>
</div>
Second Change is in javascript:
var resp = jQuery.parseJSON(JSON.stringify(response));
var responselength = resp.message.length;
if (resp.status == 1) {
//creating a variable to store the final display conetent
var ProductContent = '';
// creating two varible for the limit of items looped out each row in the page.
// var tableitemcount = 0;
// var tableitemlimit = 7;
//Looping the products out
$.each(resp.message, function (index, value) {
ProductContent +=
'
<div class="col-xs-6">
' +
'
<div class="panel panel-info">
' +
'
<div class="panel-heading">' + value.product_name + '</div>
' +
'
<div class="panel-body">' +
'<img src="https://bitmp08.projectsbit.org/product_images/' + value.product_picture + '"style="width:100px; height:100px;"/>' +
'
</div>
<div class="panel-heading">$' + value.product_price + '.00' +
'<br>' + value.product_brand +
'<br>' + value.product_color +
'<br>' + value.product_category +
'<br>' +
'<button align: center onclick="myFunction()" class="btn btn-danger btn-xs">View</button>
</div>
</div>
</div>
';
});
$("#product_list").html(ProductContent);
http://jsfiddle.net/0s4vz3ny/

I want The input value is not cleared when I popup a second time

I want to add html code using append, but when adding a second time, the text in the input does not follow the new line :
HTML :
'<form>' +
'<input type="text" id="newFoldr" name="fname" placeholder=".ex nameFanpage" value="">' +
'<input type="button" class="cancelButton" id="cancelButton" value="Cancel" data-dismiss="modal" aria-label="Close">' +
'<input type="button" class="submitButton" id="submitButton" value="Create" style="width:142px;margin-left: 5px;">' +
'</form>' +
Javascript :
$('.submitButton').click(function () {
var addFolder = '<div class="_5bm7 _2mk4" role="presentation" style="height: 50px;border:none;"><div class="_5bmf"></div>' +
'<div class="_1577">' +
'<div class="ellipsis">' +
'<div class="_1i5z"><div class="_1i5-">' +
'</div>' +
'</div>' +
'<span id="namaFolder"></span>' +
'</div>' +
'</div>' +
'</div>';
if( document.getElementById("newFoldr").value === '' ){
swal("Whoops!", "You need to write something!", "info");
} else {
$('.columnFolder').append(addFolder);
var inputan = document.getElementById("newFoldr").value;
document.getElementById("namaFolder").innerHTML= inputan;
swal("Success!", "Your folder has been created!", "success");
}
});
Screenshot : http://prntscr.com/h1pz43
if you are not able to clear the input value just add below code in else block
document.getElementById("newFoldr").value = "";
Complete javascript code is as below
$('.submitButton').click(function () {
var addFolder = '<div class="_5bm7 _2mk4" role="presentation" style="height: 50px;border:none;"><div class="_5bmf"></div>' +
'<div class="_1577">' +
'<div class="ellipsis">' +
'<div class="_1i5z"><div class="_1i5-">' +
'</div>' +
'</div>' +
'<span></span>' +
'</div>' +
'</div>' +
'</div>';
if( document.getElementById("newFoldr").value === '' ){
swal("Whoops!", "You need to write something!", "info");
} else {
$('.columnFolder').append(addFolder);
var inputan = document.getElementById("newFoldr").value;
$('.columnFolder div._5bm7._2mk4:last').find('span').text(inputan);
document.getElementById("newFoldr").value = "";
swal("Success!", "Your folder has been created!", "success");
}
});

Categories