I don't want the modal to close when I click the 'cancel(delete)' button, only when losing focus or close button is clicked. How can I prevent closing?
The default cancel button is for closing the dialog. instead of hacking that button for another task, you can add custom buttons as html, and handle their click events manually: (Run it live)
var onBtnClicked = (btnId) => {
// Swal.close();
alert("you choosed: " + btnId);
};
Swal.fire({
title: "What you want to do?",
icon: "warning",
showConfirmButton: false,
showCloseButton: true,
html: `
<p>select an action</p>
<div>
<button class="btn btn-primary" onclick="onBtnClicked('reply')">Reply</button>
<button class="btn btn-danger" onclick="onBtnClicked('delete')">Delete</button>
</div>`
});
Related
I have change Header cart in formation like remove cart icon and add
HTML tag on it.
language/english/common/cart.php
$_['text_items'] = '<p>Mycart</p><span><em>%s</em> item(s) - %s</span>';
common/cart.tpl
<button type="button" data-toggle="dropdown" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-inverse btn-block btn-lg dropdown-toggle"><!-- <i class="fa fa-shopping-cart"></i> --><span id="cart-total"><?php echo $text_items; ?></span></button>
It work fine but when i click on addtocart button it load using Ajax
and the previous modified cart tags reset to default. when refresh it
again work. any one knew about this.
It is happened due to when we click on addtocart button on product
detial page it will call call function on click event and load
checkout/cart using ajax so we need to make synchronize common/cart
information and chekout/cart infourmation
I solve the issues as
follows:
in product.tpl or other page where you add addtocart
inside
$('#button-cart').on('click', function() {
we will find
if (json['success']) {
$('.breadcrumb').after('<div class="alert alert-success">' + json['success'] + '<button type="button" class="close" data-dismiss="alert">×</button></div>');
$('#cart > button').html('<!--<i class="fa fa-shopping-cart"></i>--> ' + json['total']);//here you can get the cart icon and comment out he icon code
$('html, body').animate({ scrollTop: 0 }, 'slow');
$('#cart > ul').load('index.php?route=common/cart/info ul li');
}
for add other tag inside cart info modify on
language/english/checkout/cart.php
$_['text_items'] = '<p>Mycart</p><span><em>%s</em> item(s) - %s</span>';
and it work for me
I tried to solve the problem but I can't.
When upload a file in to FireFox I can not uploaded,
but file will uploading in to Opera okay.
Along Dropzone.js I used bootstrap and jquery as library.
In my opinion the problem is addEventListener?
Example video with a firebug: enter link description here
Snippet:
Dropzone.options.myDropzone = {
// Prevents Dropzone from uploading dropped files immediately
autoProcessQueue: false,
parallelUploads: 10,
thumbnailWidth: 120,
thumbnailHeight: 120,
init: function() {
var submitButton = document.querySelector("#submit-all");
var myDropzone = this;
submitButton.addEventListener("click", function() {
myDropzone.processQueue(); // Tell Dropzone to process all queued files.
});
this.on("addedfile", function(file) {
// Create the remove button
var removeButton = Dropzone.createElement("<button class='btn btn-xs btn-warning'>Remove file</button>");
// Listen to the click event
removeButton.addEventListener("click", function(e) {
// Make sure the button click doesn't submit the form:
e.preventDefault();
e.stopPropagation();
// Remove the file preview.
myDropzone.removeFile(file);
// // If you want to the delete the file on the server as well,
// // you can do the AJAX request here.
});
// Add the button to the file preview element.
file.previewElement.appendChild(removeButton);
});
} //dropzone init
}; //dropzone options
<script src="https://raw.githubusercontent.com/enyo/dropzone/master/dist/dropzone.js"></script>
<form action="upload/do_upload" class="dropzone" id="my-dropzone"></form>
<button type="button" class="btn btn-primary"><span id="submit-all">Submit all files</span></button>
<button type="button" class="btn btn-default">Reset</button>
Here you have a SPAN id="submit-all"
<button type="button" class="btn btn-primary"><span id="submit-all">Submit all files</span></button>
Then you have a querySelector for it:
var submitButton = document.querySelector("#submit-all");
Buttons have a click event, not spans. Maybe if you change the first line to this it should work:
<button type="button" id="submit-all" class="btn btn-primary"><span>Submit all files</span></button>
Give it a try and let us know.
Please find below my code:
Template of customer search form
<script type="text/x-kendoui-template" id="customer-search-view-template">
<div class="searchform" id="searchCustomer">
<form class="frmSearch">
<input name="searchTxt" data-bind="value: customerName" class="k-textbox" />
<button class="k-button" data-bind="click: searchClicked">Search</button>
<button class="k-button" data-bind="click: newClicked">New</button>
</form>
</div>
</script>
customer-search.js where loading above template and creating viewmodel object
$(function(){
var views = {};
templateLoader.loadExtTemplate("customer-search-view-template", "../views/customer-search-template.html");
var layout = new kendo.Layout($('#customer-search-view-template').html());
layout.render($("#main"));
// Create an observable view model object.
var customer = kendo.observable({
customerName: "John",
searchClicked: function() {
this.set("customerName", "Search clicked");
},
newClicked: function() {
this.set("customerName", "New clicked");
}
});
// Bind the view model to the personFields element.
kendo.bind($('#searchCustomer'), customer);
});
When I click the search button, the text is set in the textbox but this also refresh the page with ?searchTxt=Search+clicked in the address bar.
May I know why this button click refresh the page and how do I stop refreshing the page on button click ???
I would try and place the attribute 'type' for each like so:
<button type="button" class="k-button" data-bind="click: searchClicked">Search</button>
<button type="button" class="k-button" data-bind="click: newClicked">New</button>
The page thinks that each are performing a form submit action, but by placing the type attribute, you can access the event you intended for search. You may not need your form tags if you are not going to post any data, but rather just a js event handler. Good luck.
The reason is that you are inside a <form>, which has no settings (URL, method, etc), so the browser's default behavior is probably to perform a GET to the current URL (which is a refresh). You could just use <div> instead of <form> if you just want to execute that method.
I am trying to assign popover from twitter bootstrap to an element which is loaded via ajax and I have this:
$(document).on("click", ".checkRezolvataTrecut", function(event){
switch(dataCheckTrecut[1]) {
case '02':
var luna = "Februarie";
break;
}
$(".checkRezolvataTrecut").popover({
placement: "top",
content: "<button class='btn btn-default mutaTrecut' style='width: 100px;'>" + luna + "</button><button class='btn btn-default mutaCurent' style='width: 100px;'>Luna curenta</button>",
html: true
});
});
The problem is that on first click nothing happens. After the first click it works. As a mention, I didn't understood bootstrap js too well. Any ideas?
It's normal that on the first click nothing happens, because it's on the first click that you are setting the popover, once set (in the first click) the popover will show in the next clicks,
if you want it to show on the first click you should set the popover when jquery is ready :
$( document ).ready(function() {
switch(dataCheckTrecut[1]) {
case '02':
var luna = "Februarie";
break;
}
$(".checkRezolvataTrecut").popover({
placement: "top",
content: "<button class='btn btn-default mutaTrecut' style='width: 100px;'>" + luna + "</button><button class='btn btn-default mutaCurent' style='width: 100px;'>Luna curenta</button>",
html: true
});
});
I have a JQGrid that has an 'Add' button. In my grid, when the 'Add' button is clicked, a single 'Add' form is opened. The 'Add' form has two default buttons: 'Submit' And 'Cancel'. I want to execute some code on the click event of the Cancel button. I'm not sure how to handle this does anyone have any suggestions?
If I understand you correctly, you want to execute a jquery function upon clicking the CANCEL button. This is what I would do:
<input type="button" value="Cancel" id="btnCancel" />
$('#btnCancel').on('click', function() {
//DO STUFF
});
OR
$('#btnCancel').click(function() {
//DO STUFF
});
OR you could put a function call on the input itself:
function myFunction() {
//DO STUFF
}
<input type="button" value="Cancel" id="btnCancel" onclick="return myFunction();" />