Question

我正在尝试制作一个表格，其中有一个文本框。现在我验证了名称应该是唯一的。

所以我要去父div并更改其中的完整html。

我要去父母div并且像

一样

`parentdiv.find('.child').html('<div class="form-group has-error has-feedback validateblockname"> <input type="hidden" id = "edit_tower_id" ><div class="alert alert-danger blocknamealert" role="alert" style="margin: 5px 0px 0px 0px;float: right; padding: 0;"> <code style="font-size: small;">Tower name already exists </code></div></input><label for="ProjectBlocks_block_name" class="control-label">Name</label><span class="glyphicon glyphicon-exclamation-sign form-control-feedback"></span><input type="text" class="form-control" id="ProjectBlocks_block_name" onblur="EditProjectBlocks.validateblockname();" onchange="EditProjectBlocks.validateblockname();"></div>'')`

这是初始图像

parentdiv.find('.child').html('<div class="form-group"><input type="hidden" id="edit_tower_id"><label for="ProjectBlocks_block_name" class="control-label">Name</label><input type="text" class="form-control" id="ProjectBlocks_block_name" onblur="EditProjectBlocks.validateblockname();" onchange="EditProjectBlocks.validateblockname();"></div>');

有更好的方法吗

Answer 1

检查以下URL，它显示包含源代码的演示：

http://jsfiddle.net/cse_tushar/QAePU/2/

此外，您可以使用J Query验证插件。请检查以下网址：

http://jqueryvalidation.org/

Answer 2

你正在上传到父div的表格，把它放在dom的某个地方，上面有一些id并隐藏它......

如果需要，可以使用clone（）方法克隆它，并将/ replace附加到父div ...

var copyForm = $("#copyForm").clone();
$(copyForm).appendTo("#targetDiv");

DEMO

Answer 3

您可以使用jquery对话框并自行滚动：

https://jqueryui.com/dialog/

示例确认对话框：

// pass in props for dialog options
function confirm(text, title, onconfirm, oncancel, okText, cancelText) {

    var el = createRequiredElements(text);

    var response = false;

    // set dialog title
    if (title !== undefined) {
        el.attr('title', title);
    } else {
        el.attr('title', 'Confirmation');
    }

    // setup dialog options
    el.dialog({
        modal: true,
        width: 500,
        dialogClass: "sample-class",
        close: function () {
            el.remove();
        },
        buttons: [{
            text: okText || "OK",
            click: function() {
                $(this).dialog("close");
                if (onconfirm !== undefined && onconfirm !== null) {
                    onconfirm();
                }
                response = true;
            },
        },
        {
            text: cancelText || "Cancel",
            click: function() {
                $(this).dialog("close");
                if (oncancel !== undefined && oncancel !== null) {
                    oncancel();
                }
                response = false;
            }
        }]
    });
    return response;
}; 
  // create dialog content
  function createRequiredElements(text){
    var el = $(document.createElement('div'));
    el.addClass('dialog-class');

    var para = $(document.createElement('p'));
    para.addClass('dialog-message-class');
    para.text(String(text));

    el.append(para);
    return el;
}

点击onClick即可启动基本确认对话框：

$(".clicker").click(function () {
    var url = $(this).attr('href');
    cgAlerter.confirm("Are you sure you want to do this?", 'Confirm',
        function () {
            window.location = url;
        });

    return false;
});

实施警报UI Web

3 个答案:

DEMO