get id from another table in javascript modal - javascript

Hello, good afternoon. I wanted to see how to get the id of the roles in this case, I can retrieve all the user data in my modal. But I can't get the role back since it belongs to another table and when I ask for it, it brings me the whole table. Since I use a many-to-many relationship
This is my js
$('.table .editBtn').on('click', function (event) {
event.preventDefault();
var href = $(this).attr('href');
$.get(href, function (usuario) {
$('.myForm #idUsuarioEdit').val(usuario.idUsuario);
$('.myForm #nombreEdit').val(usuario.nombre);
$('.myForm #apellidoEdit').val(usuario.apellido);
$('.myForm #emailEdit').val(usuario.email);
$('.myForm #rolesEdit').val(usuario.roles);
});
$('.myForm #editModal').modal();
});
This is my controller
#GetMapping("/editarUsuario")
#ResponseBody
public Usuario editarUsuario(Model model, long idUsuario) throws Exception {
model.addAttribute("listaUsuarios", usuarioService.getAllUsers());
model.addAttribute("roles", rolDao.findAll());
return usuarioService.getUsuarioById(idUsuario);
}
This is my html button
<table id="listaUsuarios" class="table table-bordered table-hover table-striped">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Nombre</th>
<th scope="col">Apellido</th>
<th scope="col">E-mail</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr th:each="usuario : ${listaUsuarios}">
<td th:text="${usuario.idUsuario}"></td>
<td th:text="${usuario.nombre}"></td>
<td th:text="${usuario.apellido}"></td>
<td th:text="${usuario.email}"></td>
<td><div class="text-center">
<span th:if="${#authorization.expression('hasRole(''ROLE_ADMIN'')')} or (${#authorization.expression('hasRole(''ROLE_USER'')')} and ${#httpServletRequest.remoteUser==usuario.email})">
<a class="btn btn-success editBtn" th:href="#{editarUsuario/(idUsuario=${usuario.idUsuario})}">Editar <i class="fas fa-edit"></i></a>
</span>
<span th:if="${#authorization.expression('hasRole(''ROLE_ADMIN'')')}"> |
<a class="btn btn-danger" href="#" th:onclick="'javascript:confirmaEliminar(\''+ ${usuario.idUsuario} +'\');'">Eliminar <i class="fas fa-user-times"></i></a>
</span>
</div>
</td>
</tr>
</tbody>
</table>
This is my modal
<div class="myForm">
<form th:object="${editarUsuario}" th:action="#{/editarUsuario}" method="post">
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Editar usuario</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<input class="form-control" type="hidden" id="idUsuarioEdit" name="idUsuario" />
</div>
<div class="form-group">
<label class="col-form-label" for="nombre">Nombre:</label>
<input class="form-control" type="text" id="nombreEdit" name="nombre" required />
</div>
<div class="form-group">
<label class="col-form-label" for="apellido">Apellido:</label>
<input class="form-control" type="text" id="apellidoEdit" name="apellido" required />
</div>
<div class="form-group">
<label class="col-form-label" for="email">E-mail:</label>
<input class="form-control" type="text" id="emailEdit" name="email" required />
</div>
<div class="form-group">
<label class="col-form-label" for="rol">Rol:</label>
<input class="form-control" type="text" id="rolesEdit" name="roles" required />
<!--<select class="form-control" id="rolesEdit" name="rol">
<option th:each="rol :${roles}" th:value="${rol.idRol}" th:text="${rol.nombre}"></option>
</select>-->
</div>
<!-- <div class="form-group">
<label class="col-form-label" for="rol">Rol:</label>
<select class="form-control" id="rolesEdit" name="roles">
<option th:each="rol :${roles}" th:value="${rol.idRol}" th:text="${rol.nombre}"></option>
</select>
</div>
ERROR MESSAGE
<div class="content">
<div style="text-align: center;" class="alert-danger-registro" th:if="${formErrorMessage}" th:text="${formErrorMessage}">Error Message</div>
-->
</div>
<!--FOOTER-->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
<input type="submit" class="btn btn-primary" value="Guardar cambios"/>
</div>
</div>
</div>
</div>
</form>
</div>
And.. my method for edit user
//metodo editar usuario
#Override
public Usuario editarUsuario(Usuario fromUser) throws Exception {
Usuario toUser = getUsuarioById(fromUser.getIdUsuario());
mapUser(fromUser, toUser);
return usuarioDao.save(toUser);
}
//Mapeamos todo menos el password.
protected void mapUser(Usuario from, Usuario to) {
to.setNombre(from.getNombre());
to.setApellido(from.getApellido());
to.setEmail(from.getEmail());
to.setRoles(from.getRoles());
}
currently this is what i receive:
modal edit
I've been trying for a long time but I can't receive the role id, thanks. Greetings


