Submit form to add column in table - javascript

I have a table like this:
<table id="criteria-table">
<thead>
<tr>
<th rowspan="2" class="text-center align-middle">#</th>
<th rowspan="2" class="text-center align-middle">Employee</th>
<th colspan="3" class="text-center">Order</th>
</tr>
<tr>
<th class="text-center">Priority</th>
<th class="text-center">Criteria</th>
<th class="text-center">Unit</th>
</tr>
</thead>
<tbody>
<tr class="tr_template">
<td class="text-center">1</td>
<td class="text-center">Employee A</td>
<td class="text-center">75%</td>
<td class="text-center">10</td>
<td class="text-center">order</td>
</tr>
</tbody>
</table>
And I have 2 button in the end of this table:
<a class="btn btn-add-criteria btn-sm m-btn--icon color" href="javascript:void(0)">
<i class="la la-plus"></i>ADD CRITERIA
</a>
<a class="btn btn-add-employee btn-sm m-btn--icon color" href="javascript:void(0)">
<i class="la la-plus"></i>ADD EMPLOYEE
</a>
When I click add criteria button, a popup will open to type criteria data and submit:
<div class="modal fade" id="popup-add" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content clear-form">
<!-- Body modal -->
<div class="modal-body">
<!-- Form -->
<form id="frm-add-criteria">
<div class="row">
<div class="col-lg-12">
<div class="m-form__group">
<div class="criteria-content">
<!-- Criteria -->
<div class="row modal-row">
<div class="col-12">
<label class="font-weight-bold">Criteria</label>
<div class="input-group">
<select name="kpi_criteria_id" id="kpi_criteria_id" class="form-control">
<option value="1">Order</option>
<option value="2">Contract</option>
<option value="3">Revenue</option>
</select>
</div>
</div>
</div>
<!-- Priority -->
<div class="row modal-row">
<div class="col-12">
<label class="font-weight-bold">Priority</label>
<div class="input-group">
<input type="text" class="form-control" id="priority" name="priority" placeholder="Input criteria" aria-describedby="basic-addon2">
</div>
</div>
</div>
<!-- Amount -->
<div class="row modal-row">
<div class="col-12">
<label class="font-weight-bold">Amount</label>
<div class="input-group">
<input type="text" class="form-control" id="kpi_value" name="kpi_value" placeholder="Input amount" aria-describedby="basic-addon2">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer modal -->
<div class="modal-footer">
<div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit ss--width--100">
<div class="m-form__actions m--align-right">
<button data-dismiss="modal" class="btn btn-metal bold-huy m-btn m-btn--icon m-btn--wide m-btn--md">
<span class="ss--text-btn-mobi">
<i class="la la-arrow-left"></i>
<span>CANCEL</span>
</span>
</button>
<button type="submit" onclick="" id="btn-save-criteria" class="btn btn-success color_button son-mb m-btn m-btn--icon m-btn--wide m-btn--md btn_add_close m--margin-left-10">
<span class="ss--text-btn-mobi">
<i class="la la-check"></i>
<span>SAVE</span>
</span>
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
After I submit the form in modal, it will add one more column like this for all employee row in table:
Here is my old table:
After submit form modal:
Same like this, when I click add employee, it will show a modal for me to choose employee, then it will insert one more employee row to this table with all criteria I add before.
Here is my JSFiddle to show you what I did.
I really don't know how to do this so forgive me if you feel I just give you about code not solution.
Hope you can give me a good advise to handle this.
Thank you very much!

