6
respostas

[Aula 7 - Tópico 8] Como exibir o titulo do livro, ao invés do id?

Após as últimas alterações no código ensinadas na aula 7, conseguimos fazer com que uma janelinha de alert seja exibida com o id do livro, após cadastrarmos uma nova promoção:

<b><i>alert("Livro em promoção " + data.livro.id);</i></b>

Porém, se eu tentar mostrar o título do livro, com a alteração abaixo, recebo uma mensagem de "undefined" no alert:

<b><i>alert("Livro em promoção " + data.livro.titulo);</i></b>

Também gostaria de exibir esses dados numa div criada no arquivo index.ejs:

A exibição do id do livro na div acima já está funcionando (após a inserção do código abaixo):

<b><i>document.getElementById("teste").innerHTML = data.livro.id;</i></b>

Mas se eu tentar exibir o título do livro dessa forma, também vou receber uma mensagem de "undefined":

<b><i>document.getElementById("teste").innerHTML = data.livro.titulo;</i></b>

Quais as alterações necessárias para que eu possa exibir o título do livro, assim como os demais dados (descrição e preço)?

6 respostas

Olá, Claudio.

Você pode adicionar o seu código que esta pegando os dados na base de dados e passando o data pra view?

Oi Marco, segue o código logo abaixo:

Precisando de algo mais, me avise.

OI Cláudio, o problema é que no form o value do option só envia o id do livro, neste caso, você precisa recuperar o restante das informações antes de fazer o emit, pegou a ideia?

Opa Wanderson,

Peguei a idéia sim, obrigado pela dica. Na verdade, tava até um pouco óbvio, mas como sou totalmente neófito em javascript e node.js, ainda tenho certa dificuldade com alguns conceitos.

Bom, mas como eu disse, entendi sua explicação, e com base nela estou tentando criar uma solução para o meu problema. O que eu fiz até agora foi o seguinte:

(1) Criei dois inputs com type="hidden" no form.ejs, para enviar mais informações (titulo e descricao):

input id="title" type="hidden" name="livro[titulo]" value="<%=lista[0].titulo%>"

input id="description" type="hidden" name="livro[descricao]" value="<%=lista[0].descricao%>"

(2) Transformei a variável promocao em array, no promocoes.js, para receber as informações adicionais:

var promocao = {};

promocao = req.body;

(3) As alterações acima já foram suficientes para exibir corretamente no alert e na div do index.ejs o titulo do livro cujo id é 0 (zero), usando o socket.io:

div id="teste">Teste</div

var socket = io();

socket.on('novaPromocao', function(data) {

alert("Livro em promoção " + data.livro.titulo);

document.getElementById("teste").innerHTML = data.livro.titulo;

});

(4) Tentando ir além, adicionei um evento onchange ao select, para que, sempre que um id for escolhido nesse select, automaticamente mudar os respectivos campos nos inputs de type="hidden" que mencionei no item (1):

select id="selectOpt" onChange="setBookProp()" name="livro[id]"

(5) Inseri uma função javascript no form.ejs e fiz o link dessa função ao evento onchange citado acima. E agora estou com o seguinte problema: não estou conseguindo recuperar o restante das informações com a função javascript que eu criei. Solicito então a ajuda de vocês nessa questão. Segue abaixo a função:

function setBookProp() {

var myselect = document.getElementById("selectOpt");

var bookid = myselect.value;

var newtitlebegin = "%=lista[";

var newtitleend = "].titulo%";

var newtitle = JSON.stringify("".concat("<", newtitlebegin, bookid, newtitleend, ">"));

document.getElementById("title").value = newtitle;

}

Ocorre que a função acima está devolvendo apenas o valor "literal", como por exemplo:

"<%=lista[3].titulo%>"

E não devolve o valor da string real do titulo do livro, que no caso seria "Comecando com nodejs", por exemplo.

Vocês teriam sugestões para contornar esse problema??

Claudio, você teria como disponibilizar o projeto no github pra mim ver esse código de forma mais clara e poder testar? Assim posso ir direto na solução do seu problema e indicar alguma outra coisa.

Ok Wanderson, vou providenciar.