2012-02-02 24 views
1

我創建多個表單從jquery中檢索數據。之後,我想與個人形式工作,而不發送表單,但我有問題檢索輸入的價值。它們都在警報標籤中未定義。 粘貼我的代碼。感謝所有爲什麼這個輸入值未定義與jquery

<script> 
$("#select_idioma").bind('click',function(){ 
    cargatraducciones($("#select_idioma").val()); 
}); 
function cargatraducciones(idi){ 
    $('#listadopalabras').hide("fast"); 
    $('#cargando').fadeIn(1000); 
     $.ajax({ 
      type: "POST", 
      url: "../includes/ajax.php", 
      dataType : "json", 
      data: "opc=traducciones&idi="+idi, 
      success: function(datos){ 
       crealistado(datos,idi); 
      } 
     }); 
    } 

function crealistado(datos,idi){ 
    var html =""; 
    if(datos.length ==0){ 
     html +="<div id='errors'>No hay datos disponibles para mostrar</div>"; 
    }else{ 
     html +="<h2>Listado de palabras a traducir</h2>"; 
     html += "<div class='nota'>Las palabras pendientes para traducir, aparecen con el texto traducir. Escriba la traducción y pulse en guardar.</div>"; 
     for(i=0; i < datos.length; i++){ 
      html += "<form style='background:"; 
      if(datos[i].valor == "traducir"){ 
       html += "red;"; 
      }else{ 
       html += "#f2f2f2;"; 
      } 
      html+= "border-radius:5px; margin-top:5px;margin-bottom:5px; padding:5px 10px' action ='' method=''>"; 
      html += "<a href='eliminar.php?tipo=traduccion&id="+datos[i].id+"' onclick=\"return confirm('¿Desea elminiar la palabra "+datos[i].nombre+"?')\"><img src='../imatges/iconos/delete_24.png'/></a>"; 

      html += "<input style='display:none' type='text' name='idt' value='"+datos[i].id+"'/>"; 

      html += "<div style='width:700px'>"+datos[i].nombre+"</div>"; 
      html += "<input style='width:700px' type='text' name='valor"+i+"' id='valor"+i+"' value='"+datos[i].valor+"'/>"; 

      html += "<input style='margin-left:10px' type='button' class='button"+i+"' value='Modificar' />"; 
      html += "</form>"; 
      html += "<hr style='margin:0; margin-bottom:2px' />"; 
     } 
    } 
    $('#cargando').hide("fast"); 
    $('#listadopalabras').html(html); 
    $("#listadopalabras").fadeIn(1000); 
    var total = datos.length; 
    procesa(total); 
} 
function procesa(total){ 
    for (i=0; i<total; i++){ 
     $(".button"+i).click(function() { 
     alert($("input#valor"+i).val()); 
     // validate and process form here 
     var valor = $("input#valor"+i).val(); 
     if (valor == "") { 
      alert("debe escribir un texto para la traducción"); 
      $("input#valor"+i).focus(); 
      return false; 
     } 
     alert("clicado"); 
     }); 
    } 
} 

</script> 
+3

您可能會得到一個答案,但獲得答案的最快方式是在jsFiddle上發佈一個工作示例,然後在此處發佈鏈接。 – 2012-02-02 16:14:29

+1

請顯示HTML。 – gdoron 2012-02-02 16:14:53

+0

@gdoron - 看起來HTML是在'crealistado'函數中動態生成的。 – ShankarSangoli 2012-02-02 16:18:00

回答

1

這是行不通的,因爲i按鈕click處理程序中的價值將等於total即最後增加值的for循環。所以$("input#valor"+i)將返回一個空對象。在空的jQuery對象上調用val()將返回undefined

試試這個。

function procesa(total){ 
    for (i=0; i<total; i++){ 
     $(".button"+i).data('itemid', i).click(function() { 
     var $valor = $("#valor" + $(this).data('itemid')) 
     alert($valor.val()); 

     // validate and process form here 
     var valor = $valor.val(); 
     if (valor == "") { 
      alert("debe escribir un texto para la traducción"); 
      $valor.focus(); 
      return false; 
     } 
     alert("clicado"); 
     }); 
    } 
} 
+0

