jQuery autocomplete data undefined error - javascript

I am using jquery v 2.0.0 and jquery ui 1.10.3
Following is my jquery ui autocomplete code:
$nameField.combobox({
source: people,
buttonSelector: '.toggleList',
focus: function () {
return false;
},
select: function (event, ui) {
$nameField.val(ui.item.name).data({
id: ui.item.id,
name: ui.item.name,
birthdate: ui.item.birthdate
});
return false;
}
}).data('ui-autocomplete')._renderItem = function (ul, item) {
if (!_.include(self.idArr, item.id)) {
return $('<li></li>').data('ui-autocomplete-item', item).append('<a>' + item.name + '</a>').appendTo(ul);
}
};
This was working perfectly in older version of jquery. But after the upgrade, when I click the .toggleList button, it opens the first time and there's another button to add the selected name to a div. After that when I click the `.toggleList' combo selector, the autocomplete is not opening. It gives me the following error:
Uncaught TypeError: Cannot call method 'data' of undefined jquery.ui.autocomplete.js?1376892069:527
Anyone came across any issues like this? I tried several fixes mentioned in other stackoverflow threads, but none of them are working for me.
Hope someone could help me to fix this bug
Thanks

I found the solution!
Somepeople think that "ui-autocomplete" is wrong, so them uses "autocomplete" or "uiAutocomplete", but that is wrong. Actually, "ui-autocomplete" is the right way to do this.
I have the same issue you have, and I find with a friend the problem of this code. Instead:
.data('ui-autocomplete')._renderItem = function (ul, item) {
if (!_.include(self.idArr, item.id)) {
return $('<li></li>').data('ui-autocomplete-item', item).append('<a>' + item.name + '</a>').appendTo(ul);
}
};
Use:
._renderItem = function (ul, item) {
if (!_.include(self.idArr, item.id)) {
return $('<li></li>').data('ui-autocomplete-item', item).append('<a>' + item.name + '</a>').appendTo(ul);
}
};
I think combobox and autocomplete returns a data('ui-autocomplete'), so if you type .data('ui-autocomplete') you're doing something like:
.data('ui-autocomplete').data('ui-autocomplete')
What's wrong....well, actually I don't know why this don't work and why without this works, but trust me, delete .data('ui-autocomplete') and be happy!

Related

Loop jQuery script for a list of elements

I have the following jQuery script that I need to execute for a long list of objects.
$("#ID_001").change(function(event) {
event.preventDefault();
if(map.hasLayer(ID_001)) {
$(this).removeClass('selected');
map.removeLayer(ID_001);
} else {
map.addLayer(ID_001);
$(this).addClass('selected');
}
});
What I have done
Using the following resource:
api.jquery.com
jquery-loop-for-script
jquery-for-each-looping-a-list-of-objects
I don't think this is a duplicate question of the above as this include an event handler function.
I have written the following loop but this still doesn't work. I can't understand where is the problem.
var obj = {
"#ID_001": "ID_001",
"#ID_002": "ID_001"
};
$.each( obj, function( key, value ) {
$(key).change(function(event) {
event.preventDefault();
if(map.hasLayer(value)) {
$(this).removeClass('selected');
map.removeLayer(value);
} else {
map.addLayer(value);
$(this).addClass('selected');
}
});
});
Can anyone explain to me where is the problem?
Further details
The script is a part of LeafLet map control buttons. Chrome DevTool show this message of error when I click on #ID_001 element, so I think that the problem is that value variable doesn't get the proper value.
Uncaught TypeError: Cannot create property '_leaflet_id' on string
'L_puntiA'
at m (Util.js:56)
at i.hasLayer (Layer.js:211)
at HTMLInputElement. (mymap_main.js:103)
at HTMLInputElement.dispatch (jquery-3.3.1.slim.min.js:2)
at HTMLInputElement.v.handle (jquery-3.3.1.slim.min.js:2)
As sorted out in the comment your problem is that you define the objects with strings instead of variables.
Instead of:
var obj = {
"#ID_001": "ID_001",
"#ID_002": "ID_001"
};
Use:
var obj = {
"#ID_001": ID_001,
"#ID_002": ID_002
};

Conditional fields based on select value in SiteOrigin Page Builder

