JavaScript function pass-through? - javascript

I'm not sure if this is doable, but I would like to be able to set a jQuery UI event as a function (directly), as opposed to continuing to wrap in additional function(event, ui) { ... } wrappers.
Hopefully you can see what I'm going for from the example below.
Here is what I would like:
$("#auto").autocomplete({
source: "somepage.php",
select: dropdownSelect,
minLength: 0
});
Now I would think that the above would work, since I'm simply trying to say "continue firing this event, just over to that function".
Unfortunately, that will not work, and I'm ending up with this: (and for some reason, a disconnect from all data)
$("#auto").autocomplete({
source: "somepage.php",
select: function(event, ui) { dropdownSelect(event, ui) },
minLength: 0
});

The following two examples should both work in theory:
var dropdownSelect = function(event, ui) {
// Code to select drop down
};
$("#auto").autocomplete({
source: "somepage.php",
select: dropdownSelect,
minLength: 0
});
And this:
function dropdownSelect(event, ui) {
// Code to select drop down
};
$("#auto").autocomplete({
source: "somepage.php",
select: function(event, ui) { dropdownSelect(event, ui) },
minLength: 0
});
JavaScript functions are first class citizens, which means that you can treat them like any other object.

sure why not define that function first:
var dropdownSelect = function(event, ui) { dropdownSelect(event, ui) };
$("#auto").autocomplete({
source: "somepage.php",
select: dropdownSelect,
minLength: 0
});

var dropdownSelect = function(event, ui) { ... };
var onDropdownSelect = function(event, ui) { dropdownSelect(event, ui) };
$("#auto").autocomplete({
source: "somepage.php",
select: onDropdownSelect,
minLength: 0
});

Related

Plugin jquery doesn't launch

I have a problem with a jquery plugin.
I just add a plugin like this :
$.ui.plugin.add("draggable", "smartguides", {
//
start: function(event, ui) {
console.log('TOTO');
}
//
}
I set my options there :
function draggableElementParameters(hash_id, is_smartguides)
{
var datas = {
containment:"#container_page",
scroll: false,
cursor:"pointer",
opacity: 0.35,
tolerance: 5,
cancel: "#cr-stage",
smartguides: '.element-container',
stop: function (event, ui) {
//
});
}, drag: function (event, ui) {
//
}
};
return datas;
}
Then I call it like this :
$("#element-edit").draggable(window.parent.draggableElementParameters({{ json_encode($element->hash_id) }}, Helpers.Utils.Cookie.isTrue('backend-contest-editor-is-draggable-help')));
And to finish, element-container is ok in my view.
The fact is the plugin is never triggered, the console.log never appear.
Any ideas about this bug ?
thank you !

how can I set default text and value in jquery autocomplete and trigger select

I have an array of objects (assessorList), how can I set default text and value in the jquery autocomplete and trigger select. For example if I send second object from the array to the function then Assessor 2, Test should be selected with 1116512 in AutoCompleteAssessorID and all the statements under select should be executed for that selection.
My HTML:
<input style="width:300px" id="AutoCompleteAssessor"> <input type="hidden" id="AutoCompleteAssessorID">
My JavaScript:
var assessorList = [{ id:"1116542", label:"Assessor 1, Test"}, { id:"1116512", label:"Assessor 2, Test"}, { id:"1117290", label:"Carey, Peter"}]
function a(ID, Text)
{
$("#AutoCompleteAssessor").autocomplete({
autoFocus: true,
minLength: 3,
source: assessorList,
focus: function(event, ui){
$("#AutoCompleteAssessor").val(ui.item.label);
$("#AutoCompleteAssessorID").val(ui.item.id);
return false;
},
select: function(event, ui){
$("#AutoCompleteAssessor").val(ui.item.label);
$("#AutoCompleteAssessorID").val(ui.item.id);
userId = ui.item.id;
getEventData();
return false;
},
change: function (event, ui){
if(!ui.item)
{
$("#AutoCompleteAssessor").val('');
$("#AutoCompleteAssessorID").val('');
}
}
})
}
I tried $(this).data('ui-autocomplete')._trigger('select', 'autocompleteselect', {item:{value:$(this).val()}}); but i get $(...).data(...) is undefined error.

