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

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 的名称和 ID 为 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();
    }
});

此代码的作用是（省略效果等基本设置）当打开对话框时，它会搜索具有.zapisz 和/或.anuluj 类的按钮，并根据父级为它们提供适当的操作。所以现在不需要在我手动的每个表单中添加submit()。

接下来是当我需要向这些按钮中的任何一个添加一些其他操作时，我只需将它们写入表单本身，就像这样：

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

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

现在我的对话框可以按照我的意愿进行格式化，并且默认情况下可以正常工作。

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

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>