jquery - jQuery ボタン ウィジェットが Chrome での送信時に正しく機能しない

Question

私の Web には小さな問題が 1 つあります。以下のような外部ファイルにフォームがあります。

<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 に送信されません。クリックメソッドに追加された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 には name と iduploadがありますが、フォームのターゲットは です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');
});

button()を追加する前にメソッドがなくなっていることに注意してくださいclick()。

これで、希望どおりにフォーマットされたダイアログがあり、デフォルトで期待どおりに動作します。

それでも、一部のブラウザーで問題が発生する理由がわかりません。そのため、それに関する情報があれば、将来に役立つと思います.

Answer 5

1 つのキャッチ:ファイルシステムのルートにある/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>