I can't vertically center input form in table using Twitter Bootstrap. I've found solution on the stack but it works only with plain text, doesn't work with input form (class vert-align). Do you have any suggestions?
JSFiddle
<table class="table table-striped">
<tr>
<th>
#
</th>
<th>
<i class="glyphicon glyphicon-check"></i>
</th>
<th>
Item#1
</th>
<th>
Item#2
</th>
</tr>
<div class="row">
<tr>
<div class="col-md-2">
<td class="vert-align">
1
</td>
</div>
<div class="col-md-2">
<td class="vert-align">
<input type="checkbox">
</td>
</div>
<div class="col-md-4">
<td class="vert-align">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input type="text" class="form-control" placeholder="...">
</div>
</div>
</td>
</div>
<div class="col-md-4">
<td class="vert-align">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-refresh"></i></span><input type="text" class="form-control" placeholder="...">
</div>
</div>
</td>
</div>
</tr>
</div>
<div class="row">
<tr>
<div class="col-md-2">
<td class="vert-align">
2
</td>
</div>
<div class="col-md-2">
<td class="vert-align">
<input type="checkbox">
</td>
</div>
<div class="col-md-4">
<td>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input type="text" class="form-control" placeholder="...">
</div>
</div>
</td>
</div>
<div class="col-md-4">
<td>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-refresh"></i></span><input type="text" class="form-control" placeholder="...">
</div>
</div>
</td>
</div>
</tr>
</div>
</table>
and css
.datepicker.dropdown-menu {
z-index: 1151;
}
.table tbody>tr>td.vert-align {
vertical-align: middle;
}
Related
recently m learning how to update data by using modal.i can successfully inserted data by modal but can not update before that when i press on edit button my modal pops up without fetched data.
here is my blade file with script-
<div>
<h5 style="text-align: center">Modal Practice</h5>
</div>
{{-- ................................... --}}
<div class="container">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Add data
</button>
{{-- #dd($alldata) --}}
<table id="myTable" class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Common Name</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
#foreach ($alldata as $key => $data)
<tr>
<th scope="row">{{ $key + 1 }}</th>
<td>{{ $data->first_name }}</td>
<td>{{ $data->last_name }}</td>
<td>{{ $data->common_name }}</td>
<td>
<a href="#" class="btn btn-warning btn-sm edit" data-bs-toggle="modal"
data-bs-target="#editModal">Edit</a>
Delete
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
<!-- Add Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form action="{{ route('savedata') }}" method="POST" class="row g-3">
<div class="modal-body">
#if (session()->has('success'))
<div class="alert alert-success">
{{ session()->get('success') }}
</div>
#endif
#csrf
<div class="col-md-6">
<label for="inputEmail4" class="form-label">First Name</label>
<input type="text" class="form-control" name="first_name">
</div>
<div class="col-md-6">
<label for="inputEmail4" class="form-label">Last Name</label>
<input type="text" class="form-control" name="last_name">
</div>
<div class="col-md-6">
<label for="inputEmail4" class="form-label">Common Name</label>
<input type="text" class="form-control" name="common_name">
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</form>
</div>
</div>
</div>
{{-- end Add modal --}}
<!-- Edit Modal -->
<div class="modal fade" id="editModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form action="#" method="POST" id="editForm" class="row g-3">
<div class="modal-body">
#csrf
#method('put')
<div class="col-md-6">
<label for="inputEmail4" class="form-label">First Name</label>
<input type="text" class="form-control" id="fname" name="first_name">
</div>
<div class="col-md-6">
<label for="inputEmail4" class="form-label">Last Name</label>
<input type="text" class="form-control" id="lname" name="last_name">
</div>
<div class="col-md-6">
<label for="inputEmail4" class="form-label">Common Name</label>
<input type="text" class="form-control" id="cname" name="common_name">
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Update</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
{{-- End Edit Modal --}}
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.jqueryui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var table = $('#myTable').DataTable();
table.on('click', '.edit', function() {
$tr = $(this).closest('tr');
if ($($tr).hasClass('child')) {
$tr = $tr.prev('.parent');
}
var data = table.row($tr).data();
console.log(data);
$('#first_name').val(data[1]);
$('#last_name').val(data[2]);
$('#common_name').val(data[3]);
$('#editForm').attr('action', '/savedata' + data[0]);
$('#editModal').modal('show');
});
});
</script>
here is controller-
public function update(Request $request,$id)
{
$alldata = DataSave::find($id);
$alldata->update([
'first_name'=>$request->first_name,
'last_name'=>$request->last_name,
'common_name'=>$request->common_name
]);
return redirect()->route('index')->with('success', 'Update Successful');;
}
}
and here is my route-
Route::get('/index',[SaveController::class,'index'])->name('index');
Route::post('/save',[SaveController::class,'savedata'])->name('savedata');
to get a modal pop-up with fetched data i use something like (look id=""):
<!-- Add Modal -->
<div class="modal fade" id="editModal{{ $id }}" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
aria-labelledby="staticBackdropLabel" aria-hidden="true">
</div>
And button link to modal should be like (look data-target=""):
<td>
<a href="#" class="btn btn-warning btn-sm edit" data-toggle="modal"
data-target="#editModal{{ $id }}">Edit</a>
Delete
</td>
I have a in item list in each row has an edit button, which is supposed to open a partial view with the elements data to edit.
In the loop I use to fill tge datatable, I also create the partial views for each row element.
When I click the buton it always opens the first element partial view, even if I press the Nth element.
How do I get the code to open the corresponding partial view?
Code:
<table class="table table-hover" id="tabela_rota">
<thead>
<tr>
<th>
</th>
<th>
Cliente
</th>
<th>
Rota
</th>
<th>
Distância Ideal
</th>
<th>
Ativa
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<partial>
#{await Html.RenderPartialAsync("Edit", item);}
</partial>
<tr>
<td width="15">
</td>
<td width="15%">
#Html.DisplayFor(modelItem => item.id_cliente)
</td>
<td width="25%">
#Html.DisplayFor(modelItem => item.nome)
</td>
<td width="15%">
#Html.DisplayFor(modelItem => item.distancia_ideal)
</td>
<td width="10%">
#Html.DisplayFor(modelItem => item.activa)
</td>
<td>
<button type="button" class="btn btn-outline-primary" onclick="openNavEdit()">
Editar
</button>
<button type="button" class="btn btn-outline-danger">Delete</button>
</td>
</tr>
}
</tbody>
</table>
JS Function:
function openNavEdit() {
document.getElementById("mySidepanelEdit").style.width = "350px";
}
View:
#model GestaoCircuitos.Models.Rota
#{
ViewData["Title"] = "Editar";
}
<div id="mySidepanelEdit" class="sidepanel">
<div id="top_title">
<h6 id="nova_rota">Editar Rota</h6>
<button class="closebtn" onclick="closeNavEdit()">×</button>
</div>
<div class="row form-row-rotas">
<div class="col-12">
<form asp-action="Edit" class="form-rotas">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="id" />
<div class="form-label-group">
<input id="nome" class="form-control" placeholder="Nome" />
<label asp-for="nome" class="control-label">Nome</label>
<span asp-validation-for="nome" class="text-danger"></span>
</div>
<div class="form-label-group">
<input type="text" asp-for="distancia_ideal" class="form-control" placeholder="Distância ideal" />
<label asp-for="distancia_ideal" class="control-label">Distância ideal</label>
<span asp-validation-for="distancia_ideal" class="text-danger"></span>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" asp-for="activa" /> Ativa
</label>
</div>
<div class="form-group">
<input type="submit" value="Editar" class="btn btn-primary" />
</div>
</form>
</div>
</div>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
It's because you're opening based on ID. An ID attribute needs to be unique throughout a document. If you select on an ID, you'll only get the first element.
You'll have to give each edit modal either a unique ID or a class to select from. Try this:
#model GestaoCircuitos.Models.Rota
#{
ViewData["Title"] = "Editar";
}
<div id="sidepanel-edit-#(item.id)" class=" sidepanel">
<div id="top_title">
<h6 id="nova_rota">Editar Rota</h6>
<button class="closebtn" onclick="closeNavEdit(#(item.id))">×</button>
</div>
<div class="row form-row-rotas">
<div class="col-12">
<form asp-action="Edit" class="form-rotas">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="id" />
<div class="form-label-group">
<input id="nome" class="form-control" placeholder="Nome" />
<label asp-for="nome" class="control-label">Nome</label>
<span asp-validation-for="nome" class="text-danger"></span>
</div>
<div class="form-label-group">
<input type="text" asp-for="distancia_ideal" class="form-control" placeholder="Distância ideal" />
<label asp-for="distancia_ideal" class="control-label">Distância ideal</label>
<span asp-validation-for="distancia_ideal" class="text-danger"></span>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" asp-for="activa" /> Ativa
</label>
</div>
<div class="form-group">
<input type="submit" value="Editar" class="btn btn-primary" />
</div>
</form>
</div>
</div>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
Above, we add a unique id for each edit edit form. Then we can reference those unique id attributes in the main template:
<table class="table table-hover" id="tabela_rota">
<thead>
<tr>
<th>
</th>
<th>
Cliente
</th>
<th>
Rota
</th>
<th>
Distância Ideal
</th>
<th>
Ativa
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<partial>
#{await Html.RenderPartialAsync("Edit", item);}
</partial>
<tr>
<td width="15">
</td>
<td width="15%">
#Html.DisplayFor(modelItem => item.id_cliente)
</td>
<td width="25%">
#Html.DisplayFor(modelItem => item.nome)
</td>
<td width="15%">
#Html.DisplayFor(modelItem => item.distancia_ideal)
</td>
<td width="10%">
#Html.DisplayFor(modelItem => item.activa)
</td>
<td>
<button type="button" class="btn btn-outline-primary" onclick="openNavEdit(#(item.id)">
Editar
</button>
<button type="button" class="btn btn-outline-danger">Delete</button>
</td>
</tr>
}
</tbody>
</table>
and your Javascript would look like:
function openNavEdit(id) {
document.getElementById("sidepanel-edit-" + id).style.width = "350px";
}
function closeNavEdit(id) {
document.getElementById("sidepanel-edit-" + id).style.width = "0";
}
Something to note, I'm assuming your model has an id attribute.
I have a list of buttons on a web page. I am able to get the list of buttons by using the Get Class Name function. But I am not able to iterate over it.
Here is the code:
main role="main">
<div class="wrapper">
</div>
<div class="wrapper wrapper-medium">
<header>
<h1>Unsubmitted Timesheets</h1>
<div class="clearfix">
<div class="fl-left">
<select name="" id="select-timeframe" class="hui-input"><option value="/missing_time/period/36/2018">05 Feb 2018 - 11 Feb 2018</option>
<option selected="selected" value="/missing_time/period/29/2018">This Week</option>
<option value="/missing_time/period/22/2018">22 Jan 2018 - 28 Jan 2018</option>
<option value="/missing_time/period/15/2018">15 Jan 2018 - 21 Jan 2018</option>
<option value="/missing_time/period/8/2018">08 Jan 2018 - 14 Jan 2018</option>
<option value="/missing_time/period/29/2018?all_weeks=1">- show all weeks -</option></select>
</div>
<div class="fl-right">
<button type="button" class="hui-button" data-open-dialog="email-reminder-dialog">
<i data-icon="check-green"></i>
Sending Reminder Every Friday
</button>
</div>
</div>
</header>
<section>
<form id="missing-time-form" action="/missing_time/reminders?return_to=%2Fmissing_time%2Fperiod%2F29%2F2018" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="?"><input type="hidden" name="authenticity_token" value="YmA26BT5bHy1NQKiKks+j/nKl5saFnF2fAmp/Oy6zuWANPkuuMLYTZDtdZHa/7TNh2CcUx5R2e0FsPWOxThVoQ==">
<table id="unsubmitted-timesheets" class="table">
<thead>
<tr>
<th></th>
<th>
Team Members<br>
<small>
Select:
<button type="button" class="button-link js-toggle-all-users">All</button>
/
<button type="button" class="button-link js-toggle-no-users">None</button>
</small>
</th>
<th class="text-right">Time</th>
<th></th>
</tr>
</thead>
<tbody class="has-clickable-table-rows" data-required-checkboxes="You must select at least one recipient.">
<tr class="clickable-row">
<td class="col-checkbox">
<div class="hui-checkbox">
<input name="send_reminder[1964976]" type="hidden" value="0"><input class="checkbox" aria-label="Send Reminder for Alexander Cubillos" type="checkbox" value="1" name="send_reminder[1964976]" id="send_reminder_1964976">
<label for="send_reminder_1964976"></label>
</div>
</td>
<td>
Alexander Cubillos
<span class="text-label">Contractor</span>
<label for="send_reminder_1964976" class="clickable-row-link"></label>
</td>
<td class="text-right">
24:00
<label for="send_reminder_1964976" class="clickable-row-link"></label>
</td>
<td class="col-actions">
<a class="hui-button hui-button-tiny" href="/entry/show/29/2018?of_user=1964976">View Timesheet</a>
</td>
</tr>
<tr class="clickable-row">
<td class="col-checkbox">
<div class="hui-checkbox">
<input name="send_reminder[1840318]" type="hidden" value="0"><input class="checkbox" aria-label="Send Reminder for Allain Dollete" type="checkbox" value="1" name="send_reminder[1840318]" id="send_reminder_1840318">
<label for="send_reminder_1840318"></label>
</div>
</td>
<td>
Allain Dollete
<label for="send_reminder_1840318" class="clickable-row-link"></label>
</td>
<td class="text-right">
24:30
<label for="send_reminder_1840318" class="clickable-row-link"></label>
</td>
<td class="col-actions">
<a class="hui-button hui-button-tiny" href="/entry/show/29/2018?of_user=1840318">View Timesheet</a>
</td>
</tr>
<tr class="clickable-row">
<td class="col-checkbox">
<div class="hui-checkbox">
<input name="send_reminder[1882520]" type="hidden" value="0"><input class="checkbox" aria-label="Send Reminder for Anil Khemchandani" type="checkbox" value="1" name="send_reminder[1882520]" id="send_reminder_1882520">
<label for="send_reminder_1882520"></label>
</div>
</td>
<td>
Anil Khemchandani
<span class="text-label">Contractor</span>
<label for="send_reminder_1882520" class="clickable-row-link"></label>
</td>
<td class="text-right">
0:00
<label for="send_reminder_1882520" class="clickable-row-link"></label>
</td>
<td class="col-actions">
<a class="hui-button hui-button-tiny" href="/entry/show/29/2018?of_user=1882520">View Timesheet</a>
</td>
</tr>
<tr class="clickable-row">
<td class="col-checkbox">
<div class="hui-checkbox">
<input name="send_reminder[1028098]" type="hidden" value="0"><input class="checkbox" aria-label="Send Reminder for Anna Jhaveri" type="checkbox" value="1" name="send_reminder[1028098]" id="send_reminder_1028098">
<label for="send_reminder_1028098"></label>
</div>
</td>
<td>
Anna Jhaveri
<label for="send_reminder_1028098" class="clickable-row-link"></label>
</td>
<td class="text-right">
0:00
<label for="send_reminder_1028098" class="clickable-row-link"></label>
</td>
<td class="col-actions">
<a class="hui-button hui-button-tiny" href="/entry/show/29/2018?of_user=1028098">View Timesheet</a>
</td>
</tr>
<tr class="clickable-row">
<td class="col-checkbox">
<div class="hui-checkbox">
<input name="send_reminder[1399194]" type="hidden" value="0"><input class="checkbox" aria-label="Send Reminder for Chaitanya Potluri" type="checkbox" value="1" name="send_reminder[1399194]" id="send_reminder_1399194">
<label for="send_reminder_1399194"></label>
</div>
</td>
<td>
Chaitanya Potluri
<span class="text-label">Contractor</span>
<label for="send_reminder_1399194" class="clickable-row-link"></label>
</td>
<td class="text-right">
40:00
<label for="send_reminder_1399194" class="clickable-row-link"></label>
</td>
<td class="col-actions">
<a class="hui-button hui-button-tiny" href="/entry/show/29/2018?of_user=1399194">View Timesheet</a>
</td>
</tr>
<tr class="clickable-row">
<td class="col-checkbox">
<div class="hui-checkbox">
<input name="send_reminder[1908612]" type="hidden" value="0"><input class="checkbox" aria-label="Send Reminder for Daniel Pedraza Mena" type="checkbox" value="1" name="send_reminder[1908612]" id="send_reminder_1908612">
<label for="send_reminder_1908612"></label>
</div>
</td>
<td>
I would Ideally like to click on a button got to the next page perform some action and then go back to the First Page. And then goto the next button. This action should be repeated until all the buttons are visited. I have been wracking my head around it but I have not able to come up with a solution.
I tried doing this, but it only targets the first or last button
($ie.Document.GetElementsByClassName("hui-button hui-button-tiny") |
Select-Object -First 1).Click()
($ie.Document.GetElementsByClassName("hui-button hui-button-tiny") |
Select-Object -Last 1).Click()
If I do something like this-
$ViewTimessheetObject=($ie.document.getElementsByClassName("hui-button hui-button-tiny") |Select-Object -first 1)
while($ie.Busy) { Start-Sleep -Milliseconds 100 }
($ViewTimesheetObject | ForEach-Object {$_.Click()})
It throws an error message saying that "You cannot call a method on a null-valued expression. + ($ViewTimesheetObject | ForEach-Object {$_.Click()})
Any help on this matter would be greatly appreciated.
your foreach should be for $ie.document.getElementsByClassName
($ie.document.getElementsByClassName("hui-button hui-button-tiny")) | Foreach { $_.Click()}
I'm creating an application with list of employees. An admin can see the list of employees and change their data. When he clicks "change" button, html form should be filled with chosen employee data so he could change it. I used standard mechanism in play framework but it doesn't work. I was debugging it and everything looks ok (employee data is set to form) but it doesn't display on my html form... I have no idea why...
def loadEmployee(id: Int) = Action { implicit request =>
val loadedEmployee = EmployeeService.getEmployee(id)
val employee = Await.result(loadedEmployee, Duration(5, SECONDS)).get
val employees = Await.result(EmployeeService.listAllEmployees, Duration(5, SECONDS))
val form = EmployeeForm.form.fill(EmployeeFormData(employee.name, employee.additionalInformation, employee.resume))
Ok(views.html.index(form,employees))
}
View file:
#(employeeForm: Form[models.EmployeeFormData],employees : Seq[models.Employee])
#main() {
<form id="employee-data-form" role="form" action='#routes.ApplicationController.addInformation()' method="post" class="form-horizontal" align="center" autocomplete="off">
<fieldset class="employee-fieldset">
<div class="employee-form">
<label class="form-title" style="color: #F8741B; font-size: 22px;font-weight: bold; text-decoration:none">title</label>
</div>
<br/>
<table align="center" cellspacing="20">
<tr>
<td align="left">
<div class="employee-form" id="name_field_label">
<div class="controls col-xs-offset-3 col-xs-9">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
<strong>name</strong> :
</div>
</div>
</div>
</td>
<td align="center">
<div class="employee-form" id="name_field_value">
<div class="controls col-xs-offset-3 col-xs-9">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
<input type="text" id="name" name="name" value="" placeholder="First Name" class="form-control input-lg" required>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td align="left">
<div class="employee-form" id="additionalInformation_field_label">
<div class="controls col-xs-offset-3 col-xs-9">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
<strong>Additional information</strong> :
</div>
</div>
</div>
</td>
<td align="center">
<div class="employee-form" id="additionalInformation_field_value">
<div class="controls col-xs-offset-3 col-xs-9">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
<textarea rows="4" cols="50" id="additionalInformation" name="additionalInformation" value="" class="form-control input-lg" required></textarea>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td align="left">
<div class="employee-form" id="resume_field_label">
<div class="controls col-xs-offset-3 col-xs-9">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
<strong>resume</strong> :
</div>
</div>
</div>
</td>
<td align="center">
<div class="employee-form" id="resume_field_value">
<div class="controls col-xs-offset-3 col-xs-9">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
<textarea rows="4" cols="50" id="resume" name="resume" class="form-control input-lg" required></textarea>
</div>
</div>
</div>
</td>
</tr>
</table>
<br/>
<div class="form-actions controls ynt-btn-xlarge">
<button type="submit" class="btn btn-primary ynt-btn-orange">Add</button>
</div>
</fieldset>
</form>
<div class="employee-display" >
<fieldset>
<legend align="center"><h3>Registered Employees</h3></legend>
<table cellspacing="20">
<tr>
<th>employeeid</th>
<th>firstname</th>
<th>lastname</th>
<th>resume</th>
</tr>
#for(employee <- employees){
<tr>
<td>#employee.id</td>
<td>#employee.name</td>
<td>#employee.additionalInformation</td>
<td>#employee.resume</td>
<td>delete</td>
<td>loadEmployee</td>
</tr>
}
</table>
</fieldset>
</div>
}
Your controller code looks OK - you're filling a Form[EmployeeFormData] and passing it to your template. The trouble is, you never use your employeeForm inside the template - there's no way that form can be populated.
If you read up on the Play documentation for showing forms in a view template you'll see that there is a whole family of helpers available for this purpose. In many cases, they are almost as easy to write as the "plain HTML" version such as you've used. Here's an example:
Where you had:
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
<input type="text" id="name" name="name" value="" placeholder="First Name" class="form-control input-lg" required>
</div>
You will need:
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
#helper.inputText(
employeeForm("name"),
'id -> "name",
'placeholder -> "First Name",
'class -> "form-control input-lg",
'required -> "true"
)
</div>
Notice how you can pass any number of arbitrary arguments into the generated HTML by prefixing with the ' character. This can be very handy, for example if you would like to set extra data- attributes on the input.
I am new to perl and i have a button that when a user pressed that button, the value in the configuration file will be set to default.
Here is my configuration file named config.conf :
[status]
status.state=1
status.state2=0
status.state3=1
I want the configuration above to be set as default value means that the value that is 1 or 0 will be as default value. When a user change the value, for example :
[status]
status.state=1
status.state2=1
status.state3=0
And the user pressed the default button, the value in the configuration file will be the same as shown in the first one. How can i do this? What function do i need to use?
Here is my code for the interface :
#!/usr/bin/perl
#index.cgi
require 'foobar-lib.pl';
ui_print_header(undef, $module_info{'desc'}, "", undef, 1, 1);
ui_print_footer("/", $text{'index'});
print "Content-type:text/html\n\n";
print qq~<html>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div id="content">
<div id="bar">
<span><p>Voice</p></span>
</div>
<div id="main-container">
<table width="100%" height="100%">
<tr>
<td width="30%" align="left">
<div id="title"><span>BYPASS :</span></div>
</td>
<td width="35%">
<div id="form">
<form method="POST" action="index2.cgi">
<select name="vdgpb" size="1">
<option value="bypass_a">VOC_BYPASS_A</option>
<option value="bypass_b">VOC_BYPASS_B</option>
<option value="bypass_c">VOC_BYPASS_C</option>
<option value="bypass_d">VOC_BYPASS_D</option>
</select>
</td>
<td align="left">
<input type="radio" name="pb" value="1">High (1)
</br>
<input type="radio" name="pb" value="0">Low (0)
</div>
</td>
</tr>
<tr>
<td colspan="3">
<div id="description"><b>Description :</b></div>
</td>
</tr>
<tr>
<td colspan="3">
<div id="button">
<input type="submit" value="Submit"><input type="reset" value="Clear">
</form>
</div>
</td>
</tr>
<tr>
<td wiidth="30%" align="left">
<div id="title"><span>SELECTION A :</span></div>
</td>
<div id="form">
<form method="POST" action="index3.cgi">
<td width="35%">
<select name="vdgph" size="1">
<option value="sel_a">SEL A</option>
<option value="sel_b">SEL B</option>
<option value="sel_c">SEL C</option>
<option value="sel_d">SEL D</option>
</select>
</td>
<td align="left">
<input type="radio" name="ph" value="1">High (1)
</br>
<input type="radio" name="ph" value="0">Low (0)
</div>
</td>
</tr>
<tr>
<td colspan="3">
<div id="description"><b>Description :</b></div>
</td>
</tr>
<tr>
<td colspan="3">
<div id="button">
<input type="submit" value="Submit"><input type="reset" value="Clear">
</form>
</div>
</td>
</tr>
<tr>
<td width="30%" align="left">
<div id="title"><span>IMPEDENCE</span></p>
<p><span>SELECTION :</span></p>
</div>
</td>
<div id="form">
<form method="POST" action="index4.cgi">
<td width="35%">
<select name="vdgpk" size="1">
<option value="z1_a">Z1_A</option>
<option value="z1_b">Z1_B</option>
<option value="z1_c">Z1_C</option>
<option value="z1_d">Z1_D</option>
<option value="z2_a">Z2_A</option>
<option value="z2_b">Z2_B</option>
<option value="z2_c">Z2_C</option>
<option value="z2_d">Z2_D</option>
</select>
</td>
<td align="left">
<input type="radio" name="pk" value="1">High (1)
</br>
<input type="radio" name="pk" value="0">Low (0)
</div>
</td>
<tr>
<td colspan="3">
<div id="description"><b>Description :</b></div>
</td>
</tr>
<tr>
<td colspan="3">
<div id="button">
<input type="submit" value="Submit"><input type="reset" value="Clear">
</form>
</div>
</td>
</tr>
<tr>
<td colspan="3">
<div id="button">
<form action="index5.cgi"
<input type="submit" value="Default Settings">
</form>
</div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
~;
Your CGI output is hendered as HTML in the browser so it is easiest to use an HTML component to do it for you. A reset button will do the trick.