jQuery UI Autocomplete Suggestions Not Closing on Select

I have an odd problem with a jQuery UI autocomplete. I want it so that when the text field gets focus, a list of all options in the autocomplete comes up. This works, but when selecting an item by clicking on it, the suggestions stay open. I want the suggestions list to disappear like autocomplete normally works.
It works fine when you select the item with your keyboard, but when you click an item, the list just keeps reappearing again over and over again.
To make this problem weirder, the functionality works perfectly when just passing values manually. It only starts happening when I'm passing in a JSON source.
Any ideas!?
Working Code - http://jsbin.com/aFeceTe/1/edit?html,js,output
$(document).ready(function(){
var test = [ { value: "1",label: "Google" }, { value: "2", label:"StackOverflow" }, { value: "3", label:"Microsoft" }, { value: "4", label:"Yahoo" } ];
$("input").autocomplete({
source: test,
delay: 0,
minLength: 0,
select: function(event, ui) {
event.preventDefault();
$(this).val(ui.item.label).attr('title', ui.item.label);
}
}).focus(function () {
$(this).val('').autocomplete("search");
});
});
Broken Code - http://jsbin.com/uyOGUVU/6/edit?html,js,output
$(document).ready(function(){
$("input").autocomplete({
source: 'http://jsbin.com/IdIXIRU/3/js',
delay: 0,
minLength: 0,
select: function(event, ui) {
event.preventDefault();
$(this).val(ui.item.label).attr('title', ui.item.label);
}
}).focus(function () {
$(this).val('').autocomplete("search");
});
});
Try this
$(document).ready(function(){
var temp = true;
$("input").autocomplete({
source: 'http://jsbin.com/IdIXIRU/3/js',
delay: 0,
minLength: 0,
select: function(event, ui) {
event.preventDefault();
$(this).val(ui.item.label).attr('title', ui.item.label);
temp = true;
return false;
}
}).focus(function () {
if(temp) {
$(this).autocomplete("search");
temp = false;
}
});
});
SEE DEMO

How do I use my own functions with start: stop: while using the parameters 'ev' and 'ui'?

In my draggables, the code at start: and stop: is getting too big (50-100 lines) that I am starting to have readability issues.
$(".dra").draggable({
revert: "invalid",
start: function(ev, ui){
//...50-100 lines...
},
stop: function(ev, ui){
//...50-100 lines...
}
});
To fix the readability, I want to create two global functions startDrag() and stopDrag() and just insert them like start: startDrag(ev, ui). But I failed managed to make this work:
function startDrag(ev, ui){
//...50-100 lines...
}
function stopDrag(ev, ui){
//...50-100 lines...
}
function createDraggables(){
$(".dra").draggable({
revert: "invalid",
start: startDrag(ev, ui),
stop: stopDrag(ev, ui)
});
}
Any ideas why this isn't working?
Try changing it to:
function createDraggables(){
$(".dra").draggable({
revert: "invalid",
start: startDrag,
stop: stopDrag
});
}
Because of function scope, could be just write like this:
function createDraggables(){
$(".dra").draggable({
revert: "invalid",
start: startDrag,
stop: stopDrag
});
}

How to trigger another ajax request when autocomplete selection is made?

I am trying to use autocomplete which call a method on the server to populate the list.
Corresponding JS file calls
$(function () {
$("#search").autocomplete(
{
source: "requests/search",
minLength: 2,
select: function (event, ui) {
//Here I would like to send the parameters.
var itemid = ui.item.id;
alert(itemid);
// How to call another ajax method.
}
})
});
Call its search method inside select event. Try this.
$(function () {
$("#search").autocomplete(
{
source: "requests/search",
minLength: 2,
select: function (event, ui) {
$(this).autocomplete( "search" , ui.item.value );
}
})
});

Categories