We Keep Coding

Call user defined jQuery function with JS

I use a jQuery window libray https://github.com/humaan/Modaal
which triggers events this way $("class of element").modaal({arg1, arg2,...});
--- I updated my question here to make it more general and used an iframe / Html instead of an external svg ---
To trigger an element e.g. in an external Html which is loaded within an iframe, I applied the following code to the iframe:
<iframe src="External.html" id="mainContent" onload="access()"></iframe>
which calls this function:
function access() {
var html = document.getElementById("mainContent").contentDocument.getElementById("IDofDIVelement");
html.addEventListener('click', function() {clicker();});
}
function clicker()
{
// console.log('hooray!');
$("#mainContent").contents().find("IDofDIVelement").modaal({});
//return false;
}
Actually it will only work on every second click. Any idea what I did not consider properly?
Best

You do not need to wait windows loading but iframe only:
$(function() {
$("#mainContent").bind("load",function(){
var myIframeElement = $(this).contents().find(".modaal");
myIframeElement.modaal({
content_source: '#iframe-content',
type: 'inline',
});
});
});

The reason why it did not work was that the iframe was not completely loaded, while jQuery tried to attach the function. As $(document).ready(function(){} did not work, the workaround was to initialize it with
$( window ).on( "load",function() {
$("#mainContent").contents().find("IDofDIVelement").modaal({});
});
This worked properly to attach the functionallity to an element within the iframe.
Actually modaal will vanish the envent handler after the overlay was opened and closed again.
So maybe someone wants to trigger an iframe element for modaal, too, here is a setup which would solve this issue.
(It can be optimised by #SvenLiivaks answer):
$(window).on("load", function() {
reload();
});
function reload() {
var length = $("#iframeID").contents().find("#IDofDIVelement").length;
// The following check will return 1, as the iframe exists.
if (length == 0) {
setTimeout(function() { reload() }, 500);
} else {
$("#iframeID").contents().find("#IDofDIVelement").modaal({
content_source: '#modalwrapper',
overlay_close: true,
after_close: function reattach() {
reload();
}
});
}
}

Bootstrap-confirmation not respecting options

Just adding the bootstrap-confirmation extension for Bootstrap popover to some buttons on a project. I'm having issues with the options not being respected. I'm trying to get the popups to work as singletons and dismiss when the user clicks outside of them singleton and data-popout options, respectively - both set to true. I'm also not seeing any of my defined callback behavior happening.
I defined the options both in the HTML tags and in a function and neither works. Still getting multiple boxes and they don't dismiss as expected.
My JS is loaded after all other libraries and is in my custom.js file in my footer.
JS is as follows:
$(function() {
$('body').confirmation({
selector: '[data-toggle="confirmation"]',
singleton: true,
popout: true
});
$('.confirmation-callback').confirmation({
onConfirm: function() { alert('confirm') },
onCancel: function() { alert('cancel') }
});
});
An example of the box implemented on a button in my HTML is the following:
<a class="btn btn-danger" data-toggle="confirmation" data-singleton="true" data-popout="true"><em class="fa fa-trash"></em></a>
Any pointers would be appreciated. I even changed the default options in the bootstrap-confirmation.js file itself to what I want and still no luck.

Turns out I needed to rearrange a couple things to get this to work. I've left in the last_clicked_id etc stuff as I needed to add that to get the id value of what I'd just clicked.
// Product removal popup logic
var last_clicked_id = null;
var last_clicked_product = null;
$('.btn.btn-danger.btn-confirm').click(function () {
last_clicked_id = $(this).data("id");
last_clicked_product = $(this).data("product");
});
$('.btn.btn-danger.btn-confirm').confirmation({
singleton: true,
popout: true,
onConfirm: function () {
alert("DEBUG: Delete confirmed for id : " + last_clicked_product);
// TODO: Add AJAX to wipe entry and refresh page
},
onCancel: function () {
alert("DEBUG: Delete canceled for id : " + last_clicked_product);
}
});
I was a step ahead of myself with the callback logic which was not getting executed. Fixed by simply adding it to onConfirm: and onCancel: key values in the .confirmation() function. A bit of a RTFM moment there but this was unfortunately not very clear in the documentation.

Set cookie in mod Remodal When the window closes and reappears anymore

I'm using the Remodal - modal Window script, but How can I configure when that window closes it doesnot appear anymore for the visitor?

use the event given in documentation and set some cookie, before showing modal to the user check that cookie
$(document).on('closed', '.remodal', function (e) {
console.log('closed');
// set cookie here
console.log(e.reason);
});

Using js-cookie it would work something like this:
$(document).on('closed', '.remodal', function (e) {
console.log('closed' + (e.reason ? ', reason: ' + e.reason : ''));
Cookies.set('remodal_closed', '1', { expires: 7 });
});
Then check that the cookie doesn't exist before opening remodal:
$(document).ready(function() {
if(!Cookies.get('remodal_closed')) {
setTimeout(function() {
$('[data-remodal-id=modal]').remodal().open();
}, 3000); //set a more realistic time
}
});
You might also need to set the cookie on confirmation:
$(document).on('confirmation', '.remodal', function () {
console.log('confirmation');
Cookies.set('remodal_closed', '1', { expires: 7 });
});

Refresh parent page after closing modal

When a user opens this modal, they can see their shopping cart information and delete items(other jquery) on the modal.
But how could I refresh the parent page after a user closes up the modal?
I read several posts but did not find any useful information for my situation. I know I need to use something like window.location.reload(true); Where should I put that in the code?
$(function(){
$('#main').off('click.login').on('click.login',function(){
$('body').loadmodal({
id:'cart',
title:'Shopping Cart',
url:'/cartDisplay/',
width: '550px',
});
});
});
Update
$(function(){
$('#main').off('click.login').on('click.login',function(){
$('body').loadmodal({
id:'cart',
title:'Shopping Cart',
url:'/polls/cartDisplay/',
width: '550px',
});
});
$('#cart').on('hidden', function () {
window.location.reload(true);
})
});

Try this.
$("#cart").on('hide', function () {
window.location.reload();
});

I assume that you are using Twitter Bootstrap
Bootstrap 3
$('#cart').on('hidden.bs.modal', function () {
window.location.reload(true);
})
Bootstrap 2.3.2
$('#cart').on('hidden', function () {
window.location.reload(true);
})

As far as I can tell, jquery.loadmodal.js has bootstrap.js as a dependency, so its modals are still subject to bootstrap's methods.
In that case, you can simply bind to hidden.bs.modal
...
$('#yourModal').on('hidden.bs.modal', function () {
location.reload();
});
...

Where you open the nyroModal window, just add this callback function:
callbacks: {
afterClose: function() {
window.location.reload();
}
}

Fire javascript (lightbox) once per session

Hey all I have a quick javascript question! Frustrated trying to get it sorted.... right now my modal div shows after 10 seconds which is right, but I want to only show it ONCE per session. Here's my current code:
<script type="text/javascript">
$(function() { // wait for the DOM
setTimeout(function () {
var $modal = $('#free-awesome'); // your selector; cache it; only query the DOM once!
$modal.modal('show'); // show modal; this happens after 10 seconds
setTimeout(function () {
$modal.modal('hide'); // hide modal;
}, 50000);
}, 10000);
});
</script>
Any ideas how I can adapt that javascript to show once per visit/session?
I'm quite new to javascript so if you could let me know exactly what to swap the above out for that'd be great!
Thanks in advance

You can use the session storage:
if(!sessionStorage.hidemodal) {
// your code ...
sessionStorage.hidemodal = true;
}