I'm using the "alert" functionality from Twitter Bootstrap to display user notifications, like so:
<div class="notification alert alert-info">
<button type="button" class="close" data-dismiss="alert">×</button>
My message goes here
</div>
These notifications are persistent until the user dismisses them, so when the user clicks the "close" button I would like to fire off an ajax query to the server indicating that the notification should be permanently dismissed.
I'm using jQuery's on() function like so:
$(document).on('click', '.notification .close', function (e) {
alert('hi!');
console.log(e);
e.preventDefault();
});
This works fine, but I'm wondering if there is there a "Bootstrappy" way of doing this?
In Bootstrap 3.0 you need to use namespaced event name:
$('.alert').bind('closed.bs.alert', function () {
var id = $(this).data('some_id');
$.get('closed.php?id='+id);
})
According to the Bootstrap docs on alerts, I'd bind to the closed or close event, which are custom to Bootstrap.
$(document).on('close', '.alert', function ()
{
var id = $(this).data('some_id');
$.get('closed.php?id='+id);
});
there are two events exposed via the API:
close - which is fired immediately
closed - fires after all animations have completed. I'd opt for close - this way you do it immediately and if they navigate / close before the animation completes, it will still be hidden.
The data attribute is to be able to have the server side script differentiate between the alerts. The markup would be:
<div class="alert" data-some_id='foobar'>
Close me!
</div>
Related
I am actually trying to try to add an event to an existing form.
This form is from a Wordpress plugin, so I don't have access to its code.
What I want to do is keep the event of this form, adding an operation (let's say a simple alert), and then preventing the default submit effect of the button.
Here is my code:
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
[salesforce form="1"] // this is the form generated by the plugin
</div>
</div>
<script>
var form = document.getElementById("sf_form_salesforce_w2l_lead_1");
</script>
So here, I'd like to have the following operations on my form :
Saleforce effects, which send my form in my saleforce account, which is included in the plugin
Another function, as we said, a simple alert();
Preventing default effect of forms, meaning no page refresh and no submit, in order to do my own redirect somewhere else
I have no idea if this is possible, but if yes thanks for your help!
You should be able to attach multiple event Handlers to your form :
function originalEventHandler() {
console.log('Original');
}
function additionalHander() {
alert('New handler');
}
$('form').on('submit', function(){
originalEventHandler();
});
$('form').on('submit', function(e) {
e.preventDefault();
additionalHander();
});
JSFiddle
I am working on a final project due in less than 24 hours and am working on the final requirement, which is to add custom Javascript to my code that is not complete bootstrap.
I have a bootstrap created form with a submit button. I used jQuery to trigger a bootstrap modal to appear displaying a success message upon the clicking of that button. The modal closes when the user clicks the "x" or clicks outside the modal window.
Once the modal window closes, I am attempting to hide the form from the page using jquery. Here is my code snippet below:
//the modal submit button click event
$('#myModal').modal(show);
//the form dissapears after the modal is closed. #formToggle is the id applid to the <form>
$(document).ready( function() {
$('#formToggle').on('show', function(){
$('#formToggle').remove();
});
});
Listen when the modal is closed
$(document).on('hidden.bs.modal', '#myModal', function () {
$("#formToggle").hide();
});
https://jsfiddle.net/yd9nffxe/6/
use hidden.bs.modal:
$('#myModal').on('hidden.bs.modal', function(){
// do your stuff here...
});
hidden.bs.modal occurs when the modal is fully hidden (after CSS transitions have completed)
Does ReCaptcha v2 expose any client side events? I am looking specifically to identify when the Captcha response has been returned once the box is ticked, so I can reveal the "Continue" button below.
Without this it is possible for the user to click the checkbox then quickly click the submit button before the captcha response is back.
I could possible add my own click event handler to the class recaptcha-checkbox-checkmark and poll the visiblity of the tick, I just wondered if there was a simpler way to do this?
$(".recaptcha-checkbox-checkmark").click(function() {
//...Poll for visibility of tick
});
Another solution is to set data-callback directly on the g-recaptcha div, like this
<script type="text/javascript">
var imNotARobot = function() {
console.info("Button was clicked");
};
</script>
<div class="g-recaptcha" data-callback="imNotARobot" data-sitekey="key"></div>
You can configure reCAPTCHA to give a callback on successful validation using the data-callback attribute on the g-recaptcha tag or via the 'callback' parameter if using explicit rendering.
See
https://developers.google.com/recaptcha/docs/display#render_param
Example using explicit rendering:
var myCallback = function(val) { console.log(val); };
grecaptcha.render(
document.getElementsById('my-recaptcha-placeholder'),
{
callback: myCallback,
sitekey: mySiteKey
});
i have modal with button (Save)
<button type="button" class="btn btn-success btn-sm" data-dismiss="modal" onclick="do_save()">Save
</button>
how to prevent closing when do_save() function failed? (for example when some data fails to validate)
Don't use the data-dismiss="modal" and let your function close (hide) your modal:
<button type="button" class="btn btn-success btn-sm" onclick="do_save()">Save</button>
"
function do_save()
{
if(Math.floor(Math.random() * 2)==1)
{
console.log('success');
$('#myModal').modal('hide');
return;
}
console.log('failure');
return false;
}
If you catch the click-event from the button like this:
$('#buttonId').off('click').click(function(clickEvent){
//enter code here
});
you actually can prevent the closing of your modal. For this, depending on your situation, you will find these two functions useful:
clickEvent.preventDefault();
clickEvent.stopPropagation();
If I understood this site (which is in German)
http://www.mediaevent.de/javascript/event-handler-default-verhindern.html
correctly, preventDefault() stops the immediate default action (such as following a link). However, the event itself will still travel through the DOM and can be "heard" by various event listeners, one of these is the event listener that hides the modal. For this the second function is needed, which stops the event's travel through the DOM. Thus, it can't be heard by the hiding listener and the window won't be closed (hidden). Therefore, I suggest to implement the functions like so:
$('#buttonId').off('click').click(function(clickEvent){
//enter code here
var myDataIsValid = true;
// check if Data is valid => myDataIsValid = true or false
if(myDataIsValid){
//do Stuff
}else{
clickEvent.preventDefault();
clickEvent.stopPropagation();
//do other Stuff
}
});
In my code, I only need to use stopPropagation(), as my default action is wanted, so you can use the two functions independently.
note: This solution only was tested with a Firefox browser
Since you are using jQuery anyway, try not to have JavaScript/jQuery embedded in your code.
$('#buttonId').on( 'click', function () {
// either call do_save or embed the contents of do_save in here
var myDataIsValid = true; // change to call validator function
if (myDataIsValid) {
$('#myModal').modal('hide');
}
return true; // value depends on whether you want stopPropagation or not.
});
HTML:
<button id="buttonId" type="button" class="btn btn-success btn-sm">Save</button>
As an alternative, you can probably prevent closing by intercepting the 'hide' event and returning false from that.
If you are using bootstrap 4 this is called a "static backdrop" and can be achieved by adding the data-backdrop="static" attribute
<div class="modal fade" id="modalExample" data-backdrop="static">
src: Bootstrap 4 Modal - Static backdrop
We have a form within a modal window.
I have a submit button, which saves to db. And I would like to simultaneously close the modal window.
The function for close is correct, just not my usage lol.
<input type="submit" name="upload_thumbnail" value="Save Thumbnail" id="save_thumb" onclick="$.lightbox().close();" />
The modal window , contains iframe with php / html within it, this form is part of that iframed html code.
Any suggestions ?
To close the dialog when the element with ID save_thumb is clicked:
$('#save_thumb').click(function ()
{
$.lightbox().close();
});
You might want to bind to its parent form's submit event, however, since keyboard events won't trigger the click handler:
$('#my_form_id').submit(function ()
{
$.lightbox().close();
});
Whichever you decide on, make sure to wrap it up in a document ready handler.
Add this javascript to your file and remove the onclick attribute on your button. Make sure the javascript is added inside tags.
$(document).ready(function(){
$('#save_thumb').click(function (){
$.lightbox().close();
});
});
Use the bind function,
$(function() {
$("#save_thumb").bind("click", function() {
$.lightbox().close();
});
});