I have a fullcalendar on my page. On it I have an add event button. That calls a javascript function that opens a modal view allowing the user to add an event.
function showAddMeeting() {
var current_date = $('#calendar').fullCalendar('getDate');
$("#modal").load('modal.php?type=meeting&action=add&date='+current_date);
}
This works perfectly. Now, I have another function to edit the meeting:
function showEditMeeting(meeting_id) {
alert('modal.php?type=meeting&action=edit&id='+meeting_id);
$("#modal").load('modal.php?type=meeting&action=edit&id='+meeting_id);
}
When I put this on the button, it works fine. But when I add it as a function to the event, it does not work.
eventClick: function(event) {
showEditMeeting(event['id']);
}
When I click the event, I get the alert of the working link, but I never get a modal popover.
EDIT:
I've figured out it's because I'm not calling
data-toggle="modal" data-target="#modal"
Does anybody know of how to call that through javascript?
Bootstrap has all the methods available for the modal in "modal.js", this is included in the minified pack.
You need to use it as follows.
Original
function showEditMeeting(meeting_id) {
alert('modal.php?type=meeting&action=edit&id='+meeting_id);
$("#modal").load('modal.php?type=meeting&action=edit&id='+meeting_id);
}
Becomes
function showEditMeeting(meeting_id) {
alert('modal.php?type=meeting&action=edit&id='+meeting_id);
$("#modal").load('modal.php?type=meeting&action=edit&id='+meeting_id).modal('show');
}
Notice the additional .modal('show');
Please note, I've not tested this code.
More information: http://getbootstrap.com/javascript/#modals-methods
Related
When I open a Bootstrap modal I want to perform an action, in this case an alert().
How do I check if a Bootstrap modal is open so I can perform an alert()?
I don't call the modal with a jQuery selector, I just let Bootstrap do that part of work.
This is my code but it doesn't work:
if ($("#myModal").data("bs.modal") && $("#myModal").data("bs.modal").isShown){
alert("test");
}
You can use the bootstrap modal events :
$('#myModal').on('shown.bs.modal', function (e) {
alert('modal is now loaded');
}
Or you can use this event before the modal is shown :
$('#myModal').on('show.bs.modal', function (e) {
alert('modal is not displayed yet');
}
look Here for more information about JavaScript bootstrap
I have it figured out, it appears that my approach is the wrong way to do it, instead I should have called this inside a function:
$('#myModal').click(function(){
alert("myModal is clicked");
})
This way, the alert() will only show if the function has succesfuly executed.
I know there are a few questions related, but I wanted to ask the question more clearly. I took the time to duplicate my issue on jsfiddle (link at bottom).
I have a jquery event:
$(document).ready(function () {
$('.ui.contact.selection.dropdown').on("click", function () {
$(this).dropdown()
;
})
});
The dropdown menu is located inside of a modal, which isn't actually present until THAT div is clicked, with
$('.item.contact').on("click", function () {
$('.ui.modal')
.modal('show')
;
})
The problem is that when I load the modal, and then click the dropdown menu, the menu takes two clicks before it fires. I am guessing this is because the dropdown isn't available on page load. The first click loads it, the second click fires it? I'm not sure but would appreciate assistance!
Please see the jsfiddle
Try setting the show option when you create the dropdown:
$(this).dropdown('show', true)
Fiddle: http://jsfiddle.net/o8r0fzfg/8/
I tried the code below and it works!
$(document).ready(function () {
$('.ui.contact.selection.dropdown').dropdown();
//CONTACT MODAL
$('.item.contact').on("click", function () {
$('.ui.modal').modal('show');
});
});
I believe the "dropdown" should be fired on pre-loading.
Looking at the documentation for semantic, it seems that the first .dropdown will create the object, and the second will cause the toggle to fire (by default). If you want to make it a toggle operation, try the following:
$(document).ready(function () {
...
$('.ui.contact.selection.dropdown').dropdown();
$('.ui.contact.selection.dropdown').on("click", function () {
$(this).behavour("toggle");
});
});
This event will handle not only open, but also close.
JSFiddle
After Bootstrap modal is shown, my app JavaScript is not working.
When I execute JavaScript from console then it is working, but my app JavaScript does not work.
Can somebody please give me advice how I can solve this issue?
HTML file:
<button type="button" class="btn btn-primary" id="save-category">Save changes</button>
JavaScript file:
var jquery = jQuery.noConflict();
jquery(window).load(function() {
jquery('#add-category').click(function() {
jquery.get('api/categories/add', function(data) {
jquery('#modal-target').replaceWith(data);
jquery('#myModal').modal('show');
});
});
jquery('#save-category').click(function() {
jquery('#myModal').modal('hide');
});
});
What is happening here is that the #save-category button is not registered to the event that you made when the page first loads. This is because bootstrap moves the original DOM element to the modal window, thus losing the original click event.
Try to use delegate instead of event binding
jquery('#add-category').click(function() {
jquery.get('api/categories/add', function(data) {
jquery('#modal-target').replaceWith(data);
jquery('#myModal').modal('show');
});
});
jquery(document).on('click', '#save-category', function() {
jquery('#myModal').modal('hide');
});
What is happening here is that the #save-category button is not registered to the event that you made when the page first loads. This is because bootstrap moves the original DOM element to the modal window, thus losing the original click event.
To fix this, you should register your click event to after you show your modal view:
jquery('#add-category').click(function() {
jquery.get('api/categories/add', function(data) {
jquery('#modal-target').replaceWith(data);
jquery('#myModal').modal('show');
// Register the event here
jquery('#save-category').click(function() {
jquery('#myModal').modal('hide');
});
});
});
Also note that the load event has been deprecated in jQuery 1.8 so you might want to use jQuery(document).ready( for initialising your script code unless you need to wait for images to load.
I upload all the stuff so you could see what I mean: http://nonemoticoner.com/learning/jquery/clickbug/
The point is that I cannot click divs I created with Handlebar, this is:
firstthumbin (id),
restthumbing (class)
They exist on thumbnails so I could use them to switch between galleries.
In script.js I created handlers in jQuery so I could click ones. None of them work :(
$('div#firstthumbing').on('click', function () {
console.log('clicked first');
changeSli(galInView, 0);
});
$('div.restthumbing').on('click', function () {
console.log('clicked rest');
changeSli(galInView, 1);
});
$('.thumb').on('click', function () {
console.log('clicked first thumb');
changeSli(galInView, 0);
});
I don't know why but a little above click works correctly. Is that because of Handlebars? How can I solve it? Please help me, I really tried to fix it by myself but this thing is really new to me. Click always used to work for me.
You are loading the firstthumbing after "onload" event, and you click function not binding becouse the element doesn't exist on DOM whe you run the script to haddle the click function.
Try to call the click function before create you clickable thumbs.
I'm using this plugin - http://plugins.jquery.com/project/styledSelect to style a Select box on my page. Demo page here - http://liepins.org/files/jQuery.styledSelect-1.0/examples.html
I've trying to figure out a way to open and close the select box from another element on the page, something like -
$('#show-lists').styledSelect(); //apply the plugin on page load
$("#another-button").toggle(
function () {
$('#show-lists').clickSelect() //open the dropdown
},
function () {
$('#show-lists').closedSelect() //close it
},
);
The above code doesn't work, it's just there to illustrate. Any idea how I can access these methods externally? Or can anyone suggest an alternative?
Thanks in advance.
You could modify the plugin to expose them as events bound to the control, e.g.
closedSelect();
s.change(closedSelect);
currentZIndex -= 3;
// New lines
s.bind('openSelect', clickSelect);
s.bind('closeSelect', closedSelect);
});
and then trigger the events from your code:
$("#another-button").toggle(
function () {
$('#show-lists').trigger('openSelect');
},
function () {
$('#show-lists').trigger('closeSelect');
},
);
although as you can see closedselect is already bound to the .change() event, so you could just call $('#show-lists').change(); instead for the close case - but I think I'd stick to the separate event myself for clarity.