Объединение jQuery Ajax-кода не работает - PullRequest
Новая
       2

Объединение jQuery Ajax-кода не работает

0 голосов
/ 22 августа 2011

Я пытаюсь объединить две функции ajax, которые используют jQuery.Оба прекрасно работают сами по себе, но у меня чертовски много времени объединяет их, и я довольно зелен, когда дело доходит до Ajax.Я не могу понять, что не так.

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

ЭтоГалерея.Две половины представляют собой поле со списком для выбора количества изображений, отображаемых на странице, а другая - для разбиения на страницы для навигации по страницам.У меня есть ощущение, что это как-то связано с jQuery Ajax data: {page:page, imgs: value}, но это может быть только частью проблемы.

HTML: 

<div id="loading"></div>
<div id="gallery_container">
    <ul class="new_arrivals_gallery"></ul>
    <div class="pagination"></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>
</div>

JavaScript (jQuery): 

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

PHP: 

<?php
if($_GET['page'])
{
$page = 0;
 if(isset($_GET['page'])){
    $page = (int) $_GET['page'];
 }
$cur_page = $page;
$page -= 1;
if((int) $_GET['imgs'] > 0){ 
    $per_page = (int) $_GET['imgs']; 
} else { 
    $per_page = 12; 
}
$previous_btn = true;
$next_btn = true;
$first_btn = true;
$last_btn = true;
$start = $page * $per_page;

include"db.php";

$query_pag_data = "SELECT `imgURL`,`imgTitle` FROM `images` ".
"ORDER BY `imgDate` DESC LIMIT $start, $per_page";

$result_pag_data = mysql_query($query_pag_data) or die('MySql Error' . mysql_error());

echo "<ul class='new_arrivals_gallery'>";
while($row = mysql_fetch_assoc($result_pag_data)) { 
    echo "<li><a href='new_arrivals_img/".$row['imgURL']."' class='gallery' title='".$row['imgTitle']."'><img src='new_arrivals_img/thumbnails/".$row['imgURL']."'></a></li>";
  }
echo "</ul>";   


/* --------------------------------------------- */
$query_pag_num = "SELECT COUNT(*) AS count FROM images";
$result_pag_num = mysql_query($query_pag_num);
$row = mysql_fetch_array($result_pag_num);
$count = $row['count'];
$no_of_paginations = ceil($count / $per_page);

/* ---------------Calculating the starting and endign values for the loop----------------------------------- */
if ($cur_page >= 7) {
    $start_loop = $cur_page - 3;
    if ($no_of_paginations > $cur_page + 3)
        $end_loop = $cur_page + 3;
    else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 6) {
        $start_loop = $no_of_paginations - 6;
        $end_loop = $no_of_paginations;
    } else {
        $end_loop = $no_of_paginations;
    }
} else {
    $start_loop = 1;
    if ($no_of_paginations > 7)
        $end_loop = 7;
    else
        $end_loop = $no_of_paginations;
}
/* ----------------------------------------------------------------------------------------------------------- */
$msg .= "<div class='pagination'><ul>";

// FOR ENABLING THE FIRST BUTTON
if ($first_btn && $cur_page > 1) {
    $msg .= "<li p='1' class='active'>First</li>";
} else if ($first_btn) {
    $msg .= "<li p='1' class='inactive'>First</li>";
}

// FOR ENABLING THE PREVIOUS BUTTON
if ($previous_btn && $cur_page > 1) {
    $pre = $cur_page - 1;
    $msg .= "<li p='$pre' class='active'>Previous</li>";
} else if ($previous_btn) {
    $msg .= "<li class='inactive'>Previous</li>";
}
for ($i = $start_loop; $i <= $end_loop; $i++) {

    if ($cur_page == $i)
        $msg .= "<li p='$i' style='color:#fff;background-color:#006699;' class='active'>{$i}</li>";
    else
        $msg .= "<li p='$i' class='active'>{$i}</li>";
}

// TO ENABLE THE NEXT BUTTON
if ($next_btn && $cur_page < $no_of_paginations) {
    $nex = $cur_page + 1;
    $msg .= "<li p='$nex' class='active'>Next</li>";
} else if ($next_btn) {
    $msg .= "<li class='inactive'>Next</li>";
}