這是一個像在C#中訪問修改過的黑客一樣的問題嗎? [this](http://stackoverflow.com/questions/235455/access-to-modified-closure) – gdoron 2012-02-02 16:26:15

+0

這是關閉和循環的常見問題。 – ShankarSangoli 2012-02-02 16:28:19

+0

謝謝大家。我會嘗試解決這個問題,但是,Shankarsangli的class .button每次迭代都會增加。 – 2012-02-02 17:10:58

0

包裹起來,這些線路與DOM功能齊全,

$(function(){ 
    $("#select_idioma").bind('click',function(){ 
     cargatraducciones($("#select_idioma").val()); 
    }); 
}); 
0

移動這個代碼DOM準備:

$(document).ready(function(){ 
    $("#select_idioma").bind('click',function(){ 
     cargatraducciones($("#select_idioma").val()); 
    }); 
}); 

或郵寄至:

$(function() { 
    $("#select_idioma").bind('click',function(){ 
     cargatraducciones($("#select_idioma").val()); 
    });   
}); 

此行$("#select_idioma").val()是有問題之前,因爲#select_idioma元素undifend之前,DOM是DOM已準備就緒準備。

0

謝謝ShankarSangoli。它工作正常:) 有所有的代碼。

<?php include_once("../includes/inicialize.php"); 
if(isset($_POST['submit'])){ 
    if(!$nombre){ 
     missatge("ko","Ha de introducir un nombre para el nuevo idioma"); 
    }else{ 
     $sql="insert into idiomas (nombre) values ('{$nombre}')"; 
     if($resultado = $database->query($sql)){ 
      missatge("ok","El idioma se ha insertado correctamente"); 
     }else{ 
      missatge("ko","El idioma no ha podido ser insertado"); 
     } 
    } 
}else{ 
    $nombre=""; 
} 
?> 

<?php include_once("../layouts/cabecera_admin.php"); ?> 
<div id="pagina"> 
    <?php echo missatge(); ?> 
    <div id="home_news"> 
     <form name="home_news" method="post" accept="<?php $_SERVER['PHP_SELF']; ?>"> 
      <h2>Insertar nuevo Idioma</h2> 
      <label>Nombre:</label> 
       <input type="text" name="nombre" value="<?php echo $nombre; ?>"/> 
       <input type="submit" name="submit" value="Crear nuevo idioma"/> 
     </form> 
     <h2>Idiomas dados de alta</h2> 
     <?php 
     $sql="select * from idiomas"; 
     $resultado = $database->query($sql); 
     while($lenguaje = $database->fetch_array($resultado)){ 
       //echo "<a href='eliminar.php?tipo=idioma&id={$lenguaje['id']}' onclick=\"return confirm('¿Desea elminiar el idioma {$lenguaje['nombre']}?')\"><img src='../imatges/iconos/delete_24.png'/></a>"; 
       echo "<a href='edit_idioma.php?id={$lenguaje['id']}' title='Editar idioma' toptions='type = iframe, effect = fade, width = 400, height = 230, overlayClose = 1, shaded=1, onclose=vesapagina(\"idiomas.php\")'>"; 
       echo $lenguaje['nombre']; 
       echo "</a>"; 
       echo "<hr style='margin:5px 0 5px 0;' />"; 
     } 
     ?> 
    </div><!-- fin home_news --> 
    <div class="clear"></div> 
    <div id="traducciones"> 
     <div id="home_news"> 
      <form> 
       <h2>Traducciones</h2> 
       <div class="nota">Para visualizar el listado de palabras a traducir, seleccione el idioma que desee de los disponibles a continuación:</div> 
       <label>Idioma:</label> 
       <select id="select_idioma" name="id_idioma"> 
       <option value="-1">Seleccione el idioma</option> 
       <?php 
        $lang = get("idiomas"); 
        while($lengua = $database->fetch_array($lang)){ 
         echo "<option value='{$lengua['id']}'>{$lengua['nombre']}</option>"; 
        } 
       ?> 
      </select> 
      </form> 
     </div><!-- fin div home news --> 
     <div class="clear"></div> 
      <div id="cargando" style="display:none"><img src="../imatges/ajax-loader.gif"/> Cargando el contenido ...</div> 
      <div id="listadopalabras"> 

      </div><!-- fin lista palabras --> 


    </div> 
</div><!-- fin div pagina --> 
<div class="clear"></div> 
<?php include_once("../layouts/pie_admin.php"); ?> 
<script> 
$("#select_idioma").bind('click',function(){ 
    cargatraducciones($("#select_idioma").val()); 
}); 
function cargatraducciones(idi){ 
    $('#listadopalabras').hide("fast"); 
    $('#cargando').fadeIn(1000); 
     $.ajax({ 
      type: "POST", 
      url: "../includes/ajax.php", 
      dataType : "json", 
      data: "opc=traducciones&idi="+idi, 
      success: function(datos){ 
       crealistado(datos,idi); 
      } 
     }); 
    } 

function crealistado(datos,idi){ 
    var html =""; 
    if(datos.length ==0){ 
     html +="<div id='errors'>No hay datos disponibles para mostrar</div>"; 
    }else{ 
     html +="<h2>Listado de palabras a traducir</h2>"; 
     html += "<div class='nota'>Las palabras pendientes para traducir, aparecen con el texto traducir. Escriba la traducción y pulse en guardar.</div>"; 
     for(i=0; i < datos.length; i++){ 
      html += "<form style='background:"; 
      if(datos[i].valor == "traducir"){ 
       html += "red;"; 
      }else{ 
       html += "#f2f2f2;"; 
      } 
      html+= "border-radius:5px; margin-top:5px;margin-bottom:5px; padding:5px 10px' action ='' method='' id='form"+i+"'>"; 
      html += "<a href='eliminar.php?tipo=traduccion&id="+datos[i].id+"' onclick=\"return confirm('¿Desea elminiar la palabra "+datos[i].nombre+"?')\"><img src='../imatges/iconos/delete_24.png'/></a>"; 

      html += "<input style='display:none' type='text' name='idt"+i+"' id='idt"+i+"' value='"+datos[i].id+"'/>"; 

      html += "<div style='width:700px'>"+datos[i].nombre+"</div>"; 
      html += "<input style='width:700px' type='text' name='valor"+i+"' id='valor"+i+"' value='"+datos[i].valor+"'/>"; 

      html += "<input style='margin-left:10px' type='button' class='button"+i+"' value='Modificar' />"; 
      html += "</form>"; 
      html += "<hr style='margin:0; margin-bottom:2px' />"; 
     } 
    } 
    $('#cargando').hide("fast"); 
    $('#listadopalabras').html(html); 
    $("#listadopalabras").fadeIn(1000); 
    var total = datos.length; 
    procesa(total); 
} 
function procesa(total){ 
    for (i=0; i<total; i++){ 
     $(".button"+i).data('itemid', i).click(function() { 
     var $valor = $("#valor" + $(this).data('itemid')) 
     var $idt = $("#idt" + $(this).data('itemid')) 
     var $form = $("#form" + $(this).data('itemid')) 
//  alert($idt.val()); 

     // validate and process form here 
     var valor = $valor.val(); 
     var idt = $idt.val(); 
     if (valor == "") { 
      alert("debe escribir un texto para la traducción"); 
      $valor.focus(); 
      return false; 
     } 
      //alert("clicado"); 

      var dataString = 'valor='+ valor + '&idt=' + idt; 
      //alert (dataString);return false; 
      $.ajax({ 
       type: "POST", 
       url: "../includes/procesatraduccion.php", 
       data: dataString, 
       success: function() { 
//    alert("proceso completo"+idt); 
       $form.animate({backgroundColor:"green"},1000); 
       } 
      }); 
     return false; 
     }); 
    } 
} 

</script>