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 :)
});
Related
I have the following code which implements a Jquery data table in a .net core application. However the bootstrap theme is not visible. This view implements a layout page. I have checked the console in browser for any errors and cannot find any.
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/css" src="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css"></script>
<script type="text/css" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css"></script>
<script type="text/css" src="https://cdn.datatables.net/fixedheader/3.1.7/css/fixedHeader.bootstrap4.min.css"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js">
</script>
<script>
$(function () {
$.ajax({
type: "POST",
url: "/ApplicationUsers/LoadData",
data: '{}',
contentType: "application/json; charset=utf-8",
headers: { 'Access-Control-Allow-Origin': '*' },
dataType: "json",
success: function (response) {
OnSuccess(response);
},
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
});
// INITIALIZATION OF DATATABLES
// =======================================================
function OnSuccess(response) {
console.log(response);
$.noConflict();
$('#datatable').DataTable(
{
fixedHeader: true,
paging: true,
scrollX: false,
lengthChange: true,
searching: false,
ordering: true,
data: response.data.result,
columns: [
{ 'data': '', "defaultContent": "", },
{ 'data': 'userID', "defaultContent": "", },
{ 'data': 'name', "defaultContent": "", },
{ 'data': 'userName', "defaultContent": "", },
{ 'data': 'emailAddress', "defaultContent": "", }]
});
};
</script>
There are some errors in your code.
The type="text/css" should be in <link>, and you reference a incorrect dataTable css. Refer to the following code.
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link type="text/css" src="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css"></link>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
Remove the ; at the end of the method OnSuccess.
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>
My requirement needs me to display a jqGrid in an Jquery UI popup dialog.
Behaviour noticed :
I am able to perform paging, sorting, searching but when I call the same in a Jquery UI dialog it does not search. It only does paging and sorting.
My Research :
I noticed when I called the same JgGrid without it being displayed in the Jquery UI dialog it does searching, paging and sorting.
HTML Code below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.10.4.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.4.custom.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.src.js" type="text/javascript"></script>
<script type="text/javascript">
var curRowNum = 0;
var curPressedButton = '';
var curPressedNum = 0;
$(function () {
$("#test").click(function () {
$("#dialog-form-lookup-site").dialog('open');
})
$("#tblSiteLookup").jqGrid({
url: 'Handlers/SitesHandler.ashx?l=sa',
datatype: "json",
height: 200,
width: 600,
mtype: 'post',
loadonce : true,
colNames: ['Guid', 'Company', 'Customer Site', 'Annual Consumption (kWh)'],
],
colModel: [
{ name: 'Guid', index: 'Guid', search: true, searchoptions: { sopt: ['eq']} },
//{ name: 'price', index: 'price', width: 60, search: true, stype: 'text', searchoptions: { dataInit: datePick, attr: { title: 'Select Date'}} },
{name: 'Company', index: 'Company', width: 70, sortable: true, editable: false, searchtype: "number", search: true, stype: 'text', searchoptions: { sopt: ['eq']} },
{ name: 'CustomerSite', index: 'CustomerSite', width: 70, sortable: true, editable: false, search: true, stype: 'text', searchoptions: { sopt: ['eq']} },
{ name: 'AnnualConsumption', width: 100, sortable: true, editable: false }
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager11',
sortname: 'Company',
viewrecords: true,
sortorder: "desc",
caption: "Site"
});
$("#tblSiteLookup").jqGrid('navGrid', '#pager11', { search: true, edit: false, add: false, del: false, searchtext: "search" });
$("#dialog-form-lookup-site").dialog({
autoOpen: false,
height: 450,
width: 700,
modal: true,
dialogClass: 'no-close',
buttons: {
"OK": function () {
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
}
});
});
</script>
<title></title>
</head>
<body>
<form id="HtmlForm" runat="server">
<div>
<input id="test" type="button" value="Test Sites List" />
</div>
<div id="dialog-form-lookup-site" title="Lookup Site">
<table id="tblSiteLookup" cellpadding="0" cellspacing="0">
</table>
<div id="pager11" style="width:500px">
</div>
</div>
</form>
</body>
</html>
Code on the server side in the SitesHandler.ashx:
public class SitesHandler : IHttpHandler , IRequiresSessionState
{
/// <summary>
/// Handle the request
/// </summary>
/// <param name="context"></param>
public void ProcessRequest(HttpContext context)
{
HttpResponse response = context.Response;
string siteLists = GetSitesList();
response.Write(siteLists);
}
}
Question :
How do I call this from the above JQuery UI popup so that the search
works ?
Downgrading the jQuery library from 1.11.1 to 1.9.1 fixed the issue. Looks like the new Jquery library may not be compatible to the search feature of the JgGrid.
Code belows shows commented library code and library code in use which fixed this issue, hope this helps just in case you all bump into this issue:
<%--<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.4.custom.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.src.js" type="text/javascript"></script>--%>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.src.js" type="text/javascript"></script>
I'm new to MVC and Jquery. Trying to use jtable, but nothing happens when loading page.
This is my view.
<link href="~/scripts/jtable.2.4.0/themes/metro/blue/jtable.css"
rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="~/scripts/jtable.2.4.0/jquery.jtable.js">
</script>
#using (Html.BeginForm("Upload", "Hotels", FormMethod.Post,
new { enctype = "multipart/form-data" }))
{
<div id="HotelsTable"> </div>
<script type="text/javascript">
$(document).ready(function () {
//Prepare jtable plugin
$('#HotelsTable').jtable({
title: 'List of Hotels',
paging: true,
pageSize: 10,
sorting: true,
defaultSorting: 'Name ASC',
actions: {
listAction: '#Url.Action("HotelsList")'
},
fields: {
Hotel1: {
title: 'Region',
width: '10%'
},
Hotel2: {
title: 'Hotel',
list: false,
width: '10%'
},
Hotel3: {
title: 'Desde',
type: 'date',
displayFormat: 'yy-mm-dd',
width: '8%',
list: false
},
Hotel4: {
title: 'Hasta',
type: 'date',
displayFormat: 'yy-mm-dd',
width: '8%'
},
Hotel5: {
title: 'Comentarios',
width: '8%',
}
}
});
//Load person list from server
$('#HotelsTable').jtable('load');
});
</script>
}
</body>
</html>
This is my control:
[HttpPost]
public JsonResult HotelsList()
{
try
{
List<Models.Models.HotelElem> hotels =
db.Database.Fetch<Models.Models.HotelElem>("SELECT * FROM Hotels");
return Json(new { Result = "OK", Records = hotels });
}
catch (Exception ex)
{
return Json(new { Result = "ERROR", Message = ex.Message });
}
}
While debugging it doesn't even go my HotelList() method. Need some help, what could it be?
Thanks!
Found solution! Maybe will be useful for someone.
Forgot to add
<script src="~/scripts/jquery-1.9.1.min.js"></script>
<script src="~/scripts/jquery-ui-1.9.2.min.js"></script>
...)
I am useing jquery pie chart in ASP.NET. pie chart doing work properly, but I want to bind values from database. How can I do bind database values in the pie chart. I have created a table in the database and I want to fetch values from database into the pie chart.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function ()
{
var chart;
$(document).ready(function ()
{
// Radialize the colors
Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function (color)
{
return {
radialGradient: {
cx: 0.5,
cy: 0.3,
r: 0.7
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
// Build the chart
chart = new Highcharts.Chart(
{
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function ()
{
return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
}
}
}
},
series: [
{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
}, ['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}
]
});
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<di v id="container" style="min-width: 400px; height: 400px; margin: 0 auto">
</div>
</body>
Simple solution would be to place your values from the DB in a hidden field and then access them using javascript and get their values to be used as part of the series.
This is the ASPX:
....
<asp:HiddenField ID="FireFoxDataValueFromDB" runat="server" />
<asp:HiddenField ID="IEDataValueFromDB" runat="server" />
....
This is the CS:
Page_Load Event()
{
if (!IsPostBack)
{
FireFoxDataValueFromDB = getFFDBValue();
IEDataValueFromDB = getIEDBValue
}
}
....
This is the Javascript:
var FFVal = $("#FireFoxDataValueFromDB").val();
var IEVal = $("#IEDataValueFromDB").val();
and then use it as the series data:
series: [
{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', FFVal],
['IE', IEVal],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
}, ['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}...