Question

The following jQuery’s goal is to load images from a server, and then control the number of images per page, as well as navigate through the pages. It’s not functioning.
I’m hoping someone can shed some light on whats wrong with it.

I’ve gotten the pagination to work, but then the combo box page selector doesn’t work. I’ve gotten the combo box selector to work, but then the images and pagination won’t load. Right now only the combo box is showing, and although it looks as if it works, no images are visible, so it’s hard to tell.

The HTML:

<div id="loading"></div>
<div id="gallery_container">
    <ul class="new_arrivals_gallery"></ul>
    <div class="pagination"></div>
</div>
<form>
    <label>Images Number:</label>
    <select id="imgNum" name="imgNum">
        <option value="12">12</option>
        <option value="16">16</option>
        <option value="20">20</option>      
    </select>
</form>

The jQuery:

slideshow = { page: 0, imgs: '' };

function loadData(){
    loading_show();
    gallery_hide();                    
    $.ajax
    ({
        type: "GET",
        url: "new_arrivals_data.php",
        data: slideshow,
        success: function(msg) {
            gallery_show();
            $("#gallery_container").html(msg);
            console.log(msg);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            // Tell the human that something broke.
        },
        complete: function() {
            // This is always called regardless of success or failure.
            loading_hide();
        }
    });
}
loadData(1);  // For first time page load default results
$('#gallery_container .pagination li.active').live('click',function(){
    slideshow.page = $('#gallery_container .pagination li.active').attr('p');
    loadData();
});           
$('#go_btn').live('click',function(){
    slideshow.page = parseInt($('.goto').val());
    var no_of_pages = parseInt($('.total').attr('a'));
    if(page != 0 && page <= no_of_pages){
        loadData();
    }else{
        alert('Enter a PAGE between 1 and '+no_of_pages);
        $('.goto').val("").focus();
        return false;
    }
});

//Bind the onChange event to Fetch images on combox selection
$("#imgNum").change(function(){
    console.log('hi');
    slideshow.imgs = $('imgNum').val();
    loadData();
})
//You should store the current selected option in a cookie
//For the sake of the example i'll set the default permanently to 12
var imgNum_selected = 12;

//set the initial selected option and trigger the event
$("#imgNum [value='"+imgNum_selected+"']")
    .prop("selected","selected");
    $("#imgNum").change();

The Original Code

The HTML:

<div id="loading"></div>
<div id="gallery_container">
    <ul class="new_arrivals_gallery"></ul>
    <div class="pagination"></div>    
</div>
<form>
    <label>Images Number:</label>
    <select id="imgNum" name="imgNum">
        <option value="12">12</option>
        <option value="16">16</option>
        <option value="20">20</option>      
    </select>
</form>

The jQuery Ajax:

function loading_show(){
    $('#loading').html("<img src='loading.gif'/>").fadeIn('fast');
}
function loading_hide(){
    $('#loading').fadeOut('fast');
}                
function gallery_show(){
    $('#gallery_container').fadeIn('slow');
}
function gallery_hide(){
    $('#gallery_container').fadeOut(10);
}

function loadData(page){
    loading_show();
    gallery_hide();                    
    $.ajax
    ({
        type: "GET",
        url: "new_arrivals_data.php",
        data: {page:page, imgs: value},
        success: function(msg)
        {
            $("#gallery_container").ajaxComplete(function(event, request, settings)
            {
                gallery_show();
                loading_hide();
                $("#gallery_container").html(msg);
            });
        }
    });
}
loadData(1);  // For first time page load default results
$('#gallery_container .pagination li.active').live('click',function(){
    var page = $(this).attr('p');
    loadData(page);
});           
$('#go_btn').live('click',function(){
    var page = parseInt($('.goto').val());
    var no_of_pages = parseInt($('.total').attr('a'));
    if(page != 0 && page <= no_of_pages){
        loadData(page);
    }else{
        alert('Enter a PAGE between 1 and '+no_of_pages);
        $('.goto').val("").focus();
        return false;
    }
});

//Bind the onChange event to Fetch images on combox selection
$("#imgNum").change(function(){
    //The combo box
    var sel = $(this);
    //Selected value
    var value = sel.val();
    loadData(page);
})
//You should store the current selected option in a cookie
//For the sake of the example i'll set the default permanently to 12
var imgNum_selected = 12;

//set the initial selected option and trigger the event
$("#imgNum [value='"+imgNum_selected+"']")
    .prop("selected","selected")
    .change();

Thanks for your help.

Answer 1

Managed to get this working. Specifically the jQuery as the HTML was fine.

I am thinking there are still some general clean ups I could do to this. If you have any advice, please let me know!

Here is the functioning code:

(function() {
    var page;

    function loading_show(){
        $('#loading').html("<img src='loading.gif'/>").fadeIn('fast');
    }
    function loading_hide(){
        $('#loading').fadeOut('fast');
    }                
    function gallery_show(){
        $('#gallery_container').fadeIn('slow');
    }
    function gallery_hide(){
        $('#gallery_container').fadeOut(10);
    }


    function loadData(page, imgs){
        loading_show();
        gallery_hide();                    
        $.ajax
        ({
            type: "GET",
            url: "new_arrivals_data.php",
            data: {page:page, imgs:imgs},
            success: function(msg) {
                $("#gallery_container").html(msg);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                // Tell the human that something broke.
            },
            complete: function() {
                // This is always called regardless of success or failure.
                gallery_show();
                loading_hide();
            }
        });
    }
    loadData(1);  // For first time page load default results
    $('#gallery_container .pagination li.active').live('click',function(){
        var imgs = $("#imgNum").val();
        var page = $(this).attr('p');
        loadData(page, imgs);
    });           
    $('#go_btn').live('click',function(){
        var imgs = $("#imgNum").val();
        var page = parseInt($('.goto').val());
        var no_of_pages = parseInt($('.total').attr('a'));
        if(page != 0 && page <= no_of_pages){
            loadData(page, imgs);
        }else{
            alert('Enter a PAGE between 1 and '+no_of_pages);
            $('.goto').val("").focus();
            return false;
        }
    });

    //Bind the onChange event to Fetch images on combox selection
    $("#imgNum").change(function(){
        //The combo box
        var sel = $(this);
        //Selected images value
        var imgs = sel.val();
        var page = $('#cur_page').attr('cur_page');
        //Feth the images
        loadData(page, imgs);
    })
    //You should store the current selected option in a cookie
    //For the sake of the example i'll set the default permanently to 12
    var imgNum_selected = 16;

    //set the initial selected option and trigger the event
    $("#imgNum [value='"+imgNum_selected+"']").prop("selected","selected").change();

}());

Thanks for all the help!