Bootstrap JS not working on JSP for multiple deleteButtons - javascript

Sometimes only Jquery 2.2 works. if I comment it the delete confirmation button wont pop up. 3.1.1 not working it seems for this code.
w3schools and getBootstrap codes has been refered for this
The delete confirmation modal is popping up for only the first entry in the table i.e foreach loop.
Dont know why..
Please help..
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<!--<script src="js/manageBooks.js"></script>-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$("#deleteButton").click(function () {
$("#deleteModal").modal();
});
});
</script>
<title>Manage Books</title>
</head>
<body>
<p style="color:white; font-weight:bold; text-align:right;">pmahend1</p>
<h4>Add book from Google Books</h4>
<form action="manageBooks" method="POST">
<input type="hidden" name="action" value="searchGoogleBook" />
<input type="search" placeholder="Enter Title or Author" name="query" style="width: 450px"/>
<input type="submit" name="Search" value="Search"/>
<p style="color:red;"></p>
</form>
<div id="results"></div>
<br>
<div><a class="btn btn-default btn-info" href="manageBooks?action=addBookPage">Add Books Manually</a></div>
<br>
<h4 class="container">Book Details </h4>
<br>
<div class="container">
<table class="form-group" border="1">
<tr>
<th>Title</th>
<th>Author</th>
<th>Edition</th>
<th>Genre</th>
<th>ISBN10</th>
<th>ISBN13</th>
<th>Update</th>
<th>Delete</th>
</tr>
<tr>
<td>Adultery</td>
<td>Paulo Coelho</td>
<td></td>
<td>Fiction</td>
<td>1101874090</td>
<td>9781101874097</td>
<td>Edit</td>
<!--<td>Delete</td>-->
<td>
<!--<div class="container">-->
<button type="button" class="btn btn-default" id="deleteButton">Delete</button>
<div class="modal fade" id="deleteModal" role="dialog">
<div class="modal-body" style="padding:40px 50px;">
<form role="form" action="manageBooks" method="POST">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Delete Parmanently</h4>
</div>
<div class="modal-body">
<p>Are you sure about this ?</p>
</div>
<div class="modal-footer">
<input type="hidden" name="action" value="deleteBook">
<input type="hidden" name="bookId" value="6" />
<button type="submit" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger" id="confirm">Delete</button>
</div>
</form>
</div>
</div>
</div>
<!--</div>-->
</td>
</tr>
<tr>
<td>Twilight's Wrath</td>
<td>SnÃÂÃÂÃÂæbjÃÂÃÂÃÂörn</td>
<td></td>
<td>Fiction</td>
<td>1490735372</td>
<td>9781490735375</td>
<td>Edit</td>
<!--<td>Delete</td>-->
<td>
<!--<div class="container">-->
<button type="button" class="btn btn-default" id="deleteButton">Delete</button>
<div class="modal fade" id="deleteModal" role="dialog">
<div class="modal-body" style="padding:40px 50px;">
<form role="form" action="manageBooks" method="POST">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Delete Parmanently</h4>
</div>
<div class="modal-body">
<p>Are you sure about this ?</p>
</div>
<div class="modal-footer">
<input type="hidden" name="action" value="deleteBook">
<input type="hidden" name="bookId" value="7" />
<button type="submit" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger" id="confirm">Delete</button>
</div>
</form>
</div>
</div>
</div>
<!--</div>-->
</td>
</tr>
</table>
</div>
<br>
</body>
</html>

It got fixed automatically. May be I had to restart TomCat server.

Related

Pass value to modal on button click

