Edit html + php + jquery items

1

I have to edit a record series, they are listed in a table (see):

Hereistheimageformabove:

<divclass="control-group">
                <table class="table table-bordered ">
                    <thead>
                    <tr style="backgroud-color: #2D335B">
                        <th>Nome do Envolvido</th>
                        <th>RG</th>
                        <th>Envolvimento</th>
                        <th>Opções</th>
                    </tr>
                    </thead>

                    <tbody>
                    <?php if (!$envolvidos) { ?>
                        <td colspan="5">Ainda sem envolvidos</td>
                    <?php } else {
                        foreach ($envolvidos as $r) { ?>
                                <tr>
                                    <td style="text-align: center">
                                        <input type="hidden" id="id_e" name="id_e"
                                               value="<?php echo set_value('id', $r->id); ?>">
                                        <input class="span9" type="text" id="nome_e" name="nome_e"
                                               value="<?php echo set_value('nome', $r->nome); ?>">
                                    </td>
                                    <td style="text-align: center">
                                        <input class="span6" type="text" id="rg_e" name="rg_e"
                                               value="<?php echo set_value('rg', $r->rg); ?>">
                                    </td>
                                    <td style="text-align: center">
                                        <select style="width: 120px" id="envolvimento_e" name="envolvimento_e"
                                                value="<?php echo set_value('envolvimento', $r->envolvimento); ?>">
                                            <option
                                                value="SOLICITANTE" <?php if ($r->envolvimento == 'SOLICITANTE') echo 'selected' ?>>
                                                Solicitante
                                            </option>
                                            <option
                                                value="AUTOR" <?php if ($r->envolvimento == 'AUTOR') echo 'selected' ?>>
                                                Autor
                                            </option>
                                            <option
                                                value="VITIMA" <?php if ($r->envolvimento == 'VITIMA') echo 'selected' ?>>
                                                Vítima
                                            </option>
                                            <option
                                                value="TESTEMUNHA" <?php if ($r->envolvimento == 'TESTEMUNHA') echo 'selected' ?>>
                                                Testemunha
                                            </option>
                                        </select>
                                    </td>
                                    <td style="text-align: center">
                                        <button type="button" id="enviar" class="btn btn-primary btn-lg"> Editar
                                        </button>
                                    </td>
                                </tr>
                        <?php }
                    } ?>
                    </tbody>
                    <thead>
                    <tr style="backgroud-color: #2D335B">
                        <th>Nome do Envolvido</th>
                        <th>RG</th>
                        <th>Envolvimento</th>
                        <th>Opções</th>
                    </tr>
                    </thead>
                </table>

And I've already tried putting each tr inside a form , the problem that editing only works for the first item of table does not trigger the ajax that sends to controler. See ajax:

jQuery('#enviar').click(function () {
        var id = $('#id_e').val();
        var nome = $('#nome_e').val();
        var rg = $('#rg_e').val();
        var envolvimento = $('#envolvimento_e').val();

        $.post("<?php echo base_url(); ?>index.php/sbp/editarEnvolvido",
            {'id': id, 'nome': nome, 'rg': rg, 'envolvimento': envolvimento},
            function (data) {
                alert(data);
            }, "html");

    });

For better understanding here is the function of the controller that does the editing in the database:

function editarEnvolvido(){
    $id = $_POST['id'];
    $nome = $_POST['nome'];
    $rg = $_POST['rg'];
    $envolvimento = $_POST['envolvimento'];

    if((strcmp($id,"") != 0) && (strcmp($nome,"") != 0) && (strcmp($rg,"") != 0)){
        $data = array(
            'nome'                  => $nome,
            'rg'                    => $rg,
            'envolvimento'          => $envolvimento
        );
        if ($this->sbp_model->edit('envolvidos', $data, 'id', $id) == TRUE) {
            echo 'Salvo com sucesso!';
        } else {
            echo 'Erro ao tentar salvar!';
        }
    } else {
        echo 'Nome e/ou RG deve ser informado!';
    }
}

I'd like to at least understand what's happening other lines do not trigger ajax, and I accept additional suggestions to solve my problem. Thank you in advance!

    
asked by anonymous 29.09.2016 / 16:26

1 answer

1

You can only assign a id to make bind of click , so your ajax only works on the first item, and since everyone has id every time you do shipping, no matter which line you edit, you'll always get the first one you find. So let's break it down:

Adjusting HTML

<td style="text-align: center">
    <input type="hidden" id="id_<?php echo set_value('id', $r->id); ?>" name="id_e" value="<?php echo set_value('id', $r->id); ?>">
    <input class="span9" type="text" id="nome_<?php echo set_value('id', $r->id); ?>" name="nome_e" value="<?php echo set_value('nome', $r->nome); ?>">
</td>
<td style="text-align: center">
    <input class="span6" id="rg_<?php echo set_value('id', $r->id); ?>" type="text" name="rg_e" value="<?php echo set_value('rg', $r->rg); ?>">
</td>
<td style="text-align: center">
    <select style="width: 120px" id="envolvimento_<?php echo set_value('id', $r->id); ?>" name="envolvimento_e" value="<?php echo set_value('envolvimento', $r->envolvimento); ?>">
        <option value="SOLICITANTE" <?php if ($r->envolvimento == 'SOLICITANTE') echo 'selected' ?>>
            Solicitante
        </option>
        <option value="AUTOR" <?php if ($r->envolvimento == 'AUTOR') echo 'selected' ?>>
            Autor
        </option>
        <option value="VITIMA" <?php if ($r->envolvimento == 'VITIMA') echo 'selected' ?>>
            Vítima
        </option>
        <option value="TESTEMUNHA" <?php if ($r->envolvimento == 'TESTEMUNHA') echo 'selected' ?>>
            Testemunha
        </option>
    </select>
</td>
<td style="text-align: center">
    <button type="button" onclick="enviar('<?php echo set_value('id', $r->id); ?>')" class="btn btn-primary btn-lg"> Editar
    </button>
</td>

Note that I have concatenated the id of each record so that you can actually have a ìd unique for each row. On the button, I changed to make a call of a function by passing id of which line to edit.

Editing JS

function enviar(row) {
    var id = $('#id_' + row).val();
    var nome = $('#nome_' + row).val();
    var rg = $('#rg_' + row).val();
    var envolvimento = $('#envolvimento_' + row).val();

    $.post("<?php echo base_url(); ?>index.php/sbp/editarEnvolvido",
        {'id': id, 'nome': nome, 'rg': rg, 'envolvimento': envolvimento},
        function (data) {
            alert(data);
    }, "html");
}

In this part, simply concatenate id again in the selector to bring the correct information of the line to be edited.

I think this already solves everything!

    
05.10.2016 / 16:23