Jquery Ajax - response should replace html

Question

I'm beginning in Ajax and I have a couples of problems. I have a page with a list containning some video thumbnails, when you rollover on them, there's a "I dislike this" icon showing. That's done. Now where iam having problem is:

When you click that icon, the video title, thumbnail & info should disapear and another video must show.

Here's my Ajax code

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

The request is working, im gettin a (200 OK) response. And it's returning me the HTML code block for the new video.

The problem is, when I click the icon, all the html in the div is gone. I have an empty tag, so I guess its interpreted as "empty". But in my firebug .Net tab, I can see clearly that there IS a response.

Any help please? ALREADY FIXED, THANKS

** EDIT **

Now im having problems to target the specific div with$(this) and parents(). Can someone help?

I want to target the 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>
    ...

I tried this, and its not working.

    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

What Im I doing wrong?

NeoNexus DeMortis · Accepted Answer · 2019-03-28 04:59:22Z

3

The problem you're having, is that you are using the "complete" callback function. This can be misleading, but that callback is meant to be called after a success or a failure. It's more for cleanup, and doesn't receive the response data as you would expect. Basically, all you need to do is change "complete" to "success", and you should receive your expected result.

However, I personally don't suggest using the Ajax function, since it looks like it's entirely unnecessary. The Ajax function exists mostly for complex transactions, and it looks like you have a fairly simple one. What I suggest, is using the "shortcut" function that jQuery provides, like so:

$.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');

edited Mar 28, 2019 at 4:59

answered Jan 26, 2012 at 17:25

NeoNexus DeMortis

1,32610 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lelly Over a year ago

Thanks so much! Didnt know that the response of success / complete was different!

Lelly Over a year ago

Im having another problem, mind checking on my first post please?

gdoron · Accepted Answer · 2012-01-26 17:27:03Z

1

Change from 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);             
    }
});
}

the complete callback unlike the success doesn't get the data parameter, only the jqXHR parameter.

answered Jan 26, 2012 at 17:27

gdoron

151k59 gold badges302 silver badges376 bronze badges

Collectives™ on Stack Overflow

Jquery Ajax - response should replace html

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related