1

この問題は、ここ 1 か月間、私の悩みの種でした。誰かがそれを理解できるなら、私はとても、とても、とても感謝しています.

これは Chrome では機能しますが、FF では機能しません。

以前は、これは PUT だけの問題だと思っていましたが、実際には、このバインディングの console.log でさえ発火していません。

ここで以前の議論を見ることができます：

なぜこの jQuery AJAX PUT は Chrome では機能するのに FF では機能しないのですか?

周囲の HTML のかなりの部分を次に示します。

<div id="createTeamModal" class="small reveal-modal">
    <form id="createTeamForm">
        <div class="row"><p id="teamFlavorText" class="lead">Building a new team</p></div>
        <div class="row">
            <div class="small-4 large-4 columns"><label>Team Name:</label></div>
            <div class="small-6 large-6 columns"><input name="teamName" id="teamName" type="text" size="20"/></div>
        </div>
        <div class="row"><p class="lead">Does this team work for a business?</p></div>
        <div class="row">
            <div class="small-4 large-4 columns"><label>Business Size:</label></div>
            <div class="small-6 large-6 columns">
                <select id="businessSizeSelect" name="businessSizeSelect">
                <%
                    Info[] sizes = is.getList("business_sizes");
                    for (Info size : sizes) {
                        out.print("<option value=\"" + size.getId() + "\">" + size.getDescription() + "</option>");
                    }
                %>
                </select>
            </div>
        </div>
        <div id="businessLocationDiv" class="row" style="display: none; margin-top: 20px;">
            <div class="small-4 large-4 columns"><label>Business Location:</label></div>
            <div class="small-6 large-6 columns">
                <select id="businessLocationSelect" name="businessLocationSelect">
                <%
                    Info[] locations = is.getList("business_locations");
                    for (Info location : locations) {
                        out.print("<option value=\"" + location.getId() + "\">" + location.getDescription() + "</option>");
                    }
                %>
                </select>
            </div>
        </div>
        <div id="businessTypeDiv" class="row" style="display: none; margin-top: 20px;">
            <div class="small-4 large-4 columns"><label>Industry:</label></div>
            <div class="small-6 large-6 columns">
                <select id="businessTypeSelect" name="businessTypeSelect">
                <%
                    Info[] types = is.getList("business_types");
                    for (Info type : types) {
                        out.print("<option value=\"" + type.getId() + "\">" + type.getDescription() + "</option>");
                    }
                %>                      
                </select>
            </div>
        </div>
        <div class="row" style="margin-top: 20px;">
            <div class="large-offset-10 small-1 large-1 columns">
                <button id="createTeamButton" class="small button">Create</button>
            </div>
        </div>
    </form>
    <a class="close-reveal-modal">&#215;</a>
</div>

これがジャバスクリプトです。これは document.ready() 内にネストされています。

$("#createTeamButton").click(function () {
    console.log("here");
    window.alert("here");
    var teamObject = new Team();
    teamObject.description = $("#teamName").val();
    teamObject.businessSize = $("#businessSizeSelect").val();
    teamObject.businessType = $("#businessTypeSelect").val();
    teamObject.businessLocation = $("#businessLocationSelect").val();

    console.log("There");

    $.ajax({
        type: "PUT",
        url: "/ajax/rest/team",
        dataType: "json",
        data: JSON.stringify(teamObject),
        success: function () {
            // Reload the team select box
            loadTeamSelectBox();

            // Pop up the site create modal
            $('#createSiteModal').foundation('reveal', 'open');
        },
        error: ajaxErrorHandler
    });
});

チーム オブジェクトは次のとおりです。

function Team() {
    var id=0, description='', businessSize=0, businessType=0, businessLocation=0, invite="";
}

チーム フィールドに入力し、コンソールで createTeamButton.click() イベントを実行すると、PUT 要求がコンソールに記録されますが、赤色で Fiddler には表示されません。リクエスト ヘッダーは次のとおりです。

Accept  application/json, text/javascript, */*; q=0.01
Accept-Encoding gzip, deflate
Accept-Language en-US,en;q=0.5
Content-Length  88
Content-Type    application/x-www-form-urlencoded; charset=UTF-8
Cookie  JSESSIONID=-zZ0ZF6QtojQEfKoN2vLuFjx.undefined
Host    127.0.0.1:8080
Referer http://127.0.0.1:8080/do/controlpanel?teamName=Team+Four&businessSizeSelect=2&businessLocationSelect=1&businessTypeSelect=1
User-Agent  Mozilla/5.0 (Windows NT 6.2; WOW64; rv:21.0) Gecko/20100101 Firefox/21.0
X-Requested-With    XMLHttpRequest

ただし、Fiddler のリファラーは GET 要求として表示されます。

GET http://127.0.0.1:8080/do/controlpanel?teamName=Team+Four&businessSizeSelect=1&businessLocationSelect=1&businessTypeSelect=1 HTTP/1.1
Host: 127.0.0.1:8080
User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64; rv:21.0) Gecko/20100101 Firefox/21.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Referer: http://127.0.0.1:8080/do/controlpanel?teamName=Team+Four&businessSizeSelect=1&businessLocationSelect=1&businessTypeSelect=1
Cookie: JSESSIONID=-zZ0ZF6QtojQEfKoN2vLuFjx.undefined
Connection: keep-alive

jQuery 2.0.0 を使用しています

4

5 に答える 5

1

JS フィドル - http://jsfiddle.net/m9jKV/3/

チーム オブジェクトはどこにありますか?

値を取得したいこれらの html 属性はどこにありますか? $("#businessSizeSelect").val();

理想的には、これらのオブジェクトはフォーム内にネストする必要があります

<form>
   <input type="text" id="teamName">
</form>
于 2013-06-05T02:15:54.410 に答える
1

click() の代わりにon()を使用してみてください

$("#createTeamButton").on("click", function () {
 ///code
});
于 2013-06-05T02:16:01.570 に答える