I'm trying to integrate Page Builder by SiteOrigin into my plugin. I've added some custom fields under the row styles via the siteorigin_panels_row_style_fieldsfilter found here. One of the custom fields is a select. I would like fields to either be hidden or displayed when the select is at a certain value. I've enqueued the Javascript to Page Builder using the siteorigin_panel_enqueue_admin_scriptsaction as per the documentation, and have even added the panelsopen event with some test code:
jQuery( document ).ready(function($) {
$(document).on('panelsopen', function(e) {
$('select[name="style[test_field]"]').bind('change', function (e) {
if( $(this).val() == 'option1' ) {
$('input[name="style[second_field]').hide(500);
$('input[name="style[third_field]').show(500);
} else {
$('input[name="style[second_field]').show(500);
$('input[name="style[third_field]').hide(500);
}
});
});
});
However, this does not seem to be working. Any help or ideas how I could solve this would be greatly appreciated!
After some research I figured this out by using the ajaxComplete() function in jQuery. This is how it works:
$(function() {
$(document).ajaxComplete(function() {
$('select[name="style[test_field]"]').bind('change', function (e) {
if( $(this).val() == 'option1' ) {
$('input[name="style[second_field]').hide(500);
$('input[name="style[third_field]').show(500);
} else {
$('input[name="style[second_field]').show(500);
$('input[name="style[third_field]').hide(500);
}
});
});
});
I hope this helps anyone trying to achieve something similar.

JQuery autocomplete Search method

I am using JQuery UI autocomplete on my website. I am creating the auto complete object like so:
$.widget( "custom.code_complete", $.ui.autocomplete, {
_renderMenu: function( ul, items ) {
var self = this,
currentCategory = "";
$ul = ul;
$.each( items, function( index, item ) {
if ( item.category != currentCategory ) {
ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
currentCategory = item.category;
}
self._renderItem( ul, item );
});
}
});
$("#r-code").code_complete({
source: "URL",
minLength: 2,
select: function(event, ui) {
$(".button-row").fadeIn();
get_details(ui.item.url);
}
});
This setups the autocomplete field fine. I can search inside the field fine and it brings back results without a problem. Sometimes however the users will be redirected from another page with the autocomplete value set as a parameter and if this is the case the autocomplete will be triggered programmatically, I am trying to do this with the following code:
function parse_param_code(code) {
console.log(code);
$("#r-code").autocomplete('search', code);
}
This method is called successfully and the code is put out to the console but the autocomplete search is not triggered and does not do anything. Am I doing something wrong in my code for this not to trigger a search? I have read the JQuery UI documentation and the above code is supposed to trigger the search method. Any help would be appreciated.
Thanks
Eef
Changing the
$("#r-code").autocomplete('search', code);
to your own widget name, i.e:
$("#r-code").code_complete('search', code);
produces the desired result.
example: http://jsfiddle.net/vHJsu/
If you do a console.log($("#r-code").data("autocomplete")); you'll notice there isn't a widget with that name attached to the element.

Getting Jquery script to call action method

Good Morning Stack OverFlow enthusiasts. I have been having an issue that I am attempting to narrow down, and I could use the help of the good people at stack overflow... For some reason, the action controller that I attempt to call from a view never executes... I have breakpoints set and everything and it just never seems to get called...
$(function () {
$("#DemoGraphSubmit").click(function (e) {
e.preventDefault();
var data = [];
$.getJSON("/PatientACO.aspx/SearchByDemographic", null, function (data) {
data = $.map(data, function (item, a) {
return "<option value=" + item.Value + ">" + item.Text + "</option>";
});
$("#PatientListToAdd").html(data.join(""));
});
});
});
I checked to make sure that the url is correct... PatientACOController is my controller and SearchByDemographic is my action method... DemoGraphSubmit is the button in my view that submits... I am not sure what I am doing wrong here... Any help would be appreciated.
If you're using the default routing in MVC the URL should be /PatientACO/SearchByDemographic.
The .aspx part shouldn't exist

Help to porting function prototype -> jquery 1.4

I'm not an expert of jquery and i need help to porting this function
auto_complete: function(controller, focus) {
if (this.autocompleter) {
Event.stopObserving(this.autocompleter.element);
delete this.autocompleter;
}
this.autocompleter = new Ajax.Autocompleter("auto_complete_query", "auto_complete_dropdown", "/admin/" + controller + "/auto_complete", {
frequency: 0.25,
afterUpdateElement: function(text, el) {
if (el.id) {
window.location.href = "/admin/" + controller + "/" + escape(el.id);
} else {
$("auto_complete_query").value = "";
window.location.href = window.location.href;
}
}
});
$("auto_complete_dropdown").update("");
$("auto_complete_query").value = "";
if (focus)
$("auto_complete_query").focus();
},
Anyone may help me?
Although that uses some Prototype calls, that's actually mostly just using a script.aculo.us auto-completer; you'll want to find a similar widget for jQuery (there's one listed on the jQuery plug-ins page) and then rewrite the code to do the same thing using that plug-in. Looks like mostly what it does is navigate to "/admin/mumble/id" where "mumble" is the value of the pass-in controller variable and "id" is the ID of the element chosen in the auto-completer.

Categories