0

In my fiddle I have a simple bootstrap nav tab group in which the tabs do 2 things:

  • Display the corresponding tab pane
  • Change the value of an input to that defined by the tab anchor's data-payment_method attribute.

Here is the code:

<ul class="payment_methods methods nav nav-pills">
        <li class="payment_method_bacs active"> <a href="#payment_method_bacs_desc" data-toggle="pill" data-payment_method='bacs' class='payment_method_choose'>Direct Bank Transfer </a> 
        </li>
        <li class="payment_method_cheque "> <a href="#payment_method_cheque_desc" data-toggle="pill" data-payment_method='cheque' class='payment_method_choose'>Cheque Payment </a> 
        </li>
        <li class="payment_method_paypal "> <a href="#payment_method_paypal_desc" data-toggle="pill" data-payment_method='paypal' class='payment_method_choose'>PayPal  <i class = 'fa fa-credit-card'></i></a> 
        </li>
    </ul>

And the panes and the input:

<input type="text" name="payment_method" id="payment_method" value="bacs">
    <div class="panel panel-default top-buffer">
        <div class="tab-content panel-body">
            <div class="tab-pane fade active in" id="payment_method_bacs_desc">
                <p>Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order won't be shipped until the funds have cleared in our account.</p>
            </div>
            <div class="tab-pane fade " id="payment_method_cheque_desc">
                <p>Please send your cheque to Store Name, Store Street, Store Town, Store State / County, Store Postcode.</p>
            </div>
            <div class="tab-pane fade " id="payment_method_paypal_desc">
                <p>Pay via PayPal; you can pay with your credit card if you don't have a PayPal account</p>
            </div>
        </div>
    </div>

When I copy/paste my code into jsFiddle it works fine but I'm having trouble in my WordPress site (running WooCommerce), loading the standard scripts associated with both (too much to post here!).

The nav tabs work fine and the tab panes switch without issue. But my own jQuery which is used to update the input doesn't work. I added some console.logs to see how far it gets:

jQuery(document).ready(function ($) {
    console.log('actived the payment chooser');
    var payment_method_input = $('input#payment_method');
    $(".payment_method_choose").click(function () {
        var payment_method = $(this).data('payment_method');
        console.log('you selected ' + payment_method);
        payment_method_input.val(payment_method);
    });
});

I get the 'actived the payment chooser' in the console but the 'you selected...' doesn't appear on clicks suggesting the click event isn't firing properly. Something must be conflicting with the event but I don't think it's the bootstrap nav tabs as it all works fine in the fiddle.

No other error messages are in the console. Any idea how I can track down this conflict?

Edit:

After extensive testing I'm completely stumped.

  1. The code works fine standalone in a fiddle
  2. The element selector works fine as demonstrated in this code in my page just before my click event code:

    $('.payment_method_choose').each(function(index){
        mydata = $(this).data('payment_method');
        console.log('This is element ' + index + ' containing data: ' + mydata);
    });
    

    Which outputs the relevant info to the console, confirming that the jQuery events do fire in this location and the selector works.

  3. I've tried using .on('click', function() {... to no avail.
  4. Woocommerce loads quite a few JS scripts but I can't see a way to discover what or if is interfering with my click event. The <a> elements were added my me in the template so shouldn't be referenced by any existing scripts. Is there a way to debug this?

Any help greatly appreciated; it is obviously quite difficult to post a web page this extensive for inspection as it's on my local dev server but any suggestions to remove ambiguity please let me know.

1 Answer 1

1

You could try the Chrome debugger. Look in the chrome debugger elements panal at the object that you have put the click event on and see if there is an event defined on that object. (I am not sure where jQuery actually puts the evens since I have stopped using jQuery for html5.)

If there are any events on the object just put some break points in the debugger source panel.

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

2 Comments

Those chrome tools don't seem to be of any use as there are no attribute changes or subtree modifications so I can't trigger a breakpoint - all I'm doing is updating an input value with the elements data attribute.
Can't you look for event listeners there?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.