CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapbootstrap-modal
Vik
Vik

Reputation: 9319

bootstrap modal does not come up

I am trying http://bootstrap-confirmation.js.org

my html has

<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Log Analyzer</title>

    <!-- Bootstrap Core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="vendor/metisMenu/metisMenu.min.css" rel="stylesheet">

    <!-- DataTables CSS -->
    <link href="vendor/datatables-plugins/dataTables.bootstrap.css" rel="stylesheet">

    <!-- DataTables Responsive CSS -->
    <link href="vendor/datatables-responsive/dataTables.responsive.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="dist/css/sb-admin-2.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>
    td.details-control {
        background: url('images/details_open.png') no-repeat center center;
        cursor: pointer;
    }

    tr.details td.details-control {
            background: url('images/details_close.png') no-repeat center center;
    }

    td.flag-control {
        background: url('images/ban_circle.png') no-repeat center center;
        cursor: pointer;
    }



      table {
            table-layout:fixed;
        }

            .word-break-all{
                word-break:break-all;
            }
        </style>

</head>

<body>

    <div id="wrapper">

        <!-- Navigation -->


        <div id="page-wrapper">
            <div class="row">
                <div class="col-lg-12">
                       <h4></h4>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                          <button class="btn btn-default" data-toggle="confirmation">Confirmation</button>

and toward bottom:

<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrap-confirmation.js"></script>

my javascript has:

$(document).ready(function() {

     $('[data-toggle=confirmation]').confirmation({
        rootSelector: '[data-toggle=confirmation]'
        // other options
        });
});

clicking the button nothing happens

Upvotes: 2

Views: 369

Answers (3)

jenming
jenming

Reputation: 809

Are you sure that the files are in the right place? in 2 of the <script> tags, you have a vendor prefix in the path, but in the third one you do not. Is that correct? We'd need to see your filesystem to know.

Open your browser's network inspector - are there 404's showing? did the bootstrap-confirmation.js actually get loaded?

EDIT: I created a pen: http://codepen.io/anon/pen/OpegVE It's working there. One issue i saw was that the original version of bootstrap-confirmation may not be compatible with bootstrap 3.x.x. This fork: https://github.com/tavicu/bs-confirmation claims to be compatible with bootstrap 3. The pen I made uses the version of boostrap-confirmation you mention in your original post, and also links bootstrap 2.3.1, and they are all working together.

TL;DR: your version of the plugin and your version of boostrap might not be compatible, and be failing silently? Worth looking into.

Upvotes: 1

eric
eric

Reputation: 454

Not sure if the missing closing brackets was a copy and paste issue but it does seem to work when you put it all together: http://plnkr.co/edit/tmgKh22PftNMua0Pdmjo

$(document).ready(function() {
    $('[data-toggle=confirmation]').confirmation({
        rootSelector: '[data-toggle=confirmation]'
        // other options
    });
});

Upvotes: 0

cdurth
cdurth

Reputation: 345

Your javascript is missing the closing });. This fixed it for me. (made my own HTML from their example, you should include yours)

Upvotes: 0

Related Questions