jquery code not executing Template issue

Question

I've never worked with an jquery template but my form code ("#add-to-cart-form").on('submit', function(event) (code is below) is not executing I believe it has to to do with the template. When I run my code in the console it works fine.

<script type="underscore/template" id="modal_template">
<form id="add-to-cart-form" action="/app/site/backend/additemtocart.nl" method="get">
        <div class="add-to-cart">
            <div class="row">

                        <div class="dropdown inline pull-right">
                            <a data-toggle="dropdown" class="btn btn-primary btn-xs" href="#"><span class="fa fa-chevron-down"></span></a>
                            <ul id="qty-selector" class="dropdown-menu dropdown-menu-right" role="menu">
                                <li>
                                    <a href="#" data-price="$<@= meal.price_six_pack @>" data-qty="6">
                                        <span class="item-price pull-left">$<@= meal.price_six_pack @></span>
                                        <span class="item-qty pull-right">Qty 6 or more</span>
                                        <span class="clearfix"></span>
                                        <span class="text-muted pull-left"><small>$<@=meal.price_discount@> per pack discount</small></span>
                                        <span class="text-warning pull-right"><small>Save <@=meal.price_discount_percent@>%</small></span>
                                        <span class="clearfix"></span>
                                    </a>
                                </li>
                            </ul>
                        </div>

                        <div class="pull-right">
                            <span class="item-qty">Qty:</span>
                            <input type="text" class="item-qty form-control" id="current-qty" name="qty" value="1" onchange="updateQty()">
                         <input type="hidden" name="buyid" value='<%=getCurrentAttribute("item","internalid")%>'>
                            <input type="hidden" name="showcart" value="T">
                        </div>

                        <div class="clearfix"></div>
                    </div>
                </div>

                <div class="col-md-5">
                    <button type="submit" id="add-to-cart-btn" class="btn btn-lg btn-block btn-info">Add to Cart</button>
                </div>
            </div>
 </form>

</script>

The code below is not executing.

<script> 
        $("#add-to-cart-form").on('submit', function(event) {
         var form = $(this);  
          event.preventDefault(); 
          alert("testinggg")
          $.ajax('/app/site/backend/additemtocart.nl', {
           type: 'POST', 
           data: form.serialize(), 
           sucess: function(result) { }
          }); 
         });
       </script>

John S · Accepted Answer · 2014-11-14 22:58:11Z

1

At some point you must be using the template to add the form element to the page. If the code that binds the submit event handler executes before that time, then the call to $("#add-to-cart-form") creates an empty jQuery object. You need that code to execute after the form element has been added to the page, or else use event delegation, like this.

$(document).on('submit', '#add-to-cart-form', function(event) {

This binds an event handler to the document (which always exists), but it will call the given function only when the event originated from an element that matches the given selector ('#add-to-cart-form').

answered Nov 14, 2014 at 22:58

John S

21.5k9 gold badges50 silver badges59 bronze badges

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

1 Comment

Phreak Over a year ago

awesome you have saved my Friday night! thank you much!

IbrahimAsad · Accepted Answer · 2014-11-14 22:49:33Z

0

At the first line

$("#add-to-cart-form")

I mean add $ for it.

answered Nov 14, 2014 at 22:49

IbrahimAsad

5161 gold badge5 silver badges16 bronze badges

3 Comments

Phreak Over a year ago

sorry it was in the code i just pasted it in wrong bug persists.

Phreak Over a year ago

the console executes just fine and the code works... but putting the code in the file directly does not. i'm pretty sure it has something to do with the <script type="underscore/template" id="modal_template">

IbrahimAsad Over a year ago

try to make it inside jQuery ready $(function() { // put the code here });

Collectives™ on Stack Overflow

jquery code not executing Template issue

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related