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
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
};
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.
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.
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
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.