JQuery-UI copy paste issue works on second attempt - jquery-autocomplete

We are using following JQuery code (within JSF) to invoke Autocomplete. Everything seems to work fine when user keys in data but when user copies and pastes Autocomplete will be invoked on second attempt. I am testing following code in IE 8. Any inputs are appreciated
<pre>
<code>
<script type="text/javascript">
$(function () {
$(document).on('keyup.autocomplete','##{resp.workItemResponse.wiResponseId}', function() {
$('##{resp.workItemResponse.wiResponseId}').autocomplete({
minLength: 3,
source: function( request, response){
$.ajax({
type: 'GET',
url: "/iaportal/autoCompleteServlet",
cache: false,
delay: 200,
data: {
'respId':'#{resp.workItemResponse.wiResponseId}',
'type': '#{autoCompleteType}',
'term':request.term
},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data){
response($.map(data.acctNum, function (item) {
return {
label: item.label,
value: item.label
}
}));
},
error: function(message){
alert("error "+message);
}
});
},
select: function( event, ui ) {
var selectedObj = ui.item;
var text = selectedObj.value;
$('.autoComplete#{resp.workItemResponse.wiResponseId}').attr('value', text);
$('.autoComplete#{resp.workItemResponse.wiResponseId}').trigger('change');
}
});
$('##{resp.workItemResponse.wiResponseId}').keyup(function(){
var text = this.value;
if(text == '' || text.length == 0){
$('.autoComplete#{resp.workItemResponse.wiResponseId}').attr('value', "");
$('.autoComplete#{resp.workItemResponse.wiResponseId}').trigger('change');
}
});
}); // on Ends
var textElem;
$(document).on('paste','##{resp.workItemResponse.wiResponseId}',function() {
textElem = this;
setTimeout(invokeOnPaste , 100);
});
function invokeOnPaste(){
var text = $(textElem).val();
if(text.length == 14){
$('.autoComplete#{resp.workItemResponse.wiResponseId}').attr('value', text);
$('.autoComplete#{resp.workItemResponse.wiResponseId}').trigger('change');
} else if(text.length != 0){
$('##{resp.workItemResponse.wiResponseId}').trigger('search','autocomplete');
}
}
});
</script>
</code>
</pre>

Related

Search keyword from Dbpedia using nodejs

I am new in node.js.I downloaded and executed a project from GitHub from this link. Here on this link there is live demo of this app. It is running rdf search using wikidata. This is the function that I found for the search of keyword from wikidata written in file public/scripts/controllers/main.js.
function search () {
//TODO: fix when null;
if (vm.searchInput != vm.lastSearch) {
var input = vm.searchInput;
vm.lastSearch = input;
vm.searchWait = true;
vm.noResults = false;
//$http.get('https://www.wikidata.org/w/api.php?action=wbsearchentities&format=json&language=en&limit=20&uselang=en&type=item&continue=0&search='+input).then(
$http({
method: 'GET',
url: 'https://www.wikidata.org/w/api.php',
params: {
action: 'wbsearchentities',
format: 'json',
language: 'en',
uselang: 'en',
type: 'item',
continue: '0',
limit: '20',
search: input,
origin: '*',
}
}).then(
function onSuccess (response) {
onSearch(response.data.search);
},
function onError (response) { onSearchErr(); console.log('Error: ' + response.data); }
);
//request.execQuery(query.search(input), onSearch, onSearchErr);
}
vm.searchActive = true;
}
I have changed the above function for DBpedia but it not search the keyword from DBpedia
function search2 () {
//TODO: fix when null;
if (vm.searchInput != vm.lastSearch) {
var input = vm.searchInput;
vm.lastSearch = input;
vm.searchWait = true;
vm.noResults = false;
//$http.get('https://www.wikidata.org/w/api.php?action=wbsearchentities&format=json&language=en&limit=20&uselang=en&type=item&continue=0&search='+input).then(
$http({
method: 'GET',
url: 'http://dbpedia.org/sparql',
params: {
action: 'wbsearchentities',
format: 'json',
language: 'en',
uselang: 'en',
type: 'item',
continue: '0',
limit: '20',
search: input,
origin: '*',
}
}).then(
function onSuccess (response) {
onSearch(response.data.search);
},
function onError (response) { onSearchErr(); console.log('Error: ' + response.data); }
);
//request.execQuery(query.search(input), onSearch, onSearchErr);
}
vm.searchActive = true;
}
how I can change this above function for search in DBpedia?Please help

Select option does not set the selected value from a response