Try to explain where is the real problem, do you use some library or framework ?
You may try to find about how to join tables using the lib or the framework you are currently using.
Or you just have to return the roles you have fetched with the user data, something like :
const allRoles = //fetch roles
const userInfo = //fetch user info
return {userData: userInfo, roles: allRoles}

Related

jQuery: Bootstrap Modal not showing

I want to my grant my Admin the priviledges to add and edit user. Clicking the Add button pops up a modal which os userModal and its working perfectly - I send a request to user_action.php (where my PHP and SQL statements are) and it creates a new user.
When the Admin clicks on the Update button, i want the userModal to pop up again, but this time, populated with the username, email and usertype of the user that is to be edited (The modal-title changes from Add User to Edit User and the btn-action changes to 'Edit`). This is not working - the modal doesn't show.
What is the problem?
I have attached the html to my users.php and the jQuery. I have also attached the screenshot of the UI of users.php in case it can be of help.
HTML
<?php
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
include("./database/dbnew.php");
if($_SESSION['usertype'] != 'Admin')
{
header("location:index.php");
}
include("./templates/header.php");
?>
<span id="alert_action"></span>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-lg-10 col-md-10 col-sm-8 col-xs-6">
<h3 class="panel-title">User List</h3>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6" align="right">
<button type="button" name="add" id="add_button" data-toggle="modal" data-target="#userModal" class="btn btn-success btn-xs">Add</button>
</div>
</div>
<div class="clear:both"></div>
</div>
<div class="panel-body">
<div class="row"><div class="col-sm-12 table-responsive">
<table id="user_data" class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>Email</th>
<th>Name</th>
<th>Status</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="userModal" class="modal fade">
<div class="modal-dialog">
<form method="post" id="user_form">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><i class="fa fa-plus"></i> Add User</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Enter User Name</label>
<input type="text" name="username" id="username" class="form-control" required />
</div>
<div class="form-group">
<label>Enter User Email</label>
<input type="email" name="email" id="email" class="form-control" required />
</div>
<div class="form-group">
<label>Enter User Password</label>
<input type="password" name="password" id="password" class="form-control" required />
</div>
<div class="form-group">
<label for="usertype">Usertype</label>
<select name="usertype" class="form-control" name="usertype" id="usertype" required>
<option value="">Choose User Type</option>
<option value="Admin">Admin</option>
<option value="Other">Other</option>
</select>
<small id="t_error" class="form-text text-muted"></small>
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="id" id="id" />
<input type="hidden" name="btn_action" id="btn_action" />
<input type="submit" name="action" id="action" class="btn btn-info" value="Add" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</form>
</div>
</div>
jQuery
<script>
$(document).ready(function(){
$('#add_button').click(function(){
$('#user_form')[0].reset();
$('.modal-title').html("<i class='fa fa-plus'></i> Add User");
$('#action').val("Add");
$('#btn_action').val("Add");
});
var userdataTable = $('#user_data').DataTable({
"processing": true,
"serverSide": true,
"order": [],
"ajax":{
url:"user_fetch.php",
type:"POST"
},
"columnDefs":[
{
"target":[4,5],
"orderable":false
}
],
"pageLength": 25
});
$(document).on('submit', '#user_form', function(event){
event.preventDefault();
$('#action').attr('disabled','disabled');
var form_data = $(this).serialize();
$.ajax({
url:"user_action.php",
method:"POST",
data:form_data,
success:function(data)
{
$('#user_form')[0].reset();
$('#userModal').modal('hide');
$('#alert_action').fadeIn().html('<div class="alert alert-success">'+data+'</div>');
$('#action').attr('disabled', false);
userdataTable.ajax.reload();
}
})
});
$(document).on('click', '.update', function(){
var id = $(this).attr("id");//user_id
var btn_action = 'fetch_single';
$.ajax({
url:"user_action.php",
method:"POST",
data:{id:id, btn_action:btn_action},//user_id
dataType:"json",
success:function(data)
{
$('#userModal').modal('show');
$('#username').val(data.username);
$('#email').val(data.email);
$('#usertype').val(data.usertype);
$('.modal-title').html("<i class='fa fa-pencil-square-o'></i> Edit User");
$('#id').val(id);//user_id
$('#action').val('Edit');
$('#btn_action').val('Edit');
$('#password').attr('required', false);
$('#usertype').attr('required', false);
}
})
});
});
</script>
Screenshot
users.php UI
Any form of assistance will be appreciated.

Fetching from table to edit record on Modal form

I'm trying to fetch data into fields from a table to edit record on database
I use code below, but in Chrome Console i have a js error: $tr is not definited
In fact seem this line have a problem: $tr = $(this).closest('tr');
When I open modal i cant get data in fields.
Any help to fix this?
TXS
TABLE
<table class="table table-bordered table-dark">
<thead>
<tr>
<th scope="col"> ID </th>
<th scope="col"> Message</th>
<th scope="col"> Button</th>
</tr>
</thead>
<tbody>
<tr>
<td><?php echo $opportunity_follow_up_id; ?></td>
<td><?php echo $opportunity_follow_up_message; ?></td>
<td><button type="button" class="btn btn-dark edit_followup">
Edit Follow-up</button>
</td>
</tr>
</tbody>
</table>
JS
$(document).ready(function(){
$(document).on('click', '.edit_followup', function(){
$('#edit_followup').modal('show');
alert ('working!');
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function() {
return $(this).text();
}).get();
console.log(data);
$('#update_id').val(data[0]);
$('#opportunity_follow_up_message').val(data[1]);
});
});
MODAL
<div class="modal fade text-left modal-borderless" id="edit_followup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel33" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel33">New Follow-up </h4>
</div>
<form action="action/record_opportunities_follow_up.php" method="post" novalidate>
<input type="hidden" id ="opportunity_follow_up_opportunities_id" name="opportunity_follow_up_opportunities_id" value="<?php echo $opportunities_id; ?>" />
<div class="modal-body">
<div class="form-group">
<div class="controls">
<label>Follow-up Message</label>
<textarea data-length=250 class="form-control char-textarea" id="opportunity_follow_up_message" name="opportunity_follow_up_message" rows="3" placeholder="*" required data-validation-required-message="Required"></textarea>
<small class="counter-value float-right"><span class="char-count">0</span> / 250 </small>
</div>
</div>
<input type="hidden" name="update_id" id="update_id">
<div class="form-group">
<div class="controls">
<label>Next follow-up Date</label>
<input type="text" id ="opportunity_follow_up_message" name="opportunity_follow_up_message" value="" placeholder="dd-mm-aaaa" class="form-control">
</div>
</div>
<div class="form-group">
<div class="controls">
<label>Next follow-up Time</label>
<input type="text" id ="opportunity_follow_up_next_time" name="opportunity_follow_up_next_time" value="" placeholder="hh:mm:ss" class="form-control" data-mask="00:00:00">
</div>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input bg-primary" name="opportunity_follow_up_completed" id="opportunity_follow_up_completed" value="1">
<label class="custom-control-label" for="opportunity_follow_up_completed">Mark follow-up as complete</label>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" name="updatedata" value="save" class="btn btn-primary ml-1 block-page">
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block">UPDATE</span>
</button>
</div>
</form>
</div>

