Passing data from table to Modal Table - modal-dialog

I have two tables for my inventory first is the Item List then the Item Info
I bind the Item List to a HTML Table the add a button for each row the purpose of the button is to show the Item Info or table via modal
I have already done the table and modal design but i cant get or pass the Item ID for my Item List to my modal
can anyone help me i'm kind a new in HTML (noob hir :3)
<thead>
<tr>
<th class="text-center">Item ID</th>
<th class="text-center">Particular</th>
</tr>
</thead>
<tbody class="searchable">
<% List<Inventory.MODEL.adminView>x = new List
<Inventory.MODEL.adminView>(); Inventory.BAL.ItemBAL z = new Inventory.BAL.ItemBAL(); x = z.getAdminView().ToList(); foreach (var item in x) {%>
<tr>
<td>
<%=i tem.ID %>
</td>
<td>
<%=i tem.Particulars %>
</td>
<%}%>
<td class="text-center">
<span class='glyphicon glyphicon-info-sign'></span>
</td>
</tr>
<%} %>
</tbody>
</table>
</div>
</div>
<div id="Modal" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Item Inventory</h4>
</div>
<div class="modal-body">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th class="text-center">Item ID</th>
<th class="text-center">Total Quantity</th>
</tr>
</thead>
<tbody>
<% iteminvents(); %>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
that's my code, anyone can advice or can help me ?

Pass this in myFunction() as argument , As myFunction(this)
and inside function you can get ItemId as below. I have used jquery here.
function myFunction(sender)
{
var CurrentRow=$(sender).closest("tr");
var ItemId=$("td:eq(0)",$(CurrentRow)).html(); // Can Trim also if needed
}

Related

PartialView on each list items

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.

How to submit 2 or more values with one button in JSP Form

I have a table in which there are several rows. For instance a table with flight reservations. To delete one reservation I need to have the customer id number as well as the flight id.
Considering I have only one button to try to submit these values to my Servlet, how do I do so?
I tried hiding one button but the solution doesn't seem to work for me.
I use request.getParameter() (with 2 separate variables of course) to try to fetch both values but at the end only one is captured and the other is null. Any other ideas?
This is an example of the table I have.
flight_id customer_id
Value 1 Value 2
Form buttons :
<section class="about-info-area section-gap">
<div class="container">
<div class="row align-items-center">
<form method="post" action="/admin_reservations" id="form_reservation"></form>
<table class="table table-bordered table-striped" style="float: left;">
<caption style="text-align: center; caption-side: top"><h2>Liste des réservations</h2></caption>
<thead class="thead-dark">
<tr>
<th scope="col">N°Flight</th>
<th scope="col">N°Client</th>
<th scope="col">Flight price</th>
</tr>
</thead>
<tbody>
<% for (Reservation reservation : allReservations) { %>
<tr>
<th scope="row"><% out.println(reservation.getFlight().getFlightNum()); %></th>
<td><% out.println(reservation.getClientNum()); %></td>
<td><% out.println(reservation.getFlightPrice()); %> €</td>
<td align="center">
<input type="submit" class="btn btn-default btn-sm" name="delete_reservation_client"
form="form_reservation" onClick="window.location.reload();" hidden
value="<% out.println(reservation.getClientNum()); %>">
</input>
<button type="submit" class="btn btn-default btn-sm" name="delete_reservation_flight"
form="form_reservation" onClick="window.location.reload();"
value="<% out.println(reservation.getFlight().getFlightNum()); %>"><span
class="glyphicon glyphicon-trash"></span>
Delete
</button>
</td>
</tr>
<%}%>
</tbody>
</table>
</div>
</div>
And my Servlet :
if(request.getParameter("delete_reservation_client")!=null &&request.getParameter("delete_reservation_flight")!=null){
int delete_reservation_client = Integer.parseInt(request.getParameter("delete_reservation_client").trim());
int delete_reservation_flight = Integer.parseInt(request.getParameter("delete_reservation_flight").trim());
System.out.println("Client : " + delete_reservation_client);
System.out.println("Flight : " + delete_reservation_flight);
try {
DBUtils.deleteReservation(conn,delete_reservation_client,delete_reservation_flight);
} catch (SQLException e) {
e.printStackTrace();
}
}
Thanks in advance for any help.
Fares
Instead of button use <a> tag and attached both value which you want to delete . i.e :
<td align="center">
<a href="/admin_reservations?delete_reservation_client=<% out.println(reservation.getClientNum()); %>&delete_reservation_flight=<% out.println(reservation.getFlight().getFlightNum()); %>">
<span class="glyphicon glyphicon-trash"></span>
Delete
</a>
And in Servlet get these values in doGet method by writing i.e request.getParameter("delete_reservation_client") and request.getParameter("delete_reservation_flight")

How to send object that is retrived in a get request to a post requet | Spring Boot Thymeleaf

