Question

我的网络有一个小问题。我在外部文件中有表格，如下所示。

<form action="/action.php" method="post" id="formularz_dodaj" target="iframe_id">
    <fieldset>
        <input type="hidden" name="ac" value="groups_save" />
        <ul>
            <li>
                Some fields here
            </li>
            <li class="buttons">
                <input type="submit" class="zapisz" value="Zapisz" />
                <input type="button" class="anuluj" value="Anuluj" />
            </li>
        </ul>
    </fieldset>
</form>
<script type="text/javascript">
    //<![CDATA[
    $j('.zapisz').button().click(function(){
        $j('.anuluj').hide();
    });
    $j('.anuluj').button().click(function(){
        $j('#dialog').dialog('close');
    });
    //]]>
</script>

正如您所看到的，除了按钮之外没有什么特别之处。结果表单通过jQuery获取样式按钮。按钮<input type="submit" class="zapisz" value="Zapisz" />应该正常提交，<input type="button" class="anuluj" value="Anuluj" />应该关闭对话框。这个表单通过jQuery ajax（）方法放在对话框中，如下所示：

var $j = jQuery.noConflict();
var main = new Object();

$j.extend($j.ui.dialog.prototype.options, {
modal: true,
resizable: false,
width:'auto',
height:'auto',
show:{
    effect:'fade',
    duration:'fast'
},
hide:{
    effect:'fade',
    duration:'fast'
},
open:function(){
    $j(this).find("input[type=text], input[type=password], input[type=checkbox],     select, textarea").uniform();
}
});
main.dialog = function(ob){
if(ob.url){
    var url = arguments.url;
    var dialog = $j("#dialog");
    if ($j("#dialog").length == 0) {
        dialog = $j('<div id="dialog" class="dialog" title=""></div>').appendTo('body');
    }
    if(ob.title){
        dialog.attr('title', ob.title);
    }
    $j.ajax({
        type:'POST',
        dataType:'html',
        data:ob.dane,
        url:ob.url,
        success:function(d){
            if(d == 'uprawnienia'){
                main.alert({
                    text:'Nie posiadasz uprawnie\u0144 do tej operacji.', 
                    title:'Brak uprawnie\u0144'
                });
            } else {
                $j("#dialog").html(d);
                $j("#dialog").dialog({
                    title:$j("#dialog").attr('title')
                });
            }
        },
        error:function(){
            alert('Niepoprawne rz\u0105danie.');
        }
    });
} else {
   alert('Brak pliku do za\u0142adowania.');
}
}

数据的目标是放置在主索引文件中的iframe。

<iframe name="iframe_id" id="iframe_id" src="" style="display:none; width:400px; height:200px;"></iframe>

当我使用“.zapisz”类按钮时，在特定浏览器中没有任何反应：IE8，Chrome，Safari。在IE9和FireFox中，它正常运行。

我在任何浏览器中都检查过控制台，没有错误。表单中没有数据被发送到iframe。只执行在click方法中添加的JS。

按钮“.zapisz”只有在点击功能中写入document.getElemntById('formularz_dodaj').submit();时才有效。

任何人都知道什么是错的？

Answer 1

将其包裹在

中

$(function(){
//your code here
});

它应该有效！

如果仍然不起作用，请删除.button（）并尝试

$(function(){
    $j('.zapisz').click(function(){
        $j('.anuluj').hide();
    });
    $j('.anuluj').click(function(){
        $j('#dialog').dialog('close');
    });
});

Answer 2

尝试这种方式：

$("document").ready(function() {
    $j('.zapisz').click(function(){
        $j('.anuluj').hide();
    });
    $j('.anuluj').click(function(){
        $j('#dialog').dialog('close');
    });
});

问候。

Answer 3

表明表单的目标是target="iframe_id"。您的页面中是否有任何隐藏的iframe，因此提交已完成，但您无法“看到”。

@ATOzTOA提供的答案工作正常，但在新标签中打开。因此，您的页面中可能存在隐藏的iframe，表单的目标是

修改

您的iframe名称和身份upload，但您在表单中的目标是iframe_id。尝试更改您的表单

<form action="/action.php" method="post" id="formularz_dodaj" target="upload">

Answer 4

由于没有这种行为的解决方案或明确原因，我建立了一些解决方法。因为所有对话框（在我的情况下）包含类.zapisz和/或.anuluj的按钮，并且在每种情况下使用它们都是相同的，我预定义了这样的代码：

$j.extend($j.ui.dialog.prototype.options, {
    modal: true,
    resizable: false,
    width:'auto',
    height:'auto',
    show:{
        effect:'fade',
        duration:'fast'
    },
    hide:{
        effect:'fade',
        duration:'fast'
    },
    open:function(){
        $j(this).find("input[type=text], input[type=password], input[type=checkbox], select, textarea").uniform();
        $j(this).find('input[type=submit], input[type=button]').button();
        $j(this).find('.zapisz').each(function(){
            $j(this).click(function(){
                $j(this).parents('form').submit();
                $j(this).parents('form').find('.ui-state-error').hide();
            });
        });
        $j(this).find('.anuluj').each(function(){
            $j(this).click(function(){
                $j(this).parents('.dialog').dialog('close');
            });
        });
        $j('.ui-icon.ui-icon-closethick').on('click', function(){
            $j(this).parent().parent().hide();
        });
        $j(this).find('.ui-state-error').hide();
        $j('span.opis').tooltip();
    }
});

当打开对话框时，此代码的作用是（省略基本设置，如效果等），它会搜索具有thosw类.zapisz和/或.anuluj的按钮，并根据父级给出适当的操作。所以现在没有必要将submit()添加到我手工制作的每个表单中。

接下来就是当我需要为这些按钮添加一些其他动作时，我只需将它们写在表单中就像那样：

$j('.zapisz').click(function(){
    $j('.anuluj').hide();
    $j(this).val('Wysy\u0142am dane');
    $j(this).attr('disabled', 'disabled');
});

请注意，在添加button()之前，不再有click()方法。

现在我的对话框按照我想要的格式化，默认情况下按预期工作。

我仍然不知道为什么我的问题会在某些浏览器中发生，所以如果你有任何关于它的信息，这对未来会很好。

Answer 5

一个问题：/action.php将尝试加载位于文件系统根目录中的action.php。您应该使用./action.php。

这在Chrome，Firefox和IE6中运行良好：

<form action="./action.php" method="post" id="formularz_dodaj" onsubmit="alert('Submitting form');" target="iframe_id">
    <fieldset>
        <input type="hidden" name="ac" value="groups_save" />
        <ul>
            <li>
                Some fields here
            </li>
            <li class="buttons">
                <input type="submit" class="zapisz" value="Zapisz" />
                <input type="button" class="anuluj" value="Anuluj" />
            </li>
        </ul>
    </fieldset>
</form>

<script type="text/javascript">
    $('.zapisz').click(function(){
        $('.anuluj').hide();
        return true;
    });

    $('.anuluj').click(function(){
        $('#dialog').dialog('close');
    });
</script>

jQuery按钮小部件在Chrome中提交时无法正常工作

5 个答案: