Essentially I want to call two functions on onClick event. Works fine in firefox and chrome but NOT IE8!
The first function should call for the modal to appear (modal indicates that the form is in the process of being saved - but it is not appearing) while the second function saves the form and then hide the modal.
HTML
<a onclick="openModal();saveForm();">Click Me</a>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div id="modal">
<img id="loader" src="static/images/ajax-loader.gif" />
</div>
</div>
JavaScript
function openModal(){
$('#myModal').modal('show');
}
function saveForm(){
//--- some logic
}
Thank you in advance!
I personally don’t like it to listen to an event by adding the "onclick" attribute to an HTML element. Instead, it would be more practical to use .addEventListener. I can also really recommend you jQuery. In jQuery, you would write:
$('a').click(function(){
func1();
func2();
}
Related
I'm trying to close/hide bootstrap5 modal using JavaScript in angular, the problem that the hide function in bootstrap notworking somehow, so what I'm trying to do is to click a button that have data-bs-dismiss and it's work if I click it manually but not working if I try to do it via JavaScript.
<div class="modal fade" id="#modalId" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true"
data-toggle="modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<button id="modalDismiss" data-bs-dismiss="modal" aria-hidden="true">Test</button>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
document.getElementById('modalDismiss').click(); // notwoking
new window.bootstrap.Modal(document.getElementById('modalId')).hide(); //trying this same problem :(
new window.bootstrap.Modal(document.getElementById('modalId')).show(); //trying to show the modal works fine idon't why the hide function not working for me.
I trace the click event for the modalDismiss and found that the event that close the modal
I don't know if this relevant to the problem.
complete demo in this Stackblitz Demo
Basically, you need to import modal class from import { Modal } from 'bootstrap'; .
when Modal opened then you need to assign modal reference to this modal class and then create new instance.
open(element: any): void {
this.modalDirect = new Modal(element, {});
this.modalDirect.show();
}
and then, when you click on close button then call this close method.
close() {
this.modalDirect.hide();
}
complete code you can find out in attached stackblitz lik.
I have a codeigniter3 project.
My js-file with a footer include:
<script src="<?= base_url() ?>assets/myjsfile.js"></script>
In the normal codeigniter views, I can work with the file and the functions from it.
If I open a modal and load a new view by an ajax call over the controller, I couldn't work with this js-file. I always receive the error
"Uncaught ReferenceError: myfunctionname is not defined"
in my view, I add a modal-template
<div class="modal fade" id="modal_default" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content"></div>
</div>
</div>
</div>
I load a viewpage onclick into this modal by this controller function
public function_load_content(){
$this->load->view('mycontentfile',$this->input->post());
}
The modal will show and the content also loads correctly.
In this context, I try to call a function on click, which is defined in the "myjsfile.js"
$(document).ready(function(e){
$(document).on('click', '#mybutton', function(){
myfunctionname();
});
});
I tried a lot. Add it into document.ready, move it outside document.ready, add jquery & bootstrap library into the view-file...all my tries failed.
Why i can't access the myfunctionsname()?
In "myjsfile.js" myfunctionname is defined as follows
$(document).ready(function(e){
function myfunctionname(){...}
});
Working on a normal view file which is not loaded later by a ajaxcall runs great.
What do I have to do to make this work and access the file/functions the same way as a normal view?
I use a Bootstrap modal on the index page of my site, but I only want it to show Once per user visit.
I've tried out the answers shown here:
Display A Popup Only Once Per User per-user but the problem I run into is that the javascript "popup" conflicts with my modal "onload". And I'm not sure how to resolve it.
This is my onload function:
$(window).load(function(){
setTimeout(function() {
$('#onload').modal('show');},2000);
});
and this is my HTML:
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="onload">
<div class="modal-dialog">
<!-- Modal content-->
</div>
</div>
I tried to wrap the whole modal div with the "popup" div but that did weird things to my website (dimmed the whole page but otherwise did nothing)
I think I need to use a cookie or localStorage but I don't know how to configure them or trigger them from the onload javascript.
I'm using jquery modal to load multiple vimeo video's in a single page. I've been noticing that all the video's loading (34) in the DOM affects performance (creating a lag on load). So I want make sure that the video players are only loaded when the shown.bs.modal event has been triggered.
Pretty much a noob here, so I'm not sure how to do this.
Modal:
<div class="modal fade" id="<?php echo $target; ?>" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<iframe class="test" id="vimeo" src="//player.vimeo.com/video/<?php echo $id; ?>"
frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
<div class="modal-footer">
<?php echo $name; ?>
</div>
</div>
</div>
</div>
NOTE: READ COMMENTS ON ACCEPTED ANSWERED
I believe I have found a solution. Here is a working demo. If you check the networking section of your browser you will notice they do not load until the corresponding modal opens.
You can initially leave the src of your iframes empty, so it won't load anything. Store your URLs inside of an array and then you can use an event handler on the shown.bs.modal event as you mentioned.
var iframes = ["URL1","URL2","URL3"];
$('.modal').on('shown.bs.modal', function() {
var id = $(this).data('id');
$(this).find('iframe').attr('src',iframes[id]);
});
You will notice I am referencing a data-id, which you can add to each of your modals very easily.
<div class="modal fade" id="modal1" data-id="0" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal fade" id="modal2" data-id="1" tabindex="-1" role="dialog" aria-hidden="true">
I started with 0, since arrays start with 0 index.
***Note - The downfall to this is that the iframe will have to load the URL EVERY TIME you open the corresponding modal.
EDIT: Actually, using another data attribute, you can avoid the issue of URLs loading every time. Updated demo.
<div class="modal fade" id="modal1" data-id="0" data-loaded="false" tabindex="-1" role="dialog" aria-hidden="true">
Check the attribute in the shown.bs.modal event before replacing the URL if it is already loaded.
$('.modal').on('shown.bs.modal', function() {
var loaded = $(this).data('loaded');
if(loaded == false) {
var id = $(this).data('id');
$(this).find('iframe').attr('src',iframes[id]);
$(this).data('loaded', 'true');
}
});
EDIT 2 - With IDs in a php array, you can convert them to a JS array like this:
var iframes =<?php echo json_encode($php_array);?>;
To clear modal when its closed use
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
For the other part not too sure on what your trying to do. You could look into jScroll so that it will only load the rest of the videos when the user starts to scroll through the modal.
Edit: You could load the content of your modal from an external html file, that way the video iframe will only be loaded when someone clicks on the modal link.
I have a little weird problem with Bootstrap and a file field:
For a project I'm implementing a simple upload dialog.
http://jsfiddle.net/RxxSv/4/
As soon as I add data-toggle="modal" to the modal container, the file input field stops reacting to clicks (and the browser won't show the file selection dialog).
I suspect this to be caused by Bootstrap's modal code/event handling. Somewhere the click event is getting lost, but I can't really figure it out.
Any ideas?
I can't really explain why but if you put all the attributes that are in the documentation (in the Live Demo), the input works correctly.
<div id="modal-upload" class="modal hide fade" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
JSFiddle: http://jsfiddle.net/4TQvY/
My comrade adviced to do it in another way:
<a class="btn btn-primary" href="#" style="margin-left: 100px" id="prefix">Choose file</a><input type="file" id="file_source" style="position:absolute;z-index:2;top:0;left:0;filter:alpha(opacity=0);opacity:0;background-color:transparent;color:transparent;">
Make separate a & input and then invoke click event
jQuery("#prefix").click(function()
{
console.log("INSERT JSON");
$("#file_source").click();
return false;
});