It seems like you have use strict in your file. And it doesn't allow you to declare variables without var, let or const
So declare your variable
Either by var, let or const
In your case you are not changing variable value so const is more preferable.
Like
const $tr = $(this).closest('tr');

how call controller through ajax and get data from into fields of modal from database?

*I am beginner so spare me. I am using code igniter. I have a table and in this table I have a button edit. When the edit button is clicked it shows a pop up modal. Main purpose of this is to update the specific row data like name password etc. That why i called modal pop up which displays a form where i want to show specific record so that i can edit that record and click update which will update the record. I just want to show the specific record as each row have its own edit button. i can change the record through php. but need to display it.
This is my modal popup and that table where the data from database is displayed.
Someone please tell what is the code to do this work. I want full ajax code so anyone who have a kind heart please write that code so that i can enter into my website. Please help. this is all i know and i have shared
Code:
<div class="modal fade bs-example-modal-lg" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="exampleModalLabel1">Update Current User</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div class="card">
<div class="card-header">
End User Info
</div>
<div class="card-body">
<form action="<?php echo base_url()."User_area/add_new_subusers"?>" method="post" id="newuserform" class="form-horizontal">
<div class="form-body">
<div class="row">
<div class="col-md-12">
<div class="form-group row">
<label class="control-label text-right col-md-5">First Name:</label>
<div class="col-md-7">
<input type="text" class="form-control" id="subufname" value="" name="subufname" placeholder="Enter First Name"></input>
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group row">
<label class="control-label text-right col-md-5">Last Name:</label>
<div class="col-md-7">
<input type="text" class="form-control" name="subulname" id="subulname" value="" placeholder="Enter Last Name"></input>
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group row">
<label class="control-label text-right col-md-5">Email:</label>
<div class="col-md-7">
<input type="text" class="form-control" id="subuemail" name="subuemail" value="" placeholder="Enter Email"></input>
</div>
</div>
</div>
<!--/span-->
<div class="col-md-12">
<div class="form-group row">
<label class="control-label text-right col-md-5">Password:</label>
<div class="col-md-7">
<input type="text" class="form-control" name="subupass" id="subupass" placeholder="New Password"></input>
</div>
</div>
</div>
<!--/span-->
<div class="col-md-12">
<div class="form-group row">
<label class="control-label text-right col-md-5">Confirm Password:</label>
<div class="col-md-7">
<input type="text" class="form-control" id="subuconfirmpass" placeholder="Confirm New Password"></input>
</div>
</div>
</div>
<!--/span-->
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" id="createnewuser" value="Update" class="btn btn-primary">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div></div>
<div class="card">
<div class="card-header">
</div>
<div class="card-body">
<div class="table-responsive m-t-40">
<table id="myTable" class="table table-bordered table-striped">
<thead style="background: #37a000; color: #fff;">
<tr>
<th>Name</th>
<th>Email/Username</th>
<th>Password</th>
<th>User Role</th>
<th>Email Notification</th>
<th>Client Access</th>
<th>Action</th>
</tr>
</thead>
<!-- ******************************Displaying Data*************************************************************** -->
<tbody>
<?php
foreach($profle as $row): ?>
<tr>
<td><?echo $row['fname']?></td>
<td><?echo $row['email']?></td>
<td><?echo $row['password']?></td>
<td><?echo $row['user_role']?></td>
<td>***</td>
<td>***</td>
<td><a class="btn btn-success" style="color:white;background-color:green;padding:0px 2px;" data-toggle="modal" data-target="#exampleModal2">edit</a></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>

