We help IT Professionals succeed at work.

Could you point why this HTML textarea is not actualized when changing the pictures since JS scripts shows it has changed?

Eduardo Fuerte
Eduardo Fuerte asked
on
9 Comments
1 solution
Medium Priority
53 Views
Last Modified: 2020-02-15
Hi Experts

Could you point why this HTML textarea is not actualized when changing the pictures since JS scripts shows it has changed?

Accordingly to:

 img002
What occurs is:
img003
Page Code:
  <div class="modal fade" id="mMidiaEditar" tabindex="-1" role="dialog" aria-labelledby="mMidiaEditarLabel">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="mMidiaEditarLabel">Mídia</h4>
        </div>
        <div class="modal-body">
          {{ csrf_field() }}
          <input type='hidden' id='id'/>
          <div class='form-group'>
            <label for='tituloEditar'>Título:</label>
            <input type='text' class='form-control' id='tituloEditar' name='tituloEditar'/>
          </div>

<!--  --->
          <div class='form-group'>
            <label for='descricaoEditar'>Descrição X:</label>
            <textarea class='form-control' id='descricaoEditar' name='descricaoEditar' rows="5"></textarea>
          </div>
<!--  --->

          <div class='form-group'>
            <label for='tipoparticipanteEditar'>Perfil:</label>
            <select id='tipoparticipanteEditar' name='tipoparticipanteEditar' class='form-control'>
              <option value='0'>Para todos os perfis</option>
              @foreach($tipoparticipantes as $tipoparticipante)
                <option value="{{ $tipoparticipante->id}}">{{ $tipoparticipante->nome}}</option>
              @endforeach
            </select>
          </div>

        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fas fa-times" aria-hidden="true"></i> Fechar</button>
          <button type="submit" class="btn btn-primary" onclick='hotsite.vitrine.atualizar();'><i class="fas fa-hdd" aria-hidden="true"></i> Salvar</button>
        </div>
      </div>
    </div>
  </div>

Open in new window


JS Code:
Vitrine.prototype.editarAdmin = function(id){
  $.ajax(
    {
        url: '/admin/vitrine/'+id+"/obter",
        method: "GET",
        error: function () {
          hotsite.openModalCustom("Erro", "Erro ao obter dados da vitrine.", "Entendi", "error");
        },
        success: function (data) {
          id = data.retorno.id;
          titulo = data.retorno.titulo;
          
    
          descricao = data.retorno.descricao;
          tipoparticipante_id = data.retorno.tipoparticipante_id;
          
          
          console.log(descricao);
          
          $('#id').val(id);
          $("#tituloEditar").val(titulo);
          $('#descricaoEditar').val(descricao);
          
          
          $('#tipoparticipanteEditar').val(tipoparticipante_id);
          //tinyMCE.get('descricaoEditar').setContent(descricao);
          hotsite.openModal('mMidiaEditar');
        }
    });
}

Open in new window



Thanks in advance.
Comment
Watch Question

View Solution Only

Chris StanyonWebDev
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Hey Eduardo,

I think you'll find that a texarea doesn't have a val(), so you should use text() or html() instead:

$('#descricaoEditar').html(descricao);

Open in new window

Eduardo FuerteDeveloper and Analyst

Author

Commented:
Hi Chris


Amazingly after your suggestion the content is actualized for the 1st time and then at every picture changing it's not actualized...
img004
Chris StanyonWebDev
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
OK. I would suggest you console.log the whole data response and see what you're getting back from your server:

success: function (data) {

    console.log(data.retorno);

    id = data.retorno.id;
    titulo = data.retorno.titulo;
    descricao = data.retorno.descricao;
    tipoparticipante_id = data.retorno.tipoparticipante_id;
    ...

Open in new window

Eduardo FuerteDeveloper and Analyst

Author

Commented:
It's been actualized.

Here is the result.

img005
          $('#id').val(id);
          $("#tituloEditar").val(titulo);
          $('#descricaoEditar').val(descricao);

Open in new window


Amazingly #tituloEditar is correctly actualized at the modal.
Chris StanyonWebDev
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
OK. This may be down to the plugin you're using for the editor (tinyMCE for example).

As a test, remove the code that sets up the editor and just leave a default <textarea> with no formatting. Once you've done that, test your edit buttons again to see if the basic textarea gets updated correctly.
Eduardo FuerteDeveloper and Analyst

Author

Commented:
Chris

Very good tip you gave me....

This part of the code had been comented by my, before:

 tinyMCE.get('descricaoEditar').setContent(descricao);

Open in new window


If I uncomment it, everything works out!....

Do you know what must it to be?
WebDev
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019
Commented:
I think when we're working with standard <textarea> we can just set the html() and everything works fine.

When we're working with the tinyMCE editor, you need to use their methods to correctly set the content. By using their methods, the content will correctly be refreshed.
Eduardo FuerteDeveloper and Analyst

Author

Commented:
Chris

Thank you for the help!
Chris StanyonWebDev
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
You're welcome Eduardo