Let's say I have rendered the output rom the get request on an html template, now I need to use this same data to pass to a post request via a button on a same page. How do I do that?
I'm trying to do something like this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>Customer Home</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div th:replace="fragments/header :: header">
</div>
<div class="container">
<p> Thanks for booking with Gamma Airlines, here are your booking summary: </p>
<table th:object="${booking} class="table table-bordered table-striped">
<tbody>
<tr>
<td>Source</td>
<td th:text="${routeStart}"></td>
</tr>
<tr>
<td>Destination</td>
<td th:text="${routeDestination}"></td>
</tr>
<tr>
<td>Booking Charges</td>
<td th:text="${bookingCharges}"></td>
</tr>
<tr>
<td>Booking Charges Currency</td>
<td th:text="${chargesCurrency}"></td>
</tr>
<tr>
<td>Booking Date</td>
<td th:text="${#calendars.format(bookingDate)}">July 11, 2012 2:17:16 PM CDT</td>
<tr>
<td>
<div class="col-sm-9">
<form action="#" th:action="#{/email}"
th:object="${booking}" method="post"
role="form">
<button type="submit" class="btn btn-primary btn-block">Email</button>
</form>
</div>
</td>
<td>
<div class="col-sm-9">
<form action="#" th:action="#{/genpdf}"
th:object="${booking}" method="post"
role="form">
<button type="submit" class="btn btn-primary btn-block">Generate PDF</button>
</form>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Edit: Somebody please help tell me a simple method to pass the object since I have to use it at many places and object contains many child object as well in some cases. eg. the following case:
<div style = "margin-top: 2cm" class="container">
<table class="table table-bordered table-striped">
<thead>
<tr>
<td>Source</td>
<td>Destination</td>
<td>Amount</td>
<td>Currency</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<tr th:if="${offers.empty}">
<td colspan="5">No Offers</td>
</tr>
<tr th:each="offer : ${offers}">
<td th:text="${offer.route.from}"></td>
<td th:text="${offer.route.to}"></td>
<td th:text="${offer.price.amount}"></td>
<td th:text="${offer.price.currency}"></td>
<td>
<form action="#" th:action="#{/user/booking}"
th:object="${offer}" method="post"
role="form">
<button type="submit" class="btn btn-primary btn-block">Book</button>
</form>
</td>
</tr>
</tbody>
</table>
</div>
UPDATE 2:
I even changed the template by sending a new object in the get request and try to assign values one by one but I still get it as null in a controller.
<table class="table table-bordered table-striped">
<thead>
<tr>
<td>Source</td>
<td>Destination</td>
<td>Amount</td>
<td>Currency</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<tr th:if="${offers.empty}">
<td colspan="5">No Offers</td>
</tr>
<tr th:each="offer : ${offers}">
<td th:text="${offer.route.from}"></td>
<td th:text="${offer.route.to}"></td>
<td th:text="${offer.price.amount}"></td>
<td th:text="${offer.price.currency}"></td>
<td>
<form action="#" th:action="#{/user/booking}"
th:object="${booking}" method="post"
role="form">
<input type="hidden" th:attr="value = ${offer.route.from}" th:field="*{routeStart}" />
<input type="hidden" th:attr="value = ${offer.route.to}" th:field="*{routeDestination}" />
<input type="hidden" th:attr="value = ${offer.price.amount}" th:field="*{bookingCharges}" />
<input type="hidden" th:attr="value = ${offer.price.currency}" th:field="*{chargesCurrency}" />
<button type="submit" class="btn btn-primary btn-block">Book</button>
</form>
</td>
</tr>
</tbody>
</table>
These are my get and post methods:
#RequestMapping(value="/user/booking", method = RequestMethod.GET)
public ModelAndView getOffers()
{
ModelAndView modelAndView = new ModelAndView();
AirlineOffer[] offersArray= airlineClient.getOffers();
List<AirlineOffer> offers = Arrays.asList(offersArray);
modelAndView.addObject("offers", offers);
Booking booking = new Booking();
modelAndView.addObject("booking", booking);
modelAndView.setViewName("user/booking");
return modelAndView;
}
/** POST method for submitting deposit request */
#RequestMapping(value = "/user/booking", method = RequestMethod.POST)
public ModelAndView book(#Valid Booking booking,
BindingResult bindingResult, HttpServletRequest request)
{
ModelAndView modelAndView = new ModelAndView();
......
}
Alright, I finally resolved it using the following in my form:
<table class="table table-bordered table-striped">
<thead>
<tr>
<td>Source</td>
<td>Destination</td>
<td>Amount</td>
<td>Currency</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<tr th:if="${offers.empty}">
<td colspan="5">No Offers</td>
</tr>
<tr th:each="offer, stat : ${offers}">
<td th:text="${offer.route.from}"></td>
<td th:text="${offer.route.to}"></td>
<td th:text="${offer.price.amount}"></td>
<td th:text="${offer.price.currency}"></td>
<td>
<form action="#" th:action="#{/user/booking}"
th:object="${booking}" method="post"
role="form">
<input type="hidden" th:value="${offer.route.from}" name="routeStart" />
<input type="hidden" th:value = "${offer.route.to}" name="routeDestination" />
<input type="hidden" th:value = "${offer.price.amount}" name="bookingCharges" />
<input type="hidden" th:value = "${offer.price.currency}" name="chargesCurrency" />
<button type="submit" class="btn btn-primary btn-block">Book</button>
</form>
</td>
</tr>
</tbody>
All it took was to remove th:field and add the name attribute.

