Question

I want to load different content into a div based on a drop-down selection. Here’s the code so far:

    $(document).ready(function(){
    var x;
    $('#loadCategory').change(function(){
        if ($(this).val() == "videos"){
            x = 'videos.txt';
        }
        if ($(this).val() == "ads"){
            x = 'ads.txt';
        }
        if ($(this).val() == "widgets"){
            x = 'widgets.txt';
        }
        if ($(this).val() == "images"){
            x = 'images.txt';
        }else{
            x = 'videos.txt';
        }
    });
    $('.content').load(x,function(){
            $('img').wrap('<li></li>');
            $('.media-container').pajinate({
                items_per_page : 7
            });

            $( ".media-container li" ).draggable({
                appendTo: ".playlist ol",
                helper: "clone"
            });
    });

When I put “alert(x);” in the .change(), it shows me the correct value, but doesn’t change the content in .content. What am I missing?

Answer 1

$(document).ready(function(){
    $('#loadCategory').on('change', function(){
        loadContent(this.value+'.txt');
    });

    function loadContent(file) {
        $('.content').load(file, function(){
            $('img').wrap('<li></li>');
            $('.media-container').pajinate({
                items_per_page : 7
            });

            $( ".media-container li" ).draggable({
                appendTo: ".playlist ol",
                helper: "clone"
            });
        });
    }
});

if the else statement is really needed you could always do:

$('#loadCategory').on('change', function(){
    var t = this.value,
        x = (t=='videos'||t=='ads'||t=='widgets'||t=='images')?this.value:'videos';
    $('.content').load(x+'.txt', function(){
        $('img').wrap('<li></li>');
        $('.media-container').pajinate({
            items_per_page : 7
        });

        $( ".media-container li" ).draggable({
            appendTo: ".playlist ol",
            helper: "clone"
        });
    });
});

EDIT

Try this:

$(document).ready(function(){
    loadContent('videos.txt');

    $('#loadCategory').on('change', function(){
        loadContent(this.value+'.txt');
    });

    function loadContent(file) {
        $('.content').load(file, function(){
            $('img').wrap('<li></li>');
            $('.media-container').pajinate({
                items_per_page : 7
            });

            $( ".media-container li" ).draggable({
                appendTo: ".playlist ol",
                helper: "clone"
            });
        });
    }
});