CODEWITHSUNDEEP
javascripthtmlangularjsmodal-dialogbootstrap-modal
etm-dev
etm-dev

Reputation: 1

Bootstrap version 3.3.7 modal not appearing

I am trying to make a modal appear so that users are able to edit their posts. When the "Edit" button is clicked on, nothing occurs. It simply does not seem functional and nothing appears (i.e., no errors or anything) appears in my console when I attempt to debug it. My current version of bootstrap is 3.3.7. Please let me know any ideas as to where I may be going wrong... My HTML: 

<!DOCTYPE html>
<html>
<head>
  <title>WebApp Welcome Page</title>
</head>
<body ng-controller="WelcomeCtrl">
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a href="#/home" class="navbar-brand">WebApp</a>
      </div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#/welcome">Home</a></li>
        <li><a href="#/addPost">Add Post</a></li>
        <li><a href="#">Logout</a></li>
      </ul>
    </div>
  </nav>

  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h3>Welcome Home {{username}} !</h3>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row" ng-repeat="article in articles">
      <div class="col-md-12 well well-sm">
        <h4>{{article.title}}</h4>
        <p>{{article.post}}</p>
        <button type="submit" class="btn btn-sm btn-primary" data-target="#editModal" data-toggle="modal">Edit</button>
        <button type="submit" class="btn btn-sm btn-danger">Delete</button>
      </div>
    </div>
  </div>

  <div class="container">
    <div id="editModal" class="modal hide fade" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4>Edit Post Details</h4>
          </div>
          <div class="modal-body">
            <form role="form">
              <div class="form-group">
                <label for="title">Title</label>
                <input type="text" name="title" class="form-control"/>
              </div>
              <div class="form-group">
                <label for="post">Post</label>
                <textarea name="post" class="form-control"></textarea>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-sm primary">Update Post</button>
            <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Cancel</button>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>
</html>

My .js: 

'use strict';

angular.module('webApp.welcome', ['ngRoute', 'firebase'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/welcome', {
    templateUrl: 'welcome/welcome.html',
    controller: 'WelcomeCtrl'
  })
}])

.controller('WelcomeCtrl', ['$scope', 'CommonProp', '$firebaseArray', function($scope, CommonProp, $firebaseArray) {
  $scope.username = CommonProp.getUser();

  var ref = firebase.database().ref().child('Articles');
  $scope.articles = $firebaseArray(ref);
  console.log($scope.articles);
}])

Upvotes: 0

Views: 788

Answers (1)

l0ul0u
l0ul0u

Reputation: 101

The example on w3school doesn't include the hide class on the dialog div, just "modal fade".

I'd also change the trigger button type from "submit" to "button" since you're not submitting a form.

Upvotes: 1

Related Questions