奇怪的JavaScript问题

Question

i'm building a page that is dinamically loaded with ajax.

This is what the '$.get' jQuery function calls (this is located on an external HTML page):

<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>

And this is where the external HTML is placed...:

<div id="settings_appearance">

</div>

... from this javascript snippet:

    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');
    }

Well... the problem is that the javascript in the first snippet is executed when it's loaded by the $.get function, but i still can't understand the reason why when i type into the input boxes nothing happen. It should write the output of the javascript function check_passwords(password, password_confirm) in <td class="td_error" id="settings_security_error"></td>.

Thanks for helping. Silvio

Answer 1

One problem will be this:

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

$('#settings_security_error') is a jQuery object; not a DOM element. You're meaninglessly setting the innerHTML property on a jQuery object; which won't do anything useful.

If you want to set the DOM elements innerHTML directly, do either:

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

Or

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

Or you can use the jQuery .html() or .text() functions (text() being the quickest):

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

Or

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