jQuery/JavaScript parse AJAX response

Question

I am retrieving an AJAX response from a server (the server processed an update of a shoppingcart) that contains various elements. Here is an example of how it looks like:

<div id="blockcart-wrapper">
<div class="shoppingcart-background" id="bg-div"></div>
    <div class="blockcart cart-preview" data-refresh-url="//localhost/backend/index.php?fc=module&amp;module=shoppingcart&amp;controller=ajax">
        <div class="header">
            <a rel="nofollow" href="#">
                <img class="cart-icon" src="someImage"
                     onclick="toggleClass()">
                            </a>
        </div>
        <div class="body" id="shopping-cart-body">
            <div class="close">
                <a href="#" onclick="toggleClass()">
                    <img class="icon" height="20px" width="20px" src="someImage">
                </a>
            </div>
            <h1 class="shopping-cart-header">Shoppingcart</h1>
            <div class="products-container">
                                    <div class="product">
                        <span class="product-image"><img src="someImage"></span>
                        <div class="product-details">
                            <h2 class="name-header">Name</h2>
                            <div class="product-quantity-details">
                                <span class="quantity">19</span>
                                                                    <a href="http://backend/increase" class="js-decrease-product-quantity" data-link-action="update-quantity">-</a>

                                                                    <a id="link1" href="https://backend/decrease" class="js-increase-product-quantity" data-link-action="update-quantity">+</a>

                                <span class="color-circle">
                                                                    </span>
                            </div>
                            <div class="price-open">
                                <span class="product-price">14,16 €</span>
                                <span class="product-link"><a href="http://localhost/backend/linkToProduct">öffnen</a></span>
                            </div>
                              <a
    class="remove-from-cart"
    data-link-action="remove-from-cart"
    data-id-product="6"
    data-id-product-attribute="0"
    href="http://backend/remove"
    rel="nofollow"
   >
    Remove
  </a>
                        </div>
                    </div>
                            </div>

            <div class="checkout">
                <div class="meta-data-wrap">
                                        <div class="cart-total label-row">
                        <span class="label">Total</span>
                        <span class="value">269,06 €</span>
                    </div>
                </div>

                                                                <a href="/index.php?controller=order" class="checkout-step">
                    <button type="button" class="dark">Checkout</button>
                </a>
            </div>
        </div>

The problem is, that the respone contains about 25000 LOC which are mostly irrelevant. So I want to parse this part of the response and insert it into the actual HTML. What I did so far:

document.getElementById('link1').addEventListener('click', function(ev){
    ev.preventDefault();
    console.log(ev);

        $.ajax({
        url: this.href,
        type: "GET",
        dataType: "html",
          success: function(data) {
              console.log($(data).text()); 
          }
    });
});

This gives me the complete response. So from this on, I tried to find the div with the id blockcart-wrapper , which is my 'entry point' for replacing the old HTML, so I did:

document.getElementById('link1').addEventListener('click', function(ev){
    ev.preventDefault();
    console.log(ev);

        $.ajax({
        url: this.href,
        type: "GET",
        dataType: "html",
          success: function(data) {
              console.log($(data).find('#blockcart-wrapper')); 
          }
    });
});

But this gives me a jQuery object and not The HTML content within this div .
Could someone help me to parse the mentioned div and replace the 'old' with the new parsed?

Answer 1

But this gives me a jQuery object and not the HTML content within this div.

You must use .html() to return the HTML code inside the div like :

console.log( $(data).find('#blockcart-wrapper').html() );

Answer 2

If you cannot get a smaller response, try getting a partial:

Note the space before the selector

url: this.href + ' #blockcart-wrapper'

or

$("#container").load(location.href + ' #blockcart-wrapper')