单击后禁用按钮
Disabling Buttons after being clicked
有没有什么方法可以在点击按钮后禁用它?。我们在 Azure Bot (NodeJS) 中的聊天机器人应用程序开发中面临一个场景,它要求按钮在单击后被禁用,因此用户不会向后滚动并尝试单击不会给出指定结果的按钮
我的JS代码
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;
};
我的 HTML 代码:
<!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>
bot webchat需要使用直连方式。然后您可以订阅活动并在按钮上注册点击处理程序。您需要创建 botConnection 直线对象,然后在订阅活动之前将其注册到应用程序。
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'));
以下将禁用按下的按钮。
botConnection.activity$.subscribe(function (activity) {
$(".wc-message-wrapper[data-activity-id='" + activity.id + "'] .ac-pushButton").click(function () {
console.log($(this));
$(this).attr("disabled", "disabled");
});
});
以下将禁用该消息中的所有按钮。
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");
});
});
要隐藏禁用按钮的悬停效果,请将以下内容添加到您的 css:
button[disabled] {
pointer-events: none;
}
有没有什么方法可以在点击按钮后禁用它?。我们在 Azure Bot (NodeJS) 中的聊天机器人应用程序开发中面临一个场景,它要求按钮在单击后被禁用,因此用户不会向后滚动并尝试单击不会给出指定结果的按钮
我的JS代码
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;
};
我的 HTML 代码:
<!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>
bot webchat需要使用直连方式。然后您可以订阅活动并在按钮上注册点击处理程序。您需要创建 botConnection 直线对象,然后在订阅活动之前将其注册到应用程序。
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'));
以下将禁用按下的按钮。
botConnection.activity$.subscribe(function (activity) {
$(".wc-message-wrapper[data-activity-id='" + activity.id + "'] .ac-pushButton").click(function () {
console.log($(this));
$(this).attr("disabled", "disabled");
});
});
以下将禁用该消息中的所有按钮。
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");
});
});
要隐藏禁用按钮的悬停效果,请将以下内容添加到您的 css:
button[disabled] {
pointer-events: none;
}