How to add a jquery dialog for each row in a html table?

Question

I'm trying to add a jQuery dialog in each row of a table, using jQuery, and dataTables plugin. I want to add in the dialog data specific to each row. I've seen in other post that you can think of two ways: 1) One dialog for each row. 2) Only one dialog for all the rows, and then fill it with specific data.

In this example, I have a list of courses in a table, with name(nombre), code(codigo), and mode(modo). For each row, there is a button (modificar) that should show a dialog to edit the data for that course. Of course, in each dialog, must be loaded the data of that row.

My idea (viewed other ideas in other post) is to put the dialog inside the row, so I can load the data from that row.

I created a class (masInfo) and in the Javascript code, I put a function that should open the dialog after the button is. But it doesn't work.

Do you have any idea? Thanks.

HTML Y JSP

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <link type="text/css"
                href="css/milk.css" rel="stylesheet" />
    <title>Paginadores tablas</title>
    </head>
    <body>
        <%
            CatalogoCursos catalogoCursos = CatalogoCursos.getCatalogoCursos();
            ArrayList<Curso> cursos = catalogoCursos.getCursos();
        %>
        <div id="miTabla">
            <form id="formulario" name="formulario" method="post">
                <table id="tabla">
                    <thead>
                        <tr>
                            <th>Nombre </th>
                            <th>Código </th>
                            <th>Modo de juego </th>
                            <th> Acción </th>
                        </tr>
                    </thead>
                    <tbody>
                    <%
                        for(Curso curso: cursos) {
                    %>
                        <tr>
                            <td><%=curso.getNombre()%></td>
                            <td><%=curso.getCodigo()%></td>
                            <td><%=curso.getStringModo()%></td>
                            <td> 
                                <input type="button" class="masInfo" value="modificar"/>
                                <div title="Modificar curso">
                                    <table>
                                        <tr>
                                            <td><input type="text" name="mod_nombre" value="<%=curso.getNombre()%>"/></td>
                                            <td><input type="text" name="mod_codigo" value="<%=curso.getCodigo()%>"/></td>
                                            <td><input type="text" name="mod_modo" value="<%=curso.getStringModo()%>"/></td>
                                        </tr>
                                    </table>
                                </div> 
                            </td>
                            </td>
                        </tr>
                    <%
                        }
                    %>
                    </tbody>
                </table>
            </form>
        </div>

    </body>
    </html>

JAVASCRIPT

<script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-ui.custom.js"></script>
    <script type="text/javascript" src="js/jquery.dataTables.js"></script>
    <script type="text/javascript">
    (function($) {
        // Dialog
        $('.masInfo').next().dialog({
            autoOpen: false,
            width: 600,
            buttons: {
                "Borrar": function() {
                    document.formulario.submit();
                    $(this).dialog("close");
                },
                "Cancelar": function() {
                    $(this).dialog("close");
                }
            }
        });

        // Dialog Link
        $('.masInfo').click(function(){
            $('#dialog').dialog('open');
            return false;
        });
    });

William Niu · Accepted Answer · 2012-09-23 11:38:06Z

You are much better off using just one dialog and populate the relevant information in the dialog on the button click. The way you currently do it will result in a lot of duplicated input elements.

So, the HTML would look like:

<div id="miTabla">
    <table id="tabla">
        <thead>
            <tr>
                <th>Nombre </th>
                <th>Código </th>
                <th>Modo de juego </th>
                <th> Acción </th>
            </tr>
        </thead>
        <tbody>
        <%
            for(Curso curso: cursos) {
        %>
            <tr>
                <td><%=curso.getNombre()%></td>
                <td><%=curso.getCodigo()%></td>
                <td><%=curso.getStringModo()%></td>
                <td> 
                    <input type="button" class="masInfo" value="modificar"/>
                </td>
                </td>
            </tr>
        <%
            }
        %>
        </tbody>
    </table>
</div>
<div title="Modificar curso" id="ModificarDialog">
    <form id="formulario" name="formulario" method="post">
        <table>
            <tr>
                <td><input type="text" name="mod_nombre" id="mod_nombre" /></td>
                <td><input type="text" name="mod_codigo" id="mod_codigo" /></td>
                <td><input type="text" name="mod_modo" id="mod_modo" /></td>
            </tr>
        </table>
    </form>
</div>

JavaScript would change to:

(function($) {
    // Dialog
    $('#ModificarDialog').dialog({
        autoOpen: false,
        width: 600,
        buttons: {
            "Borrar": function() {
                document.formulario.submit();
                $(this).dialog("close");
            },
            "Cancelar": function() {
                $(this).dialog("close");
            }
        }
    });

    // Dialog Link
    $('.masInfo').click(function(){
        var cells = $(this).parent().find('td');
        $('#mod_monbre').val(cells.eq(0).text());
        $('#mod_codigo').val(cells.eq(1).text());
        $('#mod_modo').val(cells.eq(2).text());
        $('#dialog').dialog('open');
        return false;
    });
});

Thank you, good response! Yes, it's better using only one dialog, the other way is repeated too many variables.

Collectives™ on Stack Overflow

How to add a jquery dialog for each row in a html table?

HTML Y JSP

JAVASCRIPT

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML Y JSP

JAVASCRIPT

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related