You can use JS / JQuery DOM manipulation.
here's an example using JQuery and Bootstrap:
Table
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody id="tableBody">
<tr>
<td>John</td>
<td>Male</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Add Person
</button>
I put an id to the table body (tbody) element so I can access it directly from script side using JQuery.
Modal
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Insert Person</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<label>Name</label>
<input type="text" id="name" class="form-control">
</div>
<div class="col-md-6">
<label>Gender</label>
<select id="gender" class="form-control">
<option>Choose Gender</option>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="addPerson()" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I put id on every input for JQuery access. and since we are not to sending it to a database or another http request, there's no need for a form.
The JQuery Script:
<script>
function addPerson() {
var name = $('#name').val();
var gender = $('#gender').val();
var html = '';
html += '<tr>';
html += '<td>' + name + '</td>';
html += '<td>' + gender + '</td>';
html += '</td>';
$('#tableBody').append(html);
$('#name').val('');
$('#gender').val('Choose Gender');
}
</script>
first I make 3 variables to contain empty string, the value of name, and the value of gender. then I make a table row mock up and fill it with the values from name and gender on that empty string variable, after that I add the new data to the table using the $('#tableBody').append(html); command. and then refresh the form using $('#name').val('');and $('#gender').val('Choose Gender');. hit me up if you need more elaboration.

Related

Autocomplete other field In Modal

