 Show Posts
|
|
Pages: [1] 2 3 ... 5
|
|
1
|
General Category / EasyUI for jQuery / Combobox: setValue within an onSelect
|
on: September 30, 2019, 07:53:29 PM
|
I have the following function that is called via a button click. I'm building out a form before displaying the form on a popup. The issue is the onSelect event for the Combobox, which is being triggered by a setValue within the same onSelect - this causes an infinite loop error. I can't use onChange, because onSelect passed the whole row and onChange only passes the new and olde value. I need the row object because I store a bunch of extra data in the returned json object that I use for processing: function confirmNewThresholdDetail() {
clearFormErrors('fmThresholdDetail');
$('#ProcessType').val('New');
$('#InactiveThresholds').combobox({
url: '/ctrls/ajax.aspx?a=getInactiveThresholds&r=' + accountId + '&i=' + $('#ThresholdId').val(),
valueField: 'id',
textField: 'text',
panelHeight: 'auto',
editable: false,
formatter: function (combo) {
if (isNaN(combo.text)) {
return combo.text;
} else {
var gTh = '';
if (combo.GreaterThan == '1') { gTh = '> '; }
return gTh + formatNumber(combo.text, '###,###,###');
}
},
onSelect: function (combo) {
$('#UpperThreshold').prop('disabled', false);
$('#fmThresholdDetail').form('clear');
if (combo.id == "0") {
// new threshold
$('#AccountThresholdDetailId').val("0");
$('#ThresholdDetailId').val('0');
$('#IsStandard_Yes').prop('checked', true);
$('#GreaterThan').prop('checked', false);
$('#NmbrOfApprovers').combobox('setValue', '1');
$('#UpperThreshold').val('');
} else {
if (combo.id != "*") {
// existing inactive
$('#fmThresholdDetail').form('load', combo);
$('#IsStandard_Yes').prop('checked', true);
$('#AccountThresholdDetailId').val(combo.AccountThresholdDetailId);
$('#ThresholdDetailId').val(combo.ThresholdDetailId);
$('#ThresholdRule').text('');
$('#UpperThreshold').val(formatNumber(combo.UpperThreshold, '###,###,###'));
$('#UpperThreshold').prop('disabled', true);
}
}
// reset combo
$('#InactiveThresholds').combobox('setValue', combo.id);
$('#InactiveThresholds').combobox('setText', function () {
if (isNaN(combo.text)) {
return combo.text;
} else {
return formatNumber(combo.text, '###,###,###');
}
});
// Clear any rules
$('#ThresholdRule').text('');
if (combo.id != "*") {
// Show Detail
$('#ThresholdLevelDetail').slideDown();
} else {
$('#ThresholdLevelDetail').slideUp();
}
}
});
$('#ThresholdLevelDetail').hide();
$('#SelectInactiveThresholds').show();
$('#UpperThreshold').prop('disabled', false);
$('#ThresholdCurrency_Txt').text($('#ThresholdCCY_Txt').text());
$('#dlgThresholdDetail').dialog('open').dialog('setTitle', 'New Threshold').dialog('center');
}
I really need a simple solution here because this design pattern is used all over the place. (And yes this is the same 1.3.x to 1.8.x conversion rearing it's ugly head.) |
|
|
|
|
3
|
General Category / EasyUI for jQuery / Re: Form Load and ComboBox OnChange / OnSelect....
|
on: May 28, 2019, 04:51:11 AM
|
|
Unfortunately all this code is on an intranet / behind a firewall, and not accessible and I'm not sure I can get a snipet working well enough to demo the issue.
I'll cut out what I can and display it here this evening.
I tried a solution provided in the forum that was supposed to disable / enable the onSelect event but that didn't appear to work. It was an older solution provided for v1.3 I think.
So just to be clear, by calling the load method for the Form we, under the covers, call the setValue method for every form element?
|
|
|
|
|
4
|
General Category / EasyUI for jQuery / Form Load and ComboBox OnChange / OnSelect....
|
on: May 27, 2019, 04:26:16 PM
|
|
Howdy...
(I'm still in conversion 1.3.x to 1.8.x hell.)
We have a fairly complex form load that updates a cascade of combo boxes, it works as intended until the form's onLoadSuccess event is completed. Something is resetting all the combo boxes after the form load and onLoadSuccess is completed.
I've been unable to track down what is calling the combo box and resetting the values.
I'm pretty sure it's not the previous cascade activating again, since break points don't active within that method when the combo boxes reset.
I've played with switching between onChange and onSelect but that doesn't seem to affect the issue, but I may have balled it all up with my code changes.
Any ideas to assist, or keys to stopping this from happening.
|
|
|
|
|
6
|
General Category / EasyUI for jQuery / update for isValid extension for EasyUI 1.7.x
|
on: May 03, 2019, 06:16:24 PM
|
Howdy... With the update of our site from 1.3 to 1.7 we've had to update our custom extension, like the isValid for the Combobox. To belabor the point, we sometime deactivate drop down values and on the default load & set the available drop down options do not have a value for the value stored in the DB. So we need to check to see if the value exist, and if not reload the drop down options with the "missing" value and set that as selected (plus warn the user that they need to select a new value. This way we can show the user the previous value and give them something to work with. With the update to 1.7, we need to change the find option slightly due to changes in the names of the css classes. This is what I came up with, and I would like a quick yes/no on my update - basically did I select the correct css name that will help us down the road.
$.extend($.fn.combo.methods, {
isValid: function (jq) {
// 1.3
//var input = $.data(jq[0], 'combo').combo.find('input.combo-text');
//
// 1.7
var input = $.data(jq[0], 'combo').combo.find('input.textbox-text');
return input.validatebox('isValid');
}
});
Updates / corrections to my changes are welcome. |
|
|
|
|
8
|
General Category / EasyUI for jQuery / Re: After upgrade: Uncaught TypeError: Cannot read property 'options' of undefined
|
on: April 10, 2019, 07:40:05 PM
|
Ok - I found the primary error, the combo box box is firing the onSelect event when the combo box data is loaded (it contains a selected=true in the data). Since the data grid has not been built yet, that was causing the option error. This is different behavior from 1.3.4 combo box. (Very annoying.) I've routed around that using an existing variable that was helping the data grid load the data on the first page load. Secondary error, when the combo box onSelect event is fired, it calls the datagrid load event. When the load event is called by the comb box the onBeforeLoad event is *not* firing. However the search box searcher event with the exact same call to the data grid load works perfectly. (So do the pagination events.) What's changed with the combo box that it's not communicating with the data grid correctly?
var firstLoad = true;
...
$('#dgFilter1').combobox({
panelHeight: 'auto',
editable: false,
selectOnNavigation: false,
valueField: 'id',
textField: 'text',
data: [{ text: 'Active (All)', id: '*', selected: true }, { text: 'Active (Yes)', id: 'Yes' }, { text: 'Active (No)', id: 'No'}],
filter: function (q, row) {
return row.text.toLowerCase().indexOf(q.toLowerCase()) == 0;
},
onSelect: function (combo) {
if (!firstLoad) {
$('#dg').datagrid('load');
}
}
});
$('#dgSearch').searchbox({
searcher: function (searchText) {
$('#dg').datagrid('load');
},
prompt: 'Name'
});
$('#dg').datagrid({
url: '/controls/somethingsomething.aspx?a=getFullList',
onBeforeLoad: function (param) {
param.f = $('#dgFilter1').combobox('getValue');
param.s = encodeURI($('#dgSearch').searchbox('getValue'));
param.first = firstLoad;
firstLoad = false;
},
toolbar: '#toolbar',
pagination: true,
rownumbers: false,
singleSelect: true,
striped: true,
remoteSort: true,
sortName: 'FullName'
});
...
|
|
|
|
|
9
|
General Category / EasyUI for jQuery / Re: After upgrade: Uncaught TypeError: Cannot read property 'options' of undefined
|
on: April 09, 2019, 07:37:04 PM
|
|
I can't show working code because it's on an Intranet. If I can replicate via fiddle I'll let you know. We have attempted to upgrade to latest jEasy UI from 1.3.x.
I'll also try some order of execution steps, but we are also seeing issues with opening edit dialog boxes (new data entry dialog boxes work fine) and with input box icons being on left instead of right.
Again, this is from a site that worked for 5 years, no changes before an update of jEasy and jQuery.
|
|
|
|
|
11
|
General Category / EasyUI for jQuery / After upgrade: Uncaught TypeError: Cannot read property 'options' of undefined
|
on: April 08, 2019, 07:43:14 PM
|
Howdy... I'm trying up update a client using EasyUI for JQuery and most of the grids work fine, except for a couple. I'm getting errors like the following: Uncaught TypeError: Cannot read property 'options' of undefined
at Object.options (jquery.easyui.min.js?v=1:11929)
at n.fn.init.$.fn.datagrid (jquery.easyui.min.js?v=1:11792)
at HTMLTableElement.<anonymous> (jquery.easyui.min.js?v=1:11953)
at Function.each (jquery-1.12.4.min.js:2)
at n.fn.init.each (jquery-1.12.4.min.js:2)
at Object.load (jquery.easyui.min.js?v=1:11952)
at n.fn.init.$.fn.datagrid (jquery.easyui.min.js?v=1:11792)
at HTMLInputElement.onSelect (?tID=4:129)
at _b36 (jquery.easyui.min.js?v=1:15011)
at _b44 (jquery.easyui.min.js?v=1:15051)
I think I've traced this to the dataGrid, $.fn.datagrid.methods = {
options: function(jq) {
var _8ad = $.data(jq[0], "datagrid").options;
But I can't find anything wrong with how the options are setup. I've moved them to the js reference (starts with toolbar): $('#dg').datagrid({
url: '/controls/foo.aspx?a=getFullList',
onBeforeLoad: function (param) {
param.f = $('#dgFilter1').combobox('getValue');
param.s = encodeURI($('#dgSearch').searchbox('getValue'));
param.first = firstLoad;
firstLoad = false;
},
toolbar: '#toolbar',
pagination: true,
rownumbers: false,
singleSelect: true,
striped: true,
remoteSort: true,
sortName: 'FullName'
});
I've changed them from inline (original way) within the table to data-options parameter: <table id="dg" title="Blah Blah Blah" style="height:300px" width="720px"
toolbar="#toolbar" pagination="true"
rownumbers="false" singleSelect="true" striped="true" remoteSort="true" sortName="FullName">
or <table id="dg" title="Blah Blah Blah" style="height:300px" width="720px"
data-options=" toolbar: '#toolbar',pagination: true,rownumbers: false,singleSelect: true,
striped: true,remoteSort: true,sortName: 'FullName'">
Nothing seems to work. All ideas welcome. P.S We had references to edatagrid (which I updated to latest version also) and a custom extension to EasyUI, I removed those just for this page and they don't appear to be the problem. |
|
|
|
|
13
|
General Category / EasyUI for jQuery / Re: subgrid columns not accepting width....
|
on: August 16, 2017, 11:07:15 PM
|
|
P.S. It wasn't the spaces, I did have other "cr4p" in the key fields that was causing the issue. :-P
One more fix needed, since the full code is posted here. When drilling down, the spacing gets messed up between the rows. I'm pretty sure it's because of when and how I'm calling the fixDetailRowHeight method.
Any ideas on how to clean that up? I was trying to follow the Tutorial example.
|
|
|
|
|
15
|
General Category / EasyUI for jQuery / [SOLVED] subgrid columns not accepting width....
|
on: August 15, 2017, 05:13:56 PM
|
Howdy... We have a datagrid with a subgrid and a sub-subgrid. The columns of the both the subgrid and sub-subgrid are getting messed up and don't respect the width attribute. <table id="styleDesignLoadGrid">
<thead>
<tr>
<th field="style name" width="120" sortable="true">style name</th>
<th field="Body Type" width="120" sortable="true">body type</th>
<th field="DesignsTotal" width="90" sortable="true"># of designs</th>
<th field="DesignsSuccessTotal" width="90" sortable="true"># imported</th>
<th field="Status" width="90" sortable="true">import status</th>
<th field="Message" width="200" sortable="true">message</th>
<th field="Niente" width="500"> </th>
</tr>
</thead>
</table>
</div>
$('#styleDesignLoadGrid').datagrid({
title: 'Bulk Import Review',
rownumbers: false,
singleSelect: true,
striped: true,
remoteSort: false,
sortName: 'Status',
view: detailview,
detailFormatter: function (index, row) {
return '<div style="padding:2px"><table class="ddv"></table></div>';
},
onExpandRow: function (index, row) {
var ddv = $(this).datagrid('getRowDetail', index).find('table.ddv');
ddv.datagrid({
view: detailview,
detailFormatter: function (dvvIndex, dvvRow) {
return '<div style="padding:2px"><table class="ddvSub"></table></div>';
},
fitColumns: false,
singleSelect: true,
rownumbers: false,
loadMsg: '',
height: 'auto',
columns: [[
{ field: 'Factory', title: 'factory', width: '100' },
{ field: 'CGP Design #', title: 'cgp #', width: '150' },
{ field: 'size', title: 'size', width: '100' },
{ field: 'color', title: 'color', width: '100' },
{ field: 'PDQ/Pivate Label Minimum Order Quantity', title: ' min order qty', width: 120 },
{ field: 'New Item Lead Time (Days)', title: 'new item lt', width: 120 },
{ field: 'Low Season Lead Time (Days)', title: 'low season lt', width: 100 },
{ field: 'High Season Lead Time (Days)', title: 'high season lt', width: 100 },
{ field: 'Division', title: 'division', width: 100 },
{ field: 'Category', title: 'category', width: 100 },
{ field: 'Type', title: 'type', width: 100 },
{ field: 'Group', title: 'group', width: 100 },
{ field: 'Saucer Yes/No', title: 'saucer', width: 100 },
{ field: 'Drain Hole Yes/No', title: 'drain hole', width: 100 },
{ field: 'Base Pads Yes/No', title: 'base pads', width: 100 },
{ field: 'Material', title: 'material', width: 100 },
{ field: 'Production Technique', title: 'prod techn', width: 100 },
{ field: 'Tariff Group', title: 'tariff group', width: 100 },
{ field: 'Tariff Code', title: 'tariff code', width: 100 },
{ field: 'Opening Diamter (ODM) Outside to Outside Opening MM', title: 'opening dia (mm)', width: 100 },
{ field: 'Outside to Outside Opening Inches', title: 'opening dia (in)', width: 100 },
{ field: 'Inside Diameter (IDM) Inside to Inside MM', title: 'inside dia (mm)', width: 100 },
{ field: 'Inside to Inside Inches', title: 'inside dia (in)', width: 100 },
{ field: 'Widest / Length (WDM) MM', title: 'w/l (mm)', width: 100 },
{ field: 'Widest / Length Inches', title: 'w/l (in)', width: 100 },
{ field: 'Height (HT) MM', title: 'h (mm)', width: 100 },
{ field: 'Height (HT) Inches', title: 'h (in)', width: 100 },
{ field: 'Window Box / Oval Width (WI) MM', title: 'win box (mm)', width: 100 },
{ field: 'Window Box / Oval Width Inches', title: 'win box (in)', width: 100 },
{ field: 'Weight (WT) KG', title: 'w (kg)', width: 100 },
{ field: 'Weight (WT) LBS', title: 'w (lbs)', width: 100 },
{ field: 'Round / Square CBM', title: 'r/s (cbm)', width: 100 },
{ field: 'Round / Square CFT', title: 'r/s (cf)', width: 100 },
{ field: 'Rectangle / Oval CBM', title: 'r/o (cbm)', width: 100 },
{ field: 'Rectangle / Oval CFT', title: 'r/o (cf)', width: 100 },
{ field: 'LoadabilityTotal', title: '# of loads', width: 100 },
{ field: 'LoadabilitySuccessTotal', title: '# imported', width: 100 },
{ field: 'Status', title: 'import status', width: 100 },
{ field: 'Message', title: 'message', width: 100 }
]],
data: row.Designs,
onResize: function () {
$('#styleDesignLoadGrid').datagrid('fixDetailRowHeight', index);
},
onLoadSuccess: function () {
setTimeout(function () {
$('#styleDesignLoadGrid').datagrid('fixDetailRowHeight', index);
}, 0);
},
onExpandRow: function (indexSub, rowSub) {
var ddvSub = $(this).datagrid('getRowDetail', indexSub).find('table.ddvSub');
ddvSub.datagrid({
fitColumns: false,
singleSelect: true,
rownumbers: false,
loadMsg: '',
height: 'auto',
columns: [[
{ field: 'Factory', title: 'factory', width: 100 },
{ field: 'Port of Origin', title: 'port of origin', width: 100 },
{ field: 'Cost Region', title: 'cost region', width: 100 },
{ field: 'Container Type', title: 'container type', width: 100 },
{ field: 'Packaging Type', title: 'packaging type', width: 100 },
{ field: 'stackable', title: 'stackable', width: 100 },
{ field: 'load method', title: 'load method', width: 100 },
{ field: 'Units Per Pallet / Shipping Carton', title: 'unit per pallet', width: 100 },
{ field: 'Pallets / Shipping Cartons Per Container', title: 'pallets per cont', width: 100 },
{ field: 'Total Units Per Container', title: 'total units per cont', width: 100 },
{ field: 'Container Weight KG', title: 'cont wt (kg)', width: 100 },
{ field: 'Container Weight LBS', title: 'cont wt (lbs)', width: 100 },
{ field: 'Length MM', title: 'length (mm)', width: 100 },
{ field: 'Length Inches', title: 'length (in)', width: 100 },
{ field: 'Width MM', title: 'width (mm)', width: 100 },
{ field: 'Width Inches', title: 'width (in)', width: 100 },
{ field: 'Height MM', title: 'height (mm)', width: 100 },
{ field: 'Height Inches', title: 'height (in)', width: 100 },
{ field: 'Weight KG', title: 'weight (kg)', width: 100 },
{ field: 'Weight Pounds', title: 'weight (lbs)', width: 100 },
{ field: 'Volume CBM', title: 'vol (cbm)', width: 100 },
{ field: 'Volume CF', title: 'vol cf)', width: 100 },
{ field: 'Product Unit 1st Cost', title: 'first cost', width: 100 },
{ field: 'Packaging Cost', title: 'packaging cost', width: 100 },
{ field: 'Label Cost', title: 'label cost', width: 100 },
{ field: 'Other Cost, Manual Entry Explain To Factory', title: 'explain', width: 100 },
{ field: 'Other Cost', title: 'other cost', width: 100 },
{ field: 'Total Cost', title: 'total cost', width: 100 },
{ field: 'Status', title: 'status', width: 100 },
{ field: 'Message', title: 'message', width: 100 }
]],
data: rowSub.Loadability,
onResize: function () {
$('#styleDesignLoadGrid').datagrid('fixDetailRowHeight', indexSub);
},
onLoadSuccess: function () {
setTimeout(function () {
$('#styleDesignLoadGrid').datagrid('fixDetailRowHeight', indexSub);
}, 0);
}
});
$('#styleDesignLoadGrid').datagrid('fixDetailRowHeight', indexSub);
}
});
$('#styleDesignLoadGrid').datagrid('fixDetailRowHeight', index);
}
});
Everything else is working great. |
|
|
|
|
