I asked this question by gitHub, but I try it here as well maybe someone knows the issue.
I am using slim select plugin, when I try to select the second option after searching I get an error
see picture:
But when I click outside so that the drop down goes closed and start searching again then I can select many options without getting the error.
Here is the code snippet where slimselect is initialized:
function initDropDowns () {
$('[slimselect]').each(function (index) {
var id = $(this).attr("id");
var placeholder = $(this).data("placeholder");
var selectByGroup = true;
var compareDropDown = false;
var dataSelectByGroup = $(this).data("selectbygroup");
var dataCmpareDropdown = $(this).data("comparedropdown");
if (dataSelectByGroup) {
selectByGroup = dataSelectByGroup === "true";
}
if (dataCmpareDropdown) {
compareDropDown = dataCmpareDropdown === "true";
}
var that = this;
var select = new SlimSelect({
select: '#' + id,
placeholder: placeholder,
showSearch: true,
searchText: settings.texts.noSearchResults,
searchPlaceholder: settings.texts.searchPlaceholder,
searchingText: settings.texts.searchingText,
searchHighlight: true,
closeOnSelect: false,
showOptionTooltips: true,
selectByGroup: selectByGroup,
hideSelectedOption:true,
limit: 5,
beforeOnChange: function (info) {
if ($(that).data('singleselect') === true) {
dropDowns[that.id].set ([]);
}
},
onChange: slimSelectOnChange
});
dropDowns[id] = select;
});
}
I'm having problem connecting my Dialog box with a clickable button. I want to show a dialogbox when I click a button but unfortunately, I can't do the function very well. This is my code, I know its really bad and I need some idea or a hand:
define: function () {
var dialog = new Ext.LayoutDialog('test', {
modal: true;
height: 500;
width: 500;)
};
var button = new Ext.Button("btn", {
text: "検索実行",
handler: this.showdialog.createDelegate(this)
});
}
},
I think, when creating an Ext.LayoutDialog, the id that will be used should be taken from a div tag then you'll simply add the method, addButton, so that the layoutdialog will have buttons. Don't use semicolons when adding configurations to the layoutdialog, you'll only use commas then the last config should no longer have a comma. Visit this link to know more about ext >> http://dev.sencha.com/deploy/ext-1.1.1/docs/ :)
var sample = Class.create();
sample.prototype = {
initialize: function () {
this.define();
}
define: function () {
var createDialog = function () {
var dialog = new Ext.LayoutDialog('test', {
modal: true,
height: 500,
width: 500,
center: {
autoscroll: true
}
});
button = dialog.addButton({ text: "検索実行" });
button.on('click', function() {
//name of the dialog that you want to display
showdialog.show();
});
var layout = dialog.getLayout();
layout.beginUpdate();
var center = layout.getRegion('center');
center.add(new Ext.ContentPanel("test", { titlebar: false }));
layout.endUpdate();
}
}
}
Primefaces 3.5, Mojara 2.1.21, Omnifaces 1.5
I want to use Primefaces component color picker to select a color and update a color in a text box.
<h:outputText value="#{bean.color}" id="colorId"/>
<p:colorPicker value="#{bean.color}" />
So the question how can I update the value (I need it only client side) in h:outputText.
The JQuery color picker component has a nice inteface to do this. But how can I use it ? How can I registry onChange event in color picker of generated component ?
$('#colorSelector').ColorPicker({
color: '#0000ff',
onChange: function (hsb, hex, rgb) {
$('#colorSelector div').css('backgroundColor', '#' + hex);
}
});
I was looking on web for your problem, but also couldn't find any useful solution. So I dicided to use same approach as in this my answer.
Here is my suggestion:
Take JS code from primefaces and rewrite it:
<h:form prependId="false">
<h:outputText value="t#{testas.color}" id="colorId3"/>
<p:colorPicker id="cid" value="#{testas.color}" widgetVar="co" />
</h:form>
<script type="text/javascript">
PrimeFaces.widget.ColorPicker = PrimeFaces.widget.BaseWidget.extend({
init: function(cfg) {
this._super(cfg);
this.input = $(this.jqId + '_input');
this.cfg.popup = this.cfg.mode == 'popup';
this.jqEl = this.cfg.popup ? $(this.jqId + '_button') : $(this.jqId + '_inline');
this.cfg.flat = !this.cfg.popup;
this.cfg.livePreview = false;
this.cfg.nestedInDialog = this.jqEl.parents('.ui-dialog:first').length == 1;
this.bindCallbacks();
//ajax update check
if(this.cfg.popup) {
this.clearOrphanOverlay();
}
//create colorpicker
this.jqEl.ColorPicker(this.cfg);
//popup ui
if(this.cfg.popup) {
PrimeFaces.skinButton(this.jqEl);
this.overlay = $(PrimeFaces.escapeClientId(this.jqEl.data('colorpickerId')));
this.livePreview = $(this.jqId + '_livePreview');
}
},
bindCallbacks: function() {
var _self = this;
this.cfg.onChange = function(hsb, hex, rgb) {
_self.input.val(hex);
if(_self.cfg.popup) {
_self.livePreview.css('backgroundColor', '#' + hex);
}
};
this.cfg.onShow = function() {
if(_self.cfg.popup) {
_self.overlay.css('z-index', ++PrimeFaces.zindex);
}
var win = $(window),
positionOffset = _self.cfg.nestedInDialog ? '-' + win.scrollLeft() + ' -' + win.scrollTop() : null;
if(_self.cfg.nestedInDialog) {
_self.overlay.css('position', 'fixed');
}
//position the overlay relative to the button
_self.overlay.css({
left:'',
top:''
})
.position({
my: 'left top'
,at: 'left bottom'
,of: _self.jqEl,
offset : positionOffset
});
}
this.cfg.onHide = function(cp) {
_self.overlay.css('z-index', ++PrimeFaces.zindex);
$('#colorId3').html(_self.input.val()); // -> ADDED BY ME
$(cp).fadeOut('fast');
return false;
}
},
/**
* When a popup colorpicker is updated with ajax, a new overlay is appended to body and old overlay
* would be orphan. We need to remove the old overlay to prevent memory leaks.
*/
clearOrphanOverlay: function() {
var _self = this;
$(document.body).children('.ui-colorpicker-container').each(function(i, element) {
var overlay = $(element),
options = overlay.data('colorpicker');
if(options.id == _self.id) {
overlay.remove();
return false; //break;
}
});
}
});
</script>
I added this part: $('#colorId3').html(_self.input.val());
I hope someone, who knows JQuery (I am not), will can write compact script to this function. But this worked for me.
Give me opinions on this please ;) I am new here too.
Looking off this example, notice how clicking on the Search button brings up a modal form with a darkened overlay behind it. Now notice how clicking on the Column Chooser button brings up a modal form but no overlay behind it.
My question is: how do I get the dark overlay to appear behind my Column Chooser popup?
There are currently undocumented option of the columnChooser:
$(this).jqGrid('columnChooser', {modal: true});
The demo demonstrate this. One can set default parameters for the columnChooser with respect of $.jgrid.col too:
$.extend(true, $.jgrid.col, {
modal: true
});
Recently I posted the suggestion to extend a little functionality of the columnChooser, but only a part of the changes are current code of the jqGrid. Nevertheless in the new version will be possible to set much more jQuery UI Dialog options with respect of new dialog_opts option. For example the usage of the following will be possible
$(this).jqGrid('columnChooser', {
dialog_opts: {
modal: true,
minWidth: 470,
show: 'blind',
hide: 'explode'
}
});
To use full features which I suggested you can just overwrite the standard implementation of columnChooser. One can do this by including the following code
$.jgrid.extend({
columnChooser : function(opts) {
var self = this;
if($("#colchooser_"+$.jgrid.jqID(self[0].p.id)).length ) { return; }
var selector = $('<div id="colchooser_'+self[0].p.id+'" style="position:relative;overflow:hidden"><div><select multiple="multiple"></select></div></div>');
var select = $('select', selector);
function insert(perm,i,v) {
if(i>=0){
var a = perm.slice();
var b = a.splice(i,Math.max(perm.length-i,i));
if(i>perm.length) { i = perm.length; }
a[i] = v;
return a.concat(b);
}
}
opts = $.extend({
"width" : 420,
"height" : 240,
"classname" : null,
"done" : function(perm) { if (perm) { self.jqGrid("remapColumns", perm, true); } },
/* msel is either the name of a ui widget class that
extends a multiselect, or a function that supports
creating a multiselect object (with no argument,
or when passed an object), and destroying it (when
passed the string "destroy"). */
"msel" : "multiselect",
/* "msel_opts" : {}, */
/* dlog is either the name of a ui widget class that
behaves in a dialog-like way, or a function, that
supports creating a dialog (when passed dlog_opts)
or destroying a dialog (when passed the string
"destroy")
*/
"dlog" : "dialog",
/* dlog_opts is either an option object to be passed
to "dlog", or (more likely) a function that creates
the options object.
The default produces a suitable options object for
ui.dialog */
"dlog_opts" : function(opts) {
var buttons = {};
buttons[opts.bSubmit] = function() {
opts.apply_perm();
opts.cleanup(false);
};
buttons[opts.bCancel] = function() {
opts.cleanup(true);
};
return $.extend(true, {
"buttons": buttons,
"close": function() {
opts.cleanup(true);
},
"modal" : opts.modal ? opts.modal : false,
"resizable": opts.resizable ? opts.resizable : true,
"width": opts.width+20,
resize: function (e, ui) {
var $container = $(this).find('>div>div.ui-multiselect'),
containerWidth = $container.width(),
containerHeight = $container.height(),
$selectedContainer = $container.find('>div.selected'),
$availableContainer = $container.find('>div.available'),
$selectedActions = $selectedContainer.find('>div.actions'),
$availableActions = $availableContainer.find('>div.actions'),
$selectedList = $selectedContainer.find('>ul.connected-list'),
$availableList = $availableContainer.find('>ul.connected-list'),
dividerLocation = opts.msel_opts.dividerLocation || $.ui.multiselect.defaults.dividerLocation;
$container.width(containerWidth); // to fix width like 398.96px
$availableContainer.width(Math.floor(containerWidth*(1-dividerLocation)));
$selectedContainer.width(containerWidth - $availableContainer.outerWidth() - ($.browser.webkit ? 1: 0));
$availableContainer.height(containerHeight);
$selectedContainer.height(containerHeight);
$selectedList.height(Math.max(containerHeight-$selectedActions.outerHeight()-1,1));
$availableList.height(Math.max(containerHeight-$availableActions.outerHeight()-1,1));
}
}, opts.dialog_opts || {});
},
/* Function to get the permutation array, and pass it to the
"done" function */
"apply_perm" : function() {
$('option',select).each(function(i) {
if (this.selected) {
self.jqGrid("showCol", colModel[this.value].name);
} else {
self.jqGrid("hideCol", colModel[this.value].name);
}
});
var perm = [];
//fixedCols.slice(0);
$('option:selected',select).each(function() { perm.push(parseInt(this.value,10)); });
$.each(perm, function() { delete colMap[colModel[parseInt(this,10)].name]; });
$.each(colMap, function() {
var ti = parseInt(this,10);
perm = insert(perm,ti,ti);
});
if (opts.done) {
opts.done.call(self, perm);
}
},
/* Function to cleanup the dialog, and select. Also calls the
done function with no permutation (to indicate that the
columnChooser was aborted */
"cleanup" : function(calldone) {
call(opts.dlog, selector, 'destroy');
call(opts.msel, select, 'destroy');
selector.remove();
if (calldone && opts.done) {
opts.done.call(self);
}
},
"msel_opts" : {}
}, $.jgrid.col, opts || {});
if($.ui) {
if ($.ui.multiselect ) {
if(opts.msel == "multiselect") {
if(!$.jgrid._multiselect) {
// should be in language file
alert("Multiselect plugin loaded after jqGrid. Please load the plugin before the jqGrid!");
return;
}
opts.msel_opts = $.extend($.ui.multiselect.defaults,opts.msel_opts);
}
}
}
if (opts.caption) {
selector.attr("title", opts.caption);
}
if (opts.classname) {
selector.addClass(opts.classname);
select.addClass(opts.classname);
}
if (opts.width) {
$(">div",selector).css({"width": opts.width,"margin":"0 auto"});
select.css("width", opts.width);
}
if (opts.height) {
$(">div",selector).css("height", opts.height);
select.css("height", opts.height - 10);
}
var colModel = self.jqGrid("getGridParam", "colModel");
var colNames = self.jqGrid("getGridParam", "colNames");
var colMap = {}, fixedCols = [];
select.empty();
$.each(colModel, function(i) {
colMap[this.name] = i;
if (this.hidedlg) {
if (!this.hidden) {
fixedCols.push(i);
}
return;
}
select.append("<option value='"+i+"' "+
(this.hidden?"":"selected='selected'")+">"+colNames[i]+"</option>");
});
function call(fn, obj) {
if (!fn) { return; }
if (typeof fn == 'string') {
if ($.fn[fn]) {
$.fn[fn].apply(obj, $.makeArray(arguments).slice(2));
}
} else if ($.isFunction(fn)) {
fn.apply(obj, $.makeArray(arguments).slice(2));
}
}
var dopts = $.isFunction(opts.dlog_opts) ? opts.dlog_opts.call(self, opts) : opts.dlog_opts;
call(opts.dlog, selector, dopts);
var mopts = $.isFunction(opts.msel_opts) ? opts.msel_opts.call(self, opts) : opts.msel_opts;
call(opts.msel, select, mopts);
// fix height of elements of the multiselect widget
var resizeSel = "#colchooser_"+$.jgrid.jqID(self[0].p.id),
$container = $(resizeSel + '>div>div.ui-multiselect'),
$selectedContainer = $(resizeSel + '>div>div.ui-multiselect>div.selected'),
$availableContainer = $(resizeSel + '>div>div.ui-multiselect>div.available'),
containerHeight,
$selectedActions = $selectedContainer.find('>div.actions'),
$availableActions = $availableContainer.find('>div.actions'),
$selectedList = $selectedContainer.find('>ul.connected-list'),
$availableList = $availableContainer.find('>ul.connected-list');
$container.height($container.parent().height()); // increase the container height
containerHeight = $container.height();
$selectedContainer.height(containerHeight);
$availableContainer.height(containerHeight);
$selectedList.height(Math.max(containerHeight-$selectedActions.outerHeight()-1,1));
$availableList.height(Math.max(containerHeight-$availableActions.outerHeight()-1,1));
// extend the list of components which will be also-resized
selector.data('dialog').uiDialog.resizable("option", "alsoResize",
resizeSel + ',' + resizeSel +'>div' + ',' + resizeSel + '>div>div.ui-multiselect');
}
});
In the case you can continue to use the original minimized version of jquery.jqGrid.min.js and the code which use can be just $(this).jqGrid('columnChooser');. Together with all default settings it will be like
$.extend(true, $.ui.multiselect, {
locale: {
addAll: 'Make all visible',
removeAll: 'Hidde All',
itemsCount: 'Avlialble Columns'
}
});
$.extend(true, $.jgrid.col, {
width: 450,
modal: true,
msel_opts: {dividerLocation: 0.5},
dialog_opts: {
minWidth: 470,
show: 'blind',
hide: 'explode'
}
});
$grid.jqGrid('navButtonAdd', '#pager', {
caption: "",
buttonicon: "ui-icon-calculator",
title: "Choose columns",
onClickButton: function () {
$(this).jqGrid('columnChooser');
}
});
The demo demonstrate the approach. The main advantage of the changes - the really resizable Column Chooser:
UPDATED: Free jqGrid fork of jqGrid, which I develop starting with the end of 2014, contains of cause the modified code of columnChooser.
I get the following error while trying the code on the mobile device.
Result of expression 'selector.data('dialog').uiDialog' [undefined] is not an object.
The error points to the following line of code.
selector.data('dialog').uiDialog.resizable("option", "alsoResize", resizeSel + ',' + resizeSel +'>div' + ',' + resizeSel + '>div>div.ui-multiselect');
When I inspect the code, I find that the data object does not have anything called uiDialog.
just been looking thru the code, try adding this line:
jqModal : true,
to this code:
$grid.jqGrid('navButtonAdd', '#pager', {
caption: "",
buttonicon: "ui-icon-calculator",
title: "Choose columns",
onClickButton: function () {
....
like this:
$grid.jqGrid('navButtonAdd', '#pager', {
caption: "",
buttonicon: "ui-icon-calculator",
title: "Choose columns",
jqModal : true,
onClickButton: function () {
....
I made a method for my UI class that clears inputs in a containing div.
The problem is, once it is called, The checkboxes never get set through AJAX calls until you refresh the page. The example below is for my group/user management. If you click on a group to edit, a jQuery UI dialog pops up with the attributes and permissions of that group. If you cancel, and try to add a new one, the inputs are cleared. If you then goto edit a group after that, the inputs are not updated.
Edit: It seems the checkboxes stop working if the cancel button is clicked regardless if my clearInputs method is called or not.
Here is the method of the UI class:
clearInputs: function(container) {
$(container + " :input").val("");
$(container).find('input[type=checkbox]:checked').prop('checked', false);
}
And an example of the calling code (copied from my project, but I cut some of the fat out...
/* The user clicks the edit group button... */
$(document).delegate('.group_edit', 'click', function() {
var groupId = $(this).attr('id').replace("group_edit_", "");
// This call to the clearInputs method is commented out,
// and behaves as I described above.
// ui.clearInputs("#dialogGroup");
$.ajax({
type: "POST",
url: "ajax.users.php",
data: {
action: "get_privs",
group: groupId
},
success: function (result) {
if (result.success == true) {
// Set the name value
$("#name").val(result.GroupName);
// Update each of the checkboxes
$.each(result.privs, function(priv, grant) {
grant = Boolean(parseInt(grant));
$('#dialogGroup input[value=' + priv + ']').prop('checked', grant);
});
/* Create the dialog */
$("#dialogGroup").dialog({
buttons: {
"OK" : function () {
$(this).dialog("close");
var form_data = new Array();
$.each($("input[#name='cbox[]']:checked"), function() {
form_data.push($(this).val());
});
$.ajax({
/* Saves the form data */
});
},
"Cancel": function() {
ui.clearInputs("#dialogGroup");
$(this).dialog("close");
}
}
});
And finally to add a group:
$(document).delegate('#group_add', 'click', function() {
var dialog = "#dialogGroup";
// ui.clearInputs(dialog);
$(dialog).dialog({
modal: true,
title: "Create Group",
buttons: {
"OK": function() {
$(this).dialog("close");
$("#dialogNotify").html("Saving...");
$("#dialogNotify").dialog('open');
var form_data = new Array();
$.each($("input[#name='cbox[]']:checked"), function() {
form_data.push($(this).val());
});
$.ajax({
/* Save the form data */
});
},
Cancel: function() {
$(this).dialog("close");
}
}
});
});
I hope I included everything... If not I will update.
try this:
$( document ).ready(function()
{
var search_on = $('#formX');
$( search_on )
//CHANGE "input" for "input,select" to search all fields
.find('input')
.each(function( e )
{
if( $(this).attr('type') == 'radio' || $(this).attr('type') == 'checkbox' )
{
$(this).attr('checked',false);
//USE RESET() IF IS A FORM FIELD
$(this).reset();
}
//IF IS A DROPDOWN
/*
else if( $(this).attr('type') == undefined )
{
$(this).find('option').attr('selected',false);
}
*/
else
{
$(this).val('');
//USE RESET() IF IS A FORM FIELD
//$(this).reset();
}
});
});
Or use this function( if is a form ):
jQuery.fn.reset = function () {
$(this).each (function() { this.reset(); });
}
And Call
$('#formX').reset();
I figured it out. The problem was inside of my method, I had:
clearInputs: function(container) {
$(container + " :input").val("");
$(container).find('input[type=checkbox]:checked').prop('checked', false);
}
The first line of the method, I guess is doing something to all inputs.
If you change the first line to
$(container + " :input[type=text]").val("");
It works fine...