// TO ENABLE THE END BUTTON
if ($last_btn && $cur_page < $no_of_paginations) {
    $msg .= "<li p='$no_of_paginations' class='active'>Last</li>";
} else if ($last_btn) {
    $msg .= "<li p='$no_of_paginations' class='inactive'>Last</li>";
}
$goto = "<input type='text' class='goto' size='1' style='margin-top:-1px;margin-left:60px;'/><input type='button' id='go_btn' class='go_button' value='Go'/>";
$total_string = "<span class='total' a='$no_of_paginations'>Page <b>" . $cur_page . "</b> of <b>$no_of_paginations</b></span>";
$msg = $msg . "</ul>" . $goto . $total_string . "</div>";  // Content for pagination
echo $msg;
}

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

* Я был бы готов включить кодкаждая часть, прежде чем я попытался объединить их, если это помогло бы.

ОРИГИНАЛЬНЫЙ ОТДЕЛЬНЫЙ КОД: Вот оба набора исходного кода.Цель состоит в том, чтобы объединить их, другими словами добавить код № 2 в код № 1.

HTML & jQuery # 1: 

<body>
    <div id="loading"></div>
    <div id="gallery_container">
        <ul class="new_arrivals_gallery"></ul>
        <div class="pagination"></div>
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript">
        $(document).ready(function(){
            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,
                    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;
                }

            });
        });
    </script>

</body>

PHP# 1: 

<?php
if($_GET['page'])
{
$page = $_GET['page'];
$cur_page = $page;
$page -= 1;
$per_page = 15;
$previous_btn = true;
$next_btn = true;
$first_btn = true;
$last_btn = true;
$start = $page * $per_page;
include"db.php";


$query_pag_data = "SELECT `imgURL`,`imgTitle` FROM `images` ".
"ORDER BY `imgDate` DESC LIMIT $start, $per_page";

$result_pag_data = mysql_query($query_pag_data) or die('MySql Error' . mysql_error());

echo "<ul class='new_arrivals_gallery'>";
while($row = mysql_fetch_assoc($result_pag_data)) { 
    echo "<li><a href='new_arrivals_img/".$row['imgURL']."' class='gallery' title='".$row['imgTitle']."'><img src='new_arrivals_img/thumbnails/".$row['imgURL']."'></a></li>";
  }
echo "</ul>";   


/* --------------------------------------------- */
$query_pag_num = "SELECT COUNT(*) AS count FROM images";
$result_pag_num = mysql_query($query_pag_num);
$row = mysql_fetch_array($result_pag_num);
$count = $row['count'];
$no_of_paginations = ceil($count / $per_page);

/* ---------------Calculating the starting and endign values for the loop----------------------------------- */
if ($cur_page >= 7) {
    $start_loop = $cur_page - 3;
    if ($no_of_paginations > $cur_page + 3)
        $end_loop = $cur_page + 3;
    else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 6) {
        $start_loop = $no_of_paginations - 6;
        $end_loop = $no_of_paginations;
    } else {
        $end_loop = $no_of_paginations;
    }
} else {
    $start_loop = 1;
    if ($no_of_paginations > 7)
        $end_loop = 7;
    else
        $end_loop = $no_of_paginations;
}
/* ----------------------------------------------------------------------------------------------------------- */
$msg .= "<div class='pagination'><ul>";

// FOR ENABLING THE FIRST BUTTON
if ($first_btn && $cur_page > 1) {
    $msg .= "<li p='1' class='active'>First</li>";
} else if ($first_btn) {
    $msg .= "<li p='1' class='inactive'>First</li>";
}

// FOR ENABLING THE PREVIOUS BUTTON
if ($previous_btn && $cur_page > 1) {
    $pre = $cur_page - 1;
    $msg .= "<li p='$pre' class='active'>Previous</li>";
} else if ($previous_btn) {
    $msg .= "<li class='inactive'>Previous</li>";
}
for ($i = $start_loop; $i <= $end_loop; $i++) {

    if ($cur_page == $i)
        $msg .= "<li p='$i' style='color:#fff;background-color:#006699;' class='active'>{$i}</li>";
    else
        $msg .= "<li p='$i' class='active'>{$i}</li>";
}

// TO ENABLE THE NEXT BUTTON
if ($next_btn && $cur_page < $no_of_paginations) {
    $nex = $cur_page + 1;
    $msg .= "<li p='$nex' class='active'>Next</li>";
} else if ($next_btn) {
    $msg .= "<li class='inactive'>Next</li>";
}

