How to change content within div with Ajax/Jquery?

Asked

Viewed 1,472 times

3

Here lists all records that when clicking edit opens a modal with description value.

<?php foreach ($beneficios as $v): ?>
                        <tr>
                            <td><?= $v->id; ?></td>
                            <td class='descricao'><?= $v->descricao; ?></td>
                            <td class="actions actions-fade">
                                <a data-toggle="modal" id="<?= $v->id; ?>" class="beneficio" data-target="#<?= $v->id; ?>"><i class="fa fa-pencil"></i></a>
                                <a href="javascript:void(0);" id="<?= $v->id; ?>" class="delete-row deletar-beneficio"><i class="fa fa-trash-o"></i></a>
                            </td>
                        </tr>

How do I change the content of td that has the Description class? By putting in it the same content that ajax is receiving, see:

function alterarBeneficio(dados) {
    $.ajax({
        url: path + 'administrador/alterarBeneficio',
        type: 'POST',
        data: {'dados': dados},
        success: function (response) {
            if (parseInt(response) === 1) {

                // Preciso colocar uma função aqui que altere o conteudo da TD, colocando o conteudo que foi passado na variavel dados, é possivel?

                $(".alterado").show(500);
                setTimeout(function () {
                    $(".alterado").fadeOut(1000);
                }, 3000);
            } else {
                console.log('ocorreu um erro!');
            }
        },
        error: function (erro, er) {
            console.log(erro, er);
        }
    });
}
javascript jquery ajax

1 answer

3


You can use two methods in jQuery:

.text
$('td.descricao').text('aqui vai o conteudo text');

.html
$('td.descricao').html('<p>Aqui vai seu <strong>HTML</strong></p>');

$(document).ready(function(){
debugger;
  $('td.descricao').text('aqui vai o conteudo text');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <td class="descricao">oi</td>
    <td>TOOOOOO</td>
  </tr>
</table>

  • I put this code $('td .Description'). text('Testandooooo'); but does not change any content when successful :/

  • @Viniciusaquino sorry, I put the separate selector, actually it is together td.descricao instead of td .descricao - updated the response

  • Now it’s gone, but it changes the content of all the tds, how can I make it change only the td the guy selected?

  • puts the whole code, where Voce fires that event? by a button? where that button is in html

  • I trigger the event in Submit that is inside a modal, I put all the code here: https://jsfiddle.net/etn8dpnz/

  • you have id on your modal right? or then on response pq in the same td as Voce has the class descricao, Vocetb has the id in it, then Voce uses it as selector ex. $('#' + response.id).text('text');

  • I’m trying to return the id but it gives Undefined: console.log(Response.id);

  • Let’s go continue this discussion in chat.

Show 3 more comments

Browser other questions tagged javascript jquery ajax

You are not signed in. Login or sign up in order to post.