Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Christopher Ranes
Christopher Ranes
30 Points
Posted by Christopher Ranes
Christopher Ranes
30 Points

Run external HTML code with click of Bootstrap button

I maintain a website from which the author sells her books. I use an external shopping cart service to allow customers to buy books and pay for them using PayPal. I am required to fill out a wizard which will generate the needed HTML code and button that I place on the website. Currently, I use WIX for the website, and they had a feature to insert external HTML. I realize now that WIX is horrible, and I am rebuilding it using Bootstrap4, HTML5, CSS3, and JQuery. The main reason is that the external HTML code no longer runs on Firefox, Safari, and other browsers. It only runs on Google Chrome.

My vision is to create a simple modal window, with a button that says "Add To Cart", or "Buy It Now".

How can I add the code from the shopping cart wizard, so that it executes when the bootstrap button is clicked?

Sincerely, Chris

2 Answers

Sir Dev
Sir Dev
247 Points
Sir Dev
Sir Dev
247 Points

Your best bet is get or add a ID to the modal button and write your own js/jquery code via eventlistener method.

let addToCart = document.getElementById('addToCartBtn');

addToCart.addEventListener('submit',  loadExternalHtmlCode());

function loadExternalHtmlCode() {
  //code goes here 
}

Basically not to familiar with the new bootstrap library I believe some things have been remove or added so check their documentation to see if they have any option to execute a script or action when using the modal window button. If not then google how to create and execute a action in js or jquery via html button.

Christopher Ranes
Christopher Ranes
30 Points
Christopher Ranes
Christopher Ranes
30 Points

I see what you are saying Sir Dev.

Since jQuery is part of Bootstrap, I wonder how we could take your script and transform it into jQuery.

Looking on Stackoverflow, someone had this thought.

<script> $(document).ready(function(){ $('#MyButton').click(function(){ CapacityChart(); }); }); </script>

<input type="button" value="Capacity Chart" id="MyButton" >