использование jquery / ajax для отправки / обновления div при нажатии на ссылку

Question

У меня есть 2 слоя, которые мне нужно обновлять индивидуально, если пользователь нажимает на любой из них.

<div id=wrapper>
    <div id=upvote>
        //This div can be filled by upvote.php?id=X
        <? echo getUpVote(); ?>
        <a href=#><img src=upv.png></a>
    </div>
    <div id=downvote>
        //This div can be filled by downvote.php?id=X
        <? echo getdownVote(); ?>
        <a href=#><img src=downv.png></a>
    </div>
</div>

Когда пользователь щелкает изображение голосования вверх или вниз, мне нужно постепенно уменьшить содержимое div, сделать ajax-вызов соответствующего php-файла (запрос get) и добавить загруженный контент.

Как я могу это сделать?

Answer 1

Присоедините обработчик кликов к тегам привязки. Найдите, какой URL использовать, учитывая идентификатор содержащего div, затем вызовите load, чтобы заменить содержимое оболочки. Исчезать / в соответствующих точках. Убедитесь, что вы вернули false из обработчика щелчка привязки, чтобы отменить действие по умолчанию.

$('#upvote,#downvote').find('a').click( function() {
    var url  = $(this).closest('div').attr('id') + '.php?id=X';
    $('#wrapper').fadeOut();
                 .load( url, function() {
                     $('#wrapper').fadeIn();
                 });
    return false; // cancel click action
});

Answer 2

Чтобы добавить обработчик кликов к элементу в jQuery, вы можете сделать это:

 $("#upvote").click(clickHandler);

Где clickHandler - это функция. Поскольку вы хотите затемнить изображение, вы можете сделать это:

 $("#upimg").hide('slow');

приведет к медленному исчезновению элемента с id = 'upimg'. Вы также можете использовать fadeTo (непрозрачность) для достижения аналогичного эффекта.

AJAX-вызов может быть выполнен с помощью вызова загрузки.

$('#div').load('url', {}, callback);

где элемент с id = 'div' будет заполнен результатом вызова url, {} является необязательным, а callback является функцией, которую вы можете включить для выполнения после загрузки. Функция обратного вызова может использоваться, чтобы исчезнуть в новом содержании.

 var clickHandler = function(){
    $("#upimg").hide('slow');

    $('#div').load('url', {}, callback);

 }

 var callback = function(){
    $('#div').show('slow');
 }

Answer 3

AJAX-запрос может быть сделан с помощью $. Get , и вы можете затухать DIV, используя такие анимационные функции jQuery, как fadeOut

Вот некоторый код о том, как вы можете получить то, что вы хотите:

$( '#IdOfOneAnchor' ).click ( function () {
    var myDiv = $( '#IdOfYourDiv' );
    myDiv.fadeOut ();
    $.get (
        'url/to/your/script.php',
        {
            // put params you need here
        },
        function ( response ) {
            myDiv.html ( response ).fadeIn ();
        }
    );

    return false;
} );

Конечно, вам придется изменить селекторы, чтобы они соответствовали вашим DIV / ссылкам ...