Hi,
I had created custom mini Enquiry cart,The product submitted to enquiry is created in mini enquiry as same as mini cart.Im getting ajax respose in Json and appending it to div as html.
i need to show confirmation popup on click of delete without page load(By using ajax respose html )
Mini enquiry.phtml
function addProductToEnquiry(productId, productSku, productName, productUrl, productImg, productType) { var selected_options = {}; jQuery('.swatch-attribute').each(function (k, v) { var attribute_id = jQuery(v).attr('attribute-id'); var option_selected = jQuery(v).attr('option-selected'); if (attribute_id && option_selected) { selected_options[attribute_id] = option_selected; } }); console.log(jQuery.isEmptyObject(selected_options)); if ((productType == "configurable") && (jQuery.isEmptyObject(selected_options) === true)) { console.log(productType); window.location.replace(productUrl); return false; } var qty = jQuery('.addToCartQty_' + productId).val(); var minQty = jQuery('.minQty_' + productId).val(); var formkey = jQuery('[name="form_key"]').val(); var login = <?php echo $enquiryHelper->getCustomerLogin() ? $enquiryHelper->getCustomerLogin() : '0'; ?>; if (qty < minQty) { jQuery('.addToCartQty_' + productId).css("border", "1px solid red"); return false; } var inputData = {product: productId, sku: productSku, name: productName, quantity: qty, image: productImg, url: productUrl, form_key: formkey, options: selected_options }; console.log(inputData); jQuery.ajax({ url: "<?php echo $this->getUrl('presales/index/createenquiry'); ?>", //the page containing php script type: "POST", showLoader: true, data: inputData, success: function (result) { console.log(result); if (result.enquiry_status == "success") { var count = parseInt(jQuery(".enquiryCnt").html()); var newCount = parseInt("1"); var NewNanCount = count ? count : 0; var cnt = parseInt(NewNanCount + newCount); if (cnt > 0) { jQuery('.enquiryQtyMin').css('background', '#ff5501'); } console.log('count-' + cnt); jQuery(".enquiryCnt").html(""); jQuery(".enquiryCnt").html(cnt); jQuery(".miniEnqCount").html(cnt); jQuery("#add_to_enquiry_btn_" + productId).text("Added to Enquiry"); jQuery('.noEnquiryProducts').css('display', 'none'); jQuery('.enquiryQuotesection').css('display', 'block'); var html = ''; if (cnt == 1) { html += '<div class="arrow"></div>'; html += '<div class="modalEnquiry">'; html += '<div class="modal-content pa-3">'; html += '<span class="crossMini action close" onclick="closeMini()">✕ </span>'; html += '<div class="items-total">'; html += '<strong class="count miniEnqCount" >' + cnt + '</strong>'; html += '<span> Item in Cart</span>'; html += ' </div>'; html += '<div class="actions" style="text-align: center;">'; html += '<div class="primary">'; html += '<form action="<?= $block->escapeUrl($this->geturl() . 'presales/index/UpdateEnquiry/') ?>" method="post">'; html += '<input name="form_key" type="hidden" value="<?= $block->escapeHtml($enquiryHelper->getFormKey()) ?>" />'; html += '<input name="enquiry_status" type="hidden" value="processing" />'; if (login) { html += '<button id="top-cart-btn-checkout" class="action primary checkout" type="submit">Submit</button>'; } else { html += '<button id="top-cart-btn-checkout" class="action primary checkout" type="button" onclick="showMessage()" >Submit</button>'; } html += '</form>'; html += '</div>'; html += '</div>'; html += '<ol class="minicart-items miniEnquiryItems">'; } html += '<li class="productListForEnq">'; html += ' <hr>'; html += '<div class="product">'; html += '<a tabindex="-1" class="product-item-photo" href="' + productUrl + '" title="' + productName + '">'; html += '<span class="product-image-container" style="width: 75px;">'; html += '<span class="product-image-wrapper" style="padding-bottom: 100%;">'; html += '<img class="product-image-photo" src="' + productImg + '" alt="' + productName + '" style="width: 75px; height: 75px;">'; html += ' </span>'; html += ' </span>'; html += '</a>'; html += '<div class="product-item-details">'; html += '<strong class="product-item-name">'; html += '<a href="' + productUrl + '">' + productName + '</a>'; html += '</strong>'; if (result.attributeValue) { html += '<div class="options_' + result.product_id + ' product options" role="tablist" data-collapsible="true">'; html += '<span data-role="title" class="toggle" role="tab" aria-selected="false" aria-expanded="false" tabindex="0" onclick="showOptions(' + result.product_id + '); return false"><span>See Details</span></span>'; html += '<div data-role="content" class="content" id="options_' + result.product_id + '" role="tabpanel" aria-hidden="true" style="display: none;">'; html += '<strong class="subtitle"><span>Options Details</span></strong>'; html += '<dl class="product options list">'; jQuery.each(result.attributeValue, function (index, item) { html += '<dt class="label">' + item.label + '</dt>'; html += '<dd class="values">'; html += '<span>' + item.value + '</span>'; html += '</dd>'; }) html += '</dl>'; html += '</div>'; html += '</div>'; } html += '<div class="product-item-pricing">'; html += '<div class="price-container">'; html += '<span class="price-wrapper">'; html += ' <span class="price-excluding-tax" data-label="Excl. Tax">'; html += '<span class="minicart-price">'; html += '<span class="price">Price On Enquiry</span>'; html += '</span>'; html += '</span>'; html += '</span>'; html += '</div>'; html += '<div class="details-qty qty">'; html += '<form action="<?= $this->escapeUrl($block->geturl() . 'presales/index/UpdateEnquiry/') ?>" method="post">'; html += '<input name="form_key" type="hidden" value="<?= $block->escapeHtml($enquiryHelper->getFormKey()) ?>" />'; html += '<label class="label" for="' + result.item_id + '">Qty</label>'; html += '<input type="number" size="4" class="item-qty miniEnqCart cart-item-qty" maxlength="5" min="1" id="' + result.item_id + '" name="quantity[]" type="number" max-width="50px" value="' + qty + '" onkeyup="updateMini(' + result.item_id + ')";>'; html += '<input name="item_id[]" type="hidden" value="' + result.item_id + '">'; html += '<button class="update-cart-item" type="submit" style="display: none" id="update_' + result.item_id + '" title="Update">'; html += '<span>Update</span>'; html += '</button>'; html += ' </form>'; html += '</div>'; html += '</div>'; html += '<div class="product actions miniDel">'; html += '<div class="secondary">'; html += ' <a href="#" class="action delete miniDelBtn" title="Remove item" data-item-id="' + result.item_id + '" data-enq-id="' + result.enquiry_id + '" onclick="deleteEnquiry(' + result.item_id + ', ' + result.enquiry_id + ')">'; html += '</a>'; html += '</div>'; html += '</div>'; html += '</div>'; html += '</div>'; html += '</li>'; html += ''; html += ""; html += ''; html += ''; html += ''; if (cnt > 1) { jQuery(".miniEnquiryItems").append(html); } else { html += ' </ol>'; html += '<hr>'; html += '<div class="actions" style="text-align: center;">'; html += '<div class="secondary">'; html += '<a class="action viewcart" href="<?= $block->escapeUrl($this->getUrl() . "presales/index/index") ?>">'; html += '<span>View and Edit Cart</span>'; html += '</a>'; html += '</div>'; html += ' </div>'; jQuery(".enquiryBackground").html(html); } } else { console.log("failure"); } } }); } </script>
Hello @raju_a
Add this function
function deleteEnquiry(your parameter){ if(confirm("Are you sure you want to delete this?")){ alert('click yes'); } else{ alert('click not'); } }
This code adds a simple jquery confirmation box.
You may also add the Magento jquery popup modal.
Please refer to these links:
https://stackoverflow.com/questions/3519861/yes-or-no-confirm-box-using-jquery
https://devdocs.magento.com/guides/v2.3/javascript-dev-guide/widgets/widget_confirm.html
I hope it helps.
use below code:
jQuery(document).on("click", ".your_class, function(){ alert("confirm to delete?"); })
This will work because it will check your new added html elements and call on click of your new element.
Please give "kudos" and "accept" solution if it works for you.