We have a scenario whereby when particular buttons on our website are clicked the processing takes 10 seconds or so - unfortunately there's not much we can do about this in the short-term because it's the time it takes to write data up to Dynamics CRM.
As a short-term solution, we wanted to show a bootstrap modal alerting the user that something is still happening..i.e. it's processing. We thought we would show the modal after about 1 or 2 seconds, that way if the process finished quickly the user wouldnt even see the modal, if it was slow they would.
So, we start with a button in our HTML:
<input type="submit" value="Continue" class="link-button large-plus-link-button primary" data-toggle-processing-modal="true"/>
Under which is the modal itself:
<div id="processingModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal-blogpost-label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
Loading...
</div>
</div>
</div>
Then we have a javascript function to show the modal:
$("[data-toggle-processing-modal='true']").on('click', function(e) {
setTimeout(function () {
$('#processingModal').modal('show');
}, 1000);
})
This works in all desktop browsers that we've tested so far, and mobile versions of Android, however the modal doesnt show at all on IOS devices. I believe it is something to do with the fact that the page has started submitting and the reason I think this is because if I prevent the page from submitting by adding e.preventDefault() within the javascript function, it works! BUT, the page doesn't get submitted of course!
I've racked my brains, but I can't seem to think of a way around this - can anyone suggest any ideas?
Thanks in advance
Kind regards,
dotdev
Related
Im trying something which is kinda easy but im having some problems with it and i would like to get done it today.
I have a website page which has the following:
<button type="button" class="btn btn-primary btn1" data-toggle="modal" href="https://teespring.com/es/camiseta-gymsroka-deportiva?tsmac=store&tsmic=sroka-merchandising-2#pid=373&cid=100035&sid=front" data-target="#myModal" >Pedir ahora</button>
I have an eventListener with jQuery like this:
$('.btn1').on('click', function(e) {
e.preventDefault();
var url = $(this).attr('href');
$(".modal-body").html('<iframe width="100%" height="100%" frameborder="0" scrolling="no" allowtransparency="true" src="'+url+'"></iframe>');
});
so when the button is clicked it loads a modal and inside that modal it loads the wanted site on the href attribute, my modal coda btw is this:
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
aria-labelledby="myLargeModalLabel" aria-hidden="true" id="myModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
</div>
</div>
</div>
</div>
Pretty easy modal. Well the problem it comes when i click the button, on chrome it works, it opens the modal and it loads the url correctly, but it says few errors on the console.log like this:
Invalid 'X-Frame-Options' header encountered when loading 'https://teespring.com/es/camisa-de-tirantes-gymsroka?tsmac=store&tsmic=sroka-merchandising-2#pid=408&cid=100232&sid=front': 'ALLOW-FROM https://www.facebook.com' is not a recognized directive. The header will be ignored.
in firefox it tells me the error but it doesn't load anything...
How i can fix this? If there is a possible fix or how you guys would have made this? My objective is to have few items on my website and "sell" them to the users, but the sell process is made by another company so its easier and cheaper for me. How i can do it? Thank you team!
That error occurs because the website you are trying to load inside the Iframe is denying access to load using http headers.
The website should allow that by configuring the X-Frame-Options header
You can read more here.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
i've some problem that make make head feels so heavy... i've searched for the answer in this forum, but the problem still not solve.
my problem is i've a button that link to modals. when first time after the page refreshed the modal open while the button clicked. but not for the second time.
i've check the log and the log said
TypeError: $(...).modal is not a function[Learn More].
if i refreshed the page, it will only work once, and the second click of the button, the modals not open again...
this is my button HTML view code..
<button class="btn btn-info btn-sm btn-labeled" type="button" id="tambahUser" data-toggle = "modal" value="<?= Url::to(['/module/create'],true)?>">
this is my modal
<div id="modalSignUpSm" tabindex="-1" role="dialog" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header bg-info">
<button type="button" class="close" data-dismiss="modal" id="tutupModal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Colored Header Modal</h4>
</div>
<div class="modal-body">
<div id="modalContent"></div>
</div>
</div>
</div>
</div>
and this is my js code that responsible for handling click event of the button
$('#tambahUser').click(function(event){
$('#modalSignUpSm').modal({
backdrop: 'static',
keyboard: false,
})
.modal('show')
.find('#modalContent')
.load($(this).attr('value'));
});
$('#tutupModal').click(function(){
$('#modalSignUpSm').modal('close');
});
this is my controller (i'm using Yii2) of Module/create
public function actionCreate()
{
$model = new Module();
if ($model->load(Yii::$app->request->post()) && $model->save()) {
return $this->redirect(Url::to(['/paneladm/pengaturan/module',true]));
} else {
return $this->renderAjax('create', [
'model' => $model,
]);
}
}
My Question is why the modals only open once and after that, the button stuck..? how to resolve that...
Note: - i'm new on jQuery, and i will very thanks for every answer.
- i've search on this forum and try to resolve with create a button and every this button clicked will be firing the .modal('close') but still not work
You should either use Bootstraps data-attributes to trigger the modal on and off, or use trigger via javascript manually. Right now you are trying to do both. See this example.
So I would remove the bootstrap data-attributes and then make sure your bootstrap script is loaded before your own javascript.
I have an iframe hidden via a Bootstrap modal which contains a Google Form URL.
<div class="modal fade" id="sugestaoPL" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">My Modal Title</h4>
</div>
<div class="modal-body">
<iframe src="<?php echo ot_get_option('iframe_url'); ?>"></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Everytime I try to leave or reload a page, the browser advices me that default "Are you sure you want to leave this page, unsaved changes will be lost" message, probably because I'm leaving the page with the Google Form untouched.
Since in most use cases my user won't let the modal visible and therefore will not use the Google Form, I'd like to disable this default message. I know the message is coming from the Google Form because if I remove the modal piece of code, the browser message goes away.
The solutions for removing this default behavior I found were about adding a
window.onbeforeunload = null
in my code. Which I did. I tried that inside $(document).ready(){}, and outside it, in the head and in the footer right before closing the </body> tag, and none of the alternatives prevented this dialogue to appear.
I'm afraid that's because it's inside of an iframe.
How do I eliminate this default dialogue?
Unfortunatelly I wasn't able to fix the main issue, but I found a workaround. As pointed out here, this seems like a Google issue with its forms. However the workaround pointed in the link didn't work for me.
This is the workaround that did work
jQuery(window).bind('beforeunload', function(){
if(jQuery('.modal').is(':visible') === false){
jQuery( ".modal" ).remove();
}
});
What it does is, if there is no modal open when I'm trying to leave the page, then remove the .modal element from the page right before the page is onloaded. This way the iframe is removed as well and the "Are you sure to leave this page" is gone.
location.href = "javascript:(" + function() {
window.onbeforeunload = null;
window.onunload = null;
} + ")()";
take a look at this thread
reference
if you set window.onbeforeunload = someFunction; you can nullify it with window.onbeforeunload = null.
However, if you set window.addEventListener('beforeunload',someFunction);, this event listener can't be removed with window.onbeforeunload = null.
It can be removed only with
removeEventListener('beforeunload',someFunction);
I have a bootstrap modal, and a form that is loaded via web2py ajax within that modal. My datepicker field is in that form and it doesnt activate since it is loaded via ajax. So I added a listener to catch the loaded ajax and activate the datepicker afterwards. Then when I click the field, it opens the datepicker, but then replaces the entire page content with the year? Here is a screenshot GIF of what happens:
GIF link
EDIT:
As Sam requested, here is some code to help diagnose the issue:
/**
* JS
*/
// Fill modal with content from link href
$("#myModal").on("show.bs.modal", function (e) {
var link = $(e.relatedTarget);
// this line loads the form via ajax
$.web2py.component(link.attr("href"),'modal-body');
// this listens for ajax and activates bootstrap datepicker after
$(document).ajaxComplete(function(e, xhr, settings) {
if (settings.url == link.attr("href")) {
$("#myModal").find('input.date').datepicker(
);
}
});
});
/**
* HTML
*/
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Edit Deal</h4>
</div>
<div id="modal-body" class="modal-body"></div>
</div>
</div>
</div>
Also this error is called in the console, but not sure if this would affect the datepicker specifically, hopefully its helpful:
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
You could add a z-index to datepicker
.datepicker{
z-index:2000;
}
The reason it was failing was that datepicker would trigger a show event that was triggering the listener we used to load the modal content. Since its in a modal, it would use the wrong URL and load the dashboard page instead, which caused a failure because it was an AJAX call.
I have been pulling my hair out all weekend trying to work-around little bugs in meteor. I finally fixed a modal dialog problem, but I still can't figure out why my event map is working inconsistently.
UPDATE: I did figure out the problem. I had a different js file that also defined editEvent methods, and I guess Meteor doesn't concatenate these methods. The original problem I posted is still below, just in case you run into a similar issue in your Meteor development.
I am trying to trigger events inside a modal popup: a 'close' and a 'save' button. I can get the 'close' button to work, but no matter how many different combinations I have tried, I cannot for the life of me understand why the 'save' button won't work, even if I ask it to behave exactly like the close button!
Template.editEvent.events({
'click #saveChanges':function(evt,tmpl){
Session.set('editing_event',null);
Session.set('showEditEvent',false);
Session.set('lastMod',new Date());
},
'click #close':function(evt,tmpl){
Session.set('editing_event',null);
Session.set('showEditEvent',false);
Session.set('lastMod',new Date());
}
});
And here is my template:
<template name="editEvent">
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
... some stuff
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="close" >Close</button>
<button type="button" class="btn btn-primary" id="saveChanges" >Save changes</button>
</div>
</div>
</div>
</div>
</template>
The close event works fine, but the saveChanges event doesn't work at all, even though it is exactly the same! Does anyone have a clue why this isn't working?