CODEWITHSUNDEEP
jquery
Pawan
Pawan

Reputation: 32321

Unable to add dynamic generated html to a specific place

On click of the Button , i am trying to add the dynamically generated html to a specific position .

I am trying to add at Add it to here present inside HTML section . This is my complete program 

 <script type="text/javascript">
$(document).on("click", "#moreFieldsBtn", function() {
   var orderconfirmhtml = $('<h4>Complete your order</h4>');
   $(this).parent().next('.Test-details').after(orderconfirmhtml);
});
 </script>
</head>
<body>
<div data-role="collapsible">
    <div class="prd-items-detials">
        <ul>
            <li class="head">
                <form>
                    <label class="testtt" for="checkbox-mini-0">Test Item</label>
                </form>
            </li>
            <li class="prd-items-qt">
                <div class="col"> <span class="prd-sm-img"><img id="imagesd" type="img" height="40" width="40"  src="' + image + '"/> 
                    </span> 
                </div>
                <div class="col"> <i class="minus" id_attr="59"> </i>
 <i class="qt_class" id_attr="59">1</i>  <i class="plus" id_attr="59"> </i> 
                </div>
                <div class="col"> <a href="#" id_attr="59" class="btn btn-sm">Topping</a> 
                </div>
                <div style="display: none;" class="price" id_attr="59">50</div>
                <div class="col total" id_attr="59">50</div>
            </li>
        </ul>
    </div>
    <div id="59" class="Test-details">// Add it to here</div>
</div>
<input type="button" id="moreFieldsBtn" value="Add Data To Specific Place" />
</body>

But nothing is being added there , could anybody please tell me how to resolve this ??

Upvotes: 0

Views: 45

Answers (2)

feohoTl
feohoTl

Reputation: 65

You can try this: 

<script type="text/javascript">
    $(document).ready(function () {
        $('#moreFieldsBtn').click(function () {
            var orderconfirmhtml = $('<h4>Complete your order</h4>');
            $('.Test-details').html(orderconfirmhtml);
        });
    });
</script>

For a function inside $(document).ready() method, it can run java code before page loaded, and uses jquery selector to find html element. And Jquery can bind event actions.

Upvotes: 1

Sandip
Sandip

Reputation: 987

your javascript code should be something like this

$(document).on("click", "#moreFieldsBtn", function() { 
   var orderconfirmhtml = '<h4>Complete your order111</h4>';
   $(this).parent().find('.Test-details').append(orderconfirmhtml);
});

or 

$(document).on("click", "#moreFieldsBtn", function() { 
   var orderconfirmhtml = '<h4>Complete your order</h4>';
   $(this).parent().find('.Test-details').html(orderconfirmhtml);
});

refer this jsfiddle http://jsfiddle.net/WGQv6/1/ or http://jsfiddle.net/WGQv6/2/

Upvotes: 1

Related Questions