简体   繁体   中英

Make table row clickable and pass a post parameter to jquery function

I have created a table and filled it with elements taken through JSTL tag and EL expression like this

<c:forEach items="${routes_list}" var="route">
    <tr>
       <td>${route.airlane}</td>
       <td>${route.aircraft_id}</td>
       <td>${route.airport_city_source.city}</td>
       <td>${route.airport_city_dest.city}</td>
       <td><fmt:formatDate value="${route.departure_date}" pattern="dd/MM/yyyy hh:mm"/></td>
       <td><fmt:formatDate value="${route.arrival_date}" pattern="dd/MM/yyyy hh:mm"/></td>
       <td>${route.travel_class}</td>
     </tr>
 </c:forEach>

what I would like to do is to make every row clickable. I have achieved this by using this function

$("tr").click(function() {
window.location.href = $(this).find("a").attr("href");
});

but my real goal is to pass to href ${route.id} in order to send a post request to a servlet and make some task. I'm not a jquery programmer so I don't know how to proceed. Thank you folks

EDIT

$(".show_reservations").click(function() { //show.reservations css class
var href  = $(this).find("a").attr("href");
$.ajax({
    cache:false,
    dataType:"html",
    data:"${route.id}="+href,
    type: "POST",
    url: "admin_show_reservations", //NAME OF THE SERVLET
    success: function(data)
             {
                //console.log(data);
                alert("success"+data);
             },
    error: function(exception)
    {
    alert("error");
    }
    });
});

HTML

<section class="area_principal">
    <h4>Voli</h4>
    <div class="body_area_principal">
        <c:choose>
            <c:when test="${!empty routes_list}">
                <table class="show_reservations">
                    <tr>
                        <th>Compagnia</th>
                        <th>ID Veivolo</th>
                        <th>Partenza</th>
                        <th>Arrivo</th>
                        <th>Ora partenza (ora locale)</th>
                        <th>Ora arrivo (ora locale)</th>
                        <th>Classe</th>
                    </tr>
                    <c:forEach items="${routes_list}" var="route">
                        <tr>
                            <td>${route.airlane}</td>
                            <td>${route.aircraft_id}</td>
                            <td>${route.airport_city_source.city}</td>
                            <td>${route.airport_city_dest.city}</td>
                            <td><fmt:formatDate value="${route.departure_date}" pattern="dd/MM/yyyy hh:mm"/></td>
                            <td><fmt:formatDate value="${route.arrival_date}" pattern="dd/MM/yyyy hh:mm"/></td>
                            <td>${route.travel_class}</td>
                        </tr>
                    </c:forEach>
                </table>
            </c:when>
            <c:otherwise>
                <p>Non ci sono voli nel sistema. Aggiungerli attraverso la voce presente nel menù sulla sinistra</p>
            </c:otherwise>
        </c:choose>
    </div>
</section>

GENERATED HTML

<section class="area_principal">
    <h4>Voli</h4>
    <div class="body_area_principal">


                <table class="show_reservations">
                    <tr>
                        <th>Compagnia</th>
                        <th>ID Veivolo</th>
                        <th>Partenza</th>
                        <th>Arrivo</th>
                        <th>Ora partenza (ora locale)</th>
                        <th>Ora arrivo (ora locale)</th>
                        <th>Classe</th>
                    </tr>

                        <tr>
                            <td>Alitalia</td>
                            <td>AZ198EG</td>
                            <td>Catania</td>
                            <td>Milan</td>
                            <td>18/06/2014 07:00</td>
                            <td>18/06/2014 08:35</td>
                            <td>Economy</td>
                        </tr>

                        <tr>
                            <td>Emirates</td>
                            <td>EA343E3</td>
                            <td>Catania</td>
                            <td>Dubai</td>
                            <td>18/06/2014 09:00</td>
                            <td>19/06/2014 05:00</td>
                            <td>Economy</td>
                        </tr>

                </table>



    </div>
</section>
$("tr").click(function() {
var href  = $(this).find("a").attr("href");
 $.ajax({
                cache:false,
                dataType:"html",
                data:"yourparameter="+href,
                type: "POST",
                url: "yourServletContextPath",
                success: function(data)
                    {
                        //console.log(data);
                        alert("success"+data);
                    },
                error: function(exception)
                    {
                    alert("error");
                    }
                });
});

"data" will contain your html type response

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM