I want to implement autocomplete in my c# bot which i developed using microsoft bot framework and added into my portal as iframe.
is it possible to implement query suggestion or query auto-completion in this bot?
i tried this solution also
Auto complete in Bot Framework
but i did not find it helpful for me.
can i use jquery auto-completion here ?
https://jqueryui.com/autocomplete/
please help me in this.
Thanks in advance.
can i use jquery auto-completion here ?
Based on my test, we can attach jQuery Autocomplete widgets to webchat input box. The following sample code is for your reference.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
<style>
.wc-chatview-panel {
width: 350px;
height: 500px;
position: relative;
}
</style>
</head>
<body>
<div id="mybot" />
</body>
</html>
<script>
BotChat.App({
directLine: { secret: "{your_directline_secret}" },
user: { id: 'You' },
bot: { id: '{your_bot_id}' },
resize: 'detect'
}, document.getElementById("mybot"));
$(function () {
var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL"];
$("input.wc-shellinput").autocomplete({
source: availableTags
});
})
</script>
Test result:
Note: I enter a, it show a list items for my selecting, and then I select an item, such as ActionScript, if I directly click send button, it will only send a to bot. To avoid it, we can manually enter a white-space (or other characters) and remove them before click send button.
I was facing this issue since 4 days.Finally I made it work.
You need to write jQuery for input.wc-shellinput element. I have implemented it with azure search.
<!DOCTYPE html>
<html>
<head>
<link href="../Styles/Skins/botchat.css" rel="stylesheet" />
<link href="../Styles/skins/customwebchat.css" rel="stylesheet">
<link href="styles/pages.css" rel="stylesheet" />
</head>
<body>`enter code here`
<div id="body-container">
<div class="bot-container">
<div id="bot" class="snow"></div>
</div>
</div>
<!-- <script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>-->
<script src="js/botchat.js"></script>
<script src="https://cdn.botframework.com/botframework-webchat/latest/CognitiveServices.js"></script>
<script>
const speechOptions = {
speechRecognizer: new CognitiveServices.SpeechRecognizer({ subscriptionKey: '' }),
speechSynthesizer: new CognitiveServices.SpeechSynthesizer({
gender: CognitiveServices.SynthesisGender.Female,
subscriptionKey: '',
voiceName: 'Microsoft Server Speech Text to Speech Voice (en-US, JessaRUS)'
})
};
BotChat.App({
directLine: { secret: '' },
user: { id: 'userid' },
bot: { id: 'botid' },
speechOptions: speechOptions,
resize: 'detect'
}, document.getElementById("bot"));
</script>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery-ui.js"></script>
<script src="/Scripts/jquery.autocompleteInline.js"></script>
<link href="/Content/jquery-ui.css" rel="stylesheet" />
<link href="/Content/tutorial.css" rel="stylesheet" />
<link href="/Content/jquery.autocompleteInline.css" rel="stylesheet" />
<script type="text/javascript">
$(function () {
$("input.wc-shellinput").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
url: suggestUri,
dataType: "json",
headers: {
"api-key": searchServiceApiKey,
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET,PUT,POST,DELETE"
},
data: JSON.stringify({
top: 5,
fuzzy: false,
suggesterName: "", //Suggester Name according to azure search index.
search: request.term
}),
success: function (data) {
if (data.value && data.value.length > 0) {
userinput = data.value;
console.log(userinput);
response(data.value.map(x => x["#search.text"]));
}
}
});
},
minLength: 3,
position: {
my: "left top",
at: "left bottom",
collision: "fit flip"
},
select: function (Event, ui) {
$(document).ready(function () {
var input = document.getElementsByClassName("wc-shellinput")[0];
var lastValue = input.value;
input.value = ui.item.value;
var event = new CustomEvent('input', { bubbles: true });
// hack React15
event.simulated = true;
// hack React16
var tracker = input._valueTracker;
if (tracker) {
tracker.setValue(lastValue);
}
input.dispatchEvent(event);
})
$('wc-textbox').val("");
Event.preventDefault();
$(".wc-send:first").click();
}
});
});
</script>
<script>
var searchServiceName = "";
var searchServiceApiKey = "";
var indexName = "";
var apiVersion = "";
var suggestUri = "https://" + searchServiceName + ".search.windows.net/indexes/" + indexName + "/docs/suggest?api-version=" + apiVersion;
var autocompleteUri = "https://" + searchServiceName + ".search.windows.net/indexes/" + indexName + "/docs/autocomplete?api-version=" + apiVersion;
var searchUri = "https://" + searchServiceName + ".search.windows.net/indexes/" + indexName + "/docs/search?api-version=" + apiVersion;
</script>
</body>
</html>
Related
Data not being loaded in kendo ui grid, this is MVC project and url of read is returning proper object array in json format. There is no error in console but no grid visible on page.
$(document).ready(function () {
var viewModel = kendo.observable(
{
isVisible: true,
Professions: new kendo.data.DataSource({
schema: {
model: {
id: "ProfessionKey"
}
},
batch: true,
transport: {
read: {
url: "Default/GetAllProfessionsJson",
dataType: "Json"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
}
})
}
);
kendo.bind($("#grid"), viewModel);
});
and html is
<div data-role="grid"
data-toolbar="['create', 'save']"
data-columns='["ProfessionKey", ProfessionEnglish", "ProfessionFrench", "ProfessionGerman"]'
data-bind="source: Professions">
</div>
and following files are referenced
<link href="#Url.Content("~/Content/kendo/2012.2.710/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2012.2.710/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2012.2.710/kendo.default.min.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/kendo/2012.2.710/jquery.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2012.2.710/kendo.all.min.js")"></script>
<script src="#Url.Content("~/Scripts/angular.min.js")"></script>
Scope of var viewModel should be global/outside the function.
I have this:
Index.cshtml:
<script src="#Url.Content("~/Scripts/jquery-1.3.2.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.7.2.custom.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/fullcalendar.js")" type="text/javascript"></script>
<link href="#Url.Content("~/Content/fullcalendar.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/jquery-ui-1.7.2.custom.css")" rel="stylesheet" type="text/css" />
<div id="calendar"></div>
<script type="text/javascript">
$(document).ready(function () {
$('#calendar').fullCalendar({
theme: true,
header: {
left: '',
center: '',
right: ''
},
defaultView: 'agendaDay',
editable: false,
events: "/Calendar/GetEvents/"
});
});
//Set up the date picker and wire it's onSelect function
//to the FullCalendar plugin.
$("#datepicker").datepicker({
inline: true,
onSelect: function (dateText, inst) {
var d = new Date(dateText);
$('#calendar').fullCalendar('gotoDate', d);
}
});
//Set some defaults for the fullCalendar, including the URL to
//get the data from...
$('#calendar').fullCalendar(
{
theme: true,
defaultView: "basicWeek",
firstDay: 1,
events: "/Schedule/GetCalendar/"
});
</script>
<style scoped>
</style>
AgendaController:
public class AgendaController : Controller
{
public ActionResult Index()
{
ViewBag.Message = "Welcome to ASP.NET MVC!";
return View();
}
public ActionResult About()
{
return View();
}
private long ToUnixTimespan(DateTime date)
{
TimeSpan tspan = date.ToUniversalTime().Subtract(
new DateTime(1970, 1, 1, 0, 0, 0));
return (long)Math.Truncate(tspan.TotalSeconds);
}
}
I am trying to install the free FullCalender Ajax plugin: http://fullcalendar.io/
But if I run the application and go to:http://localhost:41787/Agenda nothing is displayed. I put the <div id="calendar"></div> in the Index view file. But nothing happens. I don't see the Calendar.
And I put the scripts in the BundleConfig:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/fullcalendar.css",
"~/Content/fullcalendar.print.css"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/fullcalendar.js" ));
but I dont understand why I get the 404 not found error
ok, the scripts are running now correctly, but still dont see anything if I go to:
http://localhost:41787/Calendar
Request URL:http://localhost:41787/Scripts/fullcalendar.js
Request Method:GET
Status Code:200 OK
Request Headersview source
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:nl-NL,nl;q=0.8,en-US;q=0.6,en;q=0.4,nb;q=0.2
Cache-Control:no-cache
Connection:keep-alive
oke, I have it now like this:
<script type="text/javascript" src="~/Scripts/fullcalendar.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(document).ready(function () {
alert("hallo");
});
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month'
},
defaultDate: 'new Date()',
editable: true,
events:
[
{
title: 'Bi-weekly Meeting',
start: '2014-07-09',
color: 'red'
},
{
title: 'Tournament',
start: '2014-07-07',
end: '2014-07-10',
color: 'darkorange'
},
{
title: 'Test Event',
url: 'http://google.com/',
start: '2014-07-28'
}
]
});
So I see the Hallo message if I load the page, but by this line: $('#calendar').fullCalendar({
it says:
Uncaught TypeError: undefined is not a function Index:141
(anonymous function)
oh, oke, I triied like this:
$(document).ready(function () {
$("#calendar").fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month'
},
defaultDate: 'new Date()',
editable: true,
events:
[
{
title: 'Bi-weekly Meeting',
start: '2014-07-09',
color: 'red'
},
{
title: 'Tournament',
start: '2014-07-07',
end: '2014-07-10',
color: 'darkorange'
},
{
title: 'Test Event',
url: 'http://google.com/',
start: '2014-07-28'
}
]
});
and now it works :)
});
I am developing an application in asp.net using c#. In my page I have done ajax call to load the page with html. The html code is coming from the database. This ajax call is written in the document.ready() function. When I am first time loading the page its working fine. When I am going to another page, that is also working fine. But when I am trying to coming back from that page then the document.ready() is not working. For that reason the html code is also not getting populated. How can I solve this issue please help me out from here.
Document.ready() code is as follows:
$(document).ready(function () {
tempName = GetParameterValues("templateName");
//alert(tempName);
if (tempName != "" || tempName != null) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "DesignCenter_Static.aspx/loadTemplatePackage",
data: "{'template_name':'" + tempName.toString() + "'}",
dataType: "JSON",
success: function (data) {
var temp_data = data.d.toString();
var temp_arr = new Array();
temp_arr = temp_data.split("|");
$("#divTemplateLayout").html(temp_arr[0].toString());
$("#inputForm").html(temp_arr[1].toString());
$("#divButtonSet").html(temp_arr[2].toString());
$("#inputForm").find('[id^="txt"]').each(function () {
var cName, labelControlName, divControlName, resizeClassName, existingClassName, txtName;
txtName = $(this).attr("id");
cName = txtName.slice(3, txtName.length);
divControlName = "lbl" + cName;
$("#" + divControlName + "").resizable({
maxWidth: 300,
minHeight: 16,
minWidth: 50,
containment: "parent",
autoHide: true,
handles: "n, e, s, w, ne, se, sw, nw"
});
$("#" + divControlName + "").draggable({ cursor: 'move', containment: ".setLimit" });
});
},
error: function (result) {
alert("Error");
}
});
}
$("#ddlZoom").val("100%");
currentZoomLevel = $("#ddlZoom").val();
fillInitialDesignStudio();
});
Back Button Code of another page is as follows:
$(function () {
$("#btnBack").click(function () {
var resPage = GetParameterValues("responsePage");
var tempName = GetParameterValues("templateName");
window.location.href = resPage + "?returnPage=BC_Proof.aspx&templateName=" + tempName;
});
});
Master page code for adding jquery library:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.placeholder.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/holder.js"></script>
<%--<script src="js/colpick.js" type="text/javascript"></script>--%>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="js/placeholders.min.js"></script>
<script type="text/javascript" src="js/jquery.uploadify.js"></script>
<script type="text/javascript" src="js/jquery.uploadify.min.js"></script>
<script type="text/javascript" src="js/spectrum.js"></script>
<script type="text/javascript" src="js/scolor.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.Jcrop.js"></script>
<script src="js/ui/jquery.ui.core.js"></script>
<script src="js/ui/jquery.ui.widget.js"></script>
<script src="js/ui/jquery.ui.button.js"></script>
<script src="js/ui/jquery.ui.position.js"></script>
<script src="js/ui/jquery.ui.menu.js"></script>
<script src="js/ui/jquery.ui.autocomplete.js"></script>
<script src="js/ui/jquery.ui.tooltip.js"></script>
Thanks in advance
issue is templateName not getting properly , Check Ajax data,
data: "{'template_name':'" + tempName.toString() + "'}",
Your BackButton Code:
var tempName = GetParameterValues("templateName");
use GetParameterValues("template_name"); instead of GetParameterValues("templateName");
I am trying to open a modal window in my asp.net mvc 4 project on click of a link. Nothing happens with the code that I have written. What am I missing? I have referenced these links in my site master.
<link type="text/css" href="#Url.Content("~/Content/custom.css")" rel="Stylesheet" />
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-1.9.1.js")" ></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-ui-1.10.3.custom.min.js")"></script>
Here is my code
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/SiteMaster.cshtml";
}
<div id="dialogMsg" title="I'm Title of dialog">
Hello I'm dialog body.
</div>
Open Dialog
<script type="text/javascript">
$(document).ready(function () {
$("#dialogMsg").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Do something": function () {
var bValid = true;
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
allFields.val("").removeClass("ui-state-error");
}
});
$('#thelink')
.click(function () {
$('dialogMsg').dialog('open');
});
});
</script>
You've missed the # on the selector that actually opens the dialog. See here:
$('#thelink')
.click(function () {
$('dialogMsg').dialog('open');
});
Change it to:
$('#thelink')
.click(function () {
$('#dialogMsg').dialog('open');
});
I'm using Tagify, which is basically using jQuery Autocomplete,
references :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script src="../../../Scripts/jquery.tagify.js" type="text/javascript"></script>
<link href="../../../Styles/jqueryTagify.css" rel="stylesheet" type="text/css" />
Script :
<script>
var myTextArea = $("#txtbox").tagify();
myTextArea.tagify('inputField').autocomplete({
source: function(request, response) {
$.ajax({
type: "POST",
url: "Demo.aspx/GetKeyword",
data: "{'match': '" + request.term + "'}",
dataType: "json",
contentType: "application/json",
success: function(data) {
response($.map(data, function(item) {
return {
label: item,
value: item,
}
}));
}
});
},
position: { of: myTextArea.tagify('containerDiv') },
close: function(event, ui) { myTextArea.tagify('add'); },
});
$('form').submit( function() {
var tagStr = $("#txtbox").tagify('serialize');
alert( "Got tags: " + tagStr );
return false;
});
</script>
HTML is :
<input type="text" id="txtbox" />
<input class="submit" type="submit" value="Get Values" />
So when we clicked on submit button, we get tags value from here
var tagStr = $("#txtbox").tagify('serialize');
and when I clicked on getvalues the result like this
How could I get those values in the Code Behind in C#?
add a hidden field in html:
<input id="hiddenTags" name="tags" type="hidden"/>
and update submit js:
$('form').submit( function() {
var tagStr = $("#txtbox").tagify('serialize');
alert( "Got tags: " + tagStr );
$('#hiddenTags').val(tagStr);
return false;
});
now you can get tags in c#:
string tags = Request.Form["tags"];