i have 2 select dropdowns which i'm populating with values from a server. i can retrieve the values and populate the options of the select dropdown with no problems, however, when i try to set one of the values of the second select dropdown as the selected value, it does not display.
here's my code:
$.ajax({
type: "GET",
url: "/someUrl",
data: { nameType: 'Shop', item: itemName},
success: function (data)
{
$.each(data, function (i, obj) {
var div_data = "<option>" + obj.Shop + "</option>";
$(div_data).appendTo('#shop_name');
});
$.ajax
({
url: '/get_shop_item',
type: 'POST',
data: { shop_id: shop_id },
success: function (response)
{
$('#area_name option').filter(function() {
return this.text == response.result[0].area;
}).attr('selected', true);
$('#shop_name option').filter(function() {
return this.text == response.result[0].name;
}).attr('selected', true);
}
});
}
});
The code you posted only populates one select element #shop_name
I would probably set the name property on the options then you don't have to use filter and go through all options.
Try this
$.ajax({
type: "GET",
url: "/someUrl",
data: { nameType: 'Shop', item: itemName},
success: function (data) {
$.each(data, function (i, obj) {
var div_data = '<option name="' + obj.Shop + '">' + obj.Shop + '</option>';
$(div_data).appendTo('#shop_name');
// append to #area_name as well
});
$.ajax({
url: '/get_shop_item',
type: 'POST',
data: { shop_id: shop_id },
success: function (response) {
$('#area_name option[name="' + response.result[0].area + '"]').attr('selected', true);
$('#shop_name option[name="' + response.result[0].name + '"]').attr('selected', true);
}
});
}
});

How do I synchronize a Outlook Calendar in Share Point using a Calendar Web App?

I have a calendar on a share point page and the customer would like it if we could synchronize a email address to display on the calendar.
The calendar is setup using a web app and I'm in Share Point 2013.
I have no clue how to do this and was messing around in the Calendar Overlay Settings but can't get it to work.
Any suggestions?
You can sync the Outlook calendar in SharePoint page using Outlook Rest API.
Follow Get Outlook Events to get all the events from outlook calendar.
Register you Application
See my workaround to bind Outlook calendar events in Jquery Full Calendar in Sharepoint page.
<link rel="stylesheet" type="text/css" href="/sites/xxx/SiteAssets/fullcalendar.css">
<script src='/sites/xxx/SiteAssets/moment.min.js'></script>
<script src="/sites/xxx/SiteAssets/jquery-1.12.3.min.js"></script>
<script src='/sites/xxx/SiteAssets/jquery.min.js'></script>
<script src='/sites/xxx/SiteAssets/fullcalendar.js'></script>
<script type="text/javascript">
var even = new Array();
$(document).ready(function () {
$.support.cors = true;
$.getScript('/sites/xxx/SiteAssets/fullcalendar.js', function () {
$.getScript('/sites/xxx/SiteAssets/moment.min.js', GetAuthorizeCode);
}
);
});
function GetAuthorizeCode() {
var initialUri = window.location.href;
if (initialUri.indexOf('code') == -1) {
var url = "https://login.windows.net/common/oauth2/authorize?response_type=code&client_id=[client_id of your application]&redirect_uri=https://xxx.sharepoint.com/sites/xxx/Site%20Pages/Test.aspx&resource=https:%2f%2foutlook.office365.com%2f&state=5fdfd60b-8457-4536-b20f-fcb658d19458";
window.location.href = url;
}
else {
var codeVal = getQueryStringParameter("code");
var accessToken = getAccessToken(codeVal);
}
}
function getQueryStringParameter(param) {
var params = document.URL.split("?")[1].split("&");
var strParams = "";
for (var i = 0; i < params.length; i = i + 1) {
var singleParam = params[i].split("=");
if (singleParam[0] == param) {
return singleParam[1];
}
}
}
function getAccessToken(code) {
$.ajax({
type: "Get",
url: "Url to get AccessToken",
dataType: "json",
success: function (data) {
debugger;
var accesstoken= data["AccessToken"];
var events = GetEvents(accesstoken);
},
error: function (httpReq, status, exception) {
debugger;
return "";
}
});
}
function GetEvents(token) {
debugger;
var call = $.ajax({
url: "https://outlook.office.com/api/v2.0/me/events",
type: "GET",
dataType: "json",
headers: {
Accept: "application/json;odata.metadata=minimal;odata.streaming=true",
'Authorization': "Bearer " + token
},
success: function (data) {
debugger;
for (var i = 0; i < data.value.length ; i++) {
even.push({
title: data.value[i].Subject,
start: data.value[i].Start.DateTime,
url: data.value[i].WebLink,
end:data.value[i].End.DateTime
});
}
$('#calendar').fullCalendar({
height: 450,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
disableDragging: true,
editable: false,
events: even,
eventClick: function (event) {
if (event.url) {
window.open(event.url);
return false;
}
}
});
callback(events);
},
error: function (xhr) {
debugger;
$('#calendar').fullCalendar({
height: 450,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
disableDragging: true,
editable: false,
events: []
});
return "";
}
});
}
</script>
Also you can add outlook calendar events in sharepoint list using Outlook Addins. Visual Studio 2015 supports to create a Webaddin which supports both Outlook Webapp and Outlook client.

