JQuery Ajax Возникли проблемы при загрузке файла PHP, как задумано

Question

Следующая цель jQuery - загрузить изображения с сервера, а затем контролировать количество изображений на странице, а также перемещаться по страницам. Это не работает. Я надеюсь, что кто-то может пролить свет на то, что с ним не так.

Я получил нумерацию страниц, но селектор страниц со списком не работает. Я включил селектор комбинированного окна, но тогда изображения и нумерация страниц не будут загружаться. В данный момент отображается только поле со списком, и, хотя оно выглядит так, как будто работает , изображения не видны, поэтому трудно сказать.

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>

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();

Оригинальный код

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>

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();

Спасибо за вашу помощь.

Answer 1

удалось заставить это работать. В частности, jQuery как HTML был в порядке.

Я думаю, что все еще есть некоторые общие очистки, которые я мог бы сделать с этим. Если у вас есть какие-либо советы, пожалуйста, дайте мне знать!

Вот код функционирования:

(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();

}());

Спасибо за помощь!

Answer 2

Это может это исправить:

Завернуть данные нагрузки (1); строка в функции готовности документа jQuery:

$(document).ready(){
  loadData(1)
}

EDIT:

OR

1. var value = sel.val ()

Значение - это ключевое слово, не используйте его в качестве имени переменной.

2

$("#imgNum...")

Должен быть в $ (document) .ready (function () {here});

3

loadData(1);

Не нужно 1.

4. Не похоже, что li.active возвращается в AJAX, но на него ссылаются в jQuery

5. HTML-код #gallery_container должен быть загружен до вызова gallery_show ()