文章/答案/技术大牛

发布

社区首页 >问答首页 >AWS SageMaker - submit按钮不使用自定义模板

问AWS SageMaker - submit按钮不使用自定义模板
EN

Stack Overflow用户

提问于 2020-01-13 13:04:26

回答 1查看 959关注 0票数 2

当我在AWS SageMaker上创建一个新作业时，使用我的带有人群表单的自定义模板(请参阅所附示例)，提交按钮无法工作，甚至不能单击。有办法让这件事成功吗？在AWS支持方面没有看到很好的反应。

$('#submitButton').onclick = function() {
   $('crowd-form').submit(); 
};


 <body>
    <h2 id="hit">test</h2>
        <canvas id="canvas" width=1210 height=687></canvas>    
        <crowd-button id="submitButton3">Test button</crowd-button>

    <crowd-form>

        <input type="hidden" name="path0" id="input0123" value="{{task.input.metadata.images.path0}}" />
        <crowd-input label="Please input the character you see in the image" max-length="1" name="workerInput0"></crowd-input>

        <crowd-button id="submitButto3223n">Submit123</crowd-button>

    </div></div>

    <crowd-button id="submitButton">Submit123</crowd-button>

    </crowd-form>
    <crowd-button id="submitButton1">Submit1232</crowd-button>

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
 </body>

mechanicalturk

amazon-sagemaker

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-01-16 15:42:48

您的代码片段几乎没有问题。

以下是指向SageMaker的HTML引用和构建自定义标记模板的示例的链接

首先，删除所有提交按钮(<crowd-button>元素)和onClick事件处理程序。在这里，您有两个选项，使用默认的SageMaker提交按钮或在模板中创建自己的按钮。

使用SageMaker的提交按钮

省略提交按钮(crowd-button)，SageMaker将自动在crowd-form中追加一个按钮。根据文件这里

使用自定义提交按钮

在这种情况下，您需要：

通过在SageMaker元素中包括crowd-button 、crowd-form元素和设置style="display: none;来防止crowd-form添加按钮
在模板的其他地方添加您自己的提交按钮，并添加onclick甚至将执行form.submit()的处理程序

下面是模板的工作示例(取自上述示例)。

<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<link rel="stylesheet" href="https://s3.amazonaws.com/smgtannotation/web/static/css/1.3fc3007b.chunk.css">
<link rel="stylesheet" href="https://s3.amazonaws.com/smgtannotation/web/static/css/main.9504782e.chunk.css">

<div id='document-text' style="display: none;">
  {{ task.input.text }}
</div>
<div id='document-image' style="display: none;">
        {{ task.input.taskObject | grant_read_access }}
</div>
<div id="metadata" style="display: none;">
  {{ task.input.metadata }}
</div>

<crowd-form>
    <input name="annotations" id="annotations" type="hidden">

     <!-- Prevent crowd-form from creating its own button -->
    <crowd-button form-action="submit" style="display: none;"></crowd-button>
</crowd-form>

<!-- Custom annotation user interface is rendered here -->
<div id="root"></div>

<crowd-button id="submitButton">Submit</crowd-button>

<script>
    document.querySelector('crowd-form').onsubmit = function() {
        document.getElementById('annotations').value = JSON.stringify(JSON.parse(document.querySelector('pre').innerText));
    };

    document.getElementById('submitButton').onclick = function() {
        document.querySelector('crowd-form').submit();
    };
</script>

<script src="https://s3.amazonaws.com/smgtannotation/web/static/js/1.3e5a6849.chunk.js"></script>
<script src="https://s3.amazonaws.com/smgtannotation/web/static/js/main.96e12312.chunk.js"></script>
<script src="https://s3.amazonaws.com/smgtannotation/web/static/js/runtime~main.229c360f.js"></script>

码源

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59717227

复制

相似问题

问AWS SageMaker - submit按钮不使用自定义模板
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AWS SageMaker - submit按钮不使用自定义模板EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AWS SageMaker - submit按钮不使用自定义模板
EN