2010-06-14 4 views
0

나는 ajax로 동적으로로드 된 페이지를 구축 중입니다. 이상한 javascript 문제

은 무엇인지 '$.get' jQuery를 함수 호출 (이것은 외부 HTML 페이지에있는) :

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

그리고 외부 HTML 배치되는 곳은 ... :

<div id="settings_appearance"> 

</div> 

...이 자바 스크립트 스 니펫에서 :

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

음 ... 문제는 그 첫 번째 스 니펫의 자바 스크립트는 $.get 함수로로드 될 때 실행되지만 입력 상자에 아무 것도 입력하지 않으면 그 이유를 이해할 수 없습니다. 자바 스크립트 함수 check_passwords(password, password_confirm)의 결과를 <td class="td_error" id="settings_security_error"></td>에 써야합니다.

도와 주셔서 감사합니다. 실비오

+0

HTML/JS를 페이지에 동적으로로드하거나 삽입하는 경우 이벤트를 동적으로 바인딩해야합니다. 하지만 ** 정확히 ** ** 지금까지 작업을 이해하는지 모르겠습니까? #settings_appearance에 스 니펫 1을 로딩 한 후에 아무 것도 작동하지 않아야한다고 생각합니다 ... –

+0

nvm ... misunderstood –

답변

1

하나의 문제는이 될 것입니다 :

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

$('#settings_security_error')는 jQuery를 개체입니다; DOM 요소가 아닙니다. jQuery 객체에서 innerHTML 속성을 무의미하게 설정하고 있습니다. 어떤 것도 유용하지 않을 것입니다.

직접 innerHTML DOM 요소를 설정하려면, 하나 수행

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

또는

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

또는 당신이 jQuery를 .html() 또는 .text() 기능을 사용할 수 있습니다 (텍스트() 가장 빠른 인을) :

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

또는

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

이것은 절대적으로 이상합니다 ... 나는 복사 한 후 다른 스 니펫에서 붙여 넣었습니다 ... 나는이 방법으로 시도 할 것입니다. 그리고 그런데 getElementById ('settings_security_error'). innerHTML을 사용하고 있었고 @가 작동하지 않았습니다. @ – siannone

+0

감사합니다. 작동했습니다 : D. 나는 감독이 있다고 생각해. – siannone