Is it possible to specify callback functions for Ok and Close button?
In case of JQuery Modal one could specify the callback functions at the time of initialization using the buttons dictionary. Does Semantic-ui modeal provide for something similar? How do i go for additional logic and close the model after Ok is pressed?
add a .approve class (or alternative. see http://semantic-ui.com/modules/modal.html#/settings to your 'OK' button to trigger the onApprove callback.
.close class for your Close button.
I have only be using semantic-ui for 2 weeks (and modals for a few hours) so caution required. Thanks mike123 for your answer.
$('.ui.modal.myModal').modal({
onHide: function(){
console.log('hidden');
},
onShow: function(){
console.log('shown');
},
onApprove: function() {
console.log('Approve');
return validateModal()
}
}).modal('show');
Is this what you are after:
$('.selector').modal({
onHide: function(){
console.log('hidden');
},
onShow: function(){
console.log('shown');
}
}).modal('show');
Related
The default Accounts-UI widget takes a while to load. I want to check on the client when it is ready, so that I can perform some DOM manipulations on it afterwards. I am currently using a timer like so:
Template.sign_in_modal.onRendered(function (){
Tracker.afterFlush(function () {
Meteor.setTimeout(function () {
$('a#login-sign-in-link').click();
$('a#login-name-link').click();
$('a.login-close-text').remove();
}, 100);
});
});
The above hack works locally (probably because it loads faster) but not when I push to saturnapi.com. I just want it to be expanded by default as shown below. Is there a way to ensure the UI widget is fully loaded via a template helper or otherwise make it expanded by default?
I would suggest checking when the <a id="login-sigin-in-link"></a> is added to the DOM. This could be verified by checking $('a#login-sign-in-link').length. If the element is on the DOM do your manipulation.
However if it is not just check again in a few milliseconds. I would suggest using setInterval().
See below for the complete solution:
Template.sign_in_modal.onRendered(function (){
var setIntervalId = Meteor.setInterval(function() {
if($('a#login-sign-in-link').length) {
$('a#login-sign-in-link').click();
$('a.login-close-text').remove();
Meteor.clearInterval(setIntervalId);
}
}, 100);
});
Template.sign_in_modal.onDestroyed(function() {
$('.modal-backdrop.fade.in').remove();
});
Some may think that using loginButtons.onRendered(function(){}); is a good way to verify if the element has been added to the DOM, but it is not. If you try to do the same DOM manipulation in onRendered, it will throw an afterFlush error. The onRendered function has been extremely misleading.
I am using TextExtJs for an autocomplete feature where you start typing and the dropdown of suggestions appears below the text input and you can select a suggested option with arrow keys or mouse.
Everything is working great except that I am trying to perform a function after the user selects one of the suggestions. There is a hideDropdown event which I think is the proper event to use for this. Unfortunately I'm not understanding how to do this, this is what I have tried:
$('#usearch').textext({
plugins : 'autocomplete ajax',
ajax : {
url : 'usersuggest.php',
dataType : 'json',
cacheResults : true
},
autocomplete : {
onHideDropdown : function(){
alert('A happened');
},
hideDropdown : function(){
alert('B happened');
}
},
onHideDropdown : function(){
alert('C happened');
},
hideDropdown : function(){
alert('D happened');
}
});
None of these functions with the alert actually ever run. They do not interfere with the suggestion piece of it. How do I attach a callback to this event?
I'm facing the same problem here....
Unfortunately there is no proper solution. The manual is as rudimental as the examples provided on the plugin page.
I managed to bind a kind of "onAddingTag" event, refer to this: http://textextjs.com/manual/plugins/tags.html#istagallowed
$('#textarea').textext().bind('isTagAllowed', function(e, data) {
var valueAdded = data.tag;
data.result = true; //needs to be done, since we're abusing this event
};
Despite the fact that this may help with this issue, your next problem would be: when does the user remove a tag?
Finally I ended up, using another autocomplete library.
I am trying to create a group of draggable DOM objects using jQuery UI's .draggable() that are populated through Meteor subscriptions. The code I came up with looks like
Meteor.subscribe('those_absent', function() {
$( "li.ui-draggable" ).draggable( { revert: "invalid" } );
});
Meteor.subscribe('those_present', function() {
$( "li.ui-draggable" ).draggable( { revert: "invalid" } );
});
These correspond with some Meteor.publish() calls, so that any time the collection changes, the .draggable() behaviour will be attached. At least, that was my intention.
However, it only works once - once one of these <li>'s has been dragged and dropped, then they are no longer draggable at all.
When the objects are dropped, I'm firing a custom event that is attached to the Template for the item like so
$( "#c_absent .inner-drop" ).droppable({
drop: function( event, ui ) {
ui.draggable.trigger('inout.leave');
}
});
Template.loftie_detail.events = {
'inout.leave': function (e) {
Lofties.update({_id:this._id}, {$set: {present: 'N' }});
}
};
So, my thinking is that this change to the collection on drop should propagate through the pub/sub process and re-run the .draggable() line above. But it doesn't seem to.
The complete code for this can be seen here https://github.com/sbeam/in-out/blob/master/client/inout.js and the app is live at http://inout.meteor.com/ (there are some other probably unrelated issues with items randomly losing values or disappearing from the UI altogether)
So if my understanding of how pub/sub works in Meteor is off, it would be good to know. Or is there a more efficient way to achieve this UI behavior binding that works without it?
The way I have implemented this in my apps is with the method shown by #lashleigh.
I have a template event that listens using code like this :
Template.myDraggableItem.events({
'mouseover .workItem' : function() {
$(this._id).draggable();
}
});
Then I listen for the dragstop like this.
$('body').on('dragstop', '.myDraggableItem', function (e) {
// Update the collection with the new position
};
You can see the app that's using this code at aduno.meteor.com
I need to fire FullCalendar on live() method. So, I tried this:
$('.full-calendar').live('fullCalendar', function(){
return { header : .... //options here }
});
But this doesn't work. Do you think is possible to achieve this?
fullcalendar is not a supported event by .live()ref. Actually, this is not an event at all (unless you created it by yourself but it wouldn't then be supported by .live().
Your full calendar creation must be triggered by a real event (click, double-click,...)
You could probably use something like:
$('.full-calendar').live('click', function() {
$('#calendar').fullCalendar({
// put your options and callbacks here
})
});
fullcalendar 1.4.7 allow adding new events by dropping them onto the calendar from an external list of events.
I would like to update the title of an existing event by dropping another event from the same list. How i can do that.
I wrote this function (below) and i call it from the "bindSegHandlers" function of fullcalendar.js but it doesn't work, a new event is created.
function droppableEvent(event, eventElement) {
eventElement.droppable({
accept: '.myevent',
tolerance: 'pointer',
activeClass: 'ui-state-hover',
hoverClass: 'ui-state-active',
drop: function(ev, ui) {
alert('call dropped');
}
});
}
Can you help me?
thanks
I found the solution by myself: eventRender is the right place for that!
$('#calendar').fullCalendar({
eventRender: function(evt, element) {
element.droppable({
accept: '.myevent',
tolerance: 'pointer',
activeClass: 'ui-state-hover',
hoverClass: 'ui-state-active',
drop: function(ev, ui) {
alert('call dropped');
}
});
},
....
....
});
it is not necessary to modify fullcalendar.js
It may not be a direct answer to your question but you can consider it as an alternative option. I have used another jQuery based calendar plugin named Calendario and its pretty easy to add events in it.
Calendario
Github Repo