Develop Reference

select2 programmatically without knowing results in advance

I am trying to write a test for a Javascript select2 control and I would like to automatically select the first item. Since it's using ajax I do not know what the first item is. All the examples I have seen create <option> however they assume knowledge of the value. How can I select the first item without knowledge? (Note this example only runs the ajax command after 3 items are entered).
var $selector = $("#foo");
$selector.show().select2({
allowClear: true,
placeholder: "--------",
minimumInputLength: 3,
ajax: {
url: "...",
type: 'GET',
dataType: 'json',
delay: 250,
data: function(term, page) {
return {
number__icontains: term
};
},
results: function(data) {
return {
results: $.map(data.objects, function(option) {
return {
'id': option.id,
'text': option.desc
};
})
};
},
cache: false
},
initSelection: function(element, callback) {
...
}
});

Primefaces prime-ui autocomplete forceSelection not working

I'm using the prime-ui autocomplete control (because the primefaces autocomplete control does not support partial update). I have my control defined thus:
$(document).on('click','.amd_auto_look_up',
function(event){
$('.amd_auto_look_up').puiautocomplete({
effect: 'fade',
effectSpeed: 'fast',
forceSelection: true,
delay: 100,
select: function (event, item) {
updateFunder(item, "amd", $(this))
},
completeSource:function(request, response) {
$.ajax({
type: "GET",
url: 'http://www.myURI',
data: {query: request.query},
dataType: "jsonp",
context: this,
success: function(data) {
response.call(this, data);
}
});
}
});
event.stopPropagation();
}
);
If I set
forceSelection: false,
all works fine. If I set
forceSelection: true,
the autocomplete popup fails to display altogether. Would anyone be able to point me in the direction of a solution/workaround for this please?

Answering my own question. Also posted in Prime ui forum. It was a bug. Now fixed. view response here: forceSelection fix

Integrating X-editable and select2 (using Ajax to populate the options)

Has anyone succeeded in getting x-editable to work with select2, using ajax?
I have succeeded in populating the autocomplete using an ajax request, but when the user selects an option, the x-editable link reads "empty" onblur.
My code is as follows:
<a id='elem' data-type='select2'></a>
<script>
$('#elem').editable({
select2: {
placeholder:'provide a name',
allowClear: true,
minimumInputLength: 1,
query: function(query){
$.ajax({
url: '/usage/users',
dataType: 'json',
data: {
full_name: query.term,
select: ['id', 'first_name', 'last_name', 'middle_name']
}
}).done(function(data){
results = []
for (i in data)
results.push({
text: data[i].full_name,
id: data[i].id
});
query.callback({results:results});
});
}
}
});
</script>

$tree.tree is not a function

I am generating a tree in plone using an add-on product called collective.virtualtreecategories . However, I keep getting a weird javascript error and the tree cannot be displayed.
On my browser's error console, I get the following:
$tree.tree is not a function
Here is the part of code that produces the error:
$tree.tree({
data: {
type: "json",
url: "##vtc-categories-tree.json",
async: false
},
lang: {
new_node: "New category"
},
rules: {
deletable: ["folder"],
renameable: ["folder"],
draggable: "none",
droppable: "none",
},
callback: {
beforechange: function(node, tree_obj) {
return before_change_node()
},
onselect: function(node, tree_obj) {
node_selected(node)
},
oncreate: function(node) {
jq(node).attr('rel', 'folder')
},
onrename: function(node, lang, tree_obj, rb) {
old_id = node.id // may be undefined (new node)
new_name = jq(node).children("a:visible").text();
// shared code. Server determines if creating/renaming by the old_name value
jq.ajax({
type: 'POST',
url: "vtc-category-added-renamed",
data: {
'category_path': selected_category(node),
'old_id': old_id,
'new_name': new_name
},
success: function(data) {
jq.jGrowl(data.msg, {
life: 1500
});
// set/change node id
if (data.result) {
node.id = data.new_id
}
},
dataType: 'json',
traditional: true
})
},
beforedelete: function(node, tree_obj) {
jq.ajax({
type: 'POST',
url: "vtc-category-removed",
data: {
'category_path': selected_category(node)
},
success: function(data) {
jq.jGrowl(data.msg, {
life: 3000
});
},
dataType: 'json',
traditional: true
});
return true;
}
}
});​
The complete code listing can be found HERE
Can someone help me fix this?
UPDATE:
I should perhaps add that, this was working before in a different setting. Now, I just recreated the project and thats when I got this error.

As far as I can tell from your code $tree isn't a function, its an element
on line 89 var $tree = jq('ul#VTCTree');
therefore I assume .tree() is a JQuery widget and isn't working as expected?
Just seen some of the comments and the updates. Have you checked the path/file inclusion of the tree plugin/widget?

On my browser's error console, I get the following:
if your browser is Internet Explorer, the extra comma that you have here
droppable: "none",
is a widely known problem.
Not a problem for Firefox, but will give unexpected results, like 3 elements in the following array. but length = 4
myArr = [1,2,3,,]
also, check this https://stackoverflow.com/a/5139232/982924

I had the same issue, even though I had jquery loaded and the jquery.filetree.min plugin loaded. I was missing the jquery UI js which is also required.

form.submit() to a specific DIV

I want to submit a form using Javascript and jQuery to specific div but I can't work out how to do it.
This code below works, submitting the form to the header of the current page.
var form,
chart = this,
svg = chart.getSVG(chartOptions);
// merge the options
options = merge(chart.options.exporting, options);
// create the form
form = createElement('form', {
method: 'post',
action: options.url
}, {
display: NONE
}, doc.body);
// add the values
each(['filename', 'type', 'width', 'svg'], function(name) {
createElement('input', {
type: HIDDEN,
name: name,
value: {
filename: options.filename || 'chart',
type: options.type,
width: options.width,
svg: svg
}[name]
}, null, form);
});
// submit
form.submit();
// clean up
discardElement(form);
I have tried various options but nothing has worked. In simple terms I want to do this:
$('#myDiv').form.submit();
Or in other words, send the submit command to the div named myDiv.
Does anyone know how I would do this? Thanks.

You should be able to use the code given here:
Post form in JQuery and populate DIV - broken in IE
$.ajax({
url: options.url,
type: 'POST',
cache: false,
data: {
filename: options.filename || 'chart',
type: options.type,
width: options.width,
svg: svg
},
dataType: 'text',
complete: function(xhr, textStatus) {
alert('completed');
},
success: function(data) {
$("#myDiv").html(data);
},
error: function(xhr, textStatus, errorThrown) {
alert('woops');
}
});

$('#myDiv').click (function () {
$("form").submit();
});