0

私は一般的にjqueryとコーディングが初めてです。これは私がやろうとしていることです:

  • リンクをクリックすると、 #country_slide div が展開されます
  • 「読み込み中」のテキストを表示
  • ajaxが成功したらhtmlファイルの内容をdivに入れる
  • それ以外の場合は、エラーを警告して div を閉じます

これは私が今持っているコードです:

http://jsfiddle.net/spadez/n9nVs/5/

window.onload = function () {
    var a = document.getElementById("country_link");
    a.onclick = function () {
        $.ajax({
            type: 'GET',
            dataType: 'html',
            url: '/ajax/test.html',
            timeout: 5000,
            beforeSend : function() {
                $("#country_slide").show();
                $("#country_slide").val('<p>Loading</p>')
            }, 
            success: function (data, textStatus) {
                $("#country_slide").html(data);
                alert('request successful');
            },
            error: function (xhr, textStatus, errorThrown) {
                alert('request failed');
                $("#country_slide").hide();
            },
            complete : function() {
               $('.loader').hide();
            }, 
        });
        return false;
    }
}

リンクをクリックしても、ボックスに読み込み中のテキストが表示されません。ここでどこが間違っているのか誰か教えてください。また、私の最初の jquery スクリプトについて何かアドバイスをいただける方がいらっしゃいましたら、よろしくお願いいたします。

4

8 に答える 8

4

あなたのアンカーの ID はcountryではなくcountry_linkです。そう：

var a = document.getElementById("country");

または、jQuery の id セレクターを使用します。

var a = $("#country");

またはさらに良い直接チェーン：

$(function() {
    $('#country').click(function () {
        $.ajax({
            type: 'GET',
            dataType: 'html',
            url: '/ajax/test.html',
            timeout: 5000,
            beforeSend : function() {
                $("#country_slide").show();
                $("#country_slide").html('<p>Loading</p>')
            }, 
            success: function (data, textStatus) {
                $("#country_slide").html(data);
                alert('request successful');
            },
            error: function (xhr, textStatus, errorThrown) {
                alert('request failed');
                $("#country_slide").hide();
            },
            complete : function() {
               $('.loader').hide();
            }, 
        });
        return false;
    }
});

$(document).readyの代わりに関数を使用していることに注意してくださいwindow.onload。onclickまた、イベント サブスクリプションを jQuery のclick関数に置き換えました。jQuery を使用している場合は、それを最大限に活用することをお勧めします。

于 2013-06-06T08:19:47.150 に答える
2

IDを持つ要素がないためcountry_link

document.getElementById()要素が見つからない場合は null を返します

document.getElementById('country').onclick = ...; //should work

JavaScript では、nullは特別なプリミティブであり、プリミティブ型にプロパティを追加することはできません。

于 2013-06-06T08:19:29.060 に答える
2

あなたが持っているフィドルで

<a href="#" id="country">

あるべき場所:

<a href="#" id="country_link">

またはJSを次のように変更します

var a = document.getElementById("country");
于 2013-06-06T08:20:30.777 に答える
2

動作中のjsFiddleデモ

  • country_linkページに要素がありません。
  • 使用する代わりに、window.onloadDOM Ready を使用できます。
  • メソッドでjQueryによるクリックハンドラをアタッチします.on()。
  • の.val()方法です<input />。他の要素については、.html()代わりに使用してください。
// DOM ready instead of window.onload
$(function () {
    // attach click handler by jQuery instead of onclick
    $('#country').on('click', function () {
        $.ajax({
            type: 'GET',
            dataType: 'html',
            url: '/ajax/test.html',
            timeout: 5000,
            beforeSend : function() {
                $("#country_slide").show();
                // val() method is for <input />
                // use html() instead
                $("#country_slide").html('<p>Loading</p>')
            }, 
            success: function (data, textStatus) {
                $("#country_slide").html(data);
                alert('request successful');
            },
            error: function (xhr, textStatus, errorThrown) {
                alert('request failed');
                $("#country_slide").hide();
            },
            complete : function() {
               $('.loader').hide();
            }, 
        });
        return false;
    });
});

参考文献:

于 2013-06-06T08:25:39.997 に答える
0

jsfiddle コードを更新しました。ただチェックしてください。失敗する方法です。ワークスペースには、実際のデータを返す test.html が必要です。ありがとう。

于 2013-06-06T08:30:10.693 に答える
0

id=country_link の要素を追加する必要があり、このコードは NOX が言ったように機能します。私はjsfiddleでそれを試しました。使ってみる

$("#country").click(function(){
// your code goes here

})

それはうまくいきます。

于 2013-06-06T08:28:14.257 に答える
0

  1. document.getElementById("country_link");は、マークアップ内のタグのdocument.getElementById("country");as "country_link"notに置き換えられます。id<a>

  2. ライブラリを使用している場合は、次のようなjQueryイベントを処理できます-

    $(document).on("click","a",function(){
    //ajax stuff
});
于 2013-06-06T08:29:37.727 に答える
0

すでに jQuery を使用している場合は、単純な JS を使用しないでください (そのほうが簡単です)。

;$(document).ready(function(){
    $(country_link).click(function () {
        $.ajax({
            type: 'GET',
            dataType: 'html',
            url: '/ajax/test.html',
            timeout: 5000,
            beforeSend : function() {
                $(country_slide).show();
                $(country_slide).val('<p>Loading</p>');
            }, 
            success: function (data, textStatus) {
                $(country_slide).html(data);
                alert('request successful');
            },
            error: function (xhr, textStatus, errorThrown) {
                alert('request failed');
                $(country_slide).hide();
            },
            complete : function() {
               $('.loader').hide();
            }, 
        });
        return false;
    });
  });
于 2013-06-06T08:21:46.350 に答える