I want to create a lookup data using Bootstrap Modal Dialog. Upon user clicked "select link" from a list of record in the Modal Dialog, the selected Client Name will be pass to textbox in the Main Page. Below is the code
HTML file (Main Page)
<script>
$(function () {
var viewModel = {
workorder: ko.observableArray(#Html.Raw(Model.WorkOrdersJSON)),
}
ko.applyBindings(viewModel);
});
</script>
#using (var form = Html.Bootstrap().BeginForm(new { #class = "form-horizontal", id = "myForm" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<div class="form-group">
#Html.Partial("_ClientInfo")
</div>
}
Html.Partial file (Modal Dialog)
<label for="inputClientName" class="col-lg-2 control-label" id="clientname" >Client Name</label>
<div class="col-lg-4">
<div class="input-group">
<input type="text" class="form-control input-sm" id="clientName">
<span class="input-group-btn">
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-sm">Search Client</a>
</span>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">List of client</h4>
</div>
<div class="modal-body">
<!-- Modal body-->
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h1 id="tables">List of Work Order</h1>
</div>
<div class="bs-example">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>#</th>
<th>Report Date</th>
<th>Category</th>
<th>Subject</th>
<th>Description</th>
</tr>
</thead>
<tbody >
<!-- ko foreach: workorder -->
<tr data-bind="click: $parent.selectTag">
<td>
<span id="test" data-bind="text: wO_Id"></span>
</td>
<td>
<span data-bind="text: wO_Date"></span>
</td>
<td>
<span data-bind="text: wO_Category"></span>
</td>
<td>
<span data-bind="text: problem_Subject"></span>
</td>
<td>
<span data-bind="text: problem_Description"></span>
</td>
<td>
Select
</td>
</tr>
<!-- /ko -->
</tbody>
</table>
</div>
<!-- /example -->
</div>
</div>
<!-- /model body -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
After spending a few hours on this issue, finally i figured it out. Below is my new code
HTML file (Main Page)
<script>
function ConfigsViewModel() {
var self = this;
this.clientinformation=ko.observableArray(#Html.Raw(Model.ClientInfoJSON));
this.Selected = ko.observable(this.clientinformation()[0]);
this.SelectConfig = function (Config) {
self.Selected(Config);
$("#clientName").val(this.clientName);
$("#hideclientId").val(this.clientId);
$('#myModal').modal('hide');
}
}
ko.applyBindings(new ConfigsViewModel());
</script>
Html.Partial file (Modal Dialog)
<label for="inputClientName" class="col-lg-2 control-label">Client Name</label><input id="hideclientId" type="hidden" />
<div class="col-lg-4">
<div class="input-group">
<input type="text" class="form-control input-sm" id="clientName">
<span class="input-group-btn">
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-sm">Search Client</a>
</span>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">List of client</h4>
</div>
<div class="modal-body">
<!-- Modal body-->
<div class="row">
<div class="col-lg-12">
<div class="bs-example">
<table class="table table-striped table-bordered table-hover" id="tableClient">
<thead>
<tr>
<th>#</th>
<th>Client Name</th>
<th>Category</th>
<th>Subject</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<!-- ko foreach: clientinformation -->
<tr data-bind="click: $parent.SelectConfig">
<td>
<span id="test" data-bind="text: clientId"></span>
</td>
<td>
<span data-bind="text: clientName"></span>
</td>
<td>
<span data-bind="text: wO_Category"></span>
</td>
<td>
<span data-bind="text: problem_Subject"></span>
</td>
<td>
<span data-bind="text: problem_Description"></span>
</td>
</tr>
<!-- /ko -->
</tbody>
</table>
</div>
<!-- /example -->
</div>
</div>
<!-- /model body -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
Related
I have an issue when i'm trying to invoque a modal form, the moment when i click the edit button i need to load the form, but nothing appear, after looking for the problem tryin to fix it , the problem still remain, i'm stucked here for today trying all solution but nothing ....
The code snippet is showing the whole code :
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title th:text="#{title}">Spring 4 MVC</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css"
href="../static/css/bootstrap.min.css"
th:href="#{css/bootstrap.min.css}"
/>
<link rel="stylesheet" type="text/css"
href="../static/css/dataTables.bootstrap4.min.css"
th:href="#{css/dataTables.bootstrap4.min.css}"
/>
<link rel="stylesheet" type="text/css"
href="../static/css/buttons.bootstrap4.min.css"
th:href="#{css/buttons.bootstrap4.min.css}"
/>
<script type="text/javascript"
src="../static/js/jquery-3.2.1.min.js"
th:src="#{js/jquery-3.2.1.min.js}"></script>
<script type="text/javascript"
src="../static/js/jquery.dataTables.min.js"
th:src="#{js/jquery.dataTables.min.js}"></script>
<script type="text/javascript"
src="../static/js/dataTables.buttons.min.js"
th:src="#{js/dataTables.buttons.min.js}"></script>
<script type="text/javascript"
src="../static/js/pdfmake.min.js"
th:src="#{js/pdfmake.min.js}"></script>
<script type="text/javascript"
src="../static/js/dataTables.bootstrap4.min.js"
th:src="#{js/dataTables.bootstrap4.min.js}"></script>
<script type="text/javascript"
src="../static/js/buttons.bootstrap4.min.js"
th:src="#{js/buttons.bootstrap4.min.js}"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable( {
} );
table.buttons().container()
.appendTo( '#example_wrapper .col-md-6:eq(0)' );
} );
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#mytable #checkall").click(function () {
if ($("#mytable #checkall").is(':checked')) {
$("#mytable input[type=checkbox]").each(function () {
$(this).prop("checked", true);
});
} else {
$("#mytable input[type=checkbox]").each(function () {
$(this).prop("checked", false);
});
}
});
$("[data-toggle=tooltip]").tooltip();
});
</script>
</head>
<body>
<div class="container">
<div th:if="${not #lists.isEmpty(produit)}">
<h2>Product List</h2>
<table id="example" class="table table-striped table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Product Id</th>
<th>Description</th>
<th>Price</th>
<th>View</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr th:each="product : ${produit}">
<td th:text="${product.idProduit}">Id</td>
<td th:text="${product.code}">code</td>
<td th:text="${product.libelle}">descirption</td>
<td th:text="${product.indice}">price</td>
<td><p data-placement="top" data-toggle="tooltip" title="Edit"><button data-title="Edit" data-toggle="modal" data-target="#edit">Edit</button></p>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading">Edit Your Detail</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input class="form-control " type="text" placeholder="Mohsin"/>
</div>
<div class="form-group">
<input class="form-control " type="text" placeholder="Irshad"/>
</div>
<div class="form-group">
<textarea rows="2" class="form-control" placeholder="CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan"></textarea>
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-warning btn-lg" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> Update</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading">Delete this entry</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-success" ><span class="glyphicon glyphicon-ok-sign"></span> Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> No</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</body>
</html>
It seems you have not included the bootstrap.min.js file try include it then it would work. Because this file has many methods like, modal, tooltip and etc.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> file.
Include that file after /jquery-3.2.1.min.js. Then it would work.
I have the following piece of code but whenever i click on edit button in data table row it throws Invalid or unexpected token error because the data has some special characters. I tried using escape() and regex functions on internet byt nothing works on my code. Plz help!
HTML code:
<!-- Main content -->
<section class="content">
<!--.modal -->
<div class="modal fade" id="modal-default">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">Edit Term</h4>
</div>
<div class="modal-body">
<form:form method="post" id="editTermForm" action="editGlossaryTerm" commandName="editedTermObj" role="form">
<div class="box-body">
<div class="form-group">
<%-- <input type="hidden" id="termId" name="termId" value="${editedTerm.termId}" /> --%>
<label for="termTitle">Term</label>
<input class="form-control" type="text" placeholder="Title of your term..." id="termTitle" name="termTitle" value="" />
<br>
<label for="termTitle">Term Description</label>
<textarea class="form-control" rows="3" placeholder="Enter description..." id="termDescription" name="termDescription" ></textarea>
</div>
</div>
</form:form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">All related terms</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<form:form id="glossaryForm" modelAttribute="glossaryFormObj">
<input type="hidden" id="termId" name="termId" />
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>S.No.</th>
<th>Term</th>
<th>Term Description</th>
<th>Created On</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<c:forEach var="glossaryTerms" items="${allGlossaryTerms}" varStatus="status">
<tr>
<td><c:out value="${status.count}" /></td>
<td><c:out value="${glossaryTerms.termTitle}" /></td>
<td><c:out value="${glossaryTerms.termDescription}" /></td>
<td ><c:out value="${glossaryTerms.termCreatedOn}" /></td>
<td align="center">
<!-- data-toggle="modal" data-target="#modal-default" -->
<a id="myBtn" href="javascript:editGlossary('${glossaryTerms.termTitle}','${glossaryTerms.termDescription}')"><i class="fa fa-pencil" style="color:OliveDrab;"></i></a>
<i class="fa fa-trash-o" style="color:#731043;"></i></td>
</tr>
</c:forEach>
</tbody>
<tfoot>
<tr>
<th>S.No.</th>
<th>Term</th>
<th>Term Description</th>
<th>Created On</th>
<th>Action</th>
</tr>
</tfoot>
</table>
</form:form>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
Javascript function called on button click:
<script>
function editGlossary(term, desc){
document.getElementById('termTitle').value=term;
document.getElementById('termDescription').value=desc;
$('#modal-default').modal('show');
}
</script>
Image of console:
No need to hardcode values on each button (what i saw in the code file you share)
As Question is tagged with jQuery, so you can easily add a jQuery library and do like below:-
$(document).ready(function(){
$('a.myBtn').on('click',function(e){
e.preventDefault();
var title = $(this).closest('tr').find("td:nth-child(2)").text();
var desc = $(this).closest('tr').find("td:nth-child(3)").text();
alert(title);
alert(desc);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr role="row" class="odd">
<td class="sorting_1">1</td>
<td>Affidavit</td>
<td>A written or printed statement made under oath.</td>
<td>2008-07-29 10:45:13.0</td>
<td align="center">
<a class="myBtn"><i class="fa fa-pencil" style="color:OliveDrab;">edit</i></a><!-- no need to hardcode values-->
<i class="fa fa-trash-o" style="color:#731043;"></i></td>
</tr>
<tr role="row" class="even">
<td class="sorting_1">2</td>
<td>Defendant</td>
<td>An individual (or business) against whom a lawsuit is filed.</td>
<td>2009-07-29 10:45:13.0</td>
<td align="center">
<a class="myBtn"><i class="fa fa-pencil" style="color:OliveDrab;">edit</i></a><!-- no need to hardcode values-->
<i class="fa fa-trash-o" style="color:#731043;"></i></td>
</tr>
</table>
I have a Bootstrap dropdown which worked fine till now.Now i have added two bootstrap modals to my code.My dropdown doesn't work after i add modals to my code.If i remove modals it just works fine.I cant figure out why.
Does this has something to do with data-toggle as i can see its the only common thing between both of them
This is my code.
<div class="my-container" ng-controller="compCategoryCtrl">
<div class="compare-table">
<div class="head-info">
<h3>Select colleges to compare</h3>
</div>
<div class="clearfix"></div>
<div class="find-colleges">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle find" type="button" data-toggle="dropdown" ng-model="selected_value1">{{selected_value1}}
<span class="caret"></span></button>
<ul class="dropdown-menu find-menu">
<li ng-repeat=" clg in college_list" ng-click="set_clg1(clg)">{{clg.college}}</li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle find" type="button" data-toggle="dropdown" ng-model="selected_value2">{{selected_value2}}
<span class="caret"></span></button>
<ul class="dropdown-menu find-menu">
<li ng-repeat=" clg in college_list" ng-click="set_clg2(clg)">{{clg.college}}</li>
</ul>
</div>
</div>
<div class=" col-md-4 go">
<button class="btn compare_buton trigger open" ng-click="fetch()">Go</button>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="nav-for-table slider close">
<div id="home">
<table class="table table-striped table-hover table-bordered">
<tr ng-repeat="(key, value) in data1[0]">
<td class="col-md-6 head-field active">{{key}}</td>
<td class="col-md-3" ng-repeat="x in data1">
{{x[key]}}
</td>
<td class="col-md-3" ng-repeat="x in data1">
{{data2[$index][key]}}
</td>
</tr>
<tr>
<td class="col-md-6 head-field active">Departments</td>
<td class="col-md-3" data-toggle="modal" data-target="#show1">
Click here to view Departments
</td>
<td class="col-md-3" data-toggle="modal" data-target="#show2">
Click here to view Departments
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="modal fade" id="show1" tabindex="-1" role="dialog" aria-hidden="true" style="display: block;z-index: 9999;margin-top: 100px;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title">Department Information</h3>
</div>
<div class="modal-body">
<table class="table table-striped" id="tblGrid">
<tr>
<th>Branch</th>
<th>Seats</th>
<th>Rating</th>
<th>Placements</th>
</tr>
<tr ng-repeat="x in dept1">
<td>{{x.branch}}</td>
<td>{{x.seats}}</td>
<td>{{x.rating}}</td>
<td>{{x.placement}}</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default " data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<div class="modal fade" id="show2" tabindex="-1" role="dialog" aria-hidden="true" style="display: block;z-index: 9999;margin-top: 100px;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title">Department Information</h3>
</div>
<div class="modal-body">
<table class="table table-striped" id="tblGrid">
<tr>
<th>Branch</th>
<th>Seats</th>
<th>Rating</th>
<th>Placements</th>
</tr>
<tr ng-repeat="x in dept2">
<td>{{x.branch}}</td>
<td>{{x.seats}}</td>
<td>{{x.rating}}</td>
<td>{{x.placement}}</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default " data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<script>
$('.trigger.open').on('click', function () {
$('.slider').removeClass('close');
});
$('.trigger.close').on('click', function () {
$('.slider').addClass('close');
});
</script>
Can somebody please help.
Remove the inline styles you have on each Modal:
style="display: block;z-index: 9999;margin-top: 100px;"
Once those are removed the modals fire as expected. I might also recommend removing the .close class from <div class="nav-for-table slider"> as that class is used by Bootstrap and might cause various display conflicts.
See this Bootply for a functional example:
https://www.bootply.com/dFixsdYLpG
im new to bootstrap and the problem that im encountering is that im unable to update the textbox found inside the modal before the user calls the dialog. I have tried everything, from updating the textbox by javascript or even by server side language c#, but nothing seems to update the textbox inside.
Here is my code:
<head id="Head1" runat="server">
<script type="text/javascript">
function func(name)
{
//triggered when modal is about to be shown
$('#edit').on('show.bs.modal', function (e) {
//get data-id attribute of the clicked element
var bookId = $(e.relatedTarget).data('id');
//populate the textbox
$(e.currentTarget).find('input[name="mohsintext"]').val(bookId);
});
}
</script>
</head>
<body>
<!--/#middle-->
<section id="middle">
<div class="container">
<div class="row">
<div class="col-md-12">
<h4>Your Cases</h4>
<div class="table-responsive">
<table id="mytable" class="table table-bordred table-striped">
<thead>
<th><input type="checkbox" id="checkall" /></th>
<th>Case Title</th>
<th>Case Description</th>
<th>Origin</th>
<%--<th>Email</th>
<th>Contact</th>--%>
<th>Edit</th>
<th>Delete</th>
</thead>
<tbody>
<asp:Repeater ID="repPeople" runat="server" >
<ItemTemplate>
<tr>
<td><input type="checkbox" class="checkthis" /></td>
<td><%# Eval("Title") %></td>
<td><%# Eval("Description") %></td>
<td><%# Eval("Origin") %></td>
<%--<td><%# Eval("First Name") %></td>
<td><%# Eval("First Name") %></td>--%>
<td><p data-placement="top" data-toggle="tooltip" title="Edit"><asp:LinkButton id="LinkButton1" runat="server" data-id="ISBN-001122" class="open-AddBookDialog btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" > <span class="glyphicon glyphicon-pencil"></span></asp:LinkButton></p></td>
<td><p data-placement="top" data-toggle="tooltip" title="Delete"><asp:LinkButton ID="LinkButton2" runat="server" class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete" ><span class="glyphicon glyphicon-trash"></span></asp:LinkButton></p></td>
</tr>
</ItemTemplate>
</asp:Repeater>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog" id="my_modal">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading">Edit Your Detail</h4>
</div>
<div class="modal-body">
<div class="form-group">
<asp:TextBox runat="server" class="form-control " type="text" id="mohsintext" name="mohsintext"/>
</div>
<div class="form-group">
<input class="form-control " type="text" placeholder="Irshad"/>
</div>
<div class="form-group">
<textarea rows="2" class="form-control" placeholder="CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan"></textarea>
<div id="myDialogText"></div>
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-warning btn-lg" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> Update</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="H1">Delete this entry</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-success" ><span class="glyphicon glyphicon-ok-sign"></span> Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> No</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</section>
<!-- Back To Top -->
<script type="text/javascript">
jQuery(document).ready(function () {
var offset = 300;
var duration = 500;
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function (event) {
event.preventDefault();
jQuery('html, body').animate({ scrollTop: 0 }, duration);
return false;
})
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#mytable #checkall").click(function () {
if ($("#mytable #checkall").is(':checked')) {
$("#mytable input[type=checkbox]").each(function () {
$(this).prop("checked", true);
});
} else {
$("#mytable input[type=checkbox]").each(function () {
$(this).prop("checked", false);
});
}
});
$("[data-toggle=tooltip]").tooltip();
});
</script>
</form>
</body>
</html>
i have used several javascript methods to try and update the textbox element,but nothing works. Note that i have removed some unnecessary code above to make it more readable, such as the link to bootstrap css files etc.
Place your script at the bottom of the document... I think jQuery is trying to bind #edit before it is rendered. Since jQuery queries the DOM to bind events, it needs to exist before the binding is attempted.
I want to edit my data from table(jsp and bootstrap), if i click on a certain edit button, a modal dialog is shown, that already has the values of the row selected. So the bootstrap dialog should contain the values of row that i clicked on.
Table :
<table id="example" class="table table-bordered table-striped">
<thead>
<tr>
<td >Type</td>
<th>Marque</th>
<th>Date fin</th>
<th>Date prochaine</th>
<th>Résoudre
</th>
</tr>
</thead>
<tbody>
<s:iterator value="%{#session['liste']}" status="userStatus">
<tr>
<td class="type" ><s:property value="type" /></td>
<td><s:property value="marque" /></td>
<td><s:date name="dt_fin" format="dd/MM/yyyy"/></td>
<td><s:date name="dt_proch" format="dd/MM/yyyy" /></td>
<td><button class="btn btn-info" onclick="resoudre()" > Résoudre</button>
</td>
</tr>
</s:iterator>
</tbody>
</table>
model :
<!-- COMPOSE MESSAGE MODAL -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><i class="fa fa-envelope-o"></i> Ajouter assurance</h4>
</div>
<s:form enctype="multipart/form-data" theme="bootstrap">
<div class="modal-body">
<div class="form-group" >
<div class="form-group"><div class="row">
<div class="col-lg-offset-3 col-md-5">
<s:textfield name="type" class="type" cssClass="form-control" label="type" id="type"></s:textfield>
</div></div>
</div></div>
<button type="submit" id="submit" class="btn btn-primary pull-left"><i class="fa fa-envelope"></i> Enregistrer</button>
</div>
</s:form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
I try with this js code :
function resoudre() {
var myModal = $("#myModal");
// now get the values from the table
var type= $(this).closest("tr").find("td.type").html();
alert(type);
// and set them in the modal:
$('.type', myModal).val(type);
// and finally show the modal
myModal.modal({ show: true });
}
My question is how can i pass values from table to model by clicking on etit button ?
You need to pass the element inside the function call:
onclick="resoudre(this)"
And in your function, use the element passed as parameter:
function resoudre(elem) {
var type= $(elem).closest("tr").find("td.type").html();
}
DEMO