Ajax Div切换避免重新加载内容

Question

I had a question regarding Ajax loading of html into a DIV. Ideally what I want is this:

A toggle div with close button, which I have the code for here: 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();
    });

});

Then I want some AJAX code to load a html file into the div when the div is expanded. The trick is that if the HTML is loaded successfully, I want it to avoid reloading the HTML file again if the div is closed and repoened, since I have already loaded it, and just simply toggle the content in and out with the button. The code I have for this (which I got help on from here is this):

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 () {
            },
        });
    });
});

I haven't been able to get this working yet though. So my question is, is it actually possible to do this, and if it is, can anyone with more experience with jquery please help me integrate the div toggle with the ajax loading script.

This is one of my first jquery scripts and I am having a bit of a hard time with it, perhaps it is not for beginners. Thank you.

Answer 1

I edited the fiddle you posted adding the call to slideToogle() where appropriate. Also added a div element to hold the loaded html code.

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

You can check the log messages in the console to verify that the code is doing what you expect. The URL for the Ajax call you were doing always returned an error so I changed to the URL that jsfiddle provides for testing: /echo/html/ .

Here's the modified JS code:

$(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 () {
            },
        });
    });
});