I'm trying to show a form inside a fancybox but i can't get it to show something.
I dont get how this fancybox works.
My code looks like this:
Show Fancybox
<div id="divForm" >
<form action="code_eingabe.php" method="post">
<table >
<tr>
<td colspan="2"><h1>E575 - Gewinnspiel</h1></td>
</tr>
<tr>
<td colspan="2"><?php if(isset($text)){echo $text;} ?></td>
</tr>
<tr>
<td><input type="text" name="code"/></td>
<td><input type="submit" name="submit" value="submit!"/></td>
</tr>
</table>
</form>
</div>
You have to wrap your content with a div that has display: none
<div id="divForm" style="display: none">
<-- put your content here -->
</div>
EDIT
to pop up : see this sample of a popped up fancybox content when register :
$("#Register").click(function() {
if($(this).is(':checked')) {
alert("This is a fancybox! Register here.")
$('#CheckoutOptions').fancybox('');
}
})
Related
<form data-request="onSend" data-request-update="'{{ __SELF__}}::attbanco': '#banco' "
data-request-flash >
<table>
<tr>
<td>Nome: </td> <td ><input type="text" id="nome" name="nome"></td>
</tr>
<tr>
<td>Idade: </td> <td ><input type="number" id="idade" name="idade" value="{{usuario.idade}}"></td>
</tr>
<tr>
<td>Telefone: </td> <td ><input type="text" id="telefone" name="telefone" value="{{usuario.telefone}}"></td>
</tr>
</table>
<button type="submit" >Enviar</button>
<input type="hidden" value="{{usuario.id}}" name="id">
this code work, saves the values on database, but i need manually refresh page to see the result on my
screen, someone know how refresh after submit?
Please, explain most simple possible, i am newbie
The best way to do what you want is to put the form in a partial and update it when the form is submitted.
Replace your form with this:
<div id="specialForm">
{% partial __SELF__~"::specialForm" %}
</div>
Create a partial to describe the form; I used specialForm. It should reload the form and clear the content.
<form data-request="onSend" data-request-update="'{{ __SELF__}}::attbanco': '#banco', '{{ __SELF__ }}::specialForm': '#specialForm' "
data-request-flash >
<table>
<tr>
<td>Nome: </td> <td ><input type="text" id="nome" name="nome"></td>
</tr>
<tr>
<td>Idade: </td> <td ><input type="number" id="idade" name="idade" value="{{usuario.idade}}"></td>
</tr>
<tr>
<td>Telefone: </td> <td ><input type="text" id="telefone" name="telefone" value="{{usuario.telefone}}"></td>
</tr>
</table>
<button type="submit" >Enviar</button>
<input type="hidden" value="{{usuario.id}}" name="id">
</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")
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.
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
}
I have tried jqtouch and I have trouble getting a form with php to work in Safari. Nothing happens when I press submit in Safari but It works in Explorer. I tried to change input type from submit to button but it didn't help. How should I change my code?
<?php
function test1()
{
if (isset($_POST['submit'])){
$test = $_POST['test'];
echo $test;
}
}
?>
<form action="#" method="post" class="form">
<table>
<br />
<tr>
<td><label for="test">Test:</label></td>
</tr>
<tr>
<td><input type="text" name="test"></td>
</tr>
<tr>
<td><br /><input type="submit" name="submit" class="submit" value="Press"></td>
</tr>
</table>
</form>