1

ユーザーの連絡先情報が表示されるページがあります。変更する必要がある場合は、現在のデータに設定されたフィールド値を持つフォームを含むモーダル ダイアログ ボックスを開く [編集] ボタンがあります。それはうまくいきます。

フォーム内には「国」フィールドがあり、変更されると、新しい国の州が選択された選択ボックスの html を取得するか、州を入力するためのテキスト入力を表示する ajax 呼び出しがトリガーされます。

以前のバージョン (異なるサイズ、jquery 1.7) で動作していました...そのコードは次のとおりです。

$('#edit-contact-link').click(function(){
    $('#dialog-contact-form-edit').dialog("open");
    return false;
});

$('#dialog-contact-form-edit').dialog({
    autoOpen: false,
    modal: true,
    width: 450,
    height: 600,
    open: function () {
       $("#Country").change(function() {
            var country = $(this).val();
            $.ajax({
                type: "POST",
                url: "includes/ajax/countrystate.php",
                data: {
                    Country: country
                },
                dataType: "html",
                success: function(data) {
                    //alert(data);
                    $('#state-dropdown').empty().html(data); // fill the state with the right data
                }
            }); // end .ajax
        }); // country change function
    },
    buttons: {
        Submit: function() {
            $("form[name='contactform']").submit();
            $(this).dialog('close');
        },
        Cancel: function() {
            $(this).dialog('close');
        }
    }
});

新しいサイトで同じコードを使用してみました (セレクターと ajax ファイル名を少し変更しました) が、まったく機能しませんでした。

編集ボタンをクリックしてダイアログを直接呼び出し、on() メソッドを使用して ajax 呼び出しをトリガーする別の関数を作成することで、最終的にすべてが機能するようになりました (#state-dropdown div に ajax データを入力することを除く)。 #国選択フィールドの変更。

部分的に成功したコード:

$(document).on("change", "[id='Country']", function() {
    var country = $(this).val();
    var state = "";
    //alert("Country "+ country + " AND State " + state);
    $.ajax({
        type: "POST",
        url: "includes/functions/form-func/ajax-countries-states.php",
        data: {
            Country: country,
            State: ""
        },
        dataType: "html",
        success: function(data) {
            alert(data);
            $('#state-dropdown').empty().html(data); // fill the state with the right    data
        }
    }); // end .ajax 
}); // country change function

$('.contact-edit').click(function() {
    $('#dialog-contact-edit').dialog({
        modal: true,
        position: ["center", 100],
        width: 460,
        buttons: {
            "Close": function() {
                $(this).dialog("close"); },
            "Submit": function() {
                $(this).dialog("close"); }
        }
    });
});

唯一の問題は、ajax 呼び出しの最後の行です。

$('#state-dropdown').empty().html(data);

空にしてajaxで取得したデータで埋めるフォームにdivがあります。

div がページの本体 (ダイアログの外側) に配置されている場合は正常に動作しますが、ダイアログの内側にある場合は更新されません。

これには簡単な修正が必要なようですが、これを検索して変更するのに何時間も費やしました...すべて役に立ちませんでした。

ここの素晴らしい頭脳からの援助は大歓迎です。

マリー

4

1 に答える 1

0

モーダルボックス（具体的にはシャドウボックス）のフォームで同様の問題が発生しました。答える必要がある質問: モーダル ボックスが開いたときに、HTML 内に既に存在する (おそらく非表示の) HTML の一部を "複製" しますか、それとも iframe を読み込みますか?

Shadowbox は html コンテンツのクローンを作成したため、同じ ID を持つ 2 つの要素を持つことになりました。

問題は、1 つの ID のみが更新されることでした。したがって、これはおそらくあなたが抱えているのと同じ問題です。

$('#shadowbox . selector') のように更新したいものを特定する必要がありました。

または、id の代わりにクラスを使用して要素を更新することもできます。先ほど言ったように、2 つの要素が同じ ID を持つ場合、1 つのみが呼び出されますが、クラスを使用するとすべてが更新されます。

于 2012-09-21T03:08:39.470 に答える