My modal dialog works perfectly (meaning I can adjust every option), except that the button icons option has no effect. Here's the code I'm using to generate the dialog:
$('#alert_div')
.attr("title", "Delete all instances?")
.text("Are you sure you want to delete all instances of this event between the specificed dates? This cannot be undone.")
.dialog({
modal: true,
draggable: false,
position: { my: "top", at: "center", of: window },
buttons: [
{
text: "No",
icons: { primary: "ui-icon-check" },
click: function() {
$(this).dialog('close');
console.log('Clicked no.');
}
},
{
text: "Yes",
click: function () {
$(this).dialog('close');
console.log('Clicked yes');
}
}
]
});
I've looked at every relevant Stack Overflow question I could find – e.g. this one. Aside from attaching an element to the button on open, I don't know how to solve this. When I create elements elsewhere in the document and give them the proper class, the icons show up properly.
Here's the HTML jQuery generates for the button when the dialog is opened:
<div class="ui-dialog-buttonset"><button type="button" icons="[object Object]" class="ui-button ui-corner-all ui-widget">OK</button></div>
I'm assuming there should be something other than '[object Object]
in the icons attribute. Why is this happening? I'm using jQuery UI v. 1.12.0 and jQuery v. 3.0.0., and I'm not using Bootstrap.
Apparently, the problem is a bug in jquery-ui 1.12.0. If you substitute 1.11.4 for 1.12.0 in your fiddle, the problem goes away.
I ran your code (the code you published above, not the code in your fiddle) in my own test environment, and everything worked fine. (I downloaded 1.11.4 in May, when it was the latest stable version.) It seems that the button() method isn't getting called when dialog() is called. As you correctly surmise, there shouldn't be an object Object in the icons element. My button code looks like this:
<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icons" role="button">
<span class="ui-button-icon-primary ui-icon ui-icon-check"></span>
<span class="ui-button-text">No</span>
<span class="ui-button-icon-secondary ui-icon ui-icon-circle-check"></span>
</button>
Looks like maybe this is a "real genuine bug" in jQuery-UI 1.12.0. :)
Edit: looks like actually this is a "real genuine feature" in jQuery-UI 1.12.0, along with a host of other changes, some of which break compatibility with previous versions. See Harpo's "new syntax" link. Anyone using menus (especially menus, old ones will no longer work), radiobuttons/checkboxes, or a few other things, will want to read it.
As for getting two icons on a button, it's still possible with the new syntax, but you can't do it using the buttons parameter in the dialog() method. Instead, you'll have to do the button the standard way, adding spans for the icons. (The upgrade doc says that you can just put the second icon span in the markup, and use the icon parameter for what used to be the primary icon, but I wasn't able to get that to work in this context.) So, for the markup:
<div id="alert_div">
<button id="okButton">
<span class="ui-icon ui-icon-check"></span>
Ok
<span class="ui-icon ui-icon-circle-check"></span>
</button>
</div>
And then:
$('#alert_div').dialog({
open: function(e, ui) {
$('#okButton')
.button()
.on('click', function() {
$(this).dialog('close');
});
}
});
jQuery UI 1.12 introduced a new syntax for button icons, which I have confirmed fixes this problem (see this jsFiddle). Currently, it doesn't accept the deprecated options; a PR has been submitted to fix that. See my bug report for details. The following code works with jQuery UI 1.12 and jQuery 3.1.0:
$("#alert_div")
.attr("title", "Error")
.text("Please choose a calendar and enter both start and end dates.")
.dialog({
modal: true,
draggable: false,
resizable: false,
position: { my: "top", at: "top", of: window },
buttons: [{
text: "OK",
icon: "ui-icon-check",
click: function() {
$(this).dialog("close");
}
}]
});
Please have a look this is for Example, we can do any thing to it..
use style to make changes into it...
Thanks... :)
Related
Below I've tried to simplify more complex TreeView usage, where I'm failing to implement a ContextMenu on TreeView node items, into a fiddle that exhibits potentially related issues. Steps: In my simplified example one left clicks to select a node, then right clicks on another node, and finally dismisses with escape, and then selection indications are confused. I've tried "return false", select(nothing), and preventDefault() to no avail.
My question is: is this a bug in Kendo UI, or am I missing something in my usage of TreeView?
https://jsfiddle.net/3cp9m8wo/
<div id='Tree_Space'></div>
<script type='text/x-kendo-template' id='Tree_template'>
#= item.Name#
</script>
<script>
$('#Tree_Space').kendoTreeView({
dataSource: [ { Name: 'Top', items: [ { Name:'Item' }, { Name:'Item' } ] } ],
template: kendo.template($('#Tree_template').html())
});
$("#Tree_Space").data("kendoTreeView").expand('.k-item');
</script>
My full goal would be to disable Kendo UI selection on TreeView nodes completely, allowing me to implement left clicks (actions) and right clicks (ContextMenus) for elements I placed within tree nodes. However, I've not seen a way to disable select on TreeView. I do find JQuery.click() does seem to work and deselect Kendo UI selections, but Kendo UI Context Menu fails to popup on right click, and displays other artifacts - one of which I think I've isolated here in hopes of learning something.
You could try using something in your template to control this:
<script type='text/x-kendo-template' id='Tree_template'>
//Ideally, your server will return a collection that determines if the item can be selected, likewise, you could add a IsParentNode or something to indicate the item should be treated differently.
#if (item.CanSelect != 'null' && item.CanSelect==true) { #
<span>#: item.Name#</span>
#}else{#
<span class='no-select'>#: item.Name#</span>
#}#
</script>
<script type="text/javascript">
$(document).ready(function () {
//Add code here to tie into the onmousedown of all .no-select elements
$(document).on("click", "no-select", function (e) {
e.preventDefault();
});
});
</script>
I installed the js bootstrap iconpicker (http://www.jqueryscript.net/other/jQuery-Based-Icon-Picker-For-Bootstrap-3-iconpicker.html, http://victor-valencia.github.io/bootstrap-iconpicker/) but I do not see how to detect the selected icon.
The example code to configure the button is:
$('#convert').iconpicker({
iconset: 'fontawesome',
icon: 'fa-key',
rows: 5,
cols: 5,
placement: 'top',
});
But there's nothing in the examples telling how to get the selected icon. I'ld think of a callback or something like that.
How can I get the selected icon?
I've updated the plugin at Github, so a change event is fired when the user change the iconpicker.
I've already sent a pull request to the owner of the plugin (Victor Valencia).
While he doesn't approve the changes you can use the version modified by me.
How you use it:
$('#iconpicker').on('change', function(e) {
console.log( e.icon );
});
Log:
fa-key
fa-info-circle
fa-flag-checkered
Edit:
Victor Valencia already approved my pull request so you can download the source from his repository.
Theres a hidden input that changes based on what you select - you can access it with this: $('input[name=icon]')
As fas as mi knowledge, It just change the css of the component. You will not get the image value here or the path.
Can you please elaborate what you trying to achieve here.
the event is "iconpickerSelected"
$('#convert').iconpicker({
iconset: 'fontawesome',
icon: 'fa-key',
rows: 5,
cols: 5,
placement: 'top',
});
$('#convert').on('iconpickerSelected', function (e) {
//here you can get the value
$(this).val()
})
I have this fiddle http://jsfiddle.net/cdG94/2/ in which I am trying to change the jquery UI dialogue title..It works fine when I am using Jquery 1.9 or lower but when I go to higher library it just displays the HTML directly ..am I doing something wrong here .I am using Jquery 1.10.2 and jQuery UI - v1.10.3
<button id="opener">Open the dialog</button>
<div id="wrapper">
<p>Some txt goes here</p>
</div>
$('#wrapper').dialog({
autoOpen: false,
minHeight: 400,
minWidth: 600,
title: function () {
return "Testing <span style=\"font-size:smaller;\">Testing the HTML .</span>";
}
});
$('#opener').click(function() {
$('#wrapper').dialog('open');
return false;
});
Thanks
In jQuery UI 1.10 they changed the title option so that it uses .text() instead of .html() to set the dialog's title:
From the jQuery UI 1.10 release notes:
Changed title option from HTML to text
(#6016) Dialog titles are controlled either via the title option or the title attribute on the content element. The title has previously been set as HTML, but since titles are generally plain text, this could easily cause a scripting vulnerability for users who don't realize the value is being set as HTML. As a result, titles are now set as text. If you need to add custom formatting to your dialog titles, you can override the _title() method on the dialog.
To revert to the original behaviour you can therefore do this, per the jQuery UI team's recommendation:
$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
_title: function (title) {
if (!this.options.title) {
title.html(" ");
}
title.html(this.options.title);
}
}));
but do beware (if you allow user supplied input to appear in the titles) of the potential for XSS vulnerabilities that was the original reason for the change!
(demo at http://jsfiddle.net/alnitak/bJ47w/)
As far as title option changed from html to text, you can adjust small hack to face html content in jQuery UI dialog window title.
This is not best practice, but maybe a solution sometimes. Here is an example:
Trigger a function, when dialog is created and manually change title .html
$('#wrapper').dialog({
autoOpen: false,
minHeight: 400,
minWidth: 600,
create: function () {
$('#wrapper').prev().html($('#wrapper').prev().text());
},
title: function () {
return "Testing <span style=\"font-size:smaller;\">Testing the HTML .</span>";
}
});
$('#opener').click(function () {
$('#wrapper').dialog('open');
return false;
});
Here is fiddle: http://jsfiddle.net/zur4ik/cdG94/8/
Like others said, the newer version of JQuery UI doesn't use HTML.
However, it looks like you are just trying to make the text smaller. Why not do this using CSS:
.ui-dialog-title{
font-size: smaller !important;
}
I'm using the AlloyUI modal "Real World Example" directly from their website at: http://alloyui.com/examples/modal/real-world/
Using the example verbatim and changing the following line from:
visible: true,
to
visible: false,
So that the modal appears only after clicking the button instead of when the page loads, as one would expect a dialog box to do. When I click the button to "show modal" the modal loads however the body of the dialog doesn't fill it's space properly, and the toolbar is mashed up against it. Upon resize everything jumps back into place nicely.
I'm looking for a clean fix, so far I figure a hacky fix might be to load the modal with a zIndex that puts it behind the page body, and alter the z-index via CSS with the button click (but this seems really hackish). I could probably also programatically resize the modal after the button fires modal.show() but that would cause a visible jump in the layout which I would like to avoid.
Any suggestions? I know AlloyUI has tons of hidden goodies, as their documentation is sparse, perhaps the visible attribute is not the one I should be using?
After some research I found an answer to my own question, this still may be a hacky fix but until someone comes up with something better here is the solution.
Step 1:
Leave visible: true intact.
Step 2:
Invoke .hide() after setting up the modal
The complete code.
YUI().use('aui-modal', function(Y) {
var modal = new Y.Modal({
bodyContent: '<div id="dialogBody"><div id="myTab"></div></div>',
centered: true,
headerContent: '<h3>Modal Goodness</h3>',
height: 600,
modal: true,
render: '#modal',
width: 900
}).render();
modal.addToolbar([
{
label: 'Save',
on: {
click: function() {
alert('You clicked save!');
}
}
},
{
label: 'Close',
on: {
click: function() {
modal.hide();
}
}
}
]);
modal.hide();
Y.one('#showModal').on(
'click',
function() {
modal.show();
}
);
});
I've done it nearly as you, just a little difference
modal = new Y.Modal(
{
centered: true,
contentBox: '#contentBox',
destroyOnHide: false,
headerContent: '<h3>Informations to your Orders</h3>',
height: 400,
modal: true,
render: '#modal',
resizable: {
handles: 'b, r'
},
visible: true,
width: 450
}
).hide();
I replaced .render() with hide(), by clicking a button this lines of codes are called:
Y.all('#showModal').on(
'click',
function() {
modal.show();
}
);
Can't find a method or parameter on YUI API Docs to stop auto render, so that seems to be the 'usual' way. I thought it might be the attribute render, but setting it to false or deleting the attribute don't make any changes to the auto init behaviour.
I'm trying to use the Twitter Bootstrap popover plugin to bring up a popover when a <span> element is clicked.
All the files are including on the page, including bootstrap-tooltip.js and bootstrap-popover.js. This is my jQuery code to call the popover:
$('#supported-hosts').popover({
'animation': true,
'html': 'test',
'trigger': 'click'
});
However when I click the element nothing happens. There's no Javascript error in the developer console or anything.
I've also tried doing this to no effect:
$('#supported-hosts').on('click', function() {
$(this).popover('show');
});
I'm pretty clueless as to what's wrong because as far as I can tell from the Bootstrap docs I'm using it correctly.
Edit: Also the HTML is simply a span element:
<span id="supported-hosts">Supported filehosts</span>
In order to show a pop-over, you need to indicate what its content should be.
You can do this on the html tag itself:
<span id="supported-hosts" data-content="Popover content">Supported filehosts</span>
Or with JavaScript:
$('#supported-hosts').popover({
'content': 'Popover content'
'animation': true,
'html': 'test',
'trigger': 'click'
});
By default, the pop-over will use the title attribute of the element that triggers it, so you can use that as well, depending on your needs.