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.
Related
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);
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
I am using modal from bootstrap
<div aria-hidden="hide" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 id="myModalLabel" class="modal-title"></h4>
</div>
<div id="myModalBody" class="modal-body modalScroll"></div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
</div>
</div>
</div>
</div>
This is my main modal box and I send some information and show modal when I need to inform user at the moment. But my idea is using this modal to show images and when user choose one I will save as avatar. So I created function like below:
<script>
$('#avatar').click(function() {
showMessage();
});
$('#eee').on('click', function() {
alert('333');
});
function showMessage(){
var txto = '<div id="eee">test me test</div>';
$('#myModalLabel').append('Coose Your avatar');
$('#myModalBody').append(txto);
$('#myModal').modal('show');
}
</script>
Now when I go on page and click div id = avatar I will see modal window but when I click: test me I have no result. So is it some way to do this?
try adding:
$('#eee').on('click', function() {
alert('333');
});
inside showMessage() ... your problem is that you have to rebind events to dynamically added elements if they are added after (document).ready or in this case the page rendering...
whenever i do this i just make a big function called rebindEvents() that I can call into to let the page know about my new items... just a warning, its not great for performance if you wind up with a lot of jquery elems you have to deal with, knockout is a much better library for dealing with dynamic html then doing it this way.
also, i'm assuming you are going to present a list of avatars, so you may want to swap eee to a class instead of id...
I'm using twitter bootstrap's modal window to load a remote image
<img alt="250x150" src="/assets/250x150.gif">
I'm following these docs
The image is not rendering correctly in the modal.
I get a load of jumbled data instead -
What's happening? How can I fix?
Yes, I had this too. The answer I found is here.
I created a link like this:
<a href="gallery/blue.jpg" class="thumbnail img_modal">
//handler for link
$('.img_modal').on('click', function(e) {
e.preventDefault();
$("#modal_img_target").attr("src", this);
$('#modal').modal('show');
});
//and modal code here
<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Title to go here</h3>
</div>
<div class="modal-body">
<img id="modal_img_target">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
When using href to specify remote content for a modal, Bootstrap uses jQuery's load method to fetch the content, and then sticks the retrieved content into the modal's body element. In short, it only makes sense when the remote content (the href value) loads HTML or text.
What you're seeing is expected, as it's the same thing that would happen if you opened the gif file in a text editor, and just pasted it into an HTML tag.
To have it work the way you want, the href needs to point to an HTML document that contains an <img> tag that references the image you want in the modal.
In post of Mark Robson – change 'this' to 'this.href':
$("#modal_img_target").attr("src", this);
=>
$("#modal_img_target").attr("src", this.href);
(I don't have reputation for comment)