Why is the body of request empty?

I'm using a pattern from another project for sending JSON-data to node. In the other project it works, in this project not.
The req-object is valide, but the body is empty. Why?
Client-side:
json = { "auth_user_pkref": 2 }
json.test_id = "ANCA"
json.questions_count = 3
json.right_answers = 2
json.wrong_answers = 1
json.seconds_spent = 180
console.log('/api/answer/add', json);
$.ajax({
url: "/api/answer/add",
type: "post",
data: JSON.stringify(json),
contentType: "application/json",
success: function (data) {
},
error: function (jqXHR, textStatus, errorThrown) {
console.log("ERROR, DB error");
}
});
Server-side:
router.post('/api/answer/add', function (req, res) {
console.log('/api/answer/add: ', req.body)
Server-log:
/api/answer/add: undefined
json = { "auth_user_pkref": 2 }
json.test_id = "ANCA"
json.questions_count = 3
json.right_answers = 2
json.wrong_answers = 1
json.seconds_spent = 180
console.log('/api/answer/add', json);
$.ajax({
url: "/api/answer/add",
type: "post",
data: json,
contentType: "application/json",
success: function (data) {
},
error: function (jqXHR, textStatus, errorThrown) {
console.log("ERROR, DB error");
}
});
Try this

How to get jquery autocomplete to work with Express and Mongo

Not sure why the jsonp callback is not getting returned to the client.
accountcontrol.js
exports.find = function(req, res) {
var b=req.query.q;
db.collection('catData').find({ wrapperType : "titles", titleTitles : new RegExp(b)}).limit(5).toArray(function (err, results) {
if(results) {
res.type('application/json');
res.jsonp(results);
} else {
console.log("No Results")
}
})
}
app.js
app.get('/operations/autocompletehome', ensureLoggedIn('/login'), function(request, response) {
response.render('autocompletehome', { title: 'Autocomplete' });
});
app.get('/operations/autocomplete', accountcontrol.find)
autocompletehome.jade
doctype html
html(lang="en")
head
meta(charset="utf-8")
title jQuery UI Autocomplete - Remote JSONP datasource
link(rel="stylesheet", href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css")
script(src="//code.jquery.com/jquery-1.10.2.js")
script(src="//code.jquery.com/ui/1.11.2/jquery-ui.js")
script(src="/javascripts/autocomplete.js")
link(rel="stylesheet", href="/stylesheets/newstyle.css")
style
.ui-autocomplete-loading {background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;}
#city { width: 25em; }
.ui-widget
label(for="city") Your city:
input#city(type="text")
| Powered by
a(href="http://dog.org") dog.org
.ui-widget(style="margin-top:2em; font-family:Arial")
| Result:
#log.ui-widget-content(style="height: 200px; width: 300px; overflow: auto;")
autocomplete.js
$(function() {
function log( message ) {
$( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$( "#city" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "/operations/autocomplete",
dataType: "jsonp",
data: {
q: request.term
},
success: function( data ) {
response( data );
console.log('success', data);
},
complete: function() {
console.log('done');
}
});
},
minLength: 3,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.label :
"Nothing selected, input was " + this.value);
},
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});
});
Console.Log in the Browser
success [
Object
_id: "546c6b509c97a9880d2b29db"
titleTitles: "06image.com"
titlesEmail: "d#c.com"
titlesName: "Fox"
titlesOwner: "Dog"
wrapperType: "titles"
__proto__: Object
It appears that everything is firing except for the return to the browser.
Here is the Answer:
Changed to json from jsonp in both the autocomplete.js and app.js
In autocomplete.js Replace:
success: function( data ) {
response( data );
console.log('success', data);
},
With:
success: function( data ) {
response($.map(data, function(item) {
return {
label: item.titleTitles
};
}));
},
Enables JQuery to parse the Mongo array.
Hope this helps others who are woking with Jade, Mongo and Express trying to learn how to implement Ajax.

Resources