Entrar Ainda não tem acesso?
3
respostas

Código não está funcionando, código parece estar sem erros e nenhum erro aparece na tela

Referente ao curso Laravel parte 2: trabalhando com Autenticação, Relacionamentos e Testes, no capítulo Edição da série e atividade Alterando o nome da série

por veronica.souza.silva
| 38k xp | 11 posts

Não sei o porquê do código não estar funcionando. Ao clicar no ícone de editar nada ocorre.


        <ul class = "list-group">
             @foreach($series as $serie)
                 <li class = "list-group-item d-flex justify-content-between align-items-center" >

                     <span id="nome-serie-{{$serie->nome}}">{{$serie->nome}}</span>

                     <div class="input-group w-50" hidden  id="input-nome-serie-{{ $serie->id }}">
                         <input type="text" class="form-control" value="{{ $serie->nome }}">
                         <div class="input-group-append">
                             <button class="btn btn-primary" onclick="editarSerie({{ $serie->id }})">
                                 <i class="fas fa-check"></i>
                             </button>
                             <input type="hidden" name="_token" value="{{ csrf_token()}}">
                         </div>
                     </div>

                     <span class="d-flex">
                         <button class="btn btn-info btn-sm mr-1 " onclick="toggleInput({{$serie->id}})">
                             <i class="fas fa-edit"></i>
                         </button>

                         <a href="/series/{{$serie->id}}/temporadas" class="btn btn-info btn-sm mr-1">
                             <i class="fas fa-external-link-alt"></i>
                         </a>

                         <form method = "post" action="/series/remover/{{$serie->id}}" onsubmit ="return confirm('Tem certeza que deseja remover {{addslashes($serie->nome)}}?')">
                             <input type="hidden" name="_token" value="<?php echo csrf_token();?>">
                            <button class ="btn btn-danger btn-sm"><i class="fas fa-trash-alt"></i> </button>
                         </form>
                     </span>
                 </li>

            @endforeach
        </ul>

    <script>
        function toggleInput(serieId) {

            const nomeSerieEl = document.getElementById('nome-serie-${serieId}');
            const inputSerieEl = document.getElementById('input-nome-serie-${serieId}');

            if( nomeSerieEl.hasAttribute('hidden')){
                nomeSerieEl.removeAttribute('hidden');
                inputSerieEl.hidden = true;

            }else{
                inputSerieEl.removeAttribute('hidden');
               nomeSerieEl.hidden=true;
            }


        }
    </script>
3 respostas
por veronica.souza.silva
| 38k xp | 11 posts

Ao que parece a variável serieId não está sendo usada, por isso ao entrar no if aparece um erro, descobri isso ao usar a ferramenta de desenvolvedor do Chrome .

Erro que aparece na ferramenta de desenvolvedor do Chrome: 

Uncaught TypeError: Cannot read property 'hasAttribute' of null
    at toggleInput (series:64)
    at HTMLButtonElement.onclick (series:41)
toggleInput @ series:64
onclick @ series:41

Alguém tem alguma de ideia de como posso reescrever a parte da variável serieId para ela ser utilizada?

por André Chaves
| 1967.1k xp | 2579 posts
Instrutor Lider técnico

Oi Veronica, tudo bom?

Tenta trocar a injeção dos dados do id de:

${serieId}

para:

{{$serie->id}}

Isso porque esse conteúdo existe apenas no seu back-end (php) portanto quando esse conteúdo chegar no seu navegador ele já estará injetado pelo próprio PHP. A sintaxe que estamos usando é a de injeção de strings do Javascript porém no javascript esses dados não existem =)

Deu pra entender a ideia?

Abraço

por veronica.souza.silva
| 38k xp | 11 posts

Olá, realizei as mudanças sugeridas, mas o código ainda está dando o mesmo erro. 

         function toggleInput(serie){ const nomeSerieEl = document.getElementById('nome-serie-{{$serie->id}}');
        const inputSerieEl = document.getElementById('input-nome-serie-{{$serie->id}}');

        if (nomeSerieEl.hasAttribute('hidden')) {
            inputSerieEl.removeAttribute('hidden');
            nomeSerieEl.hidden = true;
        } else {
            nomeSerieEl.removeAttribute('hidden');
            inputSerieEl.hidden = true;

        }


    }