I m trying to use some code which i find in Embedding a bot on a website .
I know it have been some updates, my question is if BotChat.App is avaible to use.
Because i use the BotChat.App and gave me this error Uncaught ReferenceError: BotChat is not defined.
I try to change it to window.WebChat.renderWebChat and it works but gave me the error in this line document.getElementsByClassName("wc-header")[0].setAttribute("id", "chatbotheader");
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<style>
#mychat {
margin: 10px;
position: fixed;
bottom: 30px;
right: 10px;
z-index: 1000000;
}
</style>
</head>
<body>
<div id="container">
<h1>Hello World</h1>
<!--other page contents-->
<img id="mychat" src="https://i.stack.imgur.com/RD7i4.png" style="float:right" />
</div>
</body>
</html>
<script>
(function () {
var div = document.createElement("div");
document.getElementsByTagName('body')[0].appendChild(div);
div.outerHTML = "<div id='botDiv' style='width: 400px; height: 0px; margin:10px; position: fixed; bottom: 0; right:0; z-index: 1000;><div id='botTitleBar' style='height: 40px; width: 400px; position:fixed; cursor: pointer;'></div></div>";
BotChat.App({
directLine: { secret: 'myAppSecret' },
}, document.getElementById("botDiv"));
document.getElementsByClassName("wc-header")[0].setAttribute("id", "chatbotheader");
document.querySelector('body').addEventListener('click', function (e) {
e.target.matches = e.target.matches || e.target.msMatchesSelector;
if (e.target.matches('#chatbotheader')) {
var botDiv = document.querySelector('#botDiv');
botDiv.style.height = "0px";
document.getElementById("mychat").style.display = "block";
};
});
document.getElementById("mychat").addEventListener("click", function (e) {
document.getElementById("botDiv").style.height = '500px';
e.target.style.display = "none";
})
}());
</script>
Uncaught ReferenceError: BotChat is not defined html:31
As the error suggests this is due to the fact that , though you utilize BotChat.App, you haven't got a reference to BotChat.
Try importing <script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script> within the header section.
Related
I have an table generated from the code-behind and have tried applying the HTML5 draggable attribute to its table cells.
TabCell.Attributes["draggable"] = "true";
The above applies the attribute successfully as I can see it in inspect element but the element doesn't drag.
Does anyone have any idea's why this may be?
I had to set draggable through JQuery on the element.
$('#myid').draggable();
Doesn't work when the attribute is applied server-side
It's not entirely clear from your question what TabCell is, but assuming it's just a clientside HTML element you want to do:
TabCell.setAttribute("draggable", "true");
You don't need JQuery. Here is some code with two tabs, both made draggable by setting the attribute as above.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
.tab button:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<div class="tab">
<button id="TabCell1">Tab1 Header</button>
<button id="TabCell2">Tab2 Header</button>
</div>
<script>
window.onload = () => {
var TabCell = document.getElementById('TabCell1');
TabCell.setAttribute("draggable", "true");
var TabCell2 = document.getElementById('TabCell2');
TabCell2.setAttribute("draggable", "true");
};
</script>
</body>
</html>
Pretty simplistic markup. I want to add a box with rounded corners to my form. So, I have this CSS markup:
#rcorners2 {
width:800px;
height:150px;
background:lightGrey;
border-radius: 10px 10px 10px 10px;
border: 2px solid black;
overflow:hidden;
}
It's "called" from this div:
<div id="rcorners2">
<table>
<tr>
<td>Blah</td>
<td>Blah</td>
</tr>
</table>
</div>
My app has a CSS file, so I added that markup to it. Nothing happens. No markup, the form loads with a generic square table in it.
I move the markup to the header section of my page and it works fine.
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<link rel="stylesheet" href="Content/themes/base/jquery-ui.css">
<!-- <link rel="stylesheet" href="/resources/demos/style.css"> -->
<script src="Scripts/jquery-ui-1.11.0.js" type="text/javascript"></script>
<!-- <script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.24.min.js" type="text/javascript"></script> -->
<!--//**********************************
// Comment Character Count
//********************************** -->
<script type="text/javascript">
function textCounter(field, countfield, maxlimit) {
setTimeout(function () {
if (field.value.length > maxlimit)
field.value = field.value.substring(0, maxlimit);
else
countfield.value = maxlimit - field.value.length;
}, 0);
}
</script>
<script>
$(function () {
var icons = {
header: "ui-icon-circle-arrow-e",
activeHeader: "ui-icon-circle-arrow-s"
};
$("#accordion").accordion({
icons: icons,
collapsible: true
});
} );
</script>
<style>
#rcorners2 {
width:800px;
height:150px;
background:lightGrey;
border-radius: 10px 10px 10px 10px;
border: 2px solid black;
overflow:hidden;
}
</style>
</asp:Content>
Any idea why it's working in one spot and not the other? This is a multi-page C#/ASP.net app running on IE9 (although I eventually need to get it running on IE11, Chrome and Firefox too, but that's for later).
It is usually a good idea to press Ctrl + F5 together after editing external CSS or JS files. This will force the browser to download the files again instead of reading them from cache.
I have a webform where I have a javascript function that evaluates whether or not it should display a div...
here's the function...
function viewCalendars()
{
if (document.getElementById('ddlDates').value == '5')
{
document.getElementById('divSpecificDates').style.display = 'inline';
}
else
{
document.getElementById('divSpecificDates').style.display = 'none';
}
return;
}
I also added this to my form
<body onload="viewCalendars();">
//Everything
</body>
So even if there was a postback, it will show the div if the dropdownlist has an specific value selected.
However, I recently added both an updatepanel and an updateprogress... and now I think that the will not work anymore since a postback will not occur.
Here's what I have now...
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Consumptions.aspx.cs" Inherits="Station.Consumptions" %>
<%# Register TagPrefix="ew" Namespace="eWorld.UI" Assembly="eWorld.UI, Version=1.9.0.0, Culture=neutral, PublicKeyToken=24d65337282035f2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>
Lista De Consumos
</title>
<link href="css/Style.css" type="text/css" rel="stylesheet"/>
<style type="text/css">
#blur
{
width: 100%;
background-color: black;
moz-opacity: 0.5;
khtml-opacity: .5;
opacity: .5;
filter: alpha(opacity=50);
z-index: 120;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#progress
{
border: black 1px solid;
padding: 5px;
z-index: 100;
width: 250px;
position: absolute;
background-color: #fff;
-moz-opacity: 0.75;
font-family: Tahoma;
font-size: 11px;
font-weight: bold;
text-align: center;
}
</style>
<script type="text/javascript">
function viewCalendars()
{
if (document.getElementById('ddlDates').value == '5')
{
document.getElementById('divSpecificDates').style.display = 'inline';
}
else
{
document.getElementById('divSpecificDates').style.display = 'none';
}
return;
}
</script>
</head>
<body onload="viewCalendars();">
<form id="form1" runat="server">
<asp:ScriptManager ID="sm" runat="server">
</asp:ScriptManager>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<div id="blur">
</div>
<div id="progress">
<asp:Image ID="imgLoading" GenerateEmptyAlternateText="true" runat="server" ImageUrl="~/images/loading.gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="upd" runat="server">
<ContentTemplate>
<asp:DropDownList ID="ddlDates" CssClass="tbox" runat="server">
</asp:DropDownList>
<div runat="server" id="divSpecificDates" style="display: none; width: 100%; z-index: 1000;">
</div>
<asp:Button Text="Filtrar" CssClass="btn" runat="server" ID="btnFilter" onclick="btnFilter_Click" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnFilter" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</form>
</body>
</html>
So, I noticed that after you click the btnFilter button, it's function will be triggered, while the updateprogress is visible, but after it disappears (and the btnFilter function is completed) divSpecificDates is not visible when it should be visible. I suppose that I have to call viewCalendars() after everything is done...
How and where do I have to call for this function??
UPDATE:
I just got rid of the updateprogress... and it's still not working, so I guess the problem is not there... probably it's on the updatepanel
When the UpdatePanel is updated, the DOM is change, and you need to re-run the initialization's that you do when you load a page. This are done with javascript function that asp.net includes when you add the UpdatePanel. So remove the onload from the body and use the pageLoad.
So remove the onload from this line
<body onload="viewCalendars();">
and add this script
<script>
function pageLoad() {
viewCalendars();
}
</script>
Similar how to keep javascripts after UpdatePanel partial postback
Reference : Ajax Client Side Life Cycle Events
Here I am calling the webmethod in a jquery...
If I run this code in a normal aspx page then the webmethod gets fired.. But when I use master page and put this code in child page(Default4.aspx) then web method is not being fired. I have used the colorbox jquery plugin.
Here When I click on any link a popup will open and display the file content
My code is as below...
Default4.aspx
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link rel="stylesheet" href="example1/colorbox.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.colorbox.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:'group4', slideshow:true});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});
$('.non-retina').colorbox({rel:'group5', transition:'none'})
$('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
$("[id$=LinkButton2]").click(function() {
alert('child');
$.ajax({
type: "POST",
url: "Default4.aspx/lnkbtn1",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
alert(msg.d);
// Replace the div's content with the page method's return.
$("#[id$=LinkButton2]").attr('href',msg.d);
}
});
});
$(".iframe").colorbox({iframe:true, width:"60%", height:"80%"});
});
</script>
<style type="text/css">
.arrowlistmenu
{
width: 180px; /*width of menu*/
}
.arrowlistmenu .headerbar
{
font: bold 14px Arial;
color: white;
background: black url(media/titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
}
.arrowlistmenu ul
{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}
.arrowlistmenu ul li
{
padding-bottom: 2px; /*bottom spacing between menu items*/
}
.arrowlistmenu ul li a
{
color: #A70303;
background: url(media/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}
.arrowlistmenu ul li a:visited
{
color: #A70303;
}
.arrowlistmenu ul li a:hover
{
/*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}
.style1
{
width: 100%;
}
.style2
{
width: 99%;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div id="Result">
Click here for the time.</div>
<p>
<a runat="server" id="a" class='iframe' href="Uploadedfiles/Education Portal.xlsx.1.html">
Outside Webpage (Iframe)</a></p>
<p>
<a runat="server" id="a1" class='iframe' href="~/Images/Desert.jpg">Image
(Iframe)</a></p>
<asp:LinkButton ID="LinkButton2" runat="server" CssClass="iframe"
>LinkButton</asp:LinkButton>
</asp:Content>
.Cs
[WebMethod]
public static string lstbtn1()
{
return "Images/Desert.jpg";
}
[WebMethod]
public static string lstbtn1()
{
return "Images/Desert.jpg";
}
try like this
question:
I am working with jQuery sortable.
I used this tutorial:
http://www.xmech.net/programming/jquery-ui-sortable-tutorial/
Now this gives me a string like:
ID[]=2&ID[]=3&ID[]=4&ID[]=1
or even worse, when I call the id's IDa_1, IDb_2, IDc_3, IDd_4 it gives me
IDb[]=2&IDc[]=3&IDd[]=4&IDa[]=1
I find this format maximum horrible and unuseful...
I want just pages : ["IDb_2", "IDc_3", "IDd_4", "IDa_1"]
and have the order of the element in the array index.
To rectify this, I did:
var xxx = { pages: $(this).sortable('toArray') };
alert(JSON.stringify(xxx));
This is my home controller:
public string SaveSortable(string pages)
{
string strPages = Request.Params["pages"];
Console.WriteLine(pages);
return pages;
}
public ActionResult Sortable()
{
return View();
} // End Action Sortable
The problem is, both "pages" and strPages is always null...
It gets into the right controller though...
What am I doing wrong ?
This is my .cshtml:
#{
Layout = null;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css" media="all">
html {margin: 0px; padding: 0px; height: 100%;}
body {margin: 0px; padding: 0px; height: 100%;}
input{margin: 0px; padding: 0px; }
</style>
<style type="text/css" media="all">
.menu li
{
list-style: none;
padding: 10px;
margin-bottom: 5px;
border: 1px solid #000;
background-color: #C0C0C0;
width: 150px;
display: inline;
}
</style>
<script type="text/javascript" src="#Url.Content("~/Scripts/jQuery/jquery-1.7.2.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jQuery/jquery-ui/1_8_21/js/jquery-ui-1.8.21.custom.min.js")"></script>
<script type="text/javascript" language="javascript">
Date.prototype.getTicksUTC = function () {
return Date.parse(this.toUTCString()) + this.getUTCMilliseconds();
} // End Function getTicksUTC
var tickURL = '#Url.Content("~/Scripts/jQuery/SlickGrid/images/tick.png")';
$(document).ready(function () {
//$('#menu-pages').sortable();
$("#menu-pages").sortable({
update: function (event, ui) {
alert("posting");
//var ElementsOrder = $(this).sortable('toArray').toString();
var ElementsOrder = $(this).sortable('toArray');//.toString();
//alert(JSON.stringify(ElementsOrder));
var xxx = { pages: $(this).sortable('toArray') };
//alert(JSON.stringify(xxx));
//document.writeln("<h1>"+ JSON.stringify(xxx) + "</h1>");
// $.post("#Url.Action("SaveSortable", "Home")?no_cache=" + new Date().getTicksUTC(), { pages: $('#menu-pages').sortable('serialize') });
// $.post("#Url.Action("SaveSortable", "Home")?no_cache=" + new Date().getTicksUTC(), { pages: $('#menu-pages').sortable('serialize', { key: 'id' }) });
$.post("#Url.Action("SaveSortable", "Home")?no_cache=" + new Date().getTicksUTC(), { pages: $(this).sortable('toArray') });
}
});
});
</script>
</head>
<body>
<ul class="menu" id="menu-pages">
<li id="ID_1">Home</li>
<li id="ID_2">Blog</li>
<li id="ID_3">About</li>
<li id="ID_4">Contact</li>
</ul>
</body>
</html>
Simply use a JSON request:
$('#menu-pages').sortable({
update: function (event, ui) {
$.ajax({
url: '#Url.Action("SaveSortable", "Home")',
type: 'POST',
cache: false,
contentType: 'application/json',
data: JSON.stringify({ pages: $(this).sortable('toArray') }),
success: function(result) {
// ...
}
});
}
});
and then:
[HttpPost]
public ActionResult SaveSortable(string[] pages)
{
// pages will contain what you need => a list of ids
...
}
For the record, here's how the JSON request POST payload will look like:
{"pages":["ID_2","ID_3","ID_1","ID_4"]}