Jquery Ajax - ответ должен заменить HTML - PullRequest
1 голос
/ 26 января 2012

Я начинаю в Аяксе, и у меня есть пара проблем.У меня есть страница со списком, содержащим некоторые миниатюры видео, при наведении на них значка появляется значок «Мне не нравится».Это сделаноТеперь у меня возникают проблемы:

Когда вы нажимаете этот значок, название видео, миниатюра и информация должны исчезнуть, и должно отображаться другое видео.

Вот мой код Ajax

function ThumbsDown(id,sort,page) {
$.ajax({
    url: "/change/videos/"+id+"/thumbsdown/",
    type: "POST",
    data: {
        "sort": sort?sort:"",
        "page": page?page:""
    },
    complete: function(result) {
         // Instead of calling the div name, I need to be able to target it with $(this) and .parent() to make sure only 1 video change, but for now I only want the response to replace the video
         $("#content .videoList ul li.videoBox").html(result);             
    }
});
}

Запрос работает, я получаю (200 OK) ответ.И он возвращает мне блок кода HTML для нового видео.

Проблема в том, что , когда я нажимаю на значок, весь HTML-код в div исчезает .У меня есть пустой тег, поэтому я предполагаю, что он интерпретируется как «пустой».Но в моей вкладке Firebug .Net я четко вижу, что есть ответ.

Любая помощь, пожалуйста? УЖЕ ИСПРАВЛЕНО, СПАСИБО

** РЕДАКТИРОВАТЬ **

Теперь у меня проблемы с целевым определением div с помощью $ (this) и родителей ().Может кто-нибудь помочь?

Я хочу нацелиться на li # videoBox

<li class="videoBox recommended">
   <div class="spacer" style="display: block;"></div>
   <div class="features">
      <div>
         <a class="dislike_black" title="I dislike this" onclick="ThumbsDown(30835, 'relevance', '1');"></a>
      </div>
    ...

Я пробовал это, и оно не работает.

    success: function(data) {
        $("#content .videoList ul li.videoBox").html(data); // this IS WORKING, but replacing ALL the thumbs
        $(this).parents("li.videoBox").html(data); // THIS IS NOT

Что я делаю неправильно

Ответы [ 2 ]

3 голосов
/ 26 января 2012

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

Тем не менее, я лично не предлагаю использовать функцию Ajax, так как она выглядит совершенно ненужной. Функция Ajax существует в основном для сложных транзакций, и, похоже, у вас довольно простая. Я предлагаю использовать функцию «ярлык», которую предоставляет jQuery, например:

$.post(`/change/videos/${id}/thumbsdown/`, {sort:'', page:''}, function(result){
    // Instead of calling the div name, I need to be able to target it
    // with $(this) and .parent() to make sure only 1 video change,
    // but for now I only want the response to replace the video

     $('#content .videoList ul li.videoBox').html(result);
}, 'html');
1 голос
/ 26 января 2012

Изменение с complete to success

function ThumbsDown(id,sort,page) {
$.ajax({
    url: "/change/videos/"+id+"/thumbsdown/",
    type: "POST",
    data: {
        "sort": sort?sort:"",
        "page": page?page:""
    },
    success: function(result) {
         // Instead of calling the div name, I need to be able to target it with $(this) and .parent() to make sure only 1 video change, but for now I only want the response to replace the video
         $("#content .videoList ul li.videoBox").html(result);             
    }
});
}

обратный вызов complete в отличие от успеха не получает параметр данных, только параметр jqXHR.

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