Update HTML block content via ajax

Question

I have a main index.html file and want to update only a certain block of that template via ajax.

As, I am already using swig on server side I decided to leverage that on my client side also.

I have a below ajax call and on success I want to update an HTML block.

$(function(){

    $('#category_nav').click(function(e){
        e.preventDefault();
        var obj = {};
        obj.cgid = $(this).attr("href");
        $.ajax({
            type : 'GET',
            contentType: 'application/json',
            dataType : 'json',
            data: obj,
            url : '/SearchShow',
            success : function(data) {
                console.log(data);

            },
            error : function(){
                console.log("error");
            }
        });
    });
});

HTML snippet of index.html

           <div class="col_1_of_3 span_1_of_3">
           {% for product in products %}
                 <div class="view view-first">
                      <a href="{{product.link}}">
                       <div class="inner_content clearfix">
                        <div class="product_image">
                            <img src="{{product.imageSrc}}" class="img-responsive" alt=""/>
                            <div class="product_container">
                               <div class="cart-left">
                                 <p class="title">{{product.name}}</p>
                               </div>
                               <div class="price">{{product.price}}</div>
                               <div class="clearfix"></div>
                             </div>
                        </div>
                       </div>
                     </a>
                   </div>
            {% endfor %}
            </div>

router

app.get('/SearchShow', function(req, res){
    console.log(req.query);

    var cgid =  req.query.cgid;
    console.log("cgid: " + cgid);
    category.getProductsAssignedToCategory(cgid, function(productHits){
        res.send({
            "products" : productHits
        });
    });
});

On server side I use res.render to render the HTML but I couldn't find a way to update only a particular section of template via ajax & using swig template engine

Answer 1

You could remove the existing content, and then re-render using jQuery in the jQuery AJAX callback. Something like..

success : function(data) {
              $('#productName').empty();
              $('#productName').append(data.name);
          }

taking into account <p> id is productName :

<p id="productName" class="title">{{product.name}}</p>

I don't know how you do the update the tag {% for product in products %} , but i suggest you to see the generated html and re-render the content.