Simple ajax for you . Hope it can help you
ajax script:
<script>
$(document).ready(function(){
$("#popup-button").click(function(event){
event.preventDefault();
var profle_id =$(this).children().val();
$.ajax({
url: "HERE FILE CONTROLLER",
type : 'get',
data: "id="+profle_id,
dataType : 'json',
success: function(result){ // result ='{ "fname":"John", "email":"abc#gmail", "password":"New York" , "user_role":"York" }';
$('#subufname').val(result['name']);
$('#subulname').val(result['email']);
$('#subuemail').val(result['password']);
$('#subupass').val(result['user_role']);
}
});
});
});
</script>
edit table :
<tr>
<td><?echo $row['fname']?></td>
<td><?echo $row['email']?></td>
<td><?echo $row['password']?></td>
<td><?echo $row['user_role']?></td>
<td>***</td>
<td>***</td>
<td><a class="btn btn-success" style="color:white;background-color:green;padding:0px 2px;" data-toggle="modal" data-target="#exampleModal2" id = "popup-button">edit<input type="hidden" value ="$row['id']" ></a></td>
</tr>

How to apply the reset filter in AngularJs?

//here we crate the module for the CRUD application here
var app= angular.module("myApp",[]);
app.controller("myCont", function($scope,myService){
$scope.user =[];
$scope.one = [];
//here we create the myService function for show the Dmmt array
$scope.user = myService.show();
console.log($scope.user);
//here we create the saveUser function for push the item into the list
$scope.saveUser = function(){
var data =
{
eid:$scope.user.eid,
email:$scope.user.email,
city:$scope.user.city,
salary:$scope.user.salary,
date:$scope.user.date,
}
console.log(data);
//here we create will pass the user data to the myService of the show2
$scope.user =myService.show2(data);
//Here we clear the form data with the help of the id
document.getElementById("clear").reset();
//Here we clear the form data without function
// $scope.user.eid ="";
// $scope.user.email ="";
// $scope.user.city ="";
// $scope.user.salary ="";
// $scope.user.date ="";*/
}
//Calling setParam function for the particular userDetails.
$scope.setParam = function(index){
$scope.one = $scope.user[index];
console.log($scope.one);
}
//here we delete the deleteUser function for remove the item into the lsit
$scope.deleteUser = function(index) {
$scope.result3 =myService.show3(index);
console.log($scope.result3);
}//close contrller here
$scope.clearFilter =function() {
$scope.user= "";
}
});
//Declare the services
//her e we crete the myService function in which we declare the static that will be display in the
//index.html page
app.service("myService",function(){
var employee =[];
var message="";
//here we create the show function for declare dynamic array & display in the home page of the user
this.show = function(){
employee =
[
{
eid:"Kapil sssssss",
email:"harry#yahoo.com",
salary:12000,
city:"Indore",
date:"2014-10-19",
img:"./images/download.png"
},
{
eid:"pooooo",
email:"harry#yahoo.com",
salary:5000,
city:"Us",
date:"2014-10-28",
img:"../images/user.jpg"
},
{
eid:"ddsa",
email:"harry#yahoo.com",
salary:120,
city:"Bhopal",
date:"2014-10-24",
img:"./images/avtar.jpg"
},
{
eid:"dsaddaPotter",
email:"harry#yahoo.com",
salary:1000,
city:"Agar-malwa",
date:"2014-10-29",
img:"./images/images.jpg"
},
{
eid:"sadadasdasdasdsadsads54454",
email:"harry#yahoo.com",
salary:25000,
city:"Indore",
date:"2014-10-10",
img:"./images/WP_16 September 2015_qstore.jpg"
},
{
eid:"Gotm Potter",
email:"harry#yahoo.com",
salary:2000,
city:"Playboy",
date:"2014-10-03",
img:"./images/download (1).png"
},
{
eid:"Harry a4644464654s Potter",
email:"harry#yahoo.com",
salary:35000,
city:"Agar",
date:"2014-10-19",
img:"./images/download.png"
},
{
eid:"mMayank rawal",
email:"harry#yahoo.com",
salary:5000,
city:"Ujjain",
date:"2014-10-28",
img:"../images/user.jpg"
},
{
eid:"Gotm Soni",
email:"gotm#yahoo.com",
salary:2000,
city:"Dewas",
date:"2014-10-24",
img:"./images/avtar.jpg"
},
{
eid:"Deepsh thakur",
email:"harry#yahoo.com",
salary:12000,
city:"Australia",
date:"2014-10-29",
img:"./images/images.jpg"
},
{
eid:"Peter Potter",
email:"harry#yahoo.com",
salary:5000,
city:"Harmaini",
date:"2014-10-10",
img:"./images/WP_16 September 2015_qstore.jpg"
},
{
eid:"kapil Soni",
email:"kapil#yahoo.com",
salary:2000,
city:"Playboy",
date:"2014-10-03",
img:"./images/download (1).png"
}
]
return employee;
}
//here we create the show2 function that will be received our data from the contoller
//& the push into the array of the employee
this.show2 = function(data){
employee.push(data);
message="push ho gy";
return employee;
}
//here we create the show3 function that will be remove user from the list
//& through the index of the list
this.show3 = function(index){
employee.splice(index,1); }
}
);
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="custom.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- include the angularjs files here-->
<script src="angular.min.js"></script>
<script src="jquery-1.12.4.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap.min.js"></script>
<script src="app/controller.js"></script>
<script src="app/service.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
individual files as needed -->
</head>
<body ng-controller="myCont">
<div class="jumbotron">
<div class="container">
<button type="button" class="btn btn-info btn-lg pull-right" data-toggle="modal" data-target="#myModal">Add New User</button>
<input type="checkbox" data-ng-model='ok.type1' data-ng-true-value="'Bhopal'" data-ng-false-value=''/>Bhopal
<br>
<input type="checkbox" data-ng-model='ok.type2' data-ng-true-value="'Indore'" data-ng-false-value=''/> Indore<br>
<input type="checkbox" data-ng-model='ok.type3' data-ng-true-value="'Ujjain'" data-ng-false-value=''/>Ujjain
<br>
<input type="checkbox" data-ng-model='ok.type4' data-ng-true-value="'London'" data-ng-false-value=''/>London<br>
<select ng-model="search">
<option value="Bhopal">Bhopal</option>
<option value="London">London</option>
<option value="Australia">Australia</option>
</select>
<button class="btn btn-succes btn-md pull-right" id="clear-filter" ng-click="clearFilter()" type="button">Clear Filter</button>
<a href="#"><i class="fa fa-heart" aria-hidden="true"></i>
<div class="input-group">
<input type="text" class="form-control" ng-model="search" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
<div class="alert alert-info" ng-if="message">
Info×.
</div>
<table class="table table-hover">
<thead>
<tr>
<th>User</th>
<th>EmployeenName</th>
<th>Email</th>
<th>Salary</th>
<th>City</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in filtered =(user | filter:search) | filter:ok.type1 | filter:ok.type2 | filter:ok.type3 | filter:ok.type4 | orderBy:'salary' "
onclick="document.getElementById('id01').style.display='block'"
ng-click ="setParam($index)">
<td style="max-height:61px;"><img src={{x.img}}></img></td>
<td>{{x.eid}}</td>
<td>{{x.email}} </td>
<td>{{x.salary| currency}}</td>
<td>{{x.city}}</td>
<td>{{x.date | date:'dd/mm/yy'}}</td>
<div style="float:right; margin-top:8px;">
Total Count after Filtered-{{filtered.length}}</p>
</div>
<td>
<button type="button" class="btn btn-info" ng-click="isEditForm=true;">edit</button>
</td>
<td ng-show="isEditForm">
<lable>Name</label><input ng-model="x.eid"/><br>
<lable>Email</label><input ng-model="x.email"/><br>
<lable>salary</label><input ng-model="x.salary"/><br>
<lable>city</label><input ng-model="x.city"/><br>
<lable>date</label><input ng-model="x.date"/><br>
<button ng-click="isEditForm=false;">SAVE HERE</button>
</td>
<td>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Modal -->
//here we will provide the id for clear data
<form name="newUser" id="clear" class="user" class="form-horizontal">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class ="UpperText" class="modal-title" >New User Registration</h4>
</div>
<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="eid" ng-model="user.eid" placeholder="Enter Name" ng-minlength ="3" ng-maxlength="5">
<span class="danger" ng-show="newUser.eid.$touched && newUser.eid.$pristine" class="help-block">Enter EId</span>
<span class="danger" ng-show="newUser.eid.$error.minlength" class="help-block">Enter min 3 digits.</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Email</label>
<div class="col-sm-10">
<input type="email" name="email" class="form-control" ng-model="user.email" placeholder="Enter Email" required>
<span class="danger" ng-show="newUser.email.$touched && newUser.email.$pristine" class="help-block">Enter Email</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" style="white-space: nowrap;">Select Country:</label>
<div class="col-sm-10">
<select class="form-control countries" ng-model="user.city" id="countryId sel1">
<option value="">Select City</option>
<option value="Indore">Indore</option>
<option value="Bhopal">Bhopal</option>
<option value="Ujjain">Ujjain</option>
</select>
</div>
<!-- <div class="form-group">
<label class="control-label col-sm-2">City</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="city" ng-model="user.city" placeholder="Enter city">
<span class="danger" ng-show="newUser.city.$touched && newUser.city.$pristine" class="help-block">
<span>Enter City</span>
</div>
</div> -->
<div class="form-group">
<label class="control-label col-sm-2">Salary</label>
<div class="col-sm-10">
<input type="number" class="form-control" name="salary" ng-model="user.salary" placeholder="Enter salary">
<span class="danger" ng-show="newUser.salary.$touched && newUser.salary.$pristine" class="help-block">Enter Salary</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Date</label>
<div class="col-sm-10">
<input type="date" class="form-control" name="date" ng-model="user.date" placeholder="Enter date">
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-default" data-dismiss="modal"
ng-click="saveUser()" ng-disabled="newUser.$invalid" >
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div> <!-- here model body is closed-->
</div> <!-- here model content is clo sed-->
</form>
<!-- Declare another model is declare for edit Modal -->
<!--Here we creat the delete user model for dlete the user -->
<div class="modal fade" id="myModalDelete" role="dialog">
<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">Are R Want to Delete </h4>
</div>
<div class="modal-body">
<strong style="color:blue;">
You re going to delete the {{one.eid}}</strong>
</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="deleteUser($index)">Yes
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</div>
</div> <!-- here model body is closed-->
</div> <!-- here model content is closed-->
</div>
<div class="w3-container">
<div id="id01" class="w3-modal">
<div class="w3-modal-content w3-card-8 w3-animate-left" style="max-width:600px">
<div class="w3-center"><br>
<span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn w3-hover-red w3-container w3-padding-8 w3-display-topright" title="Close Modal">×</span>
<img src="{{one.img}}" alt="Avatar" class="w3-circle w3-margin-top">
</div>
<form class="w3-container" action="form.asp">
<div class="table-responsive">
<table class="table table-striped">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th>City</th>
<th>Date</th>
</tr>
<tr>
<td>{{one.eid}}</td>
<td>{{one.email}}</td>
<td>{{one.salary}}</td>
<td>{{one.city}}</td>
<td>{{one.date}}</td>
<span class="btn btn-info">Follow Here</span>
</table>
</div>
</form>
</div>
</div>
</div>
</body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</html>
I have to apply the filter with checkbox in such case checkbox filter is working properly and list is properly filtered but after that i have click on the Reset button to reset all the JSON data but in my case all data is cleared how to do this functionality.

