I have a modal popup template which is for create and edit detail. It popup between create and edit by using angular and model to populate value. However,the modal popup does not reflect the create condition but does reflect the edit condition, which mean this part has been gone through when debugging
$scope.ID = 0;
$scope.Title = '';
$scope.modalHeader = "Add New List";
but when the modal popup, the Title field is not empty and header is not populated.
All in all, the debugger does reflect when click on edit and create button.
html:
<button class="btn btn-success" ng-disabled="error" data-toggle="modal" data-target="#addNewListModal" ng-controller="boardCtrl" ng-click="editList('new')">
<span class="glyphicon"></span>Add New List
</button>
<div class="row" ng-controller="boardCtrl">
<div id="loggedInUsername" hidden>#ViewBag.Username</div>
<div ng-include="'/AppScript/busyModal.html'" ng-show="isLoading"></div>
<div class="col-lg-3 panel panel-primary colStyle" id="{{toDoList.Id}}" kanban-board-drop="over"
ng-repeat="toDoList in toDoLists">
<div class="panel-heading" style="margin-bottom: 10px; text-align: center;">
<h3 class="panel-title">
{{toDoList.Title}}
<button class="btn pull-right" ng-disabled="error" data-toggle="modal" data-target="#addNewListModal" ng-click="editList($index)">
<span class="glyphicon glyphicon-pencil" style="color:blue"></span>
</button>
</h3>
</div>
<button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#addNewTaskModal" data-tasklistid="{{toDoList.Id}}">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
<div class="thumbnail" draggable="true" kanban-board-dragg="toDoTask"
ng-repeat="toDoTask in toDoList.ToDoTasks" style="margin-bottom: 10px;">
<div class="caption">
<h5><strong>{{toDoTask.Title}}</strong></h5>
<p>{{toDoTask.Description}}</p>
<p><button href="#" class="btn btn-primary btn-sm" ng-click="FindToDoTask(toDoTask.Id);" data-toggle="modal" data-target="#editTaskModal">Edit</button>
</p>
</div>
</div>
</div>
ctrl.js:
$scope.editList = function (id) {
debugger;
if (id == 'new') {
//$scope.edit = true;
//$scope.incomplete = true;
$('#newListSubmit').removeAttr('disabled');
$scope.ID = 0;
$scope.Title = '';
$scope.modalHeader = "Add New List";
} else {
//$scope.edit = false;
$scope.ID = $scope.toDoLists[id].ID;
$scope.Title = $scope.toDoLists[id].Title.trim();
$scope.modalHeader = "Update List";
//$scope.incomplete = false;
}
};
modal:
<div id="addNewListModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="modalTitle" ng-model="modalHeader">{{modalHeader}}</h4>
</div>
<div class="modal-body" id="modalBody">
<!-- content goes here -->
<input type="text" hidden="hidden" ng-model="ID" name="ID">
<form id="newListForm" method="post">
<div class="form-group">
<label for="newListTitle">Title</label>
<input type="text" class="form-control" id="newListTitle" name="Title" placeholder="Enter Title" ng-model="Title">
</div>
</form>
</div>
<div class="modal-footer">
<button id="newListSubmit" type="submit" class="btn btn-default" ng-click="AddNewList();">Submit</button>
</div>
</div>
</div>
</div>
you have 2 instances of boardCtrl controller, one on the button:
<button class="btn btn-success"
ng-disabled="error"
data-toggle="modal"
data-target="#addNewListModal"
ng-controller="boardCtrl"
ng-click="editList('new')">
and other on the main div:
<div class="row" ng-controller="boardCtrl">
.....
</div>
they create different scopes (even if you will use same aliases like ng-controller="boardCtrl as bc"), so, just move your ngController to some common for both elements section and remove from the button and row div. For example, you may move the ngController to the body tag:
<body ng-controller="boardCtrl">
<button class="btn btn-success"
ng-disabled="error"
data-toggle="modal"
data-target="#addNewListModal"
ng-click="editList('new')">
<div class="row">
.....
</div>
</body>
plunker: http://plnkr.co/edit/boPkGYvAPzDywStMFp4c?p=preview
Related
I want to create a button action create with disable/enable button then close model view:
// button: type="submit" class="btn btn-primary" data-dismiss="modal" ng-disabled="!newSong.name" ng-click="saveSong()" >Create
--> Issue: when ng-click done --> view modal did not close
The reason why your code was not working is because of $scope.newSong = {};
in this code:
$scope.saveSong = function () {
$scope.songs.push($scope.newSong);
$scope.newSong = {};
};
Whenever you are trying to submit the form $scope.newSong = {} is making it invalid.
HTML CODE
<div ng-app="myApp", ng-controller ="myController">
<div ng-repeat="id in songs">
<ul>
<li> Name song: {{id.name}} </li>
<li> Name artist: {{id.artist}} </li>
</ul>
</div>
<div class="col-lg-1"> <button type="button" class="btn btn-info glyphicon glyphicon-plus" data-toggle="modal" data-target="#myModal" ng-click="clear()"> Add New </button> </div>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"> Create New Song</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role ="form" name="formName" novalidate>
<div class="form-group" >
<label class="control-label col-sm-2"> Name* </label>
<div class="col-sm-10">
<input type="text" class="form-control" name="name" ng-model="newSong.name" required/>
<div class="custom-error" ng-show="formName.name.$dirty && formName.name.$invalid">
<p ng-show="formName.name.$invalid && !formName.name.$pristine" class="help-block"> name is required.</p>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Artist</label>
<div class="col-sm-10">
<input type="text" class="form-control"ng-model="newSong.artist">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" data-dismiss="modal" ng-disabled="!newSong.name" ng-click="saveSong()" >Create</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
<br/><br/>
Angular CODE
var myApp = angular.module('myApp',[]);
myApp.controller('myController', function($scope){
$scope.songs = [
{
"name": "Everybody",
"artist": "Backstreet Boys.",
"id": 1
},
{
"name": "Feel Like Makin' Love",
"artist": "Bad Company.",
"id": 2
},
{
"name": "Sister of Pearl",
"artist": "Baio.",
"id": 3
}];
$scope.newSong = {};
/* callback ng-click create */
$scope.saveSong = function () {
$scope.songs.push($scope.newSong);
// $scope.newSong = {};
};
$scope.clear = function(){
$scope.newSong = {};
$scope.$setPristine(true);
}
});
WORKING LINK
Hope that works :)
I need to show the values given in modal at outside the modal using AngularJS. Plunker attached here which clearly explains. Can anyone help me out........I have already checked Angular, Ui-Bootstrap site, but couldn't find the solution to the problem
HTML
<div ng-controller="ModalDemoCtrl as $ctrl" class="modal-demo">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<button type="button" class="close" aria-hidden="true" ng-click="$ctrl.cancel()">×</button><a>
<h3 class="modal-title" id="modal-title" style="color:red">Please Provide the Details Here</h3>
</a>
</div>
<form name="modalForm" novalidate>
<div class="modal-body">
<div class="form-group" ng-class="{ 'has-error': modalForm.name.$invalid }"> <!--modalForm.name.$touched &&-->
<a>*Name: </a><input name="name" ng-minlength="3"
ng-maxlength="8" ng-model="name" type="text" placeholder="Name" class="form-control" size="10" style="width: 50%" required />
</div>
<div class="form-group" ng-controller="ButtonsCtrl">
<a>*Gender: </a><pre>{{radioModel || 'null'}}</pre>
<div class="btn-group">
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Male'" uncheckable>Male</label>
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Female'" uncheckable>Female</label>
</div>
</div>
<div class="input-group" ng-controller="DatepickerPopupDemoCtrl">
<a>*Birth Date: Selected date is: <em>{{dt | date:'fullDate' }}</em></a><select class="form-control" ng-model="format" ng-options="f for f in formats" style="width: 50%"><option></option></select><input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" close-text="Close" ng-required="true" alt-input-formats="altInputFormats" style="width: 50%" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
<p ng-show="modalForm.modalPlace.$error.required">Select service</p>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-warning" type="button" ng-click="$ctrl.ok()" ng-disabled="modalForm.$invalid">OK</button>
<button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
</div>
</form>
</script>
<button type="button" class="btn btn-default" ng-click="$ctrl.open()">Open me!</button>
<div ng-show="$ctrl.selected">Name from the modal: {{ $ctrl.name }}</div>
<div ng-show="$ctrl.selected">Gender from the modal: {{ radioModel || 'null'}}</div>
<div ng-show="$ctrl.selected">DOB from the modal: {{ dt | date:'fullDate' }}</div>
What you are looking for is the modalInstance.result property, it a promise which is resolved with a value when you close your modal (or rejects when you dismiss it).
The docs already provide you with a simple example
modalInstance.result.then(function (selectedItem) {
$ctrl.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
Inside your modal controller you can close/dismiss the modal using these methods
var selectedItem = ...
$uibModalInstance.close(selectedItem)
// or
$uibModalInstance.dismiss(selectedItem)
With selectedItem being passes to the controller that launched the modal.
Because you code is incomplete I can't really help you much more then that, the docs hold all you need to know really.
I want that when I move my cursor on an image, it should show 3 buttons coming and then when I click on any one of them, a modal should open. I am actually done with this, but the problem is when I click on any of the buttons appearing, a modal is reflected and as soon as I try to close that modal, those three options are shown on that image rather dis-appearing. Please anyone help.
Here is the code:
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<div class="caption">
<button class="btn" data-toggle="modal" data-target="#myModal1a" style="color:#000">Add</button>
<button class="btn" data-toggle="modal" data-target="#myModal1b" style="color:#000">Delete</button>
<button class="btn" data-toggle="modal" data-target="#myModal1c" style="color:#000">Modify</button>
</div>
<img src="Department.png" style="position:fixed" alt="ALT NAME" width="250" height="60">
</div>
<h3 class="text" id="D1"><b>Department Options </b></h3>
</div>
</div>
<!-- Modal 1a -->
<div class="modal fade" id="myModal1a" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><span class="glyphicon glyphicon-lock"></span> Create Department</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="psw">Department Name</label>
<input type="text" class="form-control" id="psw" placeholder="Provide a name">
</div>
<div class="form-group">
<label for="usrname">Department ID</label>
<input type="text" class="form-control" id="usrname" placeholder="Provide an ID">
</div>
<button type="submit" class="btn btn-block">Submit
<span class="glyphicon glyphicon-ok"></span>
</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> Cancel
</button>
<p>Need help?</p>
</div>
</div>
</div>
</div>
If you simply wanna hide those buttons whenever the modal is closed, then its a cakewalk if you use jQuery. You just need to use the hidden.bs.modal event of Bootstrap modals in the following way:
$('#myModal1a').on('hidden.bs.modal', function () {
$('.imgButton').each(function () {
$(this).hide();
})
})
Assuming that you provide a class called 'imgButton' to all the buttons :)
I'm new to AngularJS, and I'm trying to figure out how to get a create post form in a modal to work, and push a post to firebase. I'm pulling my hair out.
Originally, "create post" was a link in the navbar that took you to a separate page (addPost.html) with a form on it.
I wanted to move the Create Post form to a bootstrap modal on the same page (welcome.html).
There is an edit form in a modal, and it works fine when editing an already created post. The delete post also works as well.
I can't figure out what I am doing wrong.
This is my welcome.html:
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<title>AngularJS & Firebase Web App</title>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="blog.css" rel="stylesheet">
</head>
<body ng-controller="WelcomeCtrl">
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="#/welcome">Home</a>
<a class="blog-nav-item " href="#/addPost">Add Post</a>
</nav>
</div>
</div>
<div class="container">
<div class="page-header">
<h1>AngularJS & Firebase App</h1>
</div>
<p class="lead">Welcome home <b>{{username}}</b> !!</p>
<!-- BUTTON I CREATED TO TRIGGER THE CREATE POST MODAL -->
<p><button class="btn btn-xs btn-info" data-toggle="modal" data-target="#createModal">CREATE</button></p>
<!-- list of articles -->
<div class="list-group" ng-repeat="article in articles">
<a href="#" onclick="return false;" class="list-group-item active">
<h4 class="list-group-item-heading">{{article.title}}</h4>
<p class="list-group-item-text">{{article.post}}</p>
<span class="pull-right">
<button class="btn btn-xs btn-info" ng-click="editPost(article.$id)" data-target="#editModal">EDIT</button>
<button class="btn btn-xs btn-warning" ng-click="confirmDelete(article.$id)" data-target="#deleteModal" >DELETE</button>
</span>
</a>
</div>
</div>
<!-- footer -->
<footer class="footer">
<div class="container">
<p class="text-muted"></p>
</div>
</footer>
<!-- create modal -->
<div class="modal fade" id="createModal" role="dialog" aria-labelledby="createModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="editModalLabel">Create Post</h4>
</div>
<div class="modal-body">
<form ng-submit="AddPost()">
<div class="form-group">
<label for="recipient-name" class="control-label">Title:</label>
<input type="text" ng-model="article.title" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Post:</label>
<textarea ng-model="article.post" class="form-control" id="message-text"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input id="singlebutton" ng-disabled="!article.title || !article.post" name="singlebutton" class="btn btn-primary" type="submit" value="Publish" />
</form>
</div>
</div>
</div>
</div>
<!-- edit modal -->
<div class="modal fade" id="editModal" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="editModalLabel">Update Post</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="recipient-name" class="control-label">Title:</label>
<input type="text" ng-model="postToUpdate.title" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Post:</label>
<textarea ng-model="postToUpdate.post" class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" ng-click="update()">Publish</button>
</div>
</div>
</div>
</div>
<!-- delete modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="text-align:center;">
<h4 class="modal-title" style="color:red;" id="deleteModalLabel">You are going to Delete this post forever !!</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" ng-click="deletePost()">Delete</button>
</div>
</div>
</div>
</div>
</body>
</html>
This is my welcome.js:
'use strict';
angular.module('myApp.welcome', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/welcome', {
templateUrl: 'welcome/welcome.html',
controller: 'WelcomeCtrl'
});
}])
.controller('WelcomeCtrl', ['$scope','$firebase','CommonProp', function($scope,$firebase,CommonProp) {
$scope.username = CommonProp.getUser();
var firebaseObj = new Firebase("https://yyear.firebaseio.com/Articles");
var sync = $firebase(firebaseObj);
$scope.articles = sync.$asArray();
$scope.editPost = function(id) {
var firebaseObj = new Firebase("https://yyear.firebaseio.com/Articles/" + id);
var syn = $firebase(firebaseObj);
$scope.postToUpdate = syn.$asObject();
$('#editModal').modal(); // triggers the modal pop up
};
$scope.update = function() {
var fb = new Firebase("https://yyear.firebaseio.com/Articles/" + $scope.postToUpdate.$id);
var article = $firebase(fb);
article.$update({
title: $scope.postToUpdate.title,
post: $scope.postToUpdate.post,
emailId: $scope.postToUpdate.emailId
}).then(function(ref) {
$('#editModal').modal('hide');
}, function(error) {
console.log("Error:", error);
});
};
$scope.confirmDelete = function(id) {
var fb = new Firebase("https://yyear.firebaseio.com/Articles/" + id);
var article = $firebase(fb);
$scope.postToDelete = article.$asObject();
$('#deleteModal').modal();
};
$scope.deletePost = function() {
var fb = new Firebase("https://yyear.firebaseio.com/Articles/" + $scope.postToDelete.$id);
var article = $firebase(fb);
article.$remove().then(function(ref) {
$('#deleteModal').modal('hide');
}, function(error) {
console.log("Error:", error);
});
};
$scope.AddPost = function(){
console.log("This was called.");
var title = $scope.article.title;
var post = $scope.article.post;
var firebaseObj = new Firebase("https://yyear.firebaseio.com/Articles");
var fb = $firebase(firebaseObj);
fb.$push({ title: title,post: post,emailId: CommonProp.getUser() }).then(function(ref) {
console.log(ref);
//$location.path('/welcome');
}).then(function(ref) {
$('#editModal').modal('hide');
}, function(error) {
console.log("Error:", error);
});
};
}]);
The original Create Post form in addPost.html that works looks like this:
<body ng-controller="AddPostCtrl">
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item " href="#/welcome">Home</a>
<a class="blog-nav-item active" href="#/addPost">Add Post</a>
</nav>
</div>
</div>
<div class="container" >
<form class="form-horizontal" ng-submit="AddPost()">
<fieldset>
<legend>Create Post</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="txtTitle">Title</label>
<div class="col-md-4">
<input id="txtTitle" name="txtTitle" ng-model="article.title" type="text" placeholder="placeholder" class="form-control input-md">
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="txtPost">Post</label>
<div class="col-md-4">
<textarea class="form-control" id="txtPost" ng-model="article.post" name="txtPost" ></textarea>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton"></label>
<div class="col-md-4">
<input id="singlebutton" ng-disabled="!article.title || !article.post" name="singlebutton" class="btn btn-primary" type="submit" value="Publish" />
</div>
</div>
</fieldset>
</form>
</div><!-- /.container -->
The addPost.js file looks like this.
'use strict';
angular.module('myApp.addPost', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/addPost', {
templateUrl: 'addPost/addPost.html',
controller: 'AddPostCtrl'
});
}])
.controller('AddPostCtrl', ['$scope','$firebase','$location','CommonProp',function($scope,$firebase,$location,CommonProp) {
$scope.AddPost = function(){
var title = $scope.article.title;
var post = $scope.article.post;
var firebaseObj = new Firebase("https://yyear.firebaseio.com/Articles");
var fb = $firebase(firebaseObj);
fb.$push({ title: title,post: post,emailId: CommonProp.getUser() }).then(function(ref) {
console.log(ref);
$location.path('/welcome');
}, function(error) {
console.log("Error:", error);
});
}
}]);
I assumed that if I copied the the addPost function from addPost.js to the welcome.js file and then duplicated the edit form in welcome.html and modified it so it was similar to the Create Post form in addPost.html it would work.
Obviously it doesn't, but I don't know what I am doing wrong.
The modal pops up but the publish button doesn't do anything
I figured it out. I had my closing form tag in the wrong spot first of all in my create post modal.
The Create Post modal should be like this:
<div class="modal fade" id="createModal" role="dialog" aria-labelledby="createModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form ng-submit="AddPost()">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="editModalLabel">Create Post</h4>
</div>
<div class="modal-body">
<!-- Text input-->
<div class="form-group">
<label class="control-label" for="txtTitle">Title</label>
<input id="txtTitle" name="txtTitle" ng-model="article.title" type="text" placeholder="placeholder" class="form-control input-md">
</div>
<!-- Textarea -->
<div class="form-group">
<label class="control-label" for="txtPost">Post</label>
<textarea class="form-control" id="txtPost" ng-model="article.post" name="txtPost" ></textarea>
</div>
<!-- Button -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input id="singlebutton" ng-disabled="!article.title || !article.post" name="singlebutton" class="btn btn-primary" type="submit" value="Publish" />
</div>
</form>
</div>
</div>
</div>
My addPost function in welcome.js should be like this:
$scope.AddPost = function(){
console.log("This was called.");
var title = $scope.article.title;
var post = $scope.article.post;
var firebaseObj = new Firebase("https://yyear.firebaseio.com/Articles");
var fb = $firebase(firebaseObj);
fb.$push({ title: title,post: post,emailId: CommonProp.getUser() }).then(function(ref) {
console.log(ref);
//$location.path('/welcome');
}).then(function(ref) {
$('#createModal').modal('hide');
}, function(error) {
console.log("Error:", error);
});
};
I have a delete link , for that I am using bootstrap modal window . Here window appearing fine When I click yes button of window the record should be delete. So I have to call servlet in yes button along with a parameter Id here I am able to call servlet but parameter is not passing. How can I pass parameter to yes button of modal window. Here is code for it.
The bootstrap modal where I am calling,
<td>Edit
</td>
<td> Delete
</td>
in the same jsp page the markup of modal is,
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Delete Teacher Record</h4>
</div>
<div class="modal-body">
<h3>Are you sure?</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
<a href="<%=request.getContextPath()%>/controller/TeacherManagementController?flowName=DELETE_TEACHER_INFO&teacherId=${teacherId.getTeacherId()}"
class="btn btn-primary">Yes</a>
</div>
</div>
</div>
</div>
The problem I am facing is the modal is appearing but record is not delete because of not able to pass the teacherId. Please any one help me in this.
I am using like this call function and assign value to hidden fields
Html:
<div id="add_button" >
<a data-toggle="modal" href="#myModal_new" onClick="pop_up('<?php echo $section_value['subject_name']; ?>','<?php echo $section_value['section_id']; ?>')">Add Subjects</a>
</div>
<script>
function pop_up(name,id){
var standard = document.getElementById("standard");
var standard_id = document.getElementById("standard_id");
var standard_id_new = document.getElementById("standard_id_new");
standard.value = name;
standard_id.value = id;
standard_id_new.value = id;
}
</script>
<div id="myModal_new" class="modal hide fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Create Sections</h3>
</div><br><br>
<div id="errorContainers">
<p>Please correct the errors and try again:</p>
<ul />
</div>
<div class="modal-body" style="margin-left: 17%;">
<!-- Modal Form Starts Here -->
<form name="modalForm" id="formss" method="post">
<input type="hidden" name="standard" id="standard">
<input type="hidden" name="standard_id" id="standard_id">
<input type="hidden" name="standard_id_new" id="standard_id_new">
<fieldset>
<div class="division_center"><div class="division_left"><label class="form-signin-signup" for="input1">Sections </label> </div>
<div class="division_right">
<input type="text" name="standard_new" id="standard_new"> </div></div>
</fieldset>
<!-- Modal Form Ends Here -->
</div>
<div class="modal-footer">
<a class="btn" data-dismiss="modal" >Close</a>
<input type="submit" name="newsubmit" class="btn btn-primary btn-large" value="Create">
</div>
</form>
</div>
</div>
</div>