Button won't activate Toast

Bootstrap Studio Help
1

I have this code:

<button id= "greenbutton" class="btn" type="submit" href= "#revise" style="padding: 0px;padding-right: 28px;padding-top: 8px;padding-bottom: 8px;padding-left: 28px;background-color: #43b581;font-size: 22px;color: #ffffff;font-family: ABeeZee, sans-serif;margin: 30px;">Activate</button>

<script
  src="http://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>

<script>
    $(document).ready(function(){
  $("#greenbutton").click(function(){
    $('.toast').toast('show');
  }); 
});
</script>

The button just refuses to work and I keep getting this error in console:

Uncaught TypeError: $(...).toast is not a function

        at HTMLButtonElement.<anonymous> ((index):92)
        at HTMLButtonElement.dispatch (jquery-3.4.1.js:5237)
        at HTMLButtonElement.elemData.handle (jquery-3.4.1.js:5044)
    (anonymous) @ (index):92
    dispatch @ jquery-3.4.1.js:5237
    elemData.handle @ jquery-3.4.1.js:5044

If I remove the CDN script from the code I get:

Uncaught ReferenceError: $ is not defined
    at (index):85

What do I do?

And how can I push the toast to the front of the page above everything with 2 buttons in it and in the centre?

Thank you!

2

Maybe the info on this site can help you...

https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=toast-methods

3

Thanks! Definitely helps towards the second thing, but the first issue is still there... I think it might be conflicting JQuery versions but I don't know how to change that because everything I've done is from the same CDN.

4

I was able to get it to work fine with your button code and toast script. No need to reference a source for jquery as Bootstrap Studio loads jquery by default.

Here's what I did.

1) Started with a new blank page. 2) Added a container, row, column, and in the column placed a custom code component. 3) Entered your <button id= "greenbutton" class="btn" type="submit" href= "#revise" style="padding: 0px;padding-right: 28px;padding-top: 8px;padding-bottom: 8px;padding-left: 28px;background-color: #43b581;font-size: 22px;color: #ffffff;font-family: ABeeZee, sans-serif;margin: 30px;">Activate</button> in the custom code component and clicked "apply." 4) Created a new javascript... Go to the Design panel, right-click JavaScript > Create JS, (I called it toast.js) then pasted your code $(document).ready(function(){ $("#greenbutton").click(function(){ $('.toast').toast('show'); }); }); 5) Dragged a Toast component on to the page from the Misc sections of the BSS Components list. 6) Previewed the page in the browser, clicked the button, toast appeared and then vanished as normal.

Here is a link to the working example... http://thelightwavegroup.com/toasttest/index.html