我正在构建一个Zendesk应用,该应用会将各种信息发布到Webhook。目前,我遇到两个问题。 client.invoke()
功能表示,当按下发送电子邮件按钮时,它不是控制台中的功能。此外,有时在按下按钮后,应用程序会成功发布到Webhook,而其他时候则根本不会发布。我无法缩小发布时引起差异的原因。我不确定这是否与我构建的应用程序有关,或者与Zendesk交互是否存在问题。
这里是应用程序:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="main.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://assets.zendesk.com/apps/sdk/2.0/zaf_sdk.js"></script>
<script src="https://cdn.jsdelivr.net/handlebarsjs/4.0.8/handlebars.min.js"></script>
</head>
<body>
<script>
var client = ZAFClient.init();
client.invoke('resize', { width: '100%', height: '450px' });
client.get('ticket.brand.subdomain').then(
function(data) {
var subdomain = data['ticket.brand.subdomain'];
console.log('Zendesk Subdomain is ' + subdomain);
document.getElementById('subdomainform').value = subdomain;
}
);
client.get('ticket.organization.id').then(
function(data) {
var org_id = data['ticket.organization.id'];
console.log('Org id is ' + org_id);
document.getElementById('orgidform').value = org_id;
}
);
</script>
<form name="submissionForm">
<div class="formBox">
<label for="title">First Name</label>
<input type="text" id="firstName" placeholder="First Name"/>
</div>
<div class="formBox">
<label for="title">Last Name</label>
<input type="text" id="lastName" placeholder="Last Name"/>
</div>
<div class="formBox">
<label for="title">Email</label>
<input type="text" id="email" placeholder="Email"/>
</div>
<div class="formBox">
<select id="rescom">
<option value="residential">Residential</option>
<option value="commercial">Commercial</option>
</select>
</div>
<div class="formBox">
<button id="btn">Click to Send Email</button>
</div>
<div><p id="explain">The fields below are ready-only and required for submission. If you don't see them, please refresh the app.</p></div>
<div class="formBox">
<input type="text" id="subdomainform" readonly="readonly"/>
</div>
<div class="formBox">
<input type="text" id="orgidform" readonly="readonly"/>
</div>
</form>
<script>
let content = [];
const addDay1 = (ev)=>{
let information = {
id: Date.now(),
firstName: document.getElementById('firstName').value,
lastName: document.getElementById('lastName').value,
email: document.getElementById('email').value,
subdomain: document.getElementById('subdomainform').value,
orgid: document.getElementById('orgidform').value,
rescom: document.getElementById('rescom').value
}
content.push(content);
document.forms[0].reset();
const Url ='{PLACEHOLDER}';
$.ajax({
url: "{WEBHOOK URL}",
type: "POST",
dataType: 'json',
data: {information},
complete: function(){alert("Failure")}
});
}
document.addEventListener('DOMContentLoaded', ()=>{
document.getElementById('btn').addEventListener('click', addDay1);
});
</script>
</body>
</html>
我想念的是什么?感谢所有可以提供的帮助。
这是我的Zendesk社区经理解决的。见下面的帖子:
尝试进行此操作之前,请确保ZAFClient已完全注册后续的ZAFClient方法。类似于:
client.on('app.registered', e => { client.get('ticket.brand.subdomain').then( function(data) { var subdomain = data['ticket.brand.subdomain']; console.log('Zendesk Subdomain is ' + subdomain); document.getElementById('subdomainform').value = subdomain; } ); client.get('ticket.organization').then( function(data) { var org_id = data['ticket.organization.id']; console.log('Org id is ' + org_id); document.getElementById('orgidform').value = org_id; } ); }) The "not a function in the console" error is caused from the app's HTML page being resubmitted again when you click the button. In
Zendesk Apps框架,来自应用程序的连接(使用ZAFClient.init())通过参数完成到主代理窗口在框架首次加载时传递给应用的代码。您可以如果您寻找类似的内容,请在浏览器的“网络”标签中看到此内容“ iframe.html?origin = https%3A%2F%2Fyour_subdomain.zendesk.com&app_guid = ff7133010-abff-4f1c-a7bf-ff7133fff7133”-需要使用origin和app_guid参数进行连接。重新提交页面时,这些参数不再传递新页面重新加载,并且对ZAFClient.init()的新调用没有成功初始化。因此当现在无效时导致错误“客户端”对象正试图用于调用“调用”。你必须将这些应用程序页面视为单页应用程序。
ew!话虽如此-您仍然可以使用HTML功能,只是当按钮为时没有它重新提交整个页面按下。您可以通过将type =“ button”添加到button标记中来做到这一点。
单击发送电子邮件
另请参见:HTML按钮不提交表单
希望这能带您上路!