MVC 5 - Open popup on table row click with passing viewmodel

I'm having a table in an MVC view like this:
#model FoodCalculator.Models.MealViewModel
#{
ViewBag.Title = "Show Meals";
}
<h2>Meals</h2>
<table class="table table-striped table-hover mealDetailsTable">
<thead>
<tr>
<th>
No
</th>
<th>
Meal name
</th>
<th>
Meal type name
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.Meals)
{
<tr id="tableRowClick" data-toggle="modal" data-id="#item.Value" data-target="#mealModal">
<td>
#Html.DisplayFor(modelItem => item.Value.MealID)
</td>
<td>
#Html.DisplayFor(modelItem => item.Value.MealName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Value.MealType.MealTypeName)
</td>
<td>
<button class="btn btn-primary" data-toggle="modal" data-target="#mealModal">Details</button>
}
</tbody>
</table>
And on a row click popup shows up :
#model FoodCalculator.Models.MealViewModel
<div class="modal fade" id="mealDetails" style="display: none; border: 5px solid black; padding: 10px;" role="dialog" aria-labelledby="CmapModalLabel" 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">Meal details</h4>
</div>
<div class="modal-body">
<input type="text" id="mealID" name="mealDetail" style="display: none;" />
#if (Model != null)
{
<h3> Meal id : #Model.SelectedMealID</h3>
#Html.Action("ShowMealDetails", "Home", new { mealID = Model.SelectedMealID })
}
Close
Save changes
This is all enabled by the javascript :
$('.mealDetailsTable').find('tr[data-id]').on('click', function () {
$('#mealDetails').modal('show');
var getIdFromRow = $(event.target).closest('tr').data('id');
$("#mealID").val(getIdFromRow);
});
And what I'm trying to do is passing viewmodel with currently clicked row data to a popup, so I could perform further actions.
Please help!!!!
Your code has issues. You are trying to generate and create a popup HTML for each of the table rows. But the id of 'data-target' attribute remains the same i.e "#mealModal". What this means is, your popup would be binded by default to the first row of the table. You need to dynamically generate and assign an if to the data-target attribute.
View.cshtml
#model FoodCalculator.Models.MealViewModel
#{
ViewBag.Title = "Show Meals";
var modelPopupId = "#mealModal" + item.Value.MealID; // Considering MealID is unique
var modelPopupReferenceId = "#"+ modelPopupId;
}
// Inside <tbody> element
#foreach (var item in Model.Meals)
{
<tr id="tableRowClick" data-toggle="modal" data-id="#item.Value" data-target="#modelPopupReferenceId">
// All other html elements
}
Popup
div class="modal fade" id="#modelPopupId" style="display: none; border: 5px solid black; padding: 10px;" role="dialog" aria-labelledby="CmapModalLabel" aria-hidden="true">

sahi and table operations

For a given table, I'd like to get the below
total number of rows
able to iterate over by row and column
using the Java Driver. I tried the option mentioned here with no luck.
Below is the HTML for table
<div id="hawkMessageCodeTable" class="ui-datatable ui-widget">
<table>
<thead>
<tr>
<th id="hawkMessageCodeTable:j_idt49" class="ui-state-default">
<div class="ui-dt-c">
<span>Code</span>
</div>
</th>
<th id="hawkMessageCodeTable:j_idt51" class="ui-state-default">
<div class="ui-dt-c">
<span>Message</span>
</div>
</th>
</tr>
</thead>
<tbody id="hawkMessageCodeTable_data" class="ui-datatable-data ui-widget-content">
<tr data-ri="0" class="ui-widget-content ui-datatable-even">
<td>
<div class="ui-dt-c">
9005
</div>
</td>
<td>
<div class="ui-dt-c">
Initial Fraud Alert on File
</div>
</td>
</tr>
<tr data-ri="1" class="ui-widget-content ui-datatable-odd">
<td>
<div class="ui-dt-c">
9003
</div>
</td>
<td>
<div class="ui-dt-c">
Security Alert or consumer statement on file relates to true name fraud or credit fraud
</div>
</td>
</tr>
<tr data-ri="2" class="ui-widget-content ui-datatable-even">
<td>
<div class="ui-dt-c">
2501
</div>
</td>
<td>
<div class="ui-dt-c">
Input/File (Current/Previous) Address Has Been Used (#) Times In The Last (30,60,90) Days On Different Inquiries
</div>
</td>
</tr>
<tr data-ri="3" class="ui-widget-content ui-datatable-odd">
<td>
<div class="ui-dt-c">
9004
</div>
</td>
<td>
<div class="ui-dt-c">
Active Duty Alert on File
</div>
</td>
</tr>
</tbody>
</table>
</div>
I have implemented a similar function with sahi for ruby. To answer your questions:
rowLen = table.fetch("rows.length").to_i
Loop through all the cells with:
#browser.cell(table,rowIndex,colIndex).exists?()
You can find the corresponding api for sahi java