0

In Python Django I'm trying to launch a js function via button click, however I'm finding the following issues in the debug console:

On page load I get a ReferenceError jQuery is not defined on https://localhost:8000/static/passkeys/js/bootstrap-toggle.min.js:8.

Afterwards, on button click I get another ReferenceError $ is not defined. start: https://localhost:8000/passkeys/:86, onclick: https://localhost:8000/passkeys/:1.

From looking at other StackOverflow question it seemed that my problem was in the scripts/scripts order, which looked like so:

<script type="application/javascript" src="{% static 'passkeys/js/base64url.js'%}"></script>
<script type="application/javascript" src="{% static 'passkeys/js/helpers.js'%}"></script>
<script type="application/javascript">

Following a reply I added this and, just to make sure order wasn't an issue, I tried putting it between any of the other script lines:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Which gave me the classic "at least the error changed", and now I only get the following TypeError on click: $(...).modal is not a function. start: https://localhost:8000/passkeys/:94, onclick: https://localhost:8000/passkeys/:1.

This is "my" modal:

<div class="modal " tabindex="-1" role="dialog" id="popUpModal" style=" top: 40px;">
  <div class="modal-dialog" style="height: 80%;width: 80%;">
    <div class="modal-content" >
      <div class="modal-header">
        <h4 class="modal-title" id="modal-title"></h4>
          <button type="button" class="close" data-dismiss="modal" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body" id="modal-body" >
      </div>
      <div class="modal-footer" id="modal-footer">
        <button type="button" class="btn btn-default btn-secondary" id='btnModalClose' data-dismiss="modal" data-bs-dismiss="modal">Close</button>
      </div>

    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Seems to me like it's progress at least, but from reading online this is again a script order issue and I've tried every combination so I'm not sure where to go from here?

Thanks!

zazzaro safari
  • 1
  • 1
  • Welcome to Stack Overflow! Please visit the [help], take the [tour] to see what and [ask]. Do some research - [search SO for answers](https://www.google.com/search?q=jquery+python+bootstrap+site%3Astackoverflow.com). If you get stuck, post a [mcve] of your attempt, noting input and expected output using the [\[<>\]](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) snippet editor. – mplungjan Feb 20 '23 at 10:12
  • _"$(...).modal is not a function"_ - sounds like you either did not include the Bootstrap JavaScript necessary for modal functionality, or put that in a wrong place in the sequence as well. – CBroe Feb 20 '23 at 10:16
  • So you're using jquery, but didn't include jquery.js? Now you're using a plugin that gives you modal, but ... you haven't include the js that gives you that plugin (I spot a pattern...). If you're wanting to use bootstrap, then first determine which version of bootstrap (looks like pre-5 if it needs jquery) but might be v4, v3 or v2 b, second get bootstrap properly: https://getbootstrap.com/docs/4.6/getting-started/introduction/ – freedomn-m Feb 20 '23 at 10:29
  • That may be an issue actually, because I'm adding a functionality to an already existing website of mine which uses bootstrap 5. Is it possible to include multiple versions for various tools? – zazzaro safari Feb 20 '23 at 13:58

1 Answers1

0

Comments were right, I didn't include these:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Now it's all good, thanks!

zazzaro safari
  • 1
  • 1