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>
Related
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.
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>
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>
I am trying to create a page that has multiple tabs. In each tab, there is a table and on each row there is a button that opens up a modal. My code works fine as long as only one of my tabs have a modal. However, once I have 2 tabs or more with modals, the content of both tabs will show up on one page, instead of being separated into separate tabs.
Here is my code:
edit-profile.ejs:
<ul class="nav nav-tabs tabs-left">
<li class="active">Edit 1</li>
<li>Edit 2</li>
</ul>
<!-- Tab content -->
<div class="col-xs-9">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="edit1">
<div id="edit1">
<% include ./partials/edit-profile/_edit1%>
</div>
</div>
<div class="tab-pane" id="edit2">
<div id="edit2">
<% include ./partials/edit-profile/_edit2%>
</div>
</div>
<center><button type="submit" class="btn btn-default" data-toggle="modal" data-target=".bd-example-modal-sm">Submit</button></center>
In my _edit1.ejs partial, I have:
<table id="edit1-table" class="table table-striped table-bordered order-table dt-responsive">
<thead>
<tr>
<th>User ID</th>
<th>Email</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit1-modal"></span> User 1</td>
<td>user1#test.com</td>
<td>Address1</td>
</tr>
<tr>
<td> <span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit1-modal"></span> User 2</td>
<td>user2#test.com</td>
<td>Address2</td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div id="edit1-modal" 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"> Edit 1 </h4>
</div>
<div class="modal-body">
<% include ./_edit1-form %>
<div class="modal-footer">
<button type="submit" class="btn btn-default pull-left">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#edit1-table').DataTable();
} );
</script>
In _edit2.ejs, I have similar content:
<table id="edit2-table" class="table table-striped table-bordered order-table dt-responsive">
<thead>
<tr>
<th>User ID</th>
<th>Email</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit2-modal"></span> User 1</td>
<td>user1#test.com</td>
<td>Address1</td>
</tr>
<tr>
<td> <span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit2-modal"></span>User 2</td>
<td>user2#test.com</td>
<td>Address2</td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div id="edit2-modal" 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"> Edit 2 </h4>
</div>
<div class="modal-body">
<% include ./_edit2-form %>
<div class="modal-footer">
<button type="submit" class="btn btn-default pull-left">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#edit2-table').DataTable();
} );
</script>
Can anybody help me figure out why my tables are showing up on the same page when both tabs have modals? The modals have different IDs.
Here, it's working
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs tabs-left">
<li class="active">Edit 1</li>
<li>Edit 2</li>
</ul>
<!-- Tab content -->
<div class="col-xs-9">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="edit1">
<div id="edit1">
<table id="edit1-table" class="table table-striped table-bordered order-table dt-responsive">
<thead>
<tr>
<th>User ID</th>
<th>Email</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit1-modal"></span> User 1</td>
<td>user1#test.com</td>
<td>Address1</td>
</tr>
<tr>
<td> <span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit1-modal"></span> User 2</td>
<td>user2#test.com</td>
<td>Address2</td>
</tr>
</tbody>
</table>
<div id="edit1-modal" 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"> Edit 1 </h4>
</div>
<div class="modal-body">
<% include ./_edit1-form %>
<div class="modal-footer">
<button type="submit" class="btn btn-default pull-left">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="edit2">
<div id="edit2">
<table id="edit2-table" class="table table-striped table-bordered order-table dt-responsive">
<thead>
<tr>
<th>User ID</th>
<th>Email</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit2-modal"></span> User 1</td>
<td>user1#test.com</td>
<td>Address1</td>
</tr>
<tr>
<td> <span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit2-modal"></span> Microsoft</td>
<td> User 2</td>
<td>user2#test.com</td>
<td>Address2</td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div id="edit2-modal" 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"> Edit 2 </h4>
</div>
<div class="modal-body">
<% include ./_edit2-form %>
<div class="modal-footer">
<button type="submit" class="btn btn-default pull-left">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<center>
<button type="submit" class="btn btn-default" data-toggle="modal" data-target=".bd-example-modal-sm">Submit</button>
</center>
</div>
</body>
</html>
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>