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
Related
This AngularJs function works only when the page loads for the first time and when I refresh it will work and when I go to other page and come back to this page it will not work.
I need this function to work even when I visit back from other pages.
Is there any alternative?
angular.element(document).ready(function () {
$("#SearchBox1").autocomplete('/api/search/predicateNames', {
formType: "POST",
dataType: "json",
scroll: false,
matchSubset: false,
width: 300,
max: 10,
selectFirst: false,
cacheLength: 1,
formatItem: formatResultItem,
parse: parseResultData,
selectedRearch: selectedRearchForMobile
});
});
I'm using MVC 4 for my project and im trying to edit or display my data on popup.
When I call my open popup code 6 or 7 times I take javascript errors.
my controller is
public ActionResult OpenEditForm(string objectParam, string formStatus)
{
BranchNotesDetailViewModel viewModel = new BranchNotesDetailViewModel();
//..................
return PartialView("Edit", viewModel);
}
and my javascript code is
myDialog = $("<div> </div>");
function CreateDialog(name) {
myDialog.dialog({
autoOpen: false,
title: name,
resizable: false,
position: 'center',
stack: true,
height: 'auto',
width: 'auto',
modal: true,
close: function (event, ui) {
// remove div with all data and events
myDialog.remove();
//myDialog.dialog('close')
}
});
}
$('#brancNotesList .grid-row').click(function () {
var json = $(this).children('td:eq(1)').text().trim();
$.ajax({
contentType: 'application/html',
url: '#Url.Action("OpenEditForm", "BranchNotes")',
dataType: 'html',
type: 'GET',
data: {
objectParam: json,
formStatus: "1"
}
}).done(function (result) {
CreateDialog('Detail');
myDialog.html(result).dialog('open');
});
});
$(function () {
$(document).ajaxComplete(function (event, request, settings) {
//re-parse the DOM after Ajax to enable client validation for any new form fields that have it enabled
$.validator.unobtrusive.parse(document);
});
});
function openFormCreate() {
$.ajax({
contentType: 'application/html',
url: '#Url.Action("OpenEditForm", "BranchNotes")',
dataType: 'html',
type: 'GET',
data: {
formStatus: '2'
}
}).done(function (result) {
CreateDialog('Detail');
myDialog.html(result).dialog().dialog('open');
});
}
When i open dialogs one or two times it works but after fifth or sixth time it crashes with exception
JavaScript runtime error: Could not complete the operation due to error 80020101
I tried to find a memory problem or something after ajax call but i cant find where or what. Is there any way to handle that? I read about that problem some forums they say comments fields cause that but it not works for me.
I found my error. I have two layouts, one for main page one for edit page and i noticed some Jquery script files rendered in both pages. I cleaned the edit layout from jquery scripts then everything works fine.
My requirement is exactly as shown by this jQuery plugin:
But the only problem is I want to do it in Alloy-UI 2.5 in Liferay 6.2. I am able to have single input with the following script:
<aui:script>
AUI().use('autocomplete-list','aui-base','aui-io-request','autocomplete-filters','autocomplete-highlighters',function (A) {
A.io.request('<%= serveResourceTestURL %>',{
dataType: 'json',
method: 'GET',
on: {
success: function() {
new A.AutoCompleteList(
{
allowBrowserAutocomplete: 'false',
activateFirstItem: 'true',
inputNode: '#<portlet:namespace/>testNode',
resultTextLocator: 'name',
resultHighlighter:'phraseMatch',
resultFilters: ['startsWith'],
minQueryLength: 2,
maxResults: 10,
render: 'true',
source:this.get('responseData'),
});
}
}
});
});
</aui:script>
with alloy-ui 1.7 we used to have 2 more attributes delimChar: ',', & typeAhead: true, for multiple input fields. Are there any equivalents to these?
It would be a great help if somebody can modify the above script to have multiple inputs or some ideas in the correct direction.
Thanks!
In Alloy 2.X delimChar: ',' is changed with queryDelimiter : ','
and following attributes have been removed:
typeAhead
schema
schemaType
Using it as follows will work:
AUI().use('autocomplete-list','aui-base','aui-io-request','autocomplete-filters','autocomplete-highlighters',function (A) {
A.io.request('<%= serveResourceTestURL %>',{
dataType: 'json',
method: 'GET',
on: {
success: function() {
new A.AutoCompleteList(
{
allowBrowserAutocomplete: 'false',
activateFirstItem: 'true',
inputNode: '#<portlet:namespace/>to',
resultTextLocator: 'name',
resultHighlighter:'phraseMatch',
resultFilters: ['startsWith'],
minQueryLength: 2,
maxResults: 10,
queryDelimiter : ',',
render: 'true',
source:this.get('responseData')
});
}
}
});
});
I am trying to display a popover for a element after a ajax call has been made. Everything works as far as the ajax request and getting the data the first time, except no data is displayed when mouseover event happens. But when you hover over it again, You can see the data in the popover. I looked around on here and the web and found similar situation but less complex than my situation (No mouseover event and ajax). I understand that popover seems not to be initialized when I first call it in my situation. But the thing is, that I only can show it after the ajax is being called and it has to be mouseenter. Can anyone modify or guide me to showing the popover on first try. Thanks for any help (Please note that there are two on my page I am just showing 1 of them).
Element
Access Count:
Javascript
$('#users').mouseenter(function () {
$.ajax({
type: "GET",
url: "/album/feature_getaccess",
data: { aID: modelID },
success: function (result) {
$('#users').popover({ content: result, html: true, placement: 'top', trigger: 'hover', delay: { show: 500, hide: 1500 } });
}
});
});
Works fine after the second mouse in.
Just remove the mouseenter stuff, the popover will still only appear on mouseenter, because you have it set to trigger: 'hover'
$.ajax({
type: "GET",
url: "/album/feature_getaccess",
data: { aID: modelID },
success: function (result) {
$('#users').popover({ content: result, html: true, placement: 'top', trigger: 'hover', delay: { show: 500, hide: 1500 } });
}
});
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.