// TO ENABLE THE END BUTTON
if ($last_btn && $cur_page < $no_of_paginations) {
    $msg .= "<li p='$no_of_paginations' class='active'>Last</li>";
} else if ($last_btn) {
    $msg .= "<li p='$no_of_paginations' class='inactive'>Last</li>";
}
$goto = "<input type='text' class='goto' size='1' style='margin-top:-1px;margin-left:60px;'/><input type='button' id='go_btn' class='go_button' value='Go'/>";
$total_string = "<span class='total' a='$no_of_paginations'>Page <b>" . $cur_page . "</b> of <b>$no_of_paginations</b></span>";
$msg = $msg . "</ul>" . $goto . $total_string . "</div>";  // Content for pagination
echo $msg;
}

HTML & jQuery # 2: 

<body>


<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>

<div id="imgTray"></div>
<script type="text/javascript" src="js/libs/jquery-1.6.1.min.js"></script> 
<script>

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

    //Feth the images
    $.get("get_images.php",{imgs: value}, function(data){
        //Add images to the document
        $("#imgTray").html(data);
    });
})

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

</script>
</body>

PHP # 2: 

<?php
    if((int) $_GET['imgs'] > 0){ 
        $limit = (int) $_GET['imgs']; 
    } else { 
        $limit = 12; 
    }

     $curPage = 0;
     if(isset($_GET['page'])){
        $curPage = (int) $_GET['page'];
     }

    $mysql_link = mysql_connect("localhost", "root", "root");   
    mysql_select_db("new_arrivals_imgs") or die("Could not select database");

    $query = mysql_query("SELECT `imgURL`,`imgTitle` FROM `images` ".
    "ORDER BY `imgDate` DESC LIMIT " . $limit * $curPage . ", $limit") or die(mysql_error());

    if(!$query) {
        echo "Cannot retrieve information from database.";
    } else { 
    while($row = mysql_fetch_assoc($query)) { 
        echo "<li><a href='new_arrivals_img/".$row['imgURL']."' class='gallery' title='".$row['imgTitle']."'><img src='new_arrivals_img/thumbnails/".$row['imgURL']."'></a></li>";
      }
    }

?>

Думаю, я должен упомянуть: Когда я изменяю data: {page:page, imgs: value} на то, что было в коде # 1: data: "page="+page изображения показывают, и нумерация страниц работает.Увы, поле со списком не видно.Есть мысли по этому поводу?

Ответы [ 2 ]

1 голос
/ 22 августа 2011

Ваш success обратный вызов будет именно таким: 

success: function(msg) {
    gallery_show();
    loading_hide();
    $("#gallery_container").html(msg);
}

Таким образом, когда вы успешно получите свой HTML (в msg) обратно с сервера, вы покажете галерею, скроете загрузчиканимации и вставьте msg HTML в галерею.

Функция ajaxComplete регистрирует обработчик "AJAX готов":

Всякий раз, когдаAjax-запрос завершается, jQuery вызывает событие ajaxComplete.Все обработчики, которые были зарегистрированы с помощью метода .ajaxComplete(), выполняются в это время.

Но вы не делаете AJAX на #gallery_container, вы делаете с ним что-то, кроме негоне знает, что эти вещи происходят от действий AJAX.В результате ваш обработчик успеха не делает ничего, что может видеть пользователь.

Обработчик error также может быть хорошим дополнением, тогда вы можете переместить «скрыть анимацию загрузчика» в обработчик complete.: 

success: function(msg) {
    gallery_show();
    $("#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.
    loading_hide();
}

Обработчик complete - это:

Функция, вызываемая по завершении запроса (после выполнения обратных вызовов и вызовов с ошибками).

Так что это хорошее место для проведения любой очистки, которую вы всегда хотите.

1 голос
/ 22 августа 2011

Не думаю, что следующий код: 

$("#gallery_container").ajaxComplete(function(event, request, settings)
            {
                gallery_show();
                loading_hide();
                $("#gallery_container").html(msg);
            });

должен быть в функции успеха вашего вызова ajax ..

API утверждает, что

Всякий раз, когда Ajax-запрос завершается, jQuery запускает событие ajaxComplete.Все обработчики, которые были зарегистрированы с помощью метода .ajaxComplete (), выполняются в это время.

Таким образом, в вашем случае любые дальнейшие запросы ajax должны вызывать событие ajaxComplete и вызывать функцию обратного вызова длято же самое ..

Надеюсь, что это имеет смысл .. Я сам не работал с ajaxComplete API, и это мое понимание

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...