loading external file with jQuery script via ajax

Question

I had a quick test of using .load to pull this content slider into the next div area. It works fine when I put the script with the markup altogether in an external html file. But the function won't fire up if the script is moved into an external js file. If I have the same slider with different content in ten html files, do I really need to put the script in every file? Can I put the script into my main external js file or the header of the page and make it retrigger on every request?

Select box .load method:

var area = $(".selectboxarea");

$('Select').on('change', function () {  
    area.empty(); 
    var $this = $(this);
    var selected = $this.find('option:selected');
    var loadfile = selected.data('file');
    var selectfirst = $('.selectempty');
    var nextarea = $this.next('.selectboxarea');
    $(".searchselectbox").not(this).prop('selectedIndex',0);
    selectfirst.text('Select');
    var hide = $this.find('.selectempty').text('Hide');$this.find('.selectempty').toggleClass('hide'); 

 if (loadfile) {    // ******LOAD FILE INTO DIV*********
    nextarea.load(loadfile); 
    hide

 }else if (selected.hasClass('hide')) {
    selected.text('Select');
    selected.toggleClass('hide');

 }else { 
    var url = $this.val();
    if (url != '') {
    window.location.href = url
 }
    return false;
 }

});

Slider Code:

$(document).ready(function() {
    var thisItem = 1,nextItem = 0, range = 0, thisHeight = 70,
    $counter = $('#item_count'), $body = $('body');    

    //for each content item, set an id, and hide.
    $('.content_item').each(function() {
        nextItem++;
        $(this).attr('id', nextItem).hide();
    });

    //range contains how many content items exist
    range = nextItem, nextItem = 2, prevItem = range;

    //display the first content item
    $('#' + thisItem).show();
    $counter.html(thisItem + ' of ' + range);

    //hide old content item, show next item, resize content container
    $('#nextButton').click(function() {
        prevItem = thisItem;
        //update counter
        $counter.html(nextItem + ' of ' + range);
        //set focus to body so button is not selected,
        $body.focus();
        //get height of next content item to resize container
        thisHeight = $('#' + nextItem).height() + 20;
        //resize content container
        $('#content_container').animate({
            height : (thisHeight + 'px')
        }, 1000, 'swing');
        //hide old content item
        $('#' + thisItem).toggle('slide', {
            direction : 'left',
            easing : 'swing'
        }, 1000);
        //show next content item
        $('#' + nextItem).toggle('slide', {
            direction : 'right',
            easing : 'swing'
        }, 1000);

        //set old content item to current item
        thisItem = nextItem;
        //loop to first item if range reached
        if (thisItem >= range) {
            nextItem = 1;prevItem=range-1;
        } else {
            nextItem++;prevItem=thisItem-1;
        }
    });
    //end next click function


    //hide current content item, resize content container, show previous item 
    $('#prevButton').click(function() {

        //If we have reached the end range, the next item will be item #1
        if(nextItem==1){//so set the current item to the last
            thisItem=range;
        }else thisItem = nextItem - 1;

        //update counter
        $counter.html(prevItem + ' of ' + range);
        //set focus to body so button is not selected,
        $body.focus();
        //get height of next content item to resize container
        thisHeight = $('#' + prevItem).height() + 20;
        //resize content container
        $('#content_container').animate({
            height : (thisHeight + 'px')
        }, 1000, 'swing');
        //hide old content item
        $('#' + thisItem).toggle('slide', {
            direction : 'right',
            easing : 'swing'
        }, 1000);
        //show next content item
        $('#' + prevItem).toggle('slide', {
            direction : 'left',
            easing : 'swing'
        }, 1000);

        //set next content item to current item
        nextItem = thisItem;

        if (prevItem >= range) {//if at end of items
            nextItem = 1;//first
            prevItem = range -1;
            thisItem = range;
        } else if(prevItem <=1){//if at start of items
            prevItem = range;
            thisItem = 1;
            nextItem = 2;
        }else {//if in the middle of items
            prevItem--;
            thisItem--;
            }

    });
    //end prev click function

});

Demo1 (when the script is in every external html file)

Demo2(not working when the script is in an external js file)

Download File

Andrew Newby · Accepted Answer

Ok, well this still is a work in progress - but it should get you going. There are quite a few issues with your code:

1) You don't have the whole thing wrapped in the $(document).ready()

2) In your old code, you are doing this on the page load:

$('.content_item').each(function() {
    nextItem++;
    $(this).attr('id', nextItem).hide();
});

Thats all good and well if the content is on the original page - BUT you don't have that. So to fix that, you need to remove that bit - and change:

nextarea.load(loadfile);

to:

nextItem = 0;
nextarea.load(loadfile, function(result) {
    $('.content_item').each(function() {
        nextItem++;
        $(this).attr('id', nextItem).hide();
        total_found++;
    });
    console.log("Total: " + total_found);
    $('#item_count').html(total_found);
    hide;
    $('#1').show();
});

That then at least gets the IDs, and total number of items. Then you need to add a new variable near the top of the script, which will then get increased when an element gets found:

var total_found = 0;

That should at least get the basics going - but there is still work that needs doing on it (bit of a weird script TBH!)

Hopefully that'll get you on the right tracks now!

loading external file with jQuery script via ajax

Answers (2)

Related Questions