Skip to content

JQuery crashes when calling modal.show() #1

Description

@Andi-Lo

JQuery crashes when using the semantic-ui-modal module producing the following statement:

"Uncaught TypeError: undefined is not a function - line:6181"

Maybe it crashes because it got dependencies that I do not have covered in my project?
I just have those modules installed that I need for my project.

  • button
  • icon
  • dimmer
  • input
  • modal
  • sidebar
  • jquery version 2.1.3

I setup the following simple example to reproduce the crash:
( See this screencast for demonstration:
http://screencast-o-matic.com/watch/coVwoMeAvy )

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title>modaltest</title>
    <link rel="stylesheet" href="assets/bower_components/semantic-ui-dimmer/dimmer.min.css">
    <link rel="stylesheet" href="assets/bower_components/semantic-ui-modal/modal.min.css">
</head>
<body>


    <button id="modal" class="ui button">
        modal
    </button>

    <!-- modal boxes -->

        <div class="ui modal">
          <i class="close icon"></i>
          <div class="header">
            Profile Picture
          </div>
          <div class="content">
            <div class="ui medium image">
            </div>
            <div class="description">
              <div class="ui header">We've auto-chosen a profile image for you.</div>
              <p>We've grabbed the following image from the <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
              <p>Is it okay to use this photo?</p>
            </div>
          </div>
          <div class="actions">
            <div class="ui black button">
              Nope
            </div>
            <div class="ui positive right labeled icon button">
              Yep, that's me
              <i class="checkmark icon"></i>
            </div>
          </div>
        </div>


   <script src="assets/bower_components/jquery/dist/jquery.min.js"></script>
    <script src="assets/bower_components/semantic-ui-sidebar/sidebar.min.js"></script>
    <script src="assets/bower_components/semantic-ui-dimmer/dimmer.min.js"></script>
    <script src="assets/bower_components/semantic-ui-modal/modal.min.js"></script>
    <script>
    $('#modal').click(function (e) {
        $('.ui.modal').modal('show');
        return;
    });
    </script>
</body>
</html>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions