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 uprawnieu0144 do tej operacji.', 
                    title:'Brak uprawnieu0144'
                });
            } else {
                $j("#dialog").html(d);
                $j("#dialog").dialog({
                    title:$j("#dialog").attr('title')
                });
            }
        },
        error:function(){
            alert('Niepoprawne rzu0105danie.');
        }
    });
} else {
   alert('Brak pliku do zau0142adowania.');
}
}

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

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

发生的是当我使用按钮类"。zapisz"在特定的浏览器中没有任何变化:IE8, Chrome, Safari。在IE9和FireFox中，它可以正常工作。

我已经在任何浏览器中检查了控制台，没有错误。没有来自form的数据发送到iframe。只有添加在click方法中的JS才会被执行。

按钮"。只有当document.getElemntById('formularz_dodaj').submit();被写入点击函数时，zapisz才会正常工作。

有谁知道是怎么回事吗?

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('Wysyu0142am 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>