What I'd like to do is make a dialog where the buttons are databound to the knockout viewmodel so I can enable or disable those buttons depending on various conditions on the form
But the way you make buttons in jquery dialogs is a bit different than normal.
anyone have a solution for this?
Make sure to apply your own class to the dialog's buttons:
$("#dialog").dialog({
buttons: [{
text: 'Ok',
class: 'ok-button'
}]
});
Grab the button.ok-button and apply a data-bind attribute to it (visible here, just to show you that it works). Here, name is an observable property of our view model:
$("button.ok-button").attr("data-bind", "visible: name().length");
Apply bindings normally:
var model = { name: ko.observable('') };
ko.applyBindings(model);
Here's an example that hide's an "Ok" button on the dialog if name (an observable) has a length > 0: http://jsfiddle.net/9cRFy/
To add on to Andrew's answer, since the data-bind attribute is just another attribute you can add to your buttons, this would also work:
$("#dialog").dialog({
buttons: [{
text: 'Ok',
'data-bind': 'visible: name().length'
}]
});
Related
I have a multi-series column chart in Highcharts with three series ("Western", "Eastern", and "Central"). Clicking the label of a series in the legend shows or hides the series. I'd like to add a little link at the end of each label with a link to download details about the underlying data for that series.
So a label would look like: Western (details)
I tried simply adding an <A> link to the "name" of the series, and the link appears, but clicking on it doesn't open the link. Instead, it merely toggles the series display as before. I guess the "onClick" event for the label itself supersedes the <A> behavior.
Is there any way, without hacking Highcharts or creating a whole custom legend, to make a link in a series label functional? Maybe something with CSS to make the link jump out of its parent element?
Your idea is very good. You need to only call e.stopPropagation() after click on a link to prevent toggling series.
Highcharts.chart('container', {
series: [{
name: 'Series name <a id="seriesDetails" href="https://www.google.pl/">Details</a>',
...
}]
});
document.getElementById('seriesDetails').addEventListener('click', function(e) {
e.stopPropagation();
// prevent redirect
//e.preventDefault();
console.log('click');
});
Live demo: http://jsfiddle.net/BlackLabel/kaLrmjd7/
API Reference: https://api.highcharts.com/highcharts/series.line.name
I'm trying to manually close a tooltip. The tooltip is created on a table using the items option to select some td's. When the td is clicked, it should close the tooltip. This doesn't seem to work.
<table id="thingtable">
<tr><td class="thing one">One</td></tr>
<tr><td class="thing">Two</td></tr>
</table>
$("#thingtable").tooltip({
items: ".thing",
content: "Thing"
});
$(".one").click(function (e) {
$("#thingtable").tooltip("close");
});
If I instead add the tooltips directly to the td's, then it works.
$(".thing").each(function (index) {
$(this).tooltip({
items: ".thing",
content: "Thing"
});
});
$(".one").click(function (e) {
var td = $(e.target);
td.tooltip("close");
});
Here is a fiddle. Clicking on One in the fiddle doesn't close the tooltip, but clicking on Three does.
Having to add a tooltip to each td seems wrong, especially when the table approach works other than this manual close issue. Is that the route I must take?
In the click event, you need to use the close and the disable methods. The caveat is if you want them to be enabled for use later. Here is a way to do that.
Working example: https://jsfiddle.net/Twisty/hn4tqzrL/2/
JavaScript
$(".one").click(function() {
console.log("Thing One clicked.");
$("#thingtable").tooltip("close").tooltip("disable");
}).hover(function() {
$("#thingtable").tooltip("enable");
}, function() {
$("#thingtable").tooltip("enable");
});
Making use of .hover() we can detect when the mouse has moved in and out and trigger the enable method. Technically, we do not need to take any action with the handlerIn function.
How can I adjust the position of Select2 container so that the search box is position right over the original select element like in this website
http://www.jobnisit.com/en
It look cleaner in terms of UI in my opinion.
Ps. sorry, I can't post the image now.
There is 2 ways to do this.
1) With css:
.select2-dropdown--below {
top: -2.8rem; /*your input height*/
}
This will not affect a container (.select2-container), but will move dropdown and search field, so you will have a desired effect.
2) With js:
$('select').select2().on('select2:open', function() {
var container = .$('.select2-container').last();
/*Add some css-class to container or reposition it*/
});
This code attaches a handler to 'select2:open' event, which will be fired every time when user opens a dropdown. This method is better if you have more than one select on page.
Tested with select2 4.0.0
The proper way of positioning the dropdown is using the core feature provided by select2 plugin.
It provides us with 'dropdownParent' property to place to dropdown inside the particular element
select field: #edit-field-job-skillsets-tid
parent item: div.form-item-field-job-skillsets-tid
jQuery("#edit-field-job-skillsets-tid").select2(
{dropdownParent: jQuery('div.form-item-field-job-skillsets-tid')}
);
I have 3 separate (with separate class names) items I am dropping into a big div. I need the drop function to run something different depending on which draggble item I drop into the droppable.
Here is my code.
$(".gridster").droppable({
accept: ".dragExist,.dragDefault, .dragLaunch",
hoverClass: "drop-state",
drop: function(event,ui){
var currentId = $(ui.draggable).attr("class");
if(currentId == "dragExist"){
gridster.add_widget.apply(gridster, ['<li>new Widget', 1, 1]);
console.log(event);
event.preventDefault();
}
}
});
If i could get the first if statement to work I would add in the other 2 classes, but I don't seem to be getting this correct. Thank you!!
A simple solution is to add a class suppose 'selected-item' on mousedown event of each draggable element. Then in the drop event you can easily identify the element which was dragged using the 'selected-item' class and at the end remove the class.
I have a draggable connected to a sortable:
$("#panelTarget").sortable({
distance: '15'
});
var element = $('<li>Hello</li>');
element.appendTo('#panelSource');
element.draggable();
element.draggable("option", "connectToSortable", '#panelTarget');
at some point, I want to make it impossible for the user to drop items onto the sortable panel (panelTarget). I'm trying this:
$('#panelTarget').sortable( "disable" );
but I can still drop elements onto it, am I not interpreting the docs correctly?:
http://jqueryui.com/demos/sortable/#method-disable
how can I block the user from dropping stuff on the panel?
Thanks
This event/action comes from the .draggable() side, so you need to disable it there, like this:
element.draggable("option", "connectToSortable", false);