I wanted to show the further details of my card in modal when the user click the button "More Details" ,i have seen an answer regarding to this however I don't want the information to be inside an input field. Can please someone help me with it?
<button class="open-homeEvents btn btn-primary" data-id="2014-123456" data-toggle="modal" data-target="#modalHomeEvents">More Details</button>
MODAL
<div id="modalHomeEvents" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="height:50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<label>Student ID</label>
<input type="hidden" name="eventId" id="eventId"/>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" value="Login" name="login" style="background-color:rgb(0,30,66); ">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
Javascript
<script type="text/javascript">$(document).on("click", ".open-homeEvents", function () {
var eventId = $(this).data('id');
$(".modal-body #eventId").val( eventId );
});</script>
Instead of using an input field you could create a container element for the id, a div or span and update content of the element using .html() jQuery method.
$(document).on("click", ".open-homeEvents", function () {
var eventId = $(this).data('id');
$('#idHolder').html( eventId );
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Modal</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button class="open-homeEvents btn btn-primary" data-id="2014-123456" data-toggle="modal" data-target="#modalHomeEvents">More Details</button>
<div id="modalHomeEvents" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="height:50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<label>Student ID</label>
<input type="hidden" name="eventId" id="eventId"/>
<span id="idHolder"></span>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" value="Login" name="login" style="background-color:rgb(0,30,66); ">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

Display Alerts on Modal with Spring MVC

I am using Spring Boot and thymeleaf for my web application. For implementing Forgot password feature I am having modal in login.html.After submitting the form to controller, to display success or error alerts on modal I used AJAX call. But the alerts are displayed on login page not on modal. Below is the code..
LoginController.java
#RequestMapping(value = "/forgotPassword", method = RequestMethod.POST)
public ModelAndView processForgotPasswordForm(ModelAndView modelAndView, #RequestParam("email") String email) {
UserDetails userDetails = userService.findUserByEmail(email);
if (null == userDetails) {
modelAndView.addObject("errorMessage", "Entered email doesn't exist in records");
modelAndView.setViewName("login");
return modelAndView;
}
boolean generatedToken = userService.generatePassResetToken(userDetails);
if (generatedToken) {
modelAndView.addObject("successMessage", Constants.PASSWORD_EMAIL_LINK);
}
modelAndView.setViewName("login");
return modelAndView;
}
app.js
$(function(){
$("#passForgot").on('submit',function(e){
e.preventDefault();
$form= $(this);
$.post("forgotPassword", $(this).serialize(),function(data){
$feedback = $("<div>").html(data).find(".form-feedback").hide();
$form.prepend($feedback)[0].reset();
$feedback.fadeIn(500);
});
});
})
login.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>Login Page</title>
<link rel="stylesheet" type="text/css" th:href="#{/css/login.css}" />
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script th:src="#{/js/app.js}"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.modal-footer {
border-top: 0px;
}
</style>
</head>
<body>
<div class="container">
<img th:src="#{/images/login.jpg}" class="img-responsive center-block"
width="300" height="300" alt="Logo" />
<form th:action="#{/login}" method="POST" class="form-signin">
<h3 class="form-signin-heading" th:text="Welcome"></h3>
<br /> <input type="text" id="userName" name="userName"
required="required" th:placeholder="Username" class="form-control" />
<br /> <input type="password" th:placeholder="Password"
required="required" id="password" name="password"
class="form-control" /> <br />
<div>
<input type='checkbox' name="remember-me-param" /> Remember Me<br />
</div>
<!-- Forgot Password?<br> -->
<br>
<div align="center" th:if="${param.error}">
<p style="font-size: 20; color: #FF1C19;">Username or Password
invalid, please verify</p>
</div>
<button class="btn btn-lg btn-primary btn-block" name="Submit"
value="Login" type="Submit" th:text="Login"></button>
<br> <br>
<div class="container">
<a href="#" data-target="#pwdModal" data-toggle="modal">Forgot
Password?</a>
</div>
</form>
</div>
<!--modal-->
<form action="forgotPassword" id="passForgot" method="post">
<div id="pwdModal" class="modal fade" tabindex="-1" role="dialog"
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>
<h1 class="text-center">LOGO</h1>
</div>
<div class="modal-body">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="text-center">
<div th:if="${successMessage}"
class="alert alert-success alert-dismissible form-feedback" role="alert">
<button type="button" class="close" data-dismiss="alert"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div th:text=${successMessage}></div>
</div>
<div th:if="${errorMessage}"
class="alert alert-danger alert-dismissible form-feedback" role="alert">
<button type="button" class="close" data-dismiss="alert"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div th:text=${errorMessage}></div>
</div>
<div
style="font-size: 17px; line-height: 21px; margin-top: 5px; padding-bottom: 14px; color: #333333;"
align="center">
To reset your password, enter the email <br>address associated
with your account below.<br>
</div>
<div class="panel-body">
<fieldset>
<div class="form-group input-group has-feedback">
<span class="input-group-addon"> <span
class="glyphicon glyphicon-envelope "></span>
</span> <input type="email" placeholder="Email Address"
class="form-control" name="email"
required /> <span
class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
<input class="btn btn-lg btn-primary btn-block"
value="Send Email" type="submit">
</fieldset>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="col-md-12">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Login Page with Modal
Error alerts displaying on login form but not on modal
What's wrong with this code ?

Edit/Delete HTML table w/Javascript or Jquery through modal

Working on a project for early project and here's the objective:
Make a table where you can add/edit/delete movies. I've been able to add the movies to my table, but can't seem to figure out my edit and delete buttons. Any tips will help!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
</head>
<body>
<h1>Movies List</h1>
<div class="container-fluid">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalContainer">
Add Movie
</button>
<div id="modalContainer" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" >×</button>
<h4 class="modal-title">Enter a New Movie w/Director.</h4>
</div>
<div class="modal-body">
<div>
<div class="form-group">
<label for="firstName" class="sr-only">Movie Name:</label>
<input id="firstName" type="text" class="form-control" placeholder="Movie Name" />
</div>
<div class="form-group">
<label for="lastName" class="sr-only">Director:</label>
<input id="lastName" type="text" class="form-control" placeholder="Director" />
</div>
<button onclick="myFunction()" class="btn btn-primary" data-dismiss="modal">Submit</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-12">
<table id="myTable" class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th>Movie</th>
<th>Director</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Terminator</td>
<td>Jack Black</td>
</tr>
<tr>
<td>The Virgin Suicides</td>
<td>Uve Bol</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">EDIT</h4>
</div>
<div class="modal-body">
<p><input type="text" class="input-sm" id="txtfname"/></p>
<p><input type="text" class="input-sm" id="txtlname"/></p>
</div>
<div class="modal-footer">
<button id= "btnEdit" onClick = "myEdit()" type="button" class="btn btn-primary">Save changes</button>
<button id= "btnDelete" type="button" class="btn btn-danger">Delete</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$('table tbody tr td').on('click',function myEdit(){
$("#myModal").modal("show");
$("#txtfname").val($(this).closest('tr').children()[0].textContent);
$("#txtlname").val($(this).closest('tr').children()[1].textContent);
$("#tldr").val($(this).closest('tr').children()[0].textContent);
$("#tldrs").val($(this).closest('tr').children()[1].textContent);
});
var toDos = []
function myFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var len = table.rows.length;
row.id = 'row_' + len;
cell1.id = 'tldr';
cell2.id = 'tldrs';
cell1.innerHTML = document.getElementById('firstName').value;
cell2.innerHTML = document.getElementById('lastName').value;
var data = {firstName: document.getElementById('firstName').value,
lastName: document.getElementById('lastName').value,
};
$('table tbody tr td').on('click',function(){
$("#myModal").modal("show");
$("#txtfname").val($(this).closest('tr').children()[0].textContent);
$("#txtlname").val($(this).closest('tr').children()[1].textContent);
$("#tldr").val($(this).closest('tr').children()[0].textContent);
$("#tldrs").val($(this).closest('tr').children()[1].textContent);
});
toDos.push(data);
console.log(toDos);
};
function myEdit(){
$('table tbody tr td').on('click',function myEdit(){
$("#txtfname").val($(this).closest('tr').children()[0].textContent);
$("#txtlname").val($(this).closest('tr').children()[1].textContent);
});
};
</script>
</body>
</html>
Here's a fiddle as well but I had issues getting the jquery to function correctly.
https://jsfiddle.net/yabhjmz0/10/
You need to call the modal by using there modal ID
<button type="button" data-target="#myModal" class="btn btn-primary" data-toggle="modal" >
check this Demo

Modal does opens but does not close?

I am having Issues with the modal, it opens on loading and does not respond to clicks to close it. Not sure what the Issue is. Attached is the code I have. How do I make the modal open as I click the button and close when I click the x
<html lang="en">
<head>
<meta chart="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewort" content="width=device-width, intial-scal=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/bootstrap.min.js"></script>
<title>Bootstrap</title>
</head>
<body>
<!-- signup button -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signupform">
Signup
</button>
<!-- log in button
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#loginform">Login</button> -->
<!-- popup signup form-->
<div class="modal-fade" id="signupform">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>
×
</span>
</button>
<h4 class="modal-title"> Sign Up</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="col-md-4 col-md-offset-1">
First Name:
</label>
<div class="col-md-5">
<input type="text" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">
Last Name:
</label>
<div class="col-md-5">
<input type="text" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">
Email:
</label>
<div class="col-md-5">
<input type="email" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">
Password:
</label>
<div class="col-md-5">
<input type="password" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">
Confirm Password:
</label>
<div class="col-md-5">
<input type="password" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-8">
<input type="submit" class="btn btn-success" value="submit">
</div>
</div>
</form>
</div>
<div class="modal-footer"></div>
</div>
</div>
</div>
<script src="js/jquery-2.2.0.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
ref: getbootstrap.com/javascript/#modals

How to hide and show HTML element in angularjs?

I have table for some task, In that table every row has one task.
In every row there is status which is controller by one button. Initial status of every task will be show as In Progress and text of Button as Mark Done, But when click on the button then It will change the status of the task as Done and change the text of button as Mark In Progress. If In future If we want to change the status of "Done" task then we can change the status through Button "Mark In Progress".
Please see the live DEMO
In this live demo,
Index.html
<!DOCTYPE html>
<html>
<head>
<title>ToDo API Client Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="tasksCtrl">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">ToDo API Client Demo</a>
</div>
</div>
<div>
<table class="table table-striped">
<tr><td style="width: 1px;"></td><td><b>Task</b></td><td><b>Options</b></td></tr>
<tr ng-repeat="task in tasks">
<td>
<span data-bind="visible: done" class="label label-success">Done</span>
<span data-bind="visible: !done()" class="label label-important">In Progress</span>
</td>
<td>{{task.title}}</td>
<td>{{task.description}}</td>
<td> <a class="btn" data-toggle="modal" data-target="#modal" ng-click="editTask(task)">Edit</a></td>
<td> <a class="btn" data-toggle="modal" data-ng-click="removeRow(task)">Delete</a></td>
<td>
<span data-bind="visible: done">
<button data-bind="click: $parent.markInProgress" class="btn">Mark In Progress</button>
</span>
</td>
<td>
<span data-bind="visible: !done()">
<button data-bind="click: $parent.markDone" class="btn">Mark Done</button>
</span>
</td>
</tr>
</table>
<a class="btn" data-toggle="modal" data-target="#add" ng-click="editTask(task)">Add Task</a>
</div>
<div id="modal" role="dialog" class="modal hide fade">
<div>
<div class="modal-header">
Task Dialog
</div>
<div class="modal-body">
<label for="txtName"></label>
<input type="text" ng-model="selectedTask.title" />
<input type="text" ng-model="selectedTask.description" />
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="saveTask()" data-dismiss="modal">OK</button>
</div>
</div>
</div>
<div id="add" class="modal hide fade" tabindex="=1" role="dialog" aria-labelledby="addDialogLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="addDialogLabel">Add Task</h3>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputTask">Task</label>
<div class="controls">
<input type="text" id="inputTask" ng-model="task1" placeholder="Task title" style="width: 150px;"><br />
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputDescription">Description</label>
<div class="controls">
<input type="text" id="inputDescription" ng-model="description1" placeholder="Description" style="width: 300px;">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="addNewTask()" data-dismiss="modal">Add Task</button>
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('tasksCtrl', function($scope, $http) {
//$http.get("data.json")
$http.get("/todo/api/v1.0/tasks")
.success(function(response) {
console.log(response.tasks)
$scope.tasks = response.tasks;
});
$scope.editTask=function(task) {
$scope.selectedTask = task;
};
$scope.removeRow = function (task) {
$scope.tasks.splice(task, 1);
};
$scope.addNewTask=function(){
//$scope.tasks.push({title :$scope.task1,description: $scope.description1});
$scope.tasks.push({title : $scope.task1, description : $scope.description1});
$scope.task1='';
$scope.description1='';
// $scope.tasks.push('dhsh');
};
});
/*
app.controller('addNewTaskCtrl', ['$scope', function($scope){
$scope.addNewTask=function(){
var task;
}
}]);*/
</script>
</body>
</html>
Try to use ng-show and ng-hide directives.
Here's the Plunkr.
E.g.
<table class="table table-striped">
<tbody>
<tr>
<td style="width: 1px;"></td>
<td>
<b>Task</b>
</td>
<td>
<b>Options</b>
</td>
</tr>
<tr ng-repeat="task in tasks">
<td>
<span ng-show="done" class="label label-success">Done</span>
<span ng-hide="done" class="label label-important">In Progress</span>
</td>
<td>{{task.title}}</td>
<td>{{task.description}}</td>
<td>
<a class="btn" data-toggle="modal" data-target="#modal" ng-click="editTask(task)">Edit</a>
</td>
<td>
<a class="btn" data-toggle="modal" data-ng-click="removeRow(task)">Delete</a>
</td>
<td ng-show="done">
<span>
<button ng-click="done = !done" class="btn">Mark In Progress</button>
</span>
</td>
<td ng-hide="done">
<span>
<button ng-click="done = !done" class="btn">Mark Done</button>
</span>
</td>
</tr>
</tbody>
</table>
Hope it helps.
I'm not quite sure if I understand what you're seeking to do, but I think you may be looking for this. ngHide allows you to have elements hidden based on what you set your "ngHide" value to.
For example:
<!-- when $scope.buttonStatus is set to true -->
<div ng-hide="$scope.buttonStatus" class="ng-hide"></div>
<!-- The element would be hidden -->
<!-- when $scope.buttonStatus's value is changed! -->
<div ng-hide="$scope.buttonStatus"></div>
<!-- The element would now be visible -->
Let me know if you'd like any more clarification! I know this is brief :)

Categories