I am working on a shopping website and want to check if the item is present in the cart. If it exists, alert it's already in the cart and return false. If it doesn't exist add it to the cart.
I tried it like below, the code is working fine but the alert is looping.
$("#showBtn").focus();
msgBoxImagePath = "http://www.ournestonline.com/assets/images/";
function showMsgBox() {
simpleCart.bind('beforeAdd', function (item) {
if (simpleCart.has(item)) {
alert("Already in the Cart");
$.msgBox({
title: "Shopping Cart",
content: "Already in cart",
type: "alert"
});
return false;
} else {
$.msgBox({
title: "Shopping Cart",
content: "Great Selection Your Item is Added to Cart Happy Shopping",
type: "alert"
});
}
});
}
try adding
return false;
after the closing tag of else.
Related
I'm new to jquery, and one of my first tasks was to make a dynamic table. I managed to create a button that deletes the table row on click and it worked perfectly, the problem is, when i added a confirmation box for the user, and assigned the function to remove the tr to it, it stopped working.
i've tried several things inside the button function, but it seems like either way the button only closes the alert box and the tr remains untouched.
//This works just fine, it deletes the selected tr without any issue
but it needs a confirmation from the user
$(document).on('click','.delete', function(){
$(this).parents('tr').remove();
}
//This is my code for the confirmation box including the shown function in the action for the button
$(document).on('click','.delete', function(){
$.alert({
useBootstrap:false,
columnClass: 'small',
title: 'Are you sure you want to delete the task?',
content: 'This action is irreversible',
type: 'red',
typeAnimated:true,
icon:'fas fa-exclamation-triangle',
typeAnimated: true,
buttons: {
Delete: {
text: 'Delete',
btnClass: 'btn-red',
action: function(){
$(this).parents('tr').remove();
$.alert({
title:'Task deleted',
icon:'fas fa-exclamation-triangle',
type:'red',
content:'',
useBootstrap:false
});
}
},
close: function () {
}
}
});
});
To sum it up, i understand how to delete the tr with .remove(), but i don't understand why it doesn't work inside the alert function. Thank you for your time.
When you register the click event, you are registering it to an element or elements with the class of .delete. Therefore, inside the click handler function, this refers to the element that was clicked.
When you are inside the .alert function of jquery-confirm, this refers to a different element (probably the button in the dialog, depending on how jquery-confirm is implemented), so the parent of that element is not the tr that you are looking for.
Try assigning $(this) to a variable before you make the call to $.alert, like this:
$(document).on('click','.delete', function(){
var buttonClicked = $(this); //assign to a variable here
$.alert({
useBootstrap:false,
columnClass: 'small',
title: 'Are you sure you want to delete the task?',
content: 'This action is irreversible',
type: 'red',
typeAnimated:true,
icon:'fas fa-exclamation-triangle',
typeAnimated: true,
buttons: {
Delete: {
text: 'Delete',
btnClass: 'btn-red',
action: function(){
buttonClicked.parents('tr').remove(); //reference that variable here
$.alert({
title:'Task deleted',
icon:'fas fa-exclamation-triangle',
type:'red',
content:'',
useBootstrap:false
});
}
},
close: function () {
}
}
});
});
I've a form with submit validation.
I'dd like to add more than 1 alerts on form submit with:
var proceed = true;
$.confirm({
title: 'Confirm 1',content: 'No products added. Are you sure to proceed?',
buttons: {
ok: {
text: "OK",
btnClass: 'btn-success',
action: function () {
}
},
cancel: {
text: "Cancel",
action: function () {
proceed = false;
return false;
}
}
}
});
... some others checks ....
if ( !proceed ) { return false;} //EXIT SCRIPT
// IF ALL CHECKS PASSED
$.confirm({
title: 'Final confirm',content: 'All checks are ok. Are you sure to insert?',
buttons: {
ok: {
text: "OK",
btnClass: 'btn-success',
action: function () {
form.submit(); //SUBMIT THE FORM
}
},
cancel: {
text: "Cancel",
action: function () {
// CLOSE DIALOG
}
}
}
});
but on form submit I get all of 2 $.confirm opens! I'd like to pause second one until I click OK on the first one.
My jsfiddle https://jsfiddle.net/st1cqb39/2/
Make the finalConfirm function as a generic one, and call it in the action callback (of your empty check) accordingly.
Here is a DEMO: https://jsfiddle.net/st1cqb39/3/
Hope this helps!
When I add a product to the cart I am using the code below:
addproduct(itemId) {
this.showLoading = true
this.$http.post('/shampoo', {'item': itemId}).then((response) => {
swal({
title: "Success!",
text: "Product added to your basket!",
type: "success",
timer: 1500,
showConfirmButton: false
})
this.showLoading = false
}, (response) => {
this.showLoading = false
})
I created a popup form which for no product was at the cart, once they click on the add to cart button it popups, once the product was their at the cart, if any one need to add another product it again showing popup. I don't want the popup if product was at the cart
here is the code for popup form
show() {
this.showLoading = true;
$(".loading").css('display', 'block');
$('#products').modal("hide");
//
let code = $('input[name=code]').val();
if(code) {
this.$http.post('/codee', { code: code}).then((response) => {
// $('#basic-form').submit();
}, (response) => {
swal({
title: "Error!",
text: "Sorry this Code is invalid!",
type: "error",
timer: 2500,
showConfirmButton: false
})
$(".loading").css('display', 'none');
this.showLoading = false
$('input[name=code]').val('')
})
When you click add to cart, at the server side, you need to check if the item id is in the cart and return a flag to either indicate the item is in the cat or not. I assume this code is responsible for the pop up.
swal({
title: "Error!",
text: "Sorry this Code is invalid!",
type: "error",
timer: 2500,
showConfirmButton: false
})
You need to check for the returned value from the server, if it returns a flag indicating that the item already exist, just return false; that will block the pop up code from being reached. or you could wrap the pop code in an if statement. e.g
if(response.flag === 1){
return false;
// your pop up code goes here
}
or
if(response.flag === 0){
// your pop up code goes here
}
// flag can assume 0 => Added but does not exist, 1=> added but already
// exist. ect
// while the actual data will be stored in response.data
But I am wondering of the reason you are implementing this. If a user clicks add to cart, you are supposed to increment the number of that same item if already exist in the cart
The following snippet allows me to perform stuff in a callback function for the buttons that are clicked. However, how can I get a callback function, or a similar workaround such that I can perform some code when a user clicks on the 'X' button/dismisses the dialog?
bootbox.dialog({
title: "Woah this acts like an alert",
message: "Cool info for you. You MUST click Ok.",
buttons: {
sucess:{
label: "Ok",
callback: callback
}
}
});
callback(){//stuff that happens when they click Ok.}
I do not want to disable/hide the close button with
closeButton: false,
There is onEscape function for this.
bootbox.dialog({
message: 'the msg',
title: "Title",
onEscape: function() {
// you can do anything here you want when the user dismisses dialog
}
});
You can use a variable to check if the modal was hidden after a click on OK or x button / escape key
var status = false;
$('.btn').on('click', function () {
bootbox.dialog({
title: "Woah this acts like an alert",
message: "Cool info for you. You MUST click Ok.",
buttons: {
sucess: {
label: "Ok",
callback: function () {
status = true;
}
}
},
onEscape: function () {
$('.bootbox.modal').modal('hide');
}
});
});
$(document).on("hidden.bs.modal", ".bootbox.modal", function (e) {
callback();
});
function callback() {
if (!status) {
onClose();
} else {
onOK();
status = false;
}
}
function onClose() {
$('p.alert span').removeClass().addClass('text-danger').text("Dismissed");
}
function onOK() {
$('p.alert span').removeClass().addClass('text-success').text("Sucess");
}
Fiddle demo
Some people might see this as a bit of a hack-around. Although it suits me fine as all I wanted to acknowledge as a developer that someone accepted the message, which triggered the next event.
Using Bootbox.js' native confirm() method which does supply a callback action. I added an additional class as an option to the confirm button (which must be supplied on a confirm() call) with the hidden classname (E.g. Bootstap has a helper class for display:none called hidden.
This hides the confirm button, thus the Modal appears as a normal Alert box.
bootbox.confirm({
message: "Some Button Text",
buttons: {
"cancel": {
label: "<i class='fa fa-check'></i> OK - I understand",
className: "btn btn-primary"
},
//Hide the required confirm button.
"confirm": { label: "", className: "hidden" }
},
callback: function(){
//Begin Callback
alert( "Finished" );
}
});
JsFiddle Example
Im using jTable to display CDs info and a child table to show reviews of that CD. I want to be able to only show the edit\delete buttons on the rows for the user that is logged in. I have been trying to follow the suggestions made on: https://github.com/hikalkan/jtable/issues/113
https://github.com/hikalkan/jtable/issues/893
https://github.com/hikalkan/jtable/issues/620
Can honestly say im not having much luck with any of these examples. We had been told to include some jquery in our assignment so I chose to go with using it for my table data. Im wishing now id just done something very basic!
Working jTable without condition:
display: function (reviewData) {
//Create an image that will be used to open child table
var $img = $('<img class="child-opener-image" src="/Content/images/Misc/list_metro.png" title="List Reviews" />');
//Open child table when user clicks the image
$img.click(function () {
$('#ReviewTableContainer').jtable('openChildTable',
$img.closest('tr'),
{
title: "Your reviews on this album",
actions: {
listAction: 'childReviewActions.php?action=list&ID=' + reviewData.record.CDID,
deleteAction: 'childReviewActions.php?action=delete&ID=' + reviewData.record.CDID,
updateAction: 'childReviewActions.php?action=update&ID=' + reviewData.record.CDID
},
fields: {
userID: {
key: true,
create: false,
edit: false,
list: false
},
userName: {
title: 'User',
edit: false,
width: '20%'
},
reviewDate: {
title: 'Review date',
width: '20%',
type: 'date',
edit: false,
displayFormat: 'dd-mm-yy'
},
reviewText: {
title: 'Review',
type: 'textarea',
width: '40%'
}
},
Issue 620 attempt:
actions: {
listAction: 'childReviewActions.php?action=list&ID=' + reviewData.record.CDID,
#if (reviewData.record.userID == <?php echo mysql_real_escape_string($_SESSION['ID']);?>)
{
deleteAction: 'childReviewActions.php?action=delete&ID=' + reviewData.record.CDID,
updateAction: 'childReviewActions.php?action=update&ID=' + reviewData.record.CDID
}
},
This way gives me compile error: invalid property id on the IF statement.
If I take out the # in the if statement I get: missing : after property id.
Issue 113 & 893 attempt:
actions: {
listAction: {
url:'http://localhost/childReviewActions.php?action=list&ID=' + reviewData.record.CDID
//updateAction: {
//url:'childReviewActions.php?action=update&ID=' + reviewData.record.CDID,
//enabled: function (data) {
//return data.record.userID = <?php echo mysql_real_escape_string($_SESSION['ID']);?>;
//}
//}
},
On this I couldnt even get it to list the contents of the child table. It keeps coming back with 404 not found error: The requested url /[object object] was not found on this server. Has anyone any ideas how to get these examples working on have a different example of how to get the table to enable\enable the edit, update buttons? This is all new to me so I apologise now
rowInserted: function (event, data) {
//After child row loads. Check if the review belongs to the member logged in. If not remove the edit/delete buttons
if (data.record.userID != $user) {
data.row.find('.jtable-edit-command-button').hide();
data.row.find('.jtable-delete-command-button').hide();
}
else{
//If a review record does belong to the user set variable to true so the add new review link can be hidden after all records have been loaded
$memberReviewExists = true;
//Also needed here for when a new record is inserted
$(".jtable-add-record").hide();
}
},
recordsLoaded: function (event, data) {
if (typeof $memberReviewExists != 'undefined' && $memberReviewExists == true){
$(".jtable-add-record").hide();
$memberReviewExists = null;
}
else {
//No review currently exists for this user so show the Add review link $(".jtable-add-record").show();
}
},
recordDeleted: function (event, data) {
//User has deleted their review. Re-show the add new review link
$(".jtable-add-record").show();
}
The following worked for me. It hides the edit/delete button on rows where the current user is not the authorized user. Note: I added a column for authorizedUser in the mysql table and use that to know if the user is allowed or not.
rowInserted: function(event, data){
var $currentUser='<?php echo $_SESSION['email']?>';
if (data.record.authorizedUser != $currentUser) {
data.row.find('.jtable-edit-command-button').hide();
data.row.find('.jtable-delete-command-button').hide();
}
},
#Toni Your code contains asp.net code too. # is ASP.NET Directive.