Bizarre problème javascript

Question

Je construis une page qui est dinamically chargée avec ajax.

C'est ce que les appels de fonction jQuery '$.get' (il se trouve sur une page HTML externe):

<script type="text/javascript"> 
$(function() 
{ 
    $('button').sb_animateButton(); 
    $('input').sb_animateInput(); 
    $('#settings_security_error').hide(); 
}); 

function check_passwords(password, password_confirm) 
{ 
    $('#settings_security_error').show(); 
    alert('I\'m in funcion!'); // This works... 
    if(password.length < 4) // ... this doesn't 
    { 
     $('#settings_security_error').innerHTML = 'Password too short'; 
    } 
    else 
    { 
     password = hex_md5(password); 
     password_confirm = hex_md5(password_confirm); 
     $.get('/engine/ajax/check_password.php?password=' + password + '$password_confirm=' + password_confirm, 
       {language: "php", version: 5}, 
       function(result) 
       { 
        $('#settings_security_error').innerHTML = result; 
       }, 
       'html'); 
    } 
} 
</script> 

<div class="title">Security</div> 
<table class="sub_container"> 
<tr> 
    <td><label>Old password</label></td> 
    <td class="td_input"><input type="password" name="old_password"/></td> 
</tr> 
<tr> 
    <td><label>New password</label></td> 
    <td class="td_input"><input type="password" 
           name="new_password" 
           id="settings_security_new_password" 
           onkeyup="check_passwords(this.value, getElementById('settings_security_password_confirm').value)"/></td> 
</tr> 
<tr> 
    <td><label>Confirm password</label></td> 
    <td class="td_input"><input type="password" 
           name="new_password_confirm" 
           id="settings_security_password_confirm" 
           onkeyup="check_passwords(getElementById('settings_security_new_password').value, this.value)"/></td> 
</tr> 
<tr> 
    <td class="td_error" id="settings_security_error"></td> 
</tr> 
</table> 

Et c'est là le code HTML externe est placé ...:

<div id="settings_appearance"> 

</div> 

... à partir de ce bloc de javascript:

function get_page_content(page, target_id) 
    { 
     $.get('engine/ajax/get_page_content.php?page=' + page, 
     null, 
     function(result) 
     { 
      $("#"+target_id).html(result); // Or whatever you need to insert the result 
     }, 
     'html'); 
    } 

Eh bien ... le problème est que t Il javascript dans le premier extrait est exécuté quand il est chargé par la fonction $.get, mais je ne comprends toujours pas la raison pour laquelle lorsque je tape dans les boîtes de saisie rien ne se passe. Il doit écrire la sortie de la fonction javascript check_passwords(password, password_confirm) dans <td class="td_error" id="settings_security_error"></td>.

Merci de votre aide. Silvio

Answer 1

Un problème sera ceci:

$('#settings_security_error').innerHTML = 'Password too short'; 

$('#settings_security_error') est un objet jQuery; pas un élément DOM. Vous définissez sans la définir la propriété innerHTML sur un objet jQuery; qui ne fera rien d'utile.

Si vous souhaitez définir les éléments DOM innerHTML directement, effectuez:

$('#settings_security_error')[0].innerHTML = 'Password too short'; 

Ou

$('#settings_security_error').get(0).innerHTML = 'Password too short'; 

Ou vous pouvez utiliser le jQuery .html() ou .text() fonctions (texte() étant le plus rapide):

$('#settings_security_error').text('Password too short'); 

Ou

$('#settings_security_error').html('Password too short');