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?
Related
I wanted to make a "flexible" confirm dialog with Bootstrap 4 as I do not want to hardcode each confirm modal / action on its own.
So, with a standard Modal like
<div class="modal fade" tabindex="-1" role="dialog" id="msgModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="msgModalTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="msgModalBody">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Doch nicht</button>
<button type="button" class="btn btn-primary" id="btnModelConfirmMessage">OK</button>
</div>
</div>
</div>
</div>
and the respective js-magic :D
function showConfirm(htmlInput,headerTxt, fun){
$('#msgModalTitle').text(headerTxt);
$('#msgModalBody').html(htmlInput);
$('#msgModal').modal('show');
$('#btnModelConfirmMessage').click(function () {
fun();
$('#msgModal').modal('hide');
});
}
I thougth, that by sending the "action" part as function which will exceute as soon the "OK" button #btnModelConfirmMessage is clicked.
Works like a charm, BUT it has a major bug.
It seems that the event-handler stays on the modal, i.e. if I show and just hide the modal the OK button will fire the function twice.
Among others I found this post
Bootstrap modal firing up incrementing times
where it suggest to move the click() event outside. I am sure this would work on that specific task, however I would lose the function.
So how can I unbind the handler using the hide.bs.modal event?
After reading the jquery-doc the answer is fairly easy:
Change:
$('#btnModelConfirmMessage').on('click',function () {
fun();
$('#msgModal').modal('hide');
});
Then add a new call on the hide.bs.modal event
$('#msgModal').on('hide.bs.modal',function () {
$('#btnModelConfirmMessage').off();
});
This removes the previously added handler, so we do not stack-up the events.
Hope someone will find this usefull :))
Cheers,
Daniel
hello everyone i need help. i wanna show dinamic data to bootstrap modal body.
here is my code so far :
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Detail</h4>
</div>
<div class="modal-body">
<div class="fetched-data"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function (e) {
var rowid = $(e.relatedTarget).data('id');
//menggunakan fungsi ajax untuk pengambilan data
$.ajax({
url : 'det_registration.php',
success : function(data){
$('.fetched-data').html(data);//menampilkan data ke dalam modal
}
});
});
});
the modal windows is open. but, the ajax code is not execute for call det_registration.php and fetched data
what i missed ? thanks for your help :)
update:
i am sorry all. this is the code how i call the modal
<a title='detail' href="#myModal" data-toggle='modal'><span class="pull-left">View Details</span></a>
Not sure exactly what else you have in your code but take a look here.
I've added a button calling to your modal. With the code you provided, it all seems to be working just fine to me.
This was all I added
<button data-toggle="modal" data-target="#myModal" class="btn brn-primary">Click Me</button>
I know this is just a peace of code but please provide more information. In this case I don't know how you are opening the modal, this could be the problem.
Your script looks fine, if the ajax function was not executed is because your modal lister could't "listen" the event "show.bs.modal" try to put an alert just after the opening of the anonymous function to test it.
If you could't see the alert is because the event was not listened.
Finally, if you are opening the modal via JS, just remember that the function that opens it must exist before it was executed.
i have solved my problem. the problem is there is two jquery.js in my php file. the first one is bootsrap jquery.js and the another one is datatable jquery.js. then after i deleted datatable jquery.js, my problem was solved
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.
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 need to be able to open a Twitter bootstrap modal window using the onClick="" or similar function. Just need the code to go into the onClick="". I am trying to make a click-able div to open the modal.
Code Excerpts:
Div Code:
<div class="span4 proj-div" onClick="open('GSCCModal');">
Modal Div Code:
<div id="GSCCModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
Javascript:
function open(x){
$(x).modal('show');
}
You don't need an onclick. Assuming you're using Bootstrap 3 Bootstrap 3 Documentation
<div class="span4 proj-div" data-toggle="modal" data-target="#GSCCModal">Clickable content, graphics, whatever</div>
<div id="GSCCModal" class="modal fade" 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-hidden="true">× </button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
If you're using Bootstrap 2, you'd follow the markup here:
http://getbootstrap.com/2.3.2/javascript.html#modals
I was looking for the onClick option to set the title and body of the modal based on the item in a list. T145's answer helped a lot, so I wanted to share how I used it.
Make sure the tag containing the JavaScript function is of type text/javascript to avoid conflicts:
<script type="text/javascript"> function showMyModalSetTitle(myTitle, myBodyHtml) {
/*
* '#myModayTitle' and '#myModalBody' refer to the 'id' of the HTML tags in
* the modal HTML code that hold the title and body respectively. These id's
* can be named anything, just make sure they are added as necessary.
*
*/
$('#myModalTitle').html(myTitle);
$('#myModalBody').html(myBodyHtml);
$('#myModal').modal('show');
}</script>
This function can now be called in the onClick method from inside an element such as a button:
<button type="button" onClick="javascript:showMyModalSetTitle('Some Title', 'Some body txt')"> Click Me! </button>
A JavaScript function must first be made that holds what you want to be done:
function print() { console.log("Hello World!") }
and then that function must be called in the onClick method from inside an element:
<a onClick="print()"> ... </a>
You can learn more about modal interactions directly from the Bootstrap 3 documentation found here:
http://getbootstrap.com/javascript/#modals
Your modal bind is also incorrect. It should be something like this, where "myModal" = ID of element:
$('#myModal').modal(options)
In other words, if you truly want to keep what you already have, put a "#" in front GSCCModal and see if that works.
It is also not very wise to have an onClick bound to a div element; something like a button would be more suitable.
Hope this helps!
I had the same problem, after researching a lot, I finally built a js function to create modals dynamically based on my requirements. Using this function, you can create popups in one line such as:
puyModal({title:'Test Title',heading:'Heading',message:'This is sample message.'})
Or you can use other complex functionality such as iframes, video popups, etc.
Find it on https://github.com/aybhalala/puymodals For demo, go to http://pateladitya.com/puymodals/