【问题标题】:how to render a form using JSON in JQuery Form builder如何在 JQuery 表单构建器中使用 JSON 呈现表单
【发布时间】:2021-10-22 20:21:34
【问题描述】:

我有一个简单的 Web 应用程序,我可以在其中创建表单并将其 JSON 保存在数据库中,然后获取相同的 JSON 并将其渲染回来,所有这些都是使用在线提供的 Jquery FormBuilder 构建的。现在,我正在努力处理渲染部分,因为它不显示任何内容,而且我对 java 脚本的了解非常有限,无法修复它。

这是我到目前为止所做的事情

对于 PHP 方面,我可以采用 Json 模式并将其提供给变量,我对其进行了测试,并且值在那里并且可以打印

$json=$row['survey_schema'];

对于java脚本部分

var container = $('#formrender');var options = {
container,
dataType:'json',
formData:'<?php $json ?>' }; container.formRender(options);

HTML

<div id="formrender"></div>

据我了解,该脚本会查找名为 formrender 的 div,并根据我提供给它的 JSON 呈现表单。 但什么也没有发生,它只是一个空白屏幕

谢谢你,对不起我的英语不好

【问题讨论】:

    标签: javascript jquery json


    【解决方案1】:

    这可以在 jQuery Form builder 文档中找到,我就是这样做的:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/highlight.min.js"></script>
    <script src="https://formbuilder.online/assets/js/form-render.min.js"></script>
    <script>
        jQuery($ => {
            const escapeEl = document.createElement("textarea");
            const code = document.getElementById("formrender");
            const formData = "";//Your JSON data goes here
            const addLineBreaks = html => html.replace(new RegExp("><", "g"), ">\n<");
    
            // Grab markup and escape it
            const $markup = $("<div/>");
            $markup.formRender({ formData });
    
            // set < code > innerText with escaped markup
            code.innerHTML = addLineBreaks($markup.formRender("html"));
    
            hljs.highlightBlock(code);
        });
    </script>
    

    【讨论】:

    • 不幸的是不起作用。我在表单数据中回显 json,什么也没有
    • 你在使用这个链接formbuilder.online ??如果是,那么您必须以特定方式设置 json 数据。你可以在这里查看演示数据formbuilder.online/docs/formRender/options/render
    • 问题不在于我认为的 json,我什至复制并粘贴了他们自己的示例。它只创建一个带有 json 的文本区域,而不是渲染表单
    • 按照文档来解决问题。或给我您的电子邮件,我将向您发送一个工作示例。
    • 谢谢你,我确实用你的例子解决了这个问题,但是我在 html 中有一些错字导致它无法渲染
    猜你喜欢
    • 1970-01-01
    • 2017-04-11
    • 2012-11-26
    • 1970-01-01
    • 2010-11-07
    • 1970-01-01
    • 1970-01-01
    • 2018-08-31
    • 2016-07-06
    相关资源
    最近更新 更多