Question

在我的文档中，我使用Bootstrap Modal动态加载文档。在这个模态窗口中，我使用ajax将两个表单字段的值添加到数据库中。成功请求后，我重置了以.val（＆＃39;＆＃39;）归档的两个表单。这样可以正常工作但是当我关闭模态窗口并再次打开它时，每次表单字段为空时。只有当我重新加载页面并打开模态时，一切正常。

错误在哪里？重置两个表单字段用于整个会话，直到我重新加载页面。

这是我的ajax代码：

        $(document).on('click', 'form.form-inline button', function(e) {

        e.preventDefault ? e.preventDefault() : e.returnValue = false;

        var pMacaddr = $('#macaddr').val();
        var pHostname = $('#hostname').val();

        var that = $(this);

        $.ajax({
            async: true,
            type: 'POST',
            url: propertie.backend+'?action=ajax&method=addmac&lang='+propertie.language+'&code='+Math.random(),
            dataType: 'json',
            data: {
                'hostname': pHostname,
                'macaddr': pMacaddr,
            },error: function(data) {
                alert('PHP-Error: '+data['responseText']);
            },success: function(data) {
                if (data.success === false) {
                    alert(data.message);
                } else {

                    var html = "<tr id=\""+pId+"\">\n";
                        html += "\t<td>"+pMacaddr+"</td>\n";
                        html += "\t<td>"+pHostname+"</td>\n";
                        html += "\t<td><a href=\"javascript:void(0);\" title=\""+propertie.l10n.delete+"\">";
                        html += "<i class=\"fa fa-close fa-fw\"></i></a><a href=\"javascript:void(0);\"";
                        html += " title=\""+propertie.l10n.edit+"\"><i class=\"fa fa-pencil fa-fw\"></i></a></td>\n</tr>\n";

                        $(that).closest("tr").before(html);

                        $('#macaddr').val('');
                        $('#hostname').val('');

                }
            },cache: false,
        });

    });

要打开模态，我使用此代码：

        $(document).on('click', '[data-toggle="ajaxModal"]', function(e) {
        $('#ajaxModal').removeData('bs.modal');
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
        var $this = $(this)
        , $remote = $this.data('remote') || $this.attr('href')
        , $modal = $('<div class="modal fade" id="ajaxModal"><div class="modal-dialog"><div class="modal-content"></div></div></div>');
        $('body').append($modal);
        $modal.modal({remote: $remote});
        $modal.modal('show');
    });

Answer 1

我发现了自己的错误。 Modal元素仅被隐藏，不会从文档中删除。我修改了我的Open-Modal功能，现在关闭模态时，Modal窗口将从文档中删除。

        // open modal
    $(document).on('click', '[data-toggle="ajaxModal"]', function(e) {

        e.preventDefault ? e.preventDefault() : e.returnValue = false;

        var $this = $(this)
        , $id = $this.data('id') || 'ajaxModal'
        , $remote = $this.data('remote') || $this.attr('href')
        , $modal = $('<div class="modal fade" id="'+$id+'" role="dialog"><div class="modal-dialog"><div class="modal-content"></div></div></div>');

        $('body').append($modal);
        $modal.modal({remote: $remote, keyboard: false, backdrop: false});
        $modal.modal('show');

        // On hidden event, remove the current modal from document
        $(document).on('hidden.bs.modal', '#'+$id, function(e) {
            $(this).remove();
        });

    });

现在表单字段与val（）一起使用。

使用.val（＆＃39;＆＃39;）重置字段后，表单字段为空，直到重新加载页面

1 个答案: