Develop Reference

Jquery Datatable theme not visible

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.

Why is Jquery UI open/close not working in ASP.Net MVC program

I am using the ASP.Net template in visual studio and I am trying to get a Modal popup on the Index page to work, I wrote some code in java only and it works just fine. If I set autoOpen true I see what I expect to see and I am able to close the popup with the X button but the close function does not work when you select the OK button or the cancel button. If I set autoOpen to false and I can click on the open button nothing happens, it does not open. I have tried many thing and I have searched the internet for answers.
The only file that is important is the Index.cshtml file everything else is the same as when you start a new ASP.Net MVC project:
Index.cshtml:
#{
ViewBag.Title = "Index Page";
}
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<div id="message" title="Chuck Norris">
<p> Is the only one to stop this virus</p>
</div>
<button id="opener"> Open Window </button>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$('#message').css('background', 'red');
$('#message').css('color', 'white');
$('#message').dialog({
autoOpen: true,
modal: true,
buttons: {
ok: function () {
$("#message").dialog('close');
},
cancel: function () {
$('message').dialog('close');
}
},
show: {
effect: "fade",
duration: 1000
},
hide: {
effect: "blind",
duration: 1000
}
});
$('#opener').on('click', function () {
$('#message').dialog("open");
});
</script>

I am unable to replicate the issue as you described it. I used the following test.
$('#message').css('background', 'red');
$('#message').css('color', 'white');
$('#message').dialog({
autoOpen: true,
modal: true,
buttons: {
ok: function() {
$("#message").dialog('close');
},
cancel: function() {
$('#message').dialog('close');
}
},
show: {
effect: "fade",
duration: 1000
},
hide: {
effect: "blind",
duration: 1000
}
});
$('#opener').on('click', function() {
$('#message').dialog("open");
});
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<div id="message" title="Chuck Norris">
<p> Is the only one to stop this virus</p>
</div>
<button id="opener"> Open Window </button>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>

In case someone else is looking to solve this problem:
in the Index.cshtml file:
#{
ViewBag.Title = "Home Page";
}
#Styles.Render("~/Content/css")
<link href="~/Content/1.11.2/jquery-ui.css" rel="stylesheet" />
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
<script src="~/Scripts/jquery-ui.min.js"></script>
#Scripts.Render("~/bundles/modernizr")
<h2>To Stop the virus open the modal</h2>
<p></p>
<button id="modal-opener">Open Dialog</button>
<div id="message" title="Chuck Norris">
<p>This is the only way to stop the virus</p>
</div>
<script>
$(function () {
$("#message").css('background', 'red');
$('#message').css('color', 'white');
$("#message").dialog({
autoOpen: false,
width: 400,
height: 280,
show: {
effect: "shake",
duration: 100
},
hide: {
effect: "explode",
duration: 1000
},
buttons: {
"OK": function () {
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
//$('#message').dialog('open');
$("#modal-opener").click(function () {
$('#message').dialog('open');
});
});
</script>
In the _layout.cshtml file:
<!DOCTYPE html>
<html>
<head>
#Styles.Render("~/Content/css")
<link href="~/Content/1.11.2/jquery-ui.css" rel="stylesheet" />
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
<script src="~/Scripts/jquery-ui.min.js"></script>
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year -ASP.NET Testing Application</p>
</footer>
</div>
#RenderSection("scripts", required: false)
</body>
</html>
IN the home controller:
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}

Query Auto-Completion in c# bot in bot framework

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>

Jquery Dialog not open in my simple code

What is wrong for the Jquery Dialog not opening when i click in the button?
Below you can see a simple code of the problem.
Code:
#model IEnumerable<TPTMVC.Models.User>
#using TPTMVC.Models;
#{ViewBag.Title = "Index";}
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(document).ready
(
function ()
{
$("#opener").click(function () {
$("#dialog100").dialog("open");<--Not opening
});
$("#dialog100").dialog({ autoOpen: false });
}
);
</script>
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<button id="opener">open the dialog</button>
<div id="dialog100" title="Dialog Title">I'm a dialog</div>
Result:
I'm using entity-framework with C#.
Update
$(document).ready(function () {
$('#opener').click(function () {
alert("Click");//It's show
$('#dialog100').dialog('open');
return false;
});
$('#dialog100').dialog({ autoOpen: false });//After
});
In this case the alert work
$(document).ready(function () {
$('#dialog100').dialog({ autoOpen: false });//Before
$('#opener').click(function () {
alert("Click");//it's not show
$('#dialog100').dialog('open');
return false;
});
});
In this not.
The solution:
#section Scripts {
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#dialog100').dialog({ autoOpen: false });
$('#opener').click(function () {
alert("Bum");
$('#dialog100').dialog('open');
return false;
});
});
</script>
}
It was missing #section Scripts
Thanks for any help!

try $('#dialog100').dialog('open');
or...
$(document).ready(function () {
$('#dialog100').dialog({ autoOpen: false });
$('#opener').click(function () {
$('#dialog100').dialog('open');
return false;
});
});
EDIT: based on comments
Use Chrome, hit F12, and check resources to make sure you're loading them...
Your screen should look like this, only the button displayed...
The click event should then show the dialog...
Is this view wrapped in the _layout? if so, you are missing a section. Usually, the _layout file will have a scripts section, and you will need to have your JS code in this scripts section in your view...
Layout.cshtml
#RenderSection("scripts", required: false)
view.cshtml
#section Scripts { ..jquery scripts..}

It appears that your set up of the dialogue happens within the click event, so it doesn't get set up properly. It needs to happen outside of the click event.
Here's a working example...
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Animation</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>
</body>
</html>

Opening a modal window using jqueryUI in asp.net mvc 4 with VS2010

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');
});