Is there any way to disable the button once it is clicked?. We are facing a scenario in chatbot application development in Azure Bot (NodeJS) which requires Buttons to be disable once clicked, So user would not scroll back and try to click button which wouldn't give specified outcome
My JS code
var MyWebChat = function(params) {
// Webchat client args
var user = {
id: params['userid'] || 'userid',
name: params["username"] || 'username'
};
var bot = {
id: params['botid'] || 'botid',
name: params["botname"] || 'botname'
};
// Create Directline connection and application
const botConnection = new BotChat.DirectLine({
domain: params['domain'],
token: document.getElementById("directLineToken").value,
secret: params['s'],
webSocket: params['webSocket'] && params['webSocket'] === "true" // defaults to true
});
BotChat.App({
locale: params['locale'],
resize: 'detect',
speechOptions: speechOptions,
user: user,
botConnection: botConnection
}, document.getElementById(params['targetElement']));
botConnection.activity$.subscribe(function (activity) {
$(".wc-message-wrapper[data-activity-id='" + activity.id + "'] .ac-pushButton").click(function () {
console.log($(this));
$(this).attr("disabled", "disabled");
});
});
this.loadApplication = function() {
/**
* Sends custom parameter to the chatbot
**/
var sendCustomArg = function() {
console.log('post message');
botConnection
.postActivity({
type: "event",
value: "loginPageValue",
from: {
id: "passwordResetID",
source: "loginPage"
},
name: "loginPage"
})
.subscribe(function(id) { console.log("YOUR CUSTOM ARG HAS BEEN SENT")});
}
sendCustomArg();
/**
* When window unloads send endOfConversation
* This event is catched by the bot that can freeup server resources
**/
window.onbeforeunload = function() {
botConnection
.postActivity({
type: "endOfConversation",
from: {
id: params['userid']
}
})
.subscribe(function(id){ console.log("endOfConversation ack")});
};
};
return this;
};
My HTML CODE:
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<link href="https://XXXXX/QABotUI.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700|Roboto+Condensed:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<script src="https://XXXXX/QASessionDemo.js"></script>
<div id="chat-application">
<!-- <span class="btn2" id="button2" style="float:right;right:5px;z-index: 6;position: relative;top:12px;"><svg height="16" viewBox="0 0 48 49" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m45.587 45.632c-2.132 2.135-3.731 3.469-5.863 1.334l-15.724-15.745-15.724 15.745c-2.132 2.135-3.731.534-5.863-1.334-2.133-1.868-3.465-3.736-1.333-5.871l15.724-15.745-15.724-15.745c-2.132-2.135-.533-4.003 1.333-5.871 1.865-1.868 3.731-3.469 5.863-1.334l15.724 15.745 15.724-15.745c2.132-2.135 3.731-.534 5.863 1.334 2.133 1.868 3.465 3.736 1.333 5.871l-15.724 15.745 15.724 15.745c2.132 2.135.8 4.003-1.333 5.871z" fill-rule="evenodd"/></svg> </span> -->
<div id="botChat" class="wc-narrow"></div>
</div>
<!-- JAVASCRIPT -->
<script src="https://XXXX/QABotChat.js"></script>
<script>
var webchatParams = {
userid:'userid',
username:'You',
botid: 'XXXXXX',
botname:'XXXXX',
targetElement: 'botChat', // html element where the webchat gets rendered
s:'XXXXXX',
customArg: 'common'
};
new MyWebChat(webchatParams).loadApplication();
</script>
</body>
</html>
You need to use the directline method for the bot webchat. Then you can subscribe to the activities and register a click handler on the buttons. You need to create the botConnection directline object and then register it to the app before subscribing to the activities.
const botConnection = new BotChat.DirectLine({
domain: params['domain'],
token: document.getElementById("directLineToken").value,
webSocket: params['webSocket'] && params['webSocket'] === 'true' // defaults to true
});
BotChat.App({
bot: bot,
locale: params['locale'],
resize: 'detect',
speechOptions: speechOptions,
user: user,
botConnection: botConnection
}, document.getElementById('BotChatGoesHere'));
The following will disable the button that was pressed.
botConnection.activity$.subscribe(function (activity) {
$(".wc-message-wrapper[data-activity-id='" + activity.id + "'] .ac-pushButton").click(function () {
console.log($(this));
$(this).attr("disabled", "disabled");
});
});
The following will disable all buttons in that message.
botConnection.activity$.subscribe(function (activity) {
$(".wc-message-wrapper[data-activity-id='" + activity.id + "']").on("click", ".ac-pushButton", function(event) {
event.preventDefault();
$(".wc-message-wrapper[data-activity-id='" + activity.id + "'] .ac-pushButton").attr("disabled", "disabled");
});
});
To hide the hover effect on disabled buttons, add the following to your css:
button[disabled] {
pointer-events: none;
}