hi I am working on amazon lex and
want to know that how can I break the line in amazon lex to show text in the next line. I have used \n but it is not working. see screenshots.
And can I show 2 messages to user at a same time?. i am new on lex so please guide me. thanks.
Amazon lex doesn't support for the new line.
You can handle in the front end, like keeping #newLine in response which reflected as next line if you are using web interface.
You need to write the custom code in the front end for updating the response in new line.
In the below code I used and identifier #newLine to insert the response as two different messages.
Write the below code in Ajax call response or SDK call response.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
//Add the botResponse in the Amazon lex.
let botResponse = "This is a first response #newLine This is second response #newLine This is third response."
let pushToChat = botResponse.split("#newLine")
$("#btn2").click(function(){
pushToChat.forEach(res =>{
$("ol").append(`<li>${res}</li>`);
})
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn2">Append list items</button>
</body>
</html>
Hope above code will helps you.
Related
I am using the Microsoft Graph API to programmatically add content to a OneNote Page on my Office365 OneNote Notebook. For an example page like this:
OneNote snip consisting of Title & 2 separate divs/blocks, this is the generated HTML that I get by making a GET to the pages/{myPageID}/content?includeids=true endpoint
<html lang="en-US">
<head>
<title>Thursday, December 6, 2018</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="created" content="2018-12-06T19:55:00.0000000" />
</head>
<body data-absolute-enabled="true" style="font-family:Calibri;font-size:11pt">
<div id="div:{95790d05-168a-4f61-81a7-5c13e3124069}{4}" style="position:absolute;left:48px;top:115px;width:624px">
<p id="p:{95790d05-168a-4f61-81a7-5c13e3124069}{10}" style="margin-top:0pt;margin-bottom:0pt">It is a jolly good day</p>
</div>
<div id="div:{3a6b78e9-2af8-4a5b-abf8-09871fb6eec5}{20}" style="position:absolute;left:44px;top:180px;width:624px">
<p id="p:{3a6b78e9-2af8-4a5b-abf8-09871fb6eec5}{24}" style="margin-top:0pt;margin-bottom:0pt">Lets do this shall we</p>
</div>
</body>
</html>
I now try adding a new div/block by making the following PATCH using the requests library in Python. The myPageID and access_token are collected previously by making GET requests to the graph API:
patchPageURL='https://graph.microsoft.com/v1.0/users/'+userID+'/onenote/pages/'+myPageID+'/content?includeIDs=true'
patchPageHeaders={
'Content-Type':'application/json',
'Authorization':'Bearer '+access_token
}
patchPageBody=[{
'target':'div:{3a6b78e9-2af8-4a5b-abf8-09871fb6eec5}{20}',
'action':'insert',
'position':'after',
'content':'<div><p> And God said let there be new blocks </p></div>'
}]
patchResp = requests.patch(patchPageURL, headers=patchPageHeaders, json=patchPageBody)
However, I end up with a 400 error as a response to my PATCH request with the following code and message:
code: 20135
message: The entity type is not supported for this operation.
If I change the opening div tag for the content to something like <div data-id="new-div">, I still receive the same 400 error, code 20135.
I am following the instructions from this documentation here. What subtlety is being missed here? There are no authentication or other similar errors. The PATCH works fine if I change the target to body and the action to append but that doesn't make a new div/block and only adds the content as a child of the first div in the page.
Is there a straightforward way to add new blocks/divs as a sibling of existing blocks or even just something as simple as adding a new block at the end of the OneNote page?
I am using a multiple page format with a persistent header. I can successfully change page either with a straight hyperlink or using $(':mobile-pagecontainer').pagecontainer('change'
The code works fine but it seems to "load" the page an additional time each time I click on the buttons to change page.
In this code the button changes the page and outputs a console.log message.
On click I would expect the page to change and to see one "#btn - page x" console.log message.
What happens is the page changes and I get a console message for each time I've loaded the page, not just one.
Even though my code is working, this can't be right - this will just go up and up with normal user usage.
What am I not understanding here?
I've created a jsfiddle to show what I mean. For example, if I click the "goto page x" button 6 times (that's 3 times for each page), I get an output of 3 "#btn - page x" messages, not just one.
Same with the header button - each time I change the page, number of responses from the header button goes up.
the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>problem</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="header" data-position="fixed" data-theme="a">
header button
</div>
<div data-role="page" id="page1" data-title="Page 1">
<div data-role="content">
<h1>I am page 1</h1>
goto page2
</div>
</div>
<div data-role="page" id="page2" data-title="Page 2" data-theme="b">
<div data-role="content">
<h1>I am page 2</h1>
goto page1
</div>
</div>
<script src="problem.js"></script>
</body>
</html>
and the js:
$(document).on('pagebeforeshow','#page1',function(){
console.log('#page1 pagebeforeshow');
$('#btntest1').click(function(){
console.log('#btn - page1');
//$(':mobile-pagecontainer').pagecontainer('change', '#page2', { reloadPage: false});
});
});
$(document).on('pagebeforeshow','#page2',function(){
console.log('#page2 pagebeforeshow');
$('#btntest2').click(function(){
console.log('#btn - page2');
//$(':mobile-pagecontainer').pagecontainer('change', '#page1', { reloadPage: false});
});
});
$(function() {
$("[data-role='header']").toolbar();
});
$(document).on('pagebeforeshow',function(){
console.log('pagebeforeshow');
$('#headerbtn').click(function(){
console.log('headerbtn click');
});
})
UPDATE:
So I've been trying all sorts of things to try to fix this, including removing data-rel="back", trying data-ajax="false" (which defeats the point of what I'm trying to do), changing page with
$(':mobile-pagecontainer').pagecontainer('change', '#page2');
or
$(':mobile-pagecontainer').pagecontainer('change', '#page2', { reloadPage: false});
but no joy. Obviously, I've tried googling but can't find anything to help.
In the full app code the buttons communicate with a database, so as the clicks increase, I'm sending and retrieving the same data to the db multiple times on each click.
I really would appreciate some guidance if anyone has any ideas what I could do?
The problem is that each time you're entering the page, you are binding a listener on the element again. So you're binding multiple listeners. The listener should not be written inside the pagebeforeshowhandler.
Take it out like this:
$(document).on('pagebeforeshow','#page1',function(){
console.log('#page1 pagebeforeshow');
});
$('#btntest1').click(function(e){
e.preventDefault();
console.log('#btn - page1');
$(':mobile-pagecontainer').pagecontainer('change', '#page2', { reloadPage: false});
});
And for page 2 likewise.
using jQuery UI 1.9.2 (upgraded from 1.8.23) and I see this on the Upgrade guide;
Deprecated url method and use of title attribute; use aria-controls attribute
(#7132) The url method has been deprecated in favor of leaving the href attribute unmodified even for remote tabs. The href attribute will point to the actual resource and the aria-controls attribute will point to the associated panel. This means that the title attribute will no longer be used to specify a custom panel id.
I have this code:
var $t = $("#tabs");
$t.tabs("url", 0, url);
$t.bind("tabsload", function (event, ui) {
console.log('tabsload fired');
});
$t.tabs("load", 0);
I cannot figure out how to set the url value for the tab (this code is fired when the user clicks on a grid row and the url value is rebuilt based on grid values) now as I do not understand the upgrade guide to use the aria-controls comment.
The approach I have taken is to set the href of the AJAX link and then call the load method to reload the content.
I appreciate that this does not use the aria-controls attribute, but the snippet from the upgrade guide states that this attribute points to the panel - remote tabs receive their content based on anchor contained in the li element, so I figured I should be able to use this approach.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="Scripts/jquery-ui-1.9.2.custom/css/ui-lightness/jquery-ui-1.9.2.custom.min.css"
rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#tabs').tabs();
$('#change-button').click(function (event) {
$('#ajax-link').attr('href', 'Handler1.ashx?echo=changed at ' + new Date().toTimeString());
$('#tabs').tabs('load', 0);
event.preventDefault();
});
});
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="tabs">
<ul>
<li>
<a id="ajax-link" href="Handler1.ashx?echo=some text to repeat">Tab 1</a>
</li>
</ul>
</div>
<button id="change-button">Change</button>
</form>
</body>
</html>
I am using a generic HTTP handler (this is the AJAX request) which simply echos back the text it is passed, e.g., Handler1.ashx?echo=some text to repeat. Note that my tabs consist of only one tab that makes an AJAX call to this handler.
To change the Url, I handle the click event of the button and modify the href of ajax-link like this and then reload it:
$('#ajax-link').attr('href', 'Handler1.ashx?echo=changed at '
+ new Date().toTimeString());
$('#tabs').tabs('load', 0);
So for this to work you will need to provide the link you wish to change with an ID and you will need to know at which position the tab page occurs.
I am at my wits end with jQuery Mobile events. I do not understand them, despite following the docs to the T. I am using the following code to initialize my pages. The problem is that some seem to fire multiple times and occasionally when I go back to a page nothing will appear, as though .live pageinit simply doesn't fire at all. I am quite confused. Is pageinit the way to go? is .live best practice? Do I need to clean up after myself and use something like pagehide to remove stuff from the DOM? Please help me understand. Thanks!
// page number 1
<header>
includes and stuff
<header>
<body>
<div data-role="page" data-theme="a" id="dashboardPage">
$('#dashboardPage').live('pageinit',function() {
});
// somewhere in here a page transition to anotherPage.html (not necessarily the id of the new page in the <div data-role-"page data-theme...> declaration
$.mobile.changePage("anotherPage.html",{transition : "slide"});
</div>
</body>
// page number 2
<header>
includes and stuff
<header>
<body>
<div data-role="page" data-theme="a" id="specialsPage">
$('#specialsPage').live('pageinit',function() {
});
</div>
</body>
You could try something like this:
<html>
<header>
<!-- BASIC INCLUDES -->
<link rel="stylesheet" href="./css/jquery.structure-1.1.0.min.css" />
<link rel="stylesheet" href="./css/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" href="./css/jquery.mobile.theme-1.1.0.min.css" />
<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.1.0.min.js"></script>
<!-- END - BASIC INCLUDES -->
</header>
<body>
<!-- PAGE 1 -->
<div data-role="page" data-theme="a" id="dashboardPage">
<script>
// INITIALIGE PAGE 1 - dashboardPage
$("#dashboardPage").live('pageinit',function(event){
alert( '"initializing" page 1: dashboardPage');
});
</script>
HERE YOU ARE AT PAGE 1 (dashboardPage)!!!<br><br>
CLICK HERE TO GO TO PAGE 2 (specialsPage)
</div>
<!-- PAGE 2 -->
<div data-role="page" data-theme="a" id="specialsPage">
<script>
// INITIALIGE PAGE 2 - specialsPage
$("#specialsPage").live('pageinit',function(event){
alert( '"initializing" page 2: specialsPage');
});
</script>
HERE YOU ARE AT PAGE 2 (specialsPage)!!!<br><br>
CLICK HERE TO GO TO PAGE 1 (dashboardPage)
</div>
</body>
</html>
Hope it helps.
When using JQuery mobile you should consider you have a single page which content is updated dynamically. You do not navigate from one page to the other as you normally would.
Because of this, any code present in a page you navigate to with JQM simply be ignored (tyr changing the header of page number 2, and navigate to this page from page number 1 with changepage, you will not see any difference).
Because of that, all your js code should be directly available within the page in which your user will arrive.
If you add the following code in the scripts of page 1, you will proeperly detect the initialization of of page2 when it is loaded with changepage.
$("#specialsPage").live('pageinit',function(event){
alert( '"initializing" page 2: specialsPage');
});
An important thing to keep in mind is that you user might also directly access your page2, which means that all the code should also be available for page 2. Because of this I would strongly recommend including all your code in a js file referenced in the headers of all your page, and NOT directly in script tags within your pages.
Behold: a footer template:
<!-- Templates -->
<script type="text/template" id="templateFooter">
<div data-role="navbar">
<ul>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</script>
In every mobile page I have:
<div data-role="footer" data-position="fixed">footer</div>
The way I'm currently loading the template is:
$(function() {
$('div[data-role=footer]').html($('#templateFooter').html());
$.mobile.activePage.trigger('create');
});
This works, but I don't really like using $(function(), but I need to load it if any page shows, so pageinit or pageshow does not help. I'll be using knockout.js going forward, if that is of any help.
Is there a better way to do this?
function getTemplateFooter() {
//return footer text here
}
$("div:jqmData(role='page')").live("pagebeforecreate",function() {
// get the footer of the page
// if footer doesn't exist on page, insert it where you want it... in this case after role="content"?
var $content =$(this).page().find('div:jqmData(role="content")');
$content.after(getTemplateFooter());
}
there is also a pageshow event, that one fires even if the user navigates to the page, through a back button press etc... it bubbles up to the page div
I use it for pages where lots of dynamic data could change between subsequent visits, or even when the user just presses back