Jump to content
Fórum Script Brasil
  • 0

Como fazer o JavaScript funcionar no Laravel ou no PHP?


Frank K Hosaka

Question

A minha ideia era colocar uma caixa para localizar produtos, usando o JavaScript para fazer uma lista dos dez produtos seguintes ao produto que o usuário está procurando. 

Usei o famoso loop for(i=j;i<=j+9;i++), mas ele funcionou só uma vez. Nas outras vezes, o JavaScript listou todos os produtos a partir do produto selecionado. Para evitar esse transtorno, olha só a gambiarra que eu fiz:

resources > views > produto.blade.php

@include('menu')
<script>
document.title='Produto';btmenu.innerHTML='Procurar produto por nome'
function show(j){
    divshow.innerHTML=""
    divshow.innerHTML+=produtos.options[j].value+"<br>";j++
    divshow.innerHTML+=produtos.options[j].value+"<br>"
    divshow.innerHTML+=produtos.options[j+1].value+"<br>"
    divshow.innerHTML+=produtos.options[j+2].value+"<br>"
    divshow.innerHTML+=produtos.options[j+3].value+"<br>"
    divshow.innerHTML+=produtos.options[j+4].value+"<br>"
    divshow.innerHTML+=produtos.options[j+5].value+"<br>"
    divshow.innerHTML+=produtos.options[j+6].value+"<br>"
    divshow.innerHTML+=produtos.options[j+7].value+"<br>"
    divshow.innerHTML+=produtos.options[j+8].value+"<br>"}
function procurar(valor){
    for(i=0;i<produtos.options.length;i++){
        if(produtos.options[i].value==valor){
            j=produtos.options[i].getAttribute('data-id')}}
    show(j)}
</script>
<div><p><p>
<form>
<input list=produtos autofocus id=produto onchange=procurar(value) autofocus>
<datalist id=produtos>
@foreach($prod as $key => $pr)
<option data-id={{$key}} value='{{$pr['prod']}}'>
@endforeach
</datalist></form></div>
<div id=divshow></div>
<script>show(0)</script>

O código que funciona apenas uma vez é esse daqui, eu não sei o que eu fiz de errado:

@include('menu')
<script>
document.title='Produto';btmenu.innerHTML='Procurar produto por nome'
function show(j){
    divshow.innerHTML="";
    for(i=j;i<j+9;i++){divshow.innerHTML+=produtos.options[i].value+"<br>";}}
function procurar(valor){
    for(i=0;i<produtos.options.length;i++){
        if(produtos.options[i].value==valor){
            j=produtos.options[i].getAttribute('data-id');}}
    show(j);}
</script>
<div><p><p>
<form>
<input list=produtos autofocus id=produto onchange=procurar(value) autofocus>
<datalist id=produtos>
@foreach($prod as $key => $pr)
<option data-id={{$key}} value='{{$pr['prod']}}'>
@endforeach
</datalist></form></div>
<div id=divshow></div>
<script>show(0)</script>

Fiz o teste no PHP, mas o problema persiste:
 

<?php
$mysqli=new mysqli("localhost","root","","astudy");
$query=$mysqli->query("select * from tbprod order by prod");
$prod=$query->fetch_all(MYSQLI_ASSOC);?>
<script>
document.title='Produto';btmenu.innerHTML='Procurar produto por nome'
function procurar(valor){
    for(i=0;i<produtos.options.length;i++){
        if(produtos.options[i].value==valor){
            j=produtos.options[i].getAttribute('data-id');}}
    divshow.innerHTML="";
    for(i=j;i<j+9;++i){divshow.innerHTML+=produtos.options[i].value+"<br>";}}
function show(j){
    divshow.innerHTML="";
    for(i=j;i<j+9;++i){divshow.innerHTML+=produtos.options[i].value+"<br>";}}
</script>
<div><p><p>
<form>
<input list=produtos autofocus id=produto onchange=procurar(value) autofocus>
<datalist id=produtos>
<?php foreach($prod as $key=>$pr){echo "<option data-id=$key value='".$pr['prod']."'>";} ?>
</datalist></form></div>
<div id=divshow></div>
<script>show(0)</script>

 

Edited by Frank K Hosaka
Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

Consegui resolver! Tudo indica que o comando for do JavaScript só funciona uma vez, logo eu troquei pelo comando forEach. Esse comando funciona pelo menos duas vezes.

<?php
$mysqli=new mysqli("localhost","root","","astudy");
$query=$mysqli->query("select * from tbprod order by prod");
$prod=$query->fetch_all(MYSQLI_ASSOC);?>
<script>
function procurar(valor){
    for(i=0;i<produtos.options.length;i++){
        if(produtos.options[i].value==valor){
            j=produtos.options[i].getAttribute('data-id');}}
    show(j);}
function show(j){
    divshow.innerHTML="";
    teste=[1,2,3,4,5,6,7,8,9,10]
    teste.forEach(function(){
    divshow.innerHTML+=produtos.options[j].value+"<br>";j++})}
</script>
<div><p><p>
<form>
<input list=produtos autofocus id=produto onchange=procurar(value) autofocus>
<datalist id=produtos>
<?php foreach($prod as $key=>$pr){echo "<option data-id=$key value='".$pr['prod']."'>";} ?>
</datalist></form></div>
<div id=divshow></div>
<script>show(0)</script>

 

Link to comment
Share on other sites

  • 0

No fórum Imasters, o Omar~ sugeriu para eu ter certeza que a variável de controle do comando for seja do tipo inteiro. A sugestão dele deu certo. Onde eu tinha function show(j), eu mudei para function show(k){ j = parseInt(k); etc

Eu sempre esqueço que os números são abstrações humanas e o computador só tem dois digítos, o zero e o um. Para representar qualquer número, o algorítimo deve ser bem federal. 

Aqui a listagem original, agora com a sugestão do Omar~

<?php
$mysqli=new mysqli("localhost","root","","astudy");
$query=$mysqli->query("select * from tbprod order by prod");
$prod=$query->fetch_all(MYSQLI_ASSOC);?>
<script>
function procurar(valor){
    for(i=0;i<produtos.options.length;i++){
        if(produtos.options[i].value==valor){
            j=produtos.options[i].getAttribute('data-id');}}
    show(j);}
function show(k){
    j=parseInt(k);
    divshow.innerHTML="";
    for(i=j;i<j+9;i++){
    divshow.innerHTML+=produtos.options[i].value+"<br>"}}
</script>
<div><p><p>
<form>
<input list=produtos autofocus id=produto onchange=procurar(value) autofocus>
<datalist id=produtos>
<?php foreach($prod as $key=>$pr){echo "<option data-id=$key value='".$pr['prod']."'>";} ?>
</datalist></form></div>
<div id=divshow></div>
<script>show(0)</script>

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152.1k
    • Total Posts
      652k
×
×
  • Create New...