Javascript dentro de outro não funciona

ricardopaiva · Junho 19, 2013

Boa tarde pessoal!!

Sou novo aqui no forum e estou tentando fazer um formulário que o usuário preencha varios nomes usando um javascript de autocomplete, dentro de um javascript que adiciona linhas em uma tabela. O primeiro autocomplete funciona perfeitamente, só q qdo vou executar os demais não funcionam ficaria muito grato com a ajuda de vcs já que eu sou novo em js e não entendo muita coisa.

Postarei os códigos abaixo.

Código testa.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd [/url]">
<html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml [/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
 
<script type="text/javascript" src="jquery-autocomplete/lib/jquery.js"></script>
<script type="text/javascript" src="jquery-autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="jquery-autocomplete/lib/jquery.ajaxQueue.js"></script>
<script type="text/javascript" src="jquery-autocomplete/lib/thickbox-compressed.js"></script>
<script type="text/javascript" src="jquery-autocomplete/jquery.autocomplete.js"></script>
<!--css -->
<link rel="stylesheet" type="text/css" href="jquery-autocomplete/jquery.autocomplete.css"/>
<link rel="stylesheet" type="text/css" href="jquery-autocomplete/lib/thickbox.css"/>
 
 <script type="text/javascript">
  $(document).ready(function(){
$("#busca").autocomplete("completar.php", {
width:310,
selectFirst: false
});
});
 </script>
 
<Script>
function addRow() {
document.form.countx.value = parseInt(document.form.countx.value) + 1;
var i = parseInt(document.form.countx.value);
var table;
if (document.all)
table = document.all.insumotable;
else if (document.getElementById)
table = document.getElementById('insumotable');
if (table && table.rows && table.insertRow && (i < 26) ) {
var tr = table.insertRow(table.rows.length);
var td = tr.insertCell(tr.cells.length);
data = '<span style="Font-Family:Arial; width:200px; Font-Size:12px ">Nome:<input type="text" name="busca' + i + '"" id="busca" size="60" class="input_forms"/></br>';
td.innerHTML = data;
}
}
</Script>
 
 
</head>
 
<body>
 
<form name="form" id="form" enctype="multipart/form-data" method="post" action="" >
<table  id="insumotable">
<tr>
<td colspan="2" align="left"><b><Font Color="#AA0000">Adicionar mais  Nomes :</Font></B> 
          <input type="button" name="add" value=" + " class="textboxgray" onClick="javascript: addRow()" style="Font-Family:Arial; Font-Size:12px; Color:#000000;">
<hr />
<input type="hidden" name="countx" value="1">
 </td>
</tr>
 
<tr>
 <td>Nome: <input type="text" name="busca" id="busca" size="60" class="input_forms"/></td>
</tr>
 
</table>
</form>
 
</body>
</html>

---------------

Código completar.php

<?
include "../conexao.php";
 
$q=strtolower ($_GET['q']);
 
$sql = mysql_query("SELECT * FROM admin WHERE username like('%$q%') ");
 
while($linha=mysql_fetch_array($sql)){
if(strpos(strtolower($linha['username']), $q) !== false){
//$username=utf8_encode(linha['username']);
echo $linha['username']. "|" . $linha['username'] . "\n";
}
 
}
 
?>

William Bruno · Junho 20, 2013

vc não pode duplicar o atributo ID. Então os teus inputs não podem ter todos o id="busca".

além disso, qndo vc cria um novo elemento no DOM, um plugin q já foi instanciado não vai afetar esse novo elemento, e vc precisa ativar novamente para ele.

1. use classes

2. chame o plugin novamente para cada elemento q vc criar, depois q vc o criar.

ricardopaiva · Junho 21, 2013

Certo a primeira parte das classes acho que entendi, agora como eu chamaria o plugin novamente dentro do js ??? Segue código com as classes.

testa.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd  [/url]">
<html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml  [/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
 
<script type="text/javascript" src="jquery-autocomplete/lib/jquery.js"></script>
<script type="text/javascript" src="jquery-autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="jquery-autocomplete/lib/jquery.ajaxQueue.js"></script>
<script type="text/javascript" src="jquery-autocomplete/lib/thickbox-compressed.js"></script>
<script type="text/javascript" src="jquery-autocomplete/jquery.autocomplete.js"></script>
<!--css -->
<link rel="stylesheet" type="text/css" href="jquery-autocomplete/jquery.autocomplete.css"/>
<link rel="stylesheet" type="text/css" href="jquery-autocomplete/lib/thickbox.css"/>
 
 <script type="text/javascript">
  $(document).ready(function(){
$(".busca").autocomplete("completar.php", {
width:310,
selectFirst: false
});
});
 </script>
 
<Script>
function addRow() {
document.form.countx.value = parseInt(document.form.countx.value) + 1;
var i = parseInt(document.form.countx.value);
var table;
if (document.all)
table = document.all.insumotable;
else if (document.getElementById)
table = document.getElementById('insumotable');
if (table && table.rows && table.insertRow && (i < 26) ) {
var tr = table.insertRow(table.rows.length);
var td = tr.insertCell(tr.cells.length);
data = '<span style="Font-Family:Arial; width:200px; Font-Size:12px ">Nome:<input type="text" name="busca' + i + '""  size="60" class="busca"/></br>';
td.innerHTML = data;
}
}
</Script>
 
 
</head>
 
<body>
 
<form name="form" id="form" enctype="multipart/form-data" method="post" action="" >
<table  id="insumotable">
<tr>
<td colspan="2" align="left"><b><Font Color="#AA0000">Adicionar mais  Nomes :</Font></B> 
          <input type="button" name="add" value=" + " class="textboxgray" onClick="javascript: addRow()" style="Font-Family:Arial; Font-Size:12px; Color:#000000;">
<hr />
<input type="hidden" name="countx" value="1">
 </td>
</tr>
 
<tr>
 <td>Nome: <input type="text" name="busca" size="60" class="busca"/></td>
</tr>
 
 
</table>
</form>
 
 
 
 
</body>
</html>

completar.php

<?
include "../conexao.php";
 
$q=strtolower ($_GET['q']);
 
$sql = mysql_query("SELECT * FROM admin WHERE username like('%$q%') ");
 
while($linha=mysql_fetch_array($sql)){
if(strpos(strtolower($linha['username']), $q) !== false){
//$username=utf8_encode(linha['username']);
echo $linha['username']. "|" . $linha['username'] . "\n";
}
 
}
 
?>

William Bruno · Junho 21, 2013

assim:

data = '<span style="Font-Family:Arial; width:200px; Font-Size:12px ">Nome:<input type="text" name="busca' + i + '""  size="60" class="busca"/></br>';
td.innerHTML = data;

$("input[name='busca"+i+"']").autocomplete("completar.php", {
    width:310,
    selectFirst: false
});

entendeu ?

ricardopaiva · Junho 21, 2013

Modifiquei bruno, mas mesmo assim nao funcionou estou testando esse script aqui . da uma olhada.

http://mikonosclubituiutaba.com.br/JR/autocompleta/testa.php

Segue abaixo codigo modificado de acordo com o q vc disse.

testa.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd [/url]">
<html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml [/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
 
<script type="text/javascript" src="jquery-autocomplete/lib/jquery.js"></script>
<script type="text/javascript" src="jquery-autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="jquery-autocomplete/lib/jquery.ajaxQueue.js"></script>
<script type="text/javascript" src="jquery-autocomplete/lib/thickbox-compressed.js"></script>
<script type="text/javascript" src="jquery-autocomplete/jquery.autocomplete.js"></script>
<!--css -->
<link rel="stylesheet" type="text/css" href="jquery-autocomplete/jquery.autocomplete.css"/>
<link rel="stylesheet" type="text/css" href="jquery-autocomplete/lib/thickbox.css"/>
 
 <script type="text/javascript">
  $(document).ready(function(){
//$(".busca").autocomplete("completar.php", {
//width:310,
//selectFirst: false
//});
$("input[name='busca"+i+"']").autocomplete("completar.php", {
width:310,
selectFirst: false
});
});
 </script>
 
<Script>
function addRow() {
document.form.countx.value = parseInt(document.form.countx.value) + 1;
var i = parseInt(document.form.countx.value);
var table;
if (document.all)
table = document.all.insumotable;
else if (document.getElementById)
table = document.getElementById('insumotable');
if (table && table.rows && table.insertRow && (i < 26) ) {
var tr = table.insertRow(table.rows.length);
var td = tr.insertCell(tr.cells.length);
//data = '<span style="Font-Family:Arial; width:200px; Font-Size:12px ">Nome:<input type="text" name="busca' + i + '""  size="60" class="busca"/></br>';
//td.innerHTML = data;
data = '<span style="Font-Family:Arial; width:200px; Font-Size:12px ">Nome:<input type="text" name="busca' + i + '""  size="60" class="busca"/></br>';
td.innerHTML = data;
}
}
</Script>
 
 
</head>
 
<body>
 
<form name="form" id="form" enctype="multipart/form-data" method="post" action="" >
<table  id="insumotable">
<tr>
<td colspan="2" align="left"><b><Font Color="#AA0000">Adicionar mais  Nomes :</Font></B> 
          <input type="button" name="add" value=" + " class="textboxgray" onClick="javascript: addRow()" style="Font-Family:Arial; Font-Size:12px; Color:#000000;">
<hr />
<input type="hidden" name="countx" value="1">
 </td>
</tr>
 
<tr>
 <td>Nome: <input type="text" name="busca" size="60" class="busca"/></td>
</tr>
 
 
</table>
</form>
 
 
 
 
</body>
</html>

William Bruno · Junho 21, 2013

não cara.. vc não é isso ai não.

vou colocar seu código completo para vc entender:

<script type="text/javascript">
  $(document).ready(function(){
$(".busca").autocomplete("completar.php", {
width:310,
selectFirst: false
});
});
 </script>
 
<Script>
function addRow() {
document.form.countx.value = parseInt(document.form.countx.value) + 1;
var i = parseInt(document.form.countx.value);
var table;
if (document.all)
table = document.all.insumotable;
else if (document.getElementById)
table = document.getElementById('insumotable');
if (table && table.rows && table.insertRow && (i < 26) ) {
var tr = table.insertRow(table.rows.length);
var td = tr.insertCell(tr.cells.length);
data = '<span style="Font-Family:Arial; width:200px; Font-Size:12px ">Nome:<input type="text" name="busca' + i + '""  size="60" class="busca"/></br>';
td.innerHTML = data;

$("input[name='busca"+i+"']").autocomplete("completar.php", {
    width:310,
    selectFirst: false
});

}
}
</Script>

viu a diferença agora ?

Entrar

Arquivado

Javascript dentro de outro não funciona

Recommended Posts

ricardopaiva 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

ricardopaiva 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

ricardopaiva 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

JAVA - Orientação para Invalidar Sessão

JAVA - Ajuda em Paginação

Alteracao Tema Wordpress Profolio

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante