Suppose to have an html page and when I click on one button I read:"
I need to handle when I click "ok"
that is html code:
<button data-bb-handler="confirm" type="button" class="btn btn-primary">OK</button>
That is my jquery code:
(function() {
$(document).on('click','button[data-bb-handler="confirm"][type="button"]',function(){
console.log("MAREEEEEEEEEEEEEEEEE "+$(this).length);
});
}());
It doesn't work. Anyone can help me? Some other method?
This piece of Jquery code should work:
$('button[data-bb-handler="confirm"][type="button"]').click(function(){
console.log("MAREEEEEEEEEEEEEEEEE "+$(this).length);
});
Let me know if it did not work. Check this Working Codepen
I am suggesting to use Bootbox JS. it is based on Bootstrap layout.
You can achieve that you need as mentioned below
bootbox.confirm("Are you sure?", function(result) {
// write your code what you need to handle on OK button
});
You may use the event show.bs.modal:
//
// On modal show
//
$(document).on('show.bs.modal', function (e) {
//
// attach the click event for OK button
//
$('button[data-bb-handler="cancel"][type="button"]').on('click', function (e) {
console.log("CANCEL BUTTON PRESSED");
});
//
// attach the click event for CANCEL button
//
$('button[data-bb-handler="confirm"][type="button"]').on('click', function (e) {
console.log("OK BUTTON PRESSED");
});
});
$(document).ready(function() {
$('#myBtn').on('click', function (e) {
bootbox.confirm("Are you sure you wish to discard this post?", function () {
});
}).trigger('click');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://github.com/makeusabrew/bootbox/releases/download/v4.4.0/bootbox.min.js"></script>
<button id="myBtn" type="button" class="btn btn-primary">Click Me</button>
This is the bootbox.confirm message. For deatils you may refer to Bootbox.js.
When you click on the ok or cancel the dialog dom element is removed from the document.
So you have to use the callback function:
$(document).on('click.bootbox', function(e, result){
console.log("Pressed "+ result);
});
bootbox.confirm("Are you sure you wish to discard this post?", function(result) {
$(document).trigger('click.bootbox', result);
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://github.com/makeusabrew/bootbox/releases/download/v4.4.0/bootbox.min.js"></script>
Related
There are a ton of questions on SO asking why jQuery method 'submit()' is NOT triggering submit event.
I am asking the exact opposite:
Why is jQuery triggering submit event when calling submit method and how to get around this?
Here a simple JSFiddle showing the problem:
https://jsfiddle.net/vncu675x/
$(function () {
var i = 0;
$("form").find(":submit").text(Math.random());
$("form").submit(function (e) {
e.preventDefault();
if (confirm("Are you sure? " + i++)) {
$("form").submit();
}
});
});
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script>
</head>
<body>
<form action="/">
<button type="submit">Submit</button>
</form>
</body>
</html>
I think it's a jQuery matter because pure JavaScript implementation is working as expected.
The line
$("form").submit();
is the same as $("form").trigger("submit") - ie it raises the submit event, which is the event that you're handling.
Instead, use the js native submit event by converting the jquery object to a DOM object:
$("form")[0].submit();
Even though they have the same name (submit) the two functions are for different types so have different actions.
Updated snippet:
$(function () {
var i = 0;
$("form").find(":submit").text(Math.random());
$("form").submit(function (e) {
e.preventDefault();
if (confirm("Are you sure? " + i++)) {
$("form")[0].submit();
}
});
});
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script>
</head>
<body>
<form action="/">
<button type="submit">Submit</button>
</form>
</body>
</html>
I have this piece of code
window.onload = function () {
$('#btnFilter').click(function (e) {
btnFilter(e);
});
}
The function works on button click but I need that the button is clicked when the page opens. I've tried things like $('#btnFilter').trigger( "click" ); but the button still not clicked on page opening. How can I achieve this thing? I can't just call the function because I get the error "Cannot read property 'currentTarget' of undefined" beacuse I don't give any event as parameter.
function btnFilter(e) {
element = e.currentTarget.parentElement;
//other code
}
You can try like this:
$(document).ready(function(){
$('#btnFilter').trigger('click');
});
$(document).on('click','#btnFilter',function(e){
btnFilter(e);
});
function btnFilter(e)
{
element = e.currentTarget.parentElement;
}
You can change your 'btnFilter' to accept the button instead of the event:
function btnFilter(element) {
element = element.parentElement;
...
}
$(function() {
$("#btnFilter").click(function(e) { btnFilter(this); return false; });
// Pass the button to the filter operation on load
btnFilter($("#btnFilter")[0]);
});
alternatively, accept the parent element directly
$(function() {
$("#btnFilter").click(function(e) { btnFilter(this.parentElement); return false; });
// Pass the button parent to the filter operation on load
btnFilter($("#btnFilter")[0].parentElement);
});
If you use jquery i would keep it coherent and not mix it with vanilla javascript. A Jquery solution is:
$(document).on("click", "#btnFilter", btnFilter);
$(document).ready(function(){$("#btnFilter").click()});
or
$(document).on("click", "#btnFilter", btnFilter);
$(document).ready(btnFilter);
In you solution the error is the event binding: when you bind the event to #btnFilter on page load, the element is not existing yet, so the function cannot be triggered.
jQuery Solution:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").trigger("click");
});
</script>
</head>
<body>
<button onclick="alert('clicked')">Click</button>
</body>
</html>
Very simple code, for some reason nothing I try will work! I have obviously imported Jquery, jqueryUI, ajax, all the things I need imported (more than once!). But for some reason this button does not want to be clicked using Jquery! I got it to work with onClick, but I would like to be using jquery for this. SOS!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="jquery-1.11.3.min.js"></script>
<script>
$("#heyo").click(function(){
alert();
});
$("input").click(function(e){
var id1 = e.target.id;
alert(id1);
});
$('input[type="button"]').click(function(){
alert();
});
function pie(){
//alert();
}
</script>
<body>
loading...
<input type="button" id="heyo" onclick="pie()" value="ff" />
</body>
Wrap you jquery code with $(document).ready(function() {}) to make sure all the DOM objects have been loaded before accessing them with jQuery:
$(document).ready(function() {
$("#heyo").click(function(){
alert();
});
$("input").click(function(e){
var id1 = e.target.id;
alert(id1);
});
$('input[type="button"]').click(function(){
alert();
});
});
I need to catch the click (or hide) event of a alertify.js event. I set up the time to 0 in order to wait to the user for click in the message. Is there any way to attach a function to this event?
<link rel="stylesheet" href="alertify.js-0.3.11/themes/alertify.core.css" />
<link rel="stylesheet" href="jalertify.js-0.3.11/themes/alertify.default.css" id="toggleCSS" />
<script src="alertify.js-0.3.11/lib/alertify.min.js"></script>
<script>
alertify.log('test','',0);
</script>
You can attach an event to the document, and see if the element clicked on has a class that matches the class names attached to alertify logs (alertify-log).
For example, you could use code like this:
document.body.addEventListener('click', function (e) {
if(e.target.className.indexOf('alertify-log') > -1) {
console.log('Clicked on a log');
}
}, false);
Demo
Try
alertify.log('test',function(){
//function here
});
By default http://amsul.ca/pickadate.js/index.htm render the widget when the user click on the input.
I created an icon and I want, when the user click on it, to show the widget. I tried with:
$('#my-icon').on('click', function(){
$("input.dateFormat").pickadate();
$("input.dateFormat").click(); // Tried also with trigger
});
But the calendar does not show.
There is a way?
I don't think triggering a click (the accepted solution) is the right way of going about this. Using version 3 API of pickadate.js, the open/close options are outlined here: http://amsul.ca/pickadate.js/api.htm#method-open-close
The code would then be something like:
var $input = $('.datepicker').pickadate();
var picker = $input.data('pickadate');
$('.calendarIcon').click( function( e ) {
// stop the click from bubbling
e.stopPropagation();
// prevent the default click action
e.preventDefault();
// open the date picker
picker.open();
});
I don't really know this library either, but a quick look at their "api" page makes me think you're probably looking for something like this:
var picker = $("input.dateFormat").pickadate();
$("#my-icon").on('click', function() {
if(picker.get('open')) {
picker.close();
} else {
picker.open();
}
}
This worked for me:
<html><head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="http://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.js"></script>
<script type="text/javascript" src="http://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.date.js"></script>
<script type="text/javascript" src="http://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.time.js"></script>
<link rel="stylesheet" type="text/css" href="http://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/classic.css">
<link rel="stylesheet" type="text/css" href="http://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/classic.date.css">
<link rel="stylesheet" type="text/css" href="http://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/classic.time.css">
<script type="text/javascript">
$(window).load(function(){
$('#inputDatetime').pickadate({
//format: 'dd. mmmm yyyy',
format: 'dd-mm-yyyy',
formatSubmit: 'dd-mm-yyyy',
});
});
$(document).ready(function() {
$("#my-icon").click(function(){
$( '#inputDatetime' ).pickadate("open"),
event.stopPropagation(),
event.preventDefault()
});
});
</script></head>
<body>
<input
id="inputDatetime"
name=""
class=""
type="text"
placeholder="Try me…">
<img src='https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/calendar.png' id="my-icon">
</body>
</html>
i don't realy know this lib.
You should try to keep your calandar init outside your handler, and then trigger a click in your input :
$("input.dateFormat").pickadate();
$(document).ready(function() {
$("#my-icon").click(function(){
$( '.input.dateFormat' ).trigger("click")
});
});