 Show Posts
|
|
Pages: [1] 2
|
|
1
|
General Category / EasyUI for jQuery / Combobox - disable setValue
|
on: September 27, 2023, 09:22:06 AM
|
Hi, I have created a combobox search that lookup postcodes (zipcodes). But I do not want the the combobox text changed when the user selects an address. How do I prevent combobox onSelect from changing (setting) the combobox textbox? <!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Address Finder</title>
<link href="js/easyUI/themes/metro/easyui.css" rel="stylesheet" type="text/css">
<link href="js/easyUI/themes/icon.css" rel="stylesheet" type="text/css">
<script src="js/easyUI/jquery.min.js" type="text/javascript"></script>
<script src="js/easyUI/jquery.easyui.min.js" type="text/javascript"></script>
</head>
<body>
<div class="content">
<p>(Free test code: WR5 3DA)</p>
<input id="searchBox" class="easyui-combobox" style="width: 14%;" data-options="
mode: 'remote',
valueField: 'id',
textField: 'name',
required: true,
label: 'Enter Address:',
labelPosition: 'top',
hasDownArrow: false,
iconCls: 'icon-search',
onSelect: findAddress,
loader: loadAddresses
">
</div>
<script>
var key = 'myKey';
var isMiddleware = false;
var origin = '';
var countries = 'GBR';
var limit = '10';
var language = 'en-gb';
var field1Format = '';
function loadAddresses(param, success, error) {
if (param === undefined) {
return;
}
else {
var q = param.q || '';
}
q = $.trim(q);
if (q === '') {
return;
}
$('.textbox-icon').last().removeClass('icon-search');
$('.textbox-icon').last().addClass('icon-loading');
$.ajax({
url: 'https://services.postcodeanywhere.co.uk/Capture/Interactive/Find/v1.10/json3.ws',
method: 'POST',
data: {
Key: key,
Text: q,
IsMiddleware: isMiddleware,
Origin: origin,
Countries: countries,
Limit: limit,
Language: language
},
success: function(data) {
var items = $.map(data.Items, function(item) {
return {
id: item.Id,
name: item.Text + ' ' + item.Description,
description: item.Description,
text: item.Text,
type: item.Type
};
});
$('.textbox-icon').last().removeClass('icon-loading');
$('.textbox-icon').last().addClass('icon-search');
success(items);
},
error: function () {
error.apply(this, arguments);
}
});
}
function findAddress(record) {
if (!record) {
return;
}
$('.textbox-icon').last().removeClass('icon-search');
$('.textbox-icon').last().addClass('icon-loading');
var url = '';
var params = '';
var address = $(this).combobox('getText');
params += 'Key=' + encodeURIComponent(key);
if (record.type === 'Address') {
url = 'https://services.postcodeanywhere.co.uk/Capture/Interactive/Retrieve/v1.00/json3.ws';
params += '&Id=' + encodeURIComponent(record.id);
params += '&Field1Format=' + encodeURIComponent(field1Format);
}
else {
url = 'https://services.postcodeanywhere.co.uk/Capture/Interactive/Find/v1.10/json3.ws';
params += '&Text=' + encodeURIComponent(address);
params += '&IsMiddleware=' + encodeURIComponent(isMiddleware);
params += '&Container=' + encodeURIComponent(record.id !== undefined ? record.id : '');
params += '&Origin=' + encodeURIComponent(origin);
params += '&Countries=' + encodeURIComponent(countries);
params += '&Limit=' + encodeURIComponent(limit);
params += '&Language=' + encodeURIComponent(language);
}
$.ajax({
type: 'POST',
url: url,
data: params,
success: function(data) {
if (record.type === 'Address') {
$('#searchBox').combobox('setValue', data.Items[0].PostalCode);
}
else {
var items = $.map(data.Items, function(item) {
return {
id: item.Id,
name: item.Text + ' ' + item.Description,
description: item.Description,
text: item.Text,
type: item.Type
};
});
$('#searchBox').combobox('loadData', items);
// Replace the selected value with the user's input
$('#searchBox').combobox('setValue', address);
$('.textbox-icon').last().removeClass('icon-loading');
$('.textbox-icon').last().addClass('icon-search');
$('.combo-panel').panel('open');
}
},
error: function () {
error.apply(this, arguments);
}
});
}
</script>
</body>
</html>
|
|
|
|
|
3
|
General Category / General Discussion / Re: Select2
|
on: February 12, 2021, 03:54:13 AM
|
I believe there is no https://select2.org like function. I have created something similar, so that when I type the first entry in the selection is highlighted if what I typed was found. Pressing enter selects the highlighted item.  Hello,
Is there any component simil to Select2..?
thanks
|
|
|
|
|
5
|
General Category / EasyUI for jQuery / [SOLVED] combobox loader with loading icon
|
on: August 21, 2017, 05:59:14 AM
|
This code does not work if I make any change properties. IE. the combobox icon. How can I change the combobox icon with the loader is call? This solves the problem. 
$('.textbox-icon').removeClass('icon-search');
$('.textbox-icon').addClass('icon-loading');
var emailAddresses = function(param, success, error) {
var q = param.q || '';
if (q.length < 2) {
return false;
}
// loader fails if this line is uncommented.
// $(this).combobox({iconCls: 'icon-loading'});
$.ajax({
url: 'emailAddresses.php',
dataType: 'json',
data: {
q: q
},
success: function(data){
var items = $.map(data, function(ename, index){
return {
id: index,
name: ename.name,
email: ename.email
};
});
success(items);
},
error: function(){
error.apply(this, arguments);
}
});
// loader fails if this line is uncommented.
// $(this).combobox({iconCls: 'icon-search'});
}
TypeError: _4bf is undefined[Learn More] jquery.easyui.min.js:6492:5
_4bd http://localhost/phpifm/js/easyUI/jquery.easyui.min.js:6492:5
validate/< http://localhost/phpifm/js/easyUI/jquery.easyui.min.js:6613:1
each http://localhost/phpifm/js/easyUI/jquery.min.js:2:2973
each http://localhost/phpifm/js/easyUI/jquery.min.js:2:833
validate http://localhost/phpifm/js/easyUI/jquery.easyui.min.js:6612:8
$.fn.validatebox http://localhost/phpifm/js/easyUI/jquery.easyui.min.js:6587:8
_4ab/</_4ad.timer< http://localhost/phpifm/js/easyUI/jquery.easyui.min.js:6441:1
GET
XHR
http://localhost/phpifm/emailAddresses.php [HTTP/1.1 200 OK 93ms]
|
|
|
|
|
6
|
General Category / EasyUI for jQuery / Re: messager.progress with Chrome
|
on: July 25, 2017, 09:02:57 AM
|
This working for me in Firefox and Chrome:- function selectionsExport() {
if (typeof(EventSource) !== "undefined") {
$.messager.show({
title: 'Please waiting',
msg: 'Generating data...'
});
$.messager.progress({
title: 'Please waiting',
msg: 'Writing data...',
interval: 0
});
var es = new EventSource("selectionsExportToCSV.php?selectionID="
+ selectedRow.IFM_SELECTION_ID);
es.onmessage = function(e) {
var result = JSON.parse(e.data);
if (result.errorMsg) {
$.messager.alert({
title: 'Error',
msg: result.errorMsg
});
result.progress = 100;
}
$.messager.progress('bar').progressbar('setValue', result.progress);
if (result.progress === 100) {
es.close();
$.messager.progress('close');
if (result.errorMsg === false) {
window.location.href = "selectionsExportToCSV.php?selectionID="
+ selectedRow.IFM_SELECTION_ID + "&action=fetch";
}
}
};
es.onerror = function(e) {
es.close();
$.messager.progress('close');
$.messager.alert({
title: 'Error',
msg: "Export failed with unknown error!"
});
}
}
else {
$.messager.alert({
title: 'Error',
msg: "Server sent events, not supported!"
});
}
}
|
|
|
|
|
8
|
General Category / EasyUI for jQuery / Re: How can I keep treegrid's expand state when reload date?
|
on: April 21, 2016, 03:02:37 AM
|
You will need to save the treegrid options data then restore the data afterwards. Here is what I use (with a session helper function): dg.datagrid({
onClickRow: function() {
// Save current selection and options
Session.set('dataSelected', $(this).datagrid('getSelected').id);
Session.set('dataOptions', $(this).datagrid('options'));
Session.set('restoreData', true);
}
});
Restore var opts = Session.get('dataOptions');
var id = Session.get('dataSelected');
var restore = Session.get('restoreData');
if (opts && restore) {
dg.datagrid({
sortName: opts.sortName,
sortOrder: opts.sortOrder,
pageSize: opts.pageSize,
pageNumber: opts.pageNumber
});
dg.datagrid('selectRecord', id);
}
Get session.js from here: http://blogs.sitepointstatic.com/examples/tech/js-session/index.html |
|
|
|
|
9
|
General Category / EasyUI for jQuery / Re: autocomplete comboxbox not working with editable=FALSE
|
on: April 15, 2016, 07:04:24 AM
|
Here is how to validate an editable combobox. Add a new validatebox rule $.extend($.fn.validatebox.defaults.rules, {
valid: {
validator: function(value, param){
var string = JSON.stringify($(param[0]).combobox('getData'));
if (string.toLocaleUpperCase().indexOf('"' + value.toLocaleUpperCase() + '"') > 0) {
return true;
}
else {
return false;
}
},
message: 'Invalid data.'
}
});
Apply the new rule to your combobox (can be used with required: true) <input id="cc" class="easyui-combobox" name="dept" validType='valid[cc]' >
Validate onSubmit $('#ff').form({
url:...,
onSubmit: function(){
return $(this).form('enableValidation').form('validate');
},
success:function(data){
alert(data)
}
});
When you submit the form if the data entered in the combobox does not match the select option data the form returns false and the combobox in highlighted in red. |
|
|
|
|
12
|
General Category / EasyUI for jQuery / Re: combobox clear on click
|
on: December 09, 2015, 01:03:18 AM
|
|
I have a editable combobox, that has a default text value "---Select---".
What I need is, when the combobox is selected (by mouse click or keyboard tab) the default text value is cleared before I entered text or select from the drop down.
|
|
|
|
|
