0

DIV への html の Ajax ロードに関して質問がありました。理想的には、私が欲しいのはこれです:

ここにコードがある閉じるボタン付きのトグル div: http://jsfiddle.net/tymeJV/uhEgG/28/

$(document).ready(function () {
    $('#country').click(function () {
        $("#country_slide").slideToggle(function() {
            if ($(this).is(":visible")) {
                alert("im visible!");
            }
        });
    });

    $('#close').click(function (e) {
        e.preventDefault();
        $('#country_slide').slideToggle();
    });

});

次に、divが展開されたときに、AJAXコードでhtmlファイルをdivにロードする必要があります。秘訣は、HTML が正常にロードされた場合、div が閉じられて再ロードされた場合に HTML ファイルを再度ロードするのを避けたいということです。私がこれのために持っているコード（ここから助けを得たのはこれです）：

http://jsfiddle.net/spadez/uhEgG/55/

$(function () {
    $('#country_link').on('click', function (e) {
        // Prevent from following the link, if there is some sort of error in
        // the code before 'return false' it would still follow the link.
        e.preventDefault();

        // Get $link because 'this' is something else in the ajax request.
        var $link = $(this);
        // Exit if the data is loaded already
        if ($link.data('loaded') === true)
            return false;

        $.ajax({
            type: 'GET',
            dataType: 'html',
            url: '/ajax/test.html',
            timeout: 5000,
            beforeSend: function () {
            },
            success: function (data, textStatus) {
                $("#country_slide").html(data);
                alert('request successful');
                // If successful, bind 'loaded' in the data
                $link.data('loaded', true)
            },
            error: function (xhr, textStatus, errorThrown) {
                $("#country_slide").html('Error');
            },
            complete: function () {
            },
        });
    });
});

私はまだこれを機能させることができませんでした。だから私の質問は、実際にこれを行うことは可能ですか?もしそうなら、jqueryの経験が豊富な人なら誰でもdivトグルをajaxロードスクリプトと統合するのを手伝ってくれますか?

これは私の最初の jquery スクリプトの 1 つであり、おそらく初心者向けではないので、少し苦労しています。ありがとうございました。

4

1 に答える 1

2

あなたが投稿したフィドルを編集してslideToogle()、適切な場所に呼び出しを追加しました。div読み込まれた html コードを保持する要素も追加されました。

<div id="country_slide">
    <a href="#" id="close">Close</a>
    <div class=".content"></div> <!-- This is the div I added -->
</div>

コンソールでログ メッセージをチェックして、コードが期待どおりに動作していることを確認できます。あなたが行っていた Ajax 呼び出しの URL は常にエラーを返したので、jsfiddle がテスト用に提供する URL に変更しました: /echo/html/.

変更された JS コードは次のとおりです。

$(function () {
    $('#close').click(function (e) {
        e.preventDefault();
        $('#country_slide').slideToggle();
    });

    $('#country_link').on('click', function (e) {
        e.preventDefault();
        var $link = $(this);
        // Exit if the data is loaded already
        if ($link.data('loaded') === true) {
            console.log('Not using Ajax.');
            $("#country_slide").slideToggle();
            return false;
        }

        $.ajax({
            type: 'GET',
            dataType: 'html',
            url: '/echo/html/',
            timeout: 5000,
            beforeSend: function () {
                $("#country_slide .content").html('<p>Loading</p>')
            },
            success: function (data, textStatus) {
                console.log('Fecthed with Ajax.');
                $("#country_slide .content").html(data);
                $("#country_slide").slideToggle();
                // If successful, bind 'loaded' in the data
                $link.data('loaded', true)
            },
            error: function (xhr, textStatus, errorThrown) {
                alert('request failed');
            },
            complete: function () {
            },
        });
    });
});
于 2013-06-06T15:33:34.800 に答える