How to conditionally load javascript files based on tab toggled?

Question

I want, depending on the radio selected, for the javascript associated with the radio to function, and when its not selected or deselected, to not be functioning.

HTML for tabs and radios:

<nav>
    <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
        <a class="nav-item nav-link active no-decoration" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Video</a>
        <a class="nav-item nav-link no-decoration" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Tweet</a>
    </div>
</nav>
<div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">

        <div class="card-body">
            CHOOSE RADIO

            <form id="selectForm">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <label class="custom-control custom-radio in active">
                            <input type="radio" name="distTravel" value="Ontario" class=" no-decoration" data-id="onlyON" />
                            <span class="custom-control-indicatore"></span>
                            <span class="custom-control-description">You</span>
                        </label>
                    </li>
                    <li class="nav-item">
                        <label class="custom-control custom-radio">
                            <input type="radio" name="distTravel" value="NA" class=" no-decoration" data-id="onlyNA" />
                            <span class="custom-control-indicator"></span>
                            <span class="custom-control-description">Someone else</span>
                        </label>
                    </li>
                </ul>
            </form>

            <div class="tab-content in active">
                <div class="card-block tab-pane active" id="onlyON">
                    TEXT
                </div>

                <span class="token"></span>
                <% end %>
                    <% end %>
            </div>
            <div class="card-block tab-pane" id="onlyNA">

            </div>

        </div>
    </div>

</div>
</div>
<div class="tab-pane-1 fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
    <div class="card-body">

        CHOOSE RADIO
        <form id="selectForm">
            <ul class="nav flex-column">
                <li class="nav-item">
                    <label class="custom-control custom-radio">
                        <input type="radio" name="distTravel-2" value="Ontario-2" class="no-decoration" data-id="onlyON-1" />
                        <span class="custom-control-indicator"></span>
                        <span class="custom-control-description">You</span>
                    </label>
                </li>
                <li class="nav-item">
                    <label class="custom-control custom-radio">
                        <input type="radio" name="distTravel-2" value="NA-2" class="no-decoration" data-id="onlyNA-1" />
                        <span class="custom-control-indicator"></span>
                        <span class="custom-control-description">Someone else</span>
                    </label>
                </li>
            </ul>
        </form>

        <div class="tab-content-2 in active">
            <div class="card-block tab-pane-1 active" id="onlyON-1">

                TEXT
            </div>

            <span class="token"></span>

            <div class="card-block tab-pane-1" id="onlyNA-1">
            </div>
            <% end %>
                <% end %>
        </div>
    </div>
</div>

Javascript tags:

<%= javascript_include_tag "stripe" %>
<%= javascript_include_tag "stripe-a" %>
<%= javascript_include_tag "stripe-2" %>
<%= javascript_include_tag "stripe-2-a" %>

For example:

If radio [data-id="onlyON"] is selected, then <%= javascript_include_tag "stripe" %> will be be loaded. Then, when [data-id="onlyON-1"] is selected, <%= javascript_include_tag "stripe" %> will unload, and <%= javascript_include_tag "stripe-a" %> will load so on and so fourtha

I could be wrong, but I don't think that is how things work. — jvillian, Mar 23 '19 at 02:31
Hm. Well my issue is that I have multiple stripe forms on one page and each gets displayed via the tabs. I then have a stripe.js file paired to each individual stripe form. In testing this works, but when in live, I am unable to enter a credit card number because it will tell me the CC field isn't filled since the other stripe.js files are being loaded. When i use only one stripe.js file, it will work (in relation to the form being used). I will post the stripe.js file in case you have any ideas on how to load them and maybe have the js have some sort of blanket over all of the forms — uno, Mar 23 '19 at 02:36
I figured out the issue. due to calling the similar javascript files, and or multiple post forms, it only wants to POST the last form on the page. So i need to somehow, similar to my OP, dynamically have all of the forms on one page with some sort of way to combine them — uno, Mar 23 '19 at 03:40
What is the purpose of "Multiple stripes" on a single page? Surely there is a better way to do this. — lacostenycoder, Mar 23 '19 at 17:16
Because there are variables and no cart. Everything needs to be done on one page for convenience. It;s doable, I just don't know how to do it. I'm sure someone who knows JS a lot could look at this and know what to do in 30 seconds — uno, Mar 23 '19 at 19:38
The biggest issue Is i use mutliple controllers on one page due to different functions for each. If i was using one controller, I could use a conditional form and get it done. But i need to implement all the controllers, which is where the issues are because that means i need mutliple forms — uno, Mar 23 '19 at 19:41
@lacostenycoder I found this which may have the right idea https://stackoverflow.com/questions/38826091/multiple-stripe-payment-forms-on-single-page --- but no accepted answer. Any input on this? I'm not sure exactly where to start — uno, Mar 23 '19 at 19:57

score 0 · Answer 1 · answered Mar 23 '19 at 16:24

0

There's no easy way to unload/disable a script tag once it's added to a document; especially when it's a third-party script like Stripe, and not a script you can easily edit yourself.

Instead, I'd break the problem into multiple documents. If the body of each tab includes an iframe, and each iframe contains a Stripe JS file and the form components it cares about, you'll have isolated each Stripe script to its own document and they shouldn't interfere with each other.

answered Mar 23 '19 at 16:24

Brad Buchanan

1,475
1
15
22

What exactly do you mean by document? Can you put up a small piece to show me? – uno Mar 23 '19 at 19:38
I found this... any thoughts on it? https://stackoverflow.com/questions/38826091/multiple-stripe-payment-forms-on-single-page – uno Mar 23 '19 at 19:56

score 0 · Accepted Answer · answered Mar 29 '19 at 23:18

I surrounded the js stripe code with click functions. works. when a radio or tab is clicked (depending on form navigation) the js code will "toggle" on. it works when going back and fourth between function toggles as well.

All solved now and haven't had issues from my tests

How to conditionally load javascript files based on tab toggled?

2 Answers2