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
Related
I want to use modal for representing additional data on my table row contennt for this reason i use this code below , but when i press button modal doesn't pops up and i don't see any error in my browser console , what should i add to make my code work?:
<script cam-script type="text/form-script">
$scope.myFunc = function() {
$('#myModal').modal('show');
};
</script>
<h2>My job List</h2>
<div>
<table style="width:100%;" class="table table-hover" >
<thead>
<tr>
<th style="width:80px; height:px;">chose</th>
<th style="width:140px;">id</th>
<th style="width:305px;">organizationNameEN</th>
<th style="width:250px;">cardNumber</th>
<th style="width:250px;"></th>
<th style="width:250px;"></th>
</tr>
</thead>
<tbody ng-repeat="item in arr" >
<tr>
<td><input style="width:25px; height:25px;" type="checkbox" ng-model="chekselct"
cam-variable-name="isItemSelected"
cam-variable-type="Boolean" /></td>
<td><input style="width:140px;" type="text" id="id" ng-model="item.id" readonly /></td>
<td><input style="width:305px;" type="text" id="organizationNameEN" ng-model="item.organizationNameEN" /></td>
<td><input style="width:305px;" type="text" id="organizationNameGE" ng-model="item.organizationNameGE" /></td>
<td><button type="button" class="btn btn-primary" style="height:30px" data-toggle="modal" data-target="#myModal">details</button></td>
<td><button ng-click="myFunc()" role="button" class="btn btn-large btn-primary">Detail</button></td>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" ng-repeat="item in arr">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Details</h4>
</div>
<div class="modal-body">
<p ><label for="organizationNameEN"> organizationNameEN</label> : <input style="width:305px;" type="text" id="organizationNameEN" ng-model="item.organizationNameEN" /></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</tr>
</tbody>
</table>
</div>
You can open it without using angular. Replace your code ng-click="myFunc()" with data-toggle="modal" data-target="#myModal" ... It should work
try this on your button (the one with the ng-click="myFunc()"), it invokes modal without a need for explicit script.
<button role="button" class="btn btn-large btn-primary" data-toggle="modal" data-target="#myModal">Detail</button>
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>
Guys i'm generating a set of data in a table after som set of calculation.. as soon as user clicks save button excel file with that data must be generated for downloading..
What is the php code for that ..
guys the data is not retrieved from database...its being displayed after a set of calculation as been performed.
Since i dont have any idea ive not posted any related code...sry for that..
below is how my table looks like
https://ibb.co/mUMOrQ
below is my table code
<div id="myModal" class="modal fade in">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span></a>
<div class="table-title">
<h3>CUF Table</h3>
</div>
<table class="table-fill" id="tabid">
<thead>
</div>
<div class="modal-body">
<tr>
<th class="text-left">TimeStamp</th>
<th class="text-left">CUF</th>
</tr>
</thead>
<tbody class="table-hover">
<!--tr>
<td class="text-left" id="data"></td>
<td class="text-left" id="data1"></td>
</tr-->
</tbody>
</table>
</div>
<div class="modal-footer">
<div class="btn-group">
<button id="change-chart" class="btn btn-primary"><span class="glyphicon glyphicon-check"></span>Save</button>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Below is jquery that ive included to download the file
$("#BUTTON").click(function(){
$("#TABLE").table2excel({
// exclude CSS class
exclude: ".noExl",
name: "Data",
filename: "Data" //do not include extension
});
});
You can use one of the following
https://stackoverflow.com/a/38761185/5350773
http://www.jqueryscript.net/table/Export-Html-Table-To-Excel-Spreadsheet-using-jQuery-table2excel.html
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 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 -->