I've been using this script: https://github.com/stephjang/placecomplete for many years with no issues. Tonight I received many complaints that users cannot select the address from the drop down menu. Typing in an address will work fine and results will show up but when trying to select an address, it does not do anything. Does anyone know if something has changed with google blocking placecomplete requests ?
My code:
$inputLocationSearch.placecomplete({
placeholderText: "Enter your site location...",
requestParams: {
componentRestrictions: {country: ['ca','us']}
}
});
Screen shot of issue (mouse or keyboard CANNOT select an address found):
Found the issue within the plugin jquery.placecomplete.js code. Replaced default id parameter to use place_id, as id is deprecated with google autocomplete.
I added: apr["id"] = apr["place_id"]; above existing code: apr["text"] = apr["description"];
Here's the whole code block with the addition:
var select2options = $.extend({}, {
query: function(query) {
GooglePlacesAPI.getPredictions(query.term, requestParams)
.done(function(aprs) {
var results = $.map(aprs, function(apr) {
// Select2 needs a "text" and "id" property set
// for each autocomplete list item. "id" is
// already defined on the apr object
apr["id"] = apr["place_id"];
apr["text"] = apr["description"];
return apr;
});
query.callback({results: results});
})
.fail(function(errorMsg) {
$el.trigger(pluginName + ":error", errorMsg);
query.callback({results: []});
});
},
initSelection: function(element, callback) {
// initSelection() was triggered by value being defined directly
// in the input element HTML
var initText = $el.val();
// The id doesn't matter here since we're just trying to prefill
// the input with text for the user to see.
callback({id: 0, text: initText});
},
minimumInputLength: 1,
selectOnBlur: true,
allowClear: true,
multiple: false,
dropdownCssClass: "jquery-placecomplete-google-attribution",
placeholder: this.options.placeholderText
}, this.options);
Related
I'm successfully using the Loqate Address Verfication control, and filter its address results down to a single country, chosen in a select control.
However, when the country code in the select is changed, I've not been able to change the country filter in the Loqate address service to use the updated value.
var addressControl;
var avOptions = { suppressAutocomplete: false, setCountryByIP: false };
$(function () {
addressControl = initialiseAddressValidation();
});
$("#CountryCode").change(function () {
if (addressControl) {
addressControl.destroy();
addressControl = null;
}
addressControl = initialiseAddressValidation();
});
function initialiseAddressValidation() {
avOptions.key = $("#avKey").val();
avOptions.countries = { codesList: $("#CountryCode").val() };
//other config truncated
}
Loqate's docs suggest that the .destroy() method I'm calling on change of the select should remove the control, and I tried setting it to null, before recreating it with the new country code value, but the address results it returns are still for the original country is was initialised with on load.
Does anyone know how to set a new country filter to the Loqate address verifier without completely reloading the page?
My working solution, based on #SlapdashFox 's invaluable assistance. Done this way to avoid having to completely re-create the control on every change of country
$("#CountryCode").change(function () {
if (addressControl) {
addressControl.options.search.countries = $("#CountryCode").val();
} else {
addressControl = initialiseAddressValidation();
}
});
Looks like you're changing the wrong value here, you want to be changing the search.countries attribute within your options object.
In your above example you could do this as follows:
function initialiseAddressValidation() {
avOptions.key = $("#avKey").val();
avOptions.search = { countries: $("#CountryCode").val() };
}
I have this fiddle which is an extension of the Backbone/Marionette playground fiddle. I included select2 js and css files.
Is it possible to edit a tag that is not the last tag? You can edit by backspacing in the box, but it only lets you touch the last one. I would like it to act like a gmail 'to' list where you can double click on one and edit it, then it goes back to a tag on blur.
this.$('#foo').select2({
data: [{
id: 1,
text: "test1.com"
}, {
id: 2,
text: "test2.com"
}],
multiple: true,
allowclear: true,
tags: [],
placeHolder: "Click Here!",
tokenSeparators: [',', ' '],
minimumResultsForSearch: 1
});
Unfortunately, there is no way to do this using just the select2 out-of-the-box functionality. But it's quite extendable, so here's what does the trick:
var $select2 = this.$('#foo').select2({ tags: true });
var select2 = $select2.data("select2");
$(document.body).on("dblclick", ".select2-selection__choice", function(event) {
var $target = $(event.target);
// get the text and id of the clicked value
var targetData = $target.data("data");
var clickedValue = targetData.text;
var clickedValueId = targetData.id;
// remove that value from select2 selection
var newValue = $.grep(select2.val(), function (value) {
return value !== clickedValueId;
});
$select2.val(newValue).trigger("change");
// set the currently entered text to equal the clicked value
select2.$container.find(".select2-search__field").val(clickedValue).trigger("input").focus();
});
And a JsFiddle, of course.
Is there a way to use HTML5's localstorage method with Jquery's select2 plugin? Right now when I enter data and close the browser/tab, all entered data is gone, which is not so optimal since it can get confusing if you dont remember what you've entered
My select2 code looks like this:
$(".select").select2({
minimumInputLength: 1,
multiple: true,
query: function(query){
$.getJSON( 'url path to remote API', {
name:query.term,
featured:true
}, function(results){
var data = {results: []};
$.each(results.data, function(index, item){
data.results.push({id: item.artist_id, text: item.name});
});
query.callback(data);
} );
}
});
Any help is very appreciated
give this a try: http://jsfiddle.net/7267rkxy/12/
I commented the code for you for some explanation of what's going on, you should be able to just swap out the data option with your query option and it should still work
PS: I noticed none of your answered questions have been marked 'accepted', if someone gives you an answer that you like or that works for you, you should mark their answer 'accepted' by clicking the checkbox next to the answer
HTML
<!-- setting a hard width for example -->
<input type="text" class="select" style="width:200px;" value="" />
JS
// set value property to local storage value
$(".select").val(localStorage.s2options);
$(".select").select2({
minimumInputLength: 1,
multiple: true,
data: [{id: 1, text: 'option1'},{id: 2, text: 'option2'},{id: 3, text: 'option3'}], //sample data
initSelection: function (element, callback) {
// initSelection only fires when there is something in the value property
callback($.parseJSON(element.val()));
}
}).on('change', function(info){
// checking if we have anything stored in local storage
var s2options = localStorage.s2options ? JSON.parse(localStorage.s2options) : [];
// add / remove options
if (info.added) {
s2options.push(info.added);
} else if (info.removed) {
s2options = s2options.filter(function(opt) {
return opt.id != info.removed.id;
});
}
// save selections to local storage
localStorage.s2options = JSON.stringify(s2options);
});
In addition to #bruchowski 's answer, the newer version of Select2 has a different way of doing this (initSelection and query are still supported for backwards compatibility though):
You have to create a custom DataAdapter and implement current() and query().
Okay, so in a nutshell, what I need to do is to automatically apply a set of sorting criteria and data filters to the jqGrid when it loads. The intent is that the user will start with about 10 pre-filled filters and then, if they so choose, they can alter those filters or the sorting however they see fit.
So far, with much Google-ing, trial and error and sweat, I have the following working:
-> I can load/save the sort column & sort order in a session cookie.
-> I can load the search dialog with pre-defined search filters. After the grid loads, I can open the modal dialog and see the proper filters and if I click "Find" the appropriate data is posted to the server and the right results are returned to the screen.
The thing that is biting me in the butt right now is, I think, the easy part, but it escapes me. I can't seem to do either of the following:
( A ) The ideal thing would be if I could attach these filters to the grid and it's post data in advance of the initial load so that there is only a single trip to the server.
( B ) The workable solution, though less ideal, would be for the grid to load the first page of the unfiltered data first, and then apply the filters and re-query the server for the filtered data.
Since I can manually click the "find" button today and it works, I thought that "B" would be a good next-step. So, in my gridComplete function, I have the following code:
$('#AccountGrid').clearFilter({gridName:'AccountGrid', pagerName:'AccountPager'});
$('#AccountGrid').addFilter({gridName:'AccountGrid', field:'AccountID', data:1, op:'ne'});
$('#AccountGrid').addFilter({gridName:'AccountGrid', field:'AccountID', data:3, op:'ne'});
// $('#fbox_AccountGrid').searchFilter().search();
// $('#fbox_AccountGrid .ui-search').click();
$('#AccountGrid').trigger('reloadGrid');
NOTE: "clearFilter" and "addFilter" are extension functions I have added to jqGrid to simplify adding and removing filters on the grid. They work exactly as desired at this point.
As you can see with those last three lines of code, I have tried using the built-in function, as well as going after the find button directly and even just forcing the entire grid to refresh. Either way, there is no attempt by the grid to go get new data (I am using Fiddler to watch for it).
What am I doing wrong in trying to force the grid to reload with the new filters?
And, if you know how, can you give me some direction on how to get the initial load of the grid to respect these filters?
TIA
Tony
Here is the full grid configuration (minus the extra columns and some colModel "cruft"):
jQuery('#AccountGrid').jqGrid({
url: '<my URL>',
width: 950,
height: 330,
shrinkToFit: 'true',
datatype: 'json',
mtype: 'POST',
multiselect: true,
multiboxonly: true,
multiselectWidth: 20,
colNames: [
'Account ID'
],
colModel: [
{ name: 'AccountID', index: 'AccountID', sortable: false, hidden:false, search:true }
],
gridComplete: function () {
// add the search criteria to the grid
if (initialLoad == true){
$('#AccountGrid').clearFilter({gridName:'AccountGrid', pagerName:'AccountPager'});
$('#AccountGrid').addFilter({gridName:'AccountGrid', field:'AccountID', data:1, op:'ne'});
$('#AccountGrid').addFilter({gridName:'AccountGrid', field:'AccountID', data:3, op:'ne'});
// $('#fbox_AccountGrid').searchFilter().search();
// $('#fbox_AccountGrid .ui-search').click();
$('#AccountGrid').trigger('reloadGrid');
initialLoad = false;
}
},
jsonReader: {
repeatitems: false,
id: 'AccountID'
},
pager: jQuery('#AccountPager'),
rowNum: 50,
rowList: [10, 15, 25, 50, 75, 100],
onSortCol : function (sortname, indexColumn, sortorder){
$.cookie('AccountGrid_sortname', sortname);
$.cookie('AccountGrid_sortorder' , sortorder);
},
sortname : $.cookie('AccountGrid_sortname') ? $.cookie('AccountGrid_sortname') : 'AccountID',
sortorder: $.cookie('AccountGrid_sortorder') ? $.cookie('AccountGrid_sortorder') : 'asc',
viewrecords: true,
imgpath: ''
});
$('#AccountGrid').jqGrid('navGrid','#AccountPager',
{ view: false, add: false, edit: true, del: false,
alertcap:'No Account Selected',
alerttext: 'Please select an Account from the grid before performing this operation.',
editfunc: showAccountEditDialog },
{}, // default settings for edit
{}, // default settings for add
{}, // delete
{closeOnEscape: true, multipleSearch: true, closeAfterSearch: true }, // search options
{}
);
And, by request, here is the code I have for add/clear filter:
/*
This is a grid extension function that will insert a new filter criteria
on the specified grid with the provided field, operation & data values
*/
(function ($) {
jQuery.jgrid.addSearchFilter =
{
// get/set the parameters
addFilter: function (options) {
var grid = $(this);
// get offset values or assign defaults
var settings = $.extend({
gridName: '',
field: '',
data: '',
op: ''
}, options || {});
// get the column model object from the grid that matches the provided name
var colModel = grid.getGridParam('colModel');
var column;
for (var i = 0; i < colModel.length; i++) {
if (colModel[i].name == options.field){
column = colModel[i];
break;
}
}
colModel = null;
if (column){
// if the last filter has a value, we need to create a new one and not overwrite the existing ones
if ($('#fbox_' + options.gridName + ' .sf .data input').last().val()){
$('#fbox_' + options.gridName).searchFilter().add();
}
// assign the selections to the search dialog
$('#fbox_' + options.gridName + ' .sf .fields select.field').last().val(column.index).change();
$('#fbox_' + options.gridName + ' .sf .data input').last().val(options.data);
$('#fbox_' + options.gridName + ' .sf .ops select.default').last().val(options.op).change();
}
}
}
})(jQuery);
jQuery.fn.extend({ addFilter: jQuery.jgrid.addSearchFilter.addFilter });
/*
This is a grid extension function that will clear & reset the filter criteria
*/
(function ($) {
jQuery.jgrid.clearSearchFilter =
{
// get/set the parameters
clearFilter: function (options) {
var grid = $(this);
// get offset values or assign defaults
var settings = $.extend({
gridName: '',
pagerName: ''
}, options || {});
// clear the filters and "pop" the dialog to force the HTML rendering
$('#fbox_' + options.gridName).searchFilter().reset();
$('#' + options.pagerName + ' .ui-icon-search').click();
$('#fbox_' + options.gridName).searchFilter().close();
}
}
})(jQuery);
jQuery.fn.extend({ clearFilter: jQuery.jgrid.clearSearchFilter.clearFilter });
First of all because you don't post the code which define the jqGrid I make some assumption myself. I try to base on indirect information from your question.
1) I suppose that you use server side datatype parameter of jqGrid like 'json' or 'xml'.
2) You don't use loadonce:true parameter. In general if would be possible to make server reload from the grid having loadonce:true, but in the case you have to reset the value of datatype parameter to initial value (one from the value 'json' or 'xml').
The following three old answer: this (in case of single value searching) and this (in case of advanced searching or the toolbar searching with additional parameter stringResult:true) will give you enough information about setting the searching filters and reloading the grid corresponds to the new filters. Another answer shows how to clear the searching filter if it is no more needed.
Loading of the grid at the first time with the filters is another question. It can be very easy implemented. You should just use datatype:"local" instead of datatype:"json" or datatype:"xml" which you really need. In the case the url parameter of jqGrid will be just ignored at the first load and jqGrid send no request to the server. Then you set the filters like you as need and only then use $("#youGridId").trigger("reloadGrid");
The reason why the reloadGrid didn't work in your case I could not know exactly, but I suppose that you didn't set the search:true parameter of the jqGrid which one confuses frequently with the _search property of the postData parameter (see here).
I was asked to post this as a question on StackOverflow by http://twitter.com/jonathanjulian which was then retweeted by several other people. I already have an ugly solution, but am posting the original problem as requested.
So here's the back story. We have a massive database application that uses ExtJS exclusively for the client side view. We are using a GridPanel (Ext.grid.GridPanel) for the row view loaded from a remote store.
In each of our interfaces, we also have a FormPanel (Ext.form.FormPanel) displaying a form that allows a user to create or edit records from the GridPanel. The GridPanel columns are bound to the FormPanel form elements so that when a record is selected in the GridPanel, all of the values are populated in the form.
On each form, we have an input field for the table row ID (Primary Key) that is defined as such:
var editFormFields = [
{
fieldLabel: 'ID',
id: 'id_field',
name: 'id',
width: 100,
readOnly: true, // the user cannot change the ID, ever.
monitorValid: true
} /* other fields removed */
];
So, that is all fine and good. This works on all of our applications. When building a new interface, a requirement was made that we needed to use a third-party file storage API that provides an interface in the form of a small webpage that is loaded in an IFrame.
I placed the IFrame code inside of the html parameter of the FormPanel:
var editForm = new Ext.form.FormPanel({
html: '<div style="width:400px;"><iframe id="upload_iframe" src="no_upload.html" width="98%" height="300"></iframe></div>',
/* bunch of other parameters stripped for brevity */
});
So, whenever a user selects a record, I need to change the src attribute of the IFrame to the API URL of the service we are using. Something along the lines of http://uploadsite.com/upload?appname=whatever&id={$id_of_record_selected}
I initially went in to the id field (pasted above) and added a change listener.
var editFormFields = [
{
fieldLabel: 'ID',
id: 'id_field',
name: 'id',
width: 100,
readOnly: true, // the user cannot change the ID, ever.
monitorValid: true,
listeners: {
change: function(f,new_val) {
alert(new_val);
}
}
} /* other fields removed */
];
Nice and simple, except that it only worked when the user was focused on that form element. The rest of the time it failed to fire at all.
Frustrated that I was past a deadline and just needed it to work, I quickly implemented a decaying poller that checks the value. It's a horrible, ugly hack. But it works as expected.
I will paste my ugly dirty hack in an answer to this question.
"The GridPanel columns are bound to
the FormPanel form elements so that
when a record is selected in the
GridPanel, all of the values are
populated in the form."
As I understand it from the quote above, the rowclick event is what actually triggers the change to your form in the first place. To avoid polling, this could be the place to listen, and eventually raise to your custom change event.
Here is the ugly hack that I did to accomplish this problem:
var current_id_value = '';
var check_changes = function(offset) {
offset = offset || 100;
var id_value = document.getElementById('id_field').value || '';
if ( id_value && ( id_value != current_id_value ) ) {
current_id_value = id_value;
change_iframe(id_value);
} else {
offset = offset + 50;
if ( offset > 2500 ) {
offset = 2500;
}
setTimeout(function() { check_changes(offset); }, offset);
}
};
var change_iframe = function(id_value) {
if ( id_value ) {
document.getElementById('upload_iframe').src = 'http://api/upload.php?id=' + id_value;
} else {
document.getElementById('upload_iframe').src = 'no_upload.html';
}
setTimeout(function() { check_changes(100); }, 1500);
};
It's not pretty, but it works. All of the bosses are happy.
If you took a moment to read the source, you would see that the Ext.form.Field class only fires that change event in the onBlur function