You need to create a deep copy of your data and then on hitting reset reassign it.
angular.copy(source, [destination]);

Validate bootstrap modal fields on click of button

I am using twitter bootstrap modal to get 'Start' and 'End' date for some course.
<div id="save_course_modal" class="modal hide fade">
<div class="modal_header_class">
<h4>Start Course</h4>
</div>
<div class="modal-body">
<label class='selector_modal_label'>Course</label>
<table class="table">
<thead>
<tr>
<th>
<p>Start date: <input type="text" id="start_date" size="30" /></p>
</th>
<th>
<p>End date: <input type="text" id="end_date" size="30" /></p>
</th>
</tr>
</thead>
</table>
</div>
<div class="modal-footer modal_footer_class">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button id='add_course' class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Start</button>
</div>
</div>
My Use Case:
I want to validate two input fields with ids 'start_date' and 'end_date'.
Since, it is not a form and hence couldn't use 'required' attribute.
I am thinking to use following:
Remove data-dismiss="modal" aria-hidden="true" from
button with id='add_course'.
Add onclick='validate_course_fields();' to above button.
If validations are fine then hide modal through $('#save_course_modal').hide();
Any better solution is appreciated.

First it would be best to avoid using tables to align the elements in modal.
<div id="save_course_modal" class="modal hide fade">
<div class="modal_header_class">
<h4>Start Course</h4>
</div>
<div class="modal-body">
<label class='selector_modal_label'>Course</label>
<div class="form-group">
<label class="control-label col-sm-2"> Start Date:</label>
<div class="col-sm-10>
<input type="text" id="start_date" class="form-control" size="30" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2"> End Date:</label>
<div class="col-sm-10>
<input type="text" id="end_date" class="form-control" size="30" />
</div>
</div>
</div>
<div class="modal-footer modal_footer_class">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button id='add_course' class="btn btn-primary">Start</button>
</div>
</div>
In your javascript code you should use the event hide of the Bootstrap that can be seen in http://getbootstrap.com/javascript/#modals
$("#add_course").click(function(e){
e.preventDefault(); //remove the default button action
//validation
if(validate_form()){
//When validation is OK
//hide modal using event of the Bootstrap
$("#save_course_modal").modal("hide");
}
})

Categories