I need some help in modal bootstrap. I want to make autocomplete name field when I choose id column table.
I have modal script like this :
My input field is like this :
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>ID</h3>
<input type="text" name="id" onclick="return openmodal(this);"/>
</div>
<div class="col-sm-4">
<h3>Name</h3>
<input type="text" name="name"/>
</div>
</div>
</div>
My modal script like this :
<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">Modal Header</h4>
</div>
<div class="modal-body">
<table border="1" cellpadding="10" width="50%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><a class="hello" data-id="1" >1</a></td>
<td>Robert</td>
</tr>
<tr>
<td><a class="hello" data-id="2" >2</a></td>
<td>Julia</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
And then the javascript :
function openmodal(input) {
$('#myModal').modal('show');
$(".hello").unbind().click(function(event){
$(input).val($(this).attr("data-id"));
$('#myModal').modal('hide');
});
}
How to make name field can get autocomplete from id field ?
You can change the data-id value to match what you want.
function openmodal(input) {
$('#myModal').modal('show');
}
$(".hello").unbind().click(function(event) {
$("#input").val($(this).attr("data-id"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>ID</h3>
<input type="text" name="id" onclick="return openmodal(this);" />
</div>
<div class="col-sm-4">
<h3>Name</h3>
<input type="text" id="input" name="name" />
</div>
</div>
</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">Modal Header</h4>
</div>
<div class="modal-body">
<table border="1" cellpadding="10" width="50%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><a class="hello" data-id="Robert">1</a></td>
<td>Robert</td>
</tr>
<tr>
<td><a class="hello" data-id="Julia">2</a></td>
<td>Julia</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

how to pass value from dynamic table to bootstrap modal

I have created a dynamic table by fetching data from SQL using PHP. each row has an edit button that is linked to modal. I want to pass the value from table to modal so that I can edit it.
I have tried looping trough table row and able to get the values of different columns. However, every time I clicked any edit buttons, only the last of the row is being passed on to the input on modal.
here is my markup:
Modal
<div class="modal fade" id="modalCategory" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<form role="form" method="POST" action="php/add_category.php">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Category</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 type="hidden" class="form-control" name="categoryID" id="categoryID">
<label for="category">Category</label>
<input type="text" class="form-control" name="category" required id="category">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" name="submitCategory" id="submitCategory">Save</button>
</div>
</div>
</form>
</div>
</div>
Table
<table id="main-table" class="footable table table-stripped toggle-arrow-tiny default breakpoint footable-loaded" data-page-size="15">
<thead>
<tr>
<th data-toggle="true" class="footable-visible footable-first-column footable-sortable">ID<span class="footable-sort-indicator"></span></th>
<th data-hide="phone" class="footable-visible footable-sortable">Category Name<span class="footable-sort-indicator"></span></th>
<th class="text-right footable-visible footable-last-column" data-sort-ignore="true">Action</th>
</tr>
</thead>
<tbody>
<?php foreach($categories as $category){ ?>
<tr class="footable-even" style="">
<td class="footable-visible footable-first-column" id="tdCategoryID"><span class="footable-toggle"></span>
<?php echo $category['categoryID']; ?>
</td>
<td class="footable-visible" id="tdCategory">
<?php echo $cakeOrdering->escape($category['category']); ?>
</td>
<td class="text-right footable-visible footable-last-column">
<div class="btn-group">
<button class="btn-white btn btn-xs">Delete</button>
<button class="btn-white btn btn-xs" data-toggle="modal" data-target="#modalCategory" id="editCategory">Edit</button>
</div>
</td>
</tr>
<?php } ?>
</tbody>
</table>
Script
<script type="text/javascript">
$(document).ready(function () {
var table = document.getElementById("main-table");
$('#main-table tr').each(function(i, row){
var $row = $(row);
var category = $row.find('td:nth-child(2)').text().trim();
console.log(category);
$('#category').val(category);
});
});
</script>
This is the output
Output
When I tried to print values into console.
Console.log
To achieve what you require you can hook to the show.bs.modal event. In the event handler you can get a reference to the button which was clicked. You can use that reference to traverse the DOM to find the related td which holds the name of the category. Finally you can set the value of the input in the modal with that category name.
As an aside I would strongly suggest you remove the id attributes from the HTML content you create in the PHP loop as id need to be unique within the DOM. Similarly, remove the inline style attributes as styling should be places within external stylesheets.
With all that said, try this:
$('#modalCategory').on('show.bs.modal', e => {
var $button = $(e.relatedTarget);
$('#category').val($button.closest('td').prev().text().trim());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="modal fade" id="modalCategory" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<form role="form" method="POST" action="php/add_category.php">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Category</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 type="hidden" class="form-control" name="categoryID" id="categoryID">
<label for="category">Category</label>
<input type="text" class="form-control" name="category" required id="category">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" name="submitCategory" id="submitCategory">Save</button>
</div>
</div>
</form>
</div>
</div>
<table id="main-table" class="footable table table-stripped toggle-arrow-tiny default breakpoint footable-loaded" data-page-size="15">
<thead>
<tr>
<th data-toggle="true" class="footable-visible footable-first-column footable-sortable">ID<span class="footable-sort-indicator"></span></th>
<th data-hide="phone" class="footable-visible footable-sortable">Category Name<span class="footable-sort-indicator"></span></th>
<th class="text-right footable-visible footable-last-column" data-sort-ignore="true">Action</th>
</tr>
</thead>
<tbody>
<tr class="footable-even">
<td class="footable-visible footable-first-column">
<span class="footable-toggle"></span>
CategoryID_1
</td>
<td class="footable-visible">
Category 1
</td>
<td class="text-right footable-visible footable-last-column">
<div class="btn-group">
<button class="btn-white btn btn-xs">Delete</button>
<button class="btn-white btn btn-xs" data-toggle="modal" data-target="#modalCategory" id="editCategory">Edit</button>
</div>
</td>
</tr>
<tr class="footable-even">
<td class="footable-visible footable-first-column">
<span class="footable-toggle"></span>
CategoryID_2
</td>
<td class="footable-visible">
Category 2
</td>
<td class="text-right footable-visible footable-last-column">
<div class="btn-group">
<button class="btn-white btn btn-xs">Delete</button>
<button class="btn-white btn btn-xs" data-toggle="modal" data-target="#modalCategory" id="editCategory">Edit</button>
</div>
</td>
</tr>
</tbody>
</table>
You are setting value of category in input box inside each loop that's the reason last value is set. Instead you can write click event on edit button so on click of this button get category name and put it inside modal input-box.
Demo code :
$(document).ready(function() {
//on click modal buton
$(".editCategory").on("click", function() {
var category = $(this).closest("tr").find('td:nth-child(2)').text().trim(); //get cat name
$('#category').val(category); //set value
})
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="modal fade" id="modalCategory" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<form role="form" method="POST" action="php/add_category.php">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Category</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 type="hidden" class="form-control" name="categoryID" id="categoryID">
<label for="category">Category</label>
<input type="text" class="form-control" name="category" required id="category">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" name="submitCategory" id="submitCategory">Save</button>
</div>
</div>
</form>
</div>
</div>
Table
<table id="main-table" class="footable table table-stripped toggle-arrow-tiny default breakpoint footable-loaded" data-page-size="15">
<thead>
<tr>
<th data-toggle="true" class="footable-visible footable-first-column footable-sortable">ID<span class="footable-sort-indicator"></span></th>
<th data-hide="phone" class="footable-visible footable-sortable">Category Name<span class="footable-sort-indicator"></span></th>
<th class="text-right footable-visible footable-last-column" data-sort-ignore="true">Action</th>
</tr>
</thead>
<tbody>
<tr class="footable-even" style="">
<td class="footable-visible footable-first-column"><span class="footable-toggle"></span> 1
</td>
<td class="footable-visible">
abc
</td>
<td class="text-right footable-visible footable-last-column">
<div class="btn-group">
<button class="btn-white btn btn-xs">Delete</button>
<!--use class here-->
<button class="btn-white btn btn-xs editCategory" data-toggle="modal" data-target="#modalCategory">Edit</button>
</div>
</td>
</tr>
<tr class="footable-even" style="">
<td class="footable-visible footable-first-column"><span class="footable-toggle"></span> 2
</td>
<td class="footable-visible">
abcd
</td>
<td class="text-right footable-visible footable-last-column">
<div class="btn-group">
<button class="btn-white btn btn-xs">Delete</button>
<!--use class here-->
<button class="btn-white btn btn-xs editCategory" data-toggle="modal" data-target="#modalCategory">Edit</button>
</div>
</td>
</tr>
</tbody>
</table>

update and delete in the same table

in my project i have table(images). there is checkboxes column, when the user check record and press delete button record will be deleted. thats work fine.
then there is visible column(boolean) which is by default(true). So when record is checked and click hide/show button it will update visible value(from 1 to 0 or from 0 to 1)
My problem is that, delete and show/hide buttons work individually. i want both work at the same time. I don't know how combine them in the same table.
this is my view(in which only show/hide work)
<button type="submit" class="btn btn-danger" id="deleteImg"><i class="fa fa-trash"></i> Delete</button>
<form action="{{url('admin/images/hideimg')}}" method="post" class="form-inline">
{{csrf_field()}}
{{method_field('post')}}
<div class="pull-right form-group" style="padding: 12px">
<button class="btn btn-warning" id="hideImg">
Hide/Show</button>
</div>
#if($images)
<table class="table panel panel-default" id="table">
<thead class="panel-heading">
<tr>
<th><input type="checkbox" id="options"> </th>
<th>Visible?</th>
<th>photo</th>
<th></th>
</tr>
</thead>
<tbody id="tablecontents" class="panel-body">
#foreach($images as $image)
<tr class="row1" data-id="{{ $image->id }}">
<td><input class="checkboxes" type="checkbox" id="option" name="checkBoxArray[]" value="{{$image->id}}" data-imageid="{{$image->id}}"></td>
<td>{{$image->visible == 1?'yes':'no'}}</td>
<td ><img src="/uploads/{{$image->path}}" id="img" ></td>
<td>
</td>
</tr>
#endforeach
</tbody>
</table>
#endif
</form>
form action="delete/images" method="post" class="form-inline">
{{csrf_field()}}
{{method_field('delete')}}
<div class="modal fade" id="modalDelete" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog " role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" style="text-align: center" id="modalLabel">Delete Confirmation</h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h5 class="text-center">Are you sure you want to delete the following service?</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning pull-left" data-dismiss="modal">
<span class='glyphicon glyphicon-remove'></span> Close</button>
<button type="submit" class="btn btn-danger" name="delete_all" value="Delete">
<span id="" class='glyphicon glyphicon-trash'></span> Delete</button>
</div>
</div>
</div>
</div>
</form>

How to pass data to modal in Bootstrap 3?

I've tried passing data to a modal like the example from the Bootstrap documentation on my own website but it still doesn't work?
My first guess would be that it has something to do with includes or that position of each include.
I couldn't find out why it doesn't work so I hope you can help.
My modal is launched by pressing a table row. It looks like this:
<tr data-toggle="modal" data-id="' . $trans['id'] . '" data-target="#transferModal">
<td>' . $trans['id'] . '</td>
<td>' . $trans['restaurant'] . '</td>
<td>' . $trans['korer'] . '</td>
<td>' . $trans['dato'] . '</td>
<td>' . $trans['tillader'] . '</td>
</tr>
My modal looks like this:
<div class="modal fade" id="transferModal" tabindex="-1" role="dialog" aria-labelledby="transferModalLabel">
<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="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Message:</label>
<textarea 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">Send message</button>
</div>
</div>
This is the JavaScript that's controlling the data-id:
$('#transferModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('id') // Extract info from data-* attributes
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
When I click the table row, the modal opens but the data-id is not inserted anywhere.
Included files are included as listed (same order)
bootstrap.css // Included in head
style.css // Own css-file - Included in head
jquery.min.js // Included last in file
bootstrap.js // Included last in file
You overlooked that the script-tag with modal stuff was above the script-tag where jQuery was called.
I think you can try,
id = $(event.relatedTarget).attr('data-id');, which I used in one of my modals.
Perhaps you may try my answer, hope this help.
$(document).ready(function(){
$(".thehide").hide();
$(document).on("click", "table button", function(){
$("#trigger_modal").trigger("click");
$("#myModal .modal-title").html("COMPLETE INFO");
$("#myModal .modal-body").html($("#partial_container").html());
$('#myModal input[name="fullname"]').val($(this).closest("tr").find("td:nth-child(1)").text());
$('#myModal input[name="age"]').val($(this).closest("tr").find("td:nth-child(2)").text());
$('#myModal input[name="civil_status"]').val($(this).closest("tr").find("td:nth-child(3)").text());
});
});
.thehide{display: none;}
.display_table{display: table;}
.center{margin-left: auto; margin-right: auto;}
.margin_zero{margin: 0px !important;}
.text_align_center{text-align: center;}
.text_align_left{text-align: left;}
.text_transform_uppercase{text-transform: uppercase;}
.divider{height: 15px; width: 100%; clear: both; float: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table class="table table-hover">
<thead>
<tr>
<th class="text_align_left text_transform_uppercase">Full Name</th>
<th class="text_align_center text_transform_uppercase">Age</th>
<th class="text_align_center text_transform_uppercase">Gender</th>
<th class="text_align_center text_transform_uppercase">Civil Status</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="text_align_left">Full Name 1</td>
<td class="text_align_center">20</td>
<td class="text_align_center">Single</td>
<td>
<div class="display_table center">
<button class="btn btn-sucess">View</button>
</div>
</td>
</tr>
<tr>
<td class="text_align_left">Full Name 2</td>
<td class="text_align_center">15</td>
<td class="text_align_center">Widow</td>
<td>
<div class="display_table center">
<button class="btn btn-sucess">View</button>
</div>
</td>
</tr>
</tbody>
</table>
<!-- Button trigger modal -->
<button type="button" id="trigger_modal" class="thehide 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"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- the partial container -->
<div class="thehide" id="partial_container">
<form>
<fieldset>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label>FULL NAME:</label>
<input type="text" name="fullname" class="form-control" />
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label>AGE:</label>
<input type="text" name="age" class="form-control" />
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label>CIVILS STATUS:</label>
<input type="text" name="civil_status" class="form-control" />
</div>
</div>
</div>
</div>
</fieldset>
<div class="divider"></div>
<div class="display_table center">
<button class="btn btn-sucess">Save</button>
</div>
</form>
</div>

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