CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
user2706783
user2706783

Reputation: 27

jquery append doesnt include bootstrap style after adding

I have a jquery script 

$('.add-item').on('click',function(){
    var URL = '{% url "main:adding_from_all_products" %}';
    var $this = $(this);
    var product_add_name = $this.data('item-name');
    $.post(URL,{'product_add_name':product_add_name},function(response){
        $(".test").append('<p class="product-item">'+
                            '<span class="product-width-fix">' +
                            response +
                            '<a href="#" data-product-id=' + product_add_name +
                            'class="btn btn-mini btn-success remove-product">Remove</a></span></p>');
    })
    return true;
});

The element I add is a button styled with bootstrap. But after the append is done

<a href="#" data-product-id=' + product_add_name +
                                    'class="btn btn-mini btn-success remove-product">Remove</a></span></p>

the button does not apper, it's just a link withouth any style. what should i do ?

Upvotes: 0

Views: 3934

Answers (3)

Chathura Kulasinghe
Chathura Kulasinghe

Reputation: 2740

I just checked this with code,

<html>
<head>
<script src="http://code.jquery.com/jquery-git2.js"></script>
<script>
  $(function(){
  var response="The Product Name";
  var product_add_name="productName";

  $(".test").append('<p class="product-item">'+
        '<span class="product-width-fix">' +response +
        '<a href="#" data-product-id=' + product_add_name +
    ' class="btn btn-mini btn-success remove-product"> Remove </a></span></p>');
  });
</script>
</head>
<body><div class="test"></div></body>
</html>

This works fine even if you didn't use "" for "product_add_name" like data-product-id="' instead of data-product-id=' and '" class=... instead of ' class... (But if you have spaces in product_add_name, you need to use "" in order to get the expected output).

Please log and see what "product_add_name" is. This can be happen if your "product_add_name" which is returned by "$this.data('item-name')" is having any incompatible character.

If your "product_add_name" is also valid, just check whether you are adding this child element

to a valid parent with style display:block applied.

Upvotes: 0

dann
dann

Reputation: 853

maybe you need "" for product_add_name : 

$(".test").append('<p class="product-item">'+
                                    '<span class="product-width-fix">' +
                                             response +
                                    '<a href="#" data-product-id="' + product_add_name +
                                    '" class="btn btn-mini btn-success remove-product">Remove</a></span></p>');

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

Try

$(".test").append('<p class="product-item">' +
                  '<span class="product-width-fix">' + response +
                  '<a href="#" data-product-id=' + product_add_name +
                  ' class="btn btn-mini btn-success remove-product">Remove</a></span></p>');

there is no space between product_add_name and the class

Upvotes: 0

Related Questions