How do I update the text of a div inside of a table/form in Jquery inside of a dialog box?

Question

I have a div inside of a table which is inside of a form that I would like to update

<form id="login_form" method="post" action="#" onsubmit="return false;"><table> 
<tr><td>Username</td><td><input type="text" name="name" id="login_name"></td></tr>
<tr><td>Password</td><td><input type="password" name="password" id="login_password"></td></tr>
<tr><td><input type="checkbox" name="keep_logged" id="login_keep" checked></td><td>Keep me logged in on this computer</td></tr>
<tr><td colspan=2><br><INPUT type="submit" name="Submit" value="Submit" onclick="submitLogin();">
<INPUT type="reset" name="Cancel" value="Cancel" id="login_cancel"></td></tr>
<tr><td colspan=2><div id="result_div"></div></td></tr>
</table>
</form>

I have tried numerous methods to update that div, but I can not seem to get it to work. For example:

$("div#result_div").html("My text is changed!");
$("#result_div").html("My text is changed!");
document.getElementById('result_div').innerHTML = 'My Text is changed!';

I've tried changing it from a div to a span with the same results. If I move the div outside of the table/form the text update works perfectly, so I'm fairly certain my code is being excuted correctly.

Any help would be apperciated.

Thanks.

edit: I realized this is inside of a Jquery-ui dialog box, I'm sorry for ommiting that piece of information orginally.

Answer 1

$("#result_div").text("My text is changed!");

Make sure the code is executing, with no errors on the page.

Answer 2

It looks like you have some malformed html. You're missing a </td> tag after "Keep me logged in ...". I don't know if that will solve it, but it might help.

Answer 3

Looks like it works,

http://jsbin.com/esibi/

You're calling the function to populate #result_div after the html has loaded right?

Answer 4

Your code snippet works for me, so there's nothing inherently wrong with what you're doing. You've omitted some crucial detail from the surrounding code...

• Where are you trying to do the update from? $("#result_div") will only work if you have that <script> below the <div> element on the page, or if you do it from a $(document).ready(...) callback function so it only executes after the page is loaded.

• There's only one element with id="result_div", right?

• If you display $("#result_div").html() immediately after setting it, is it set correctly?

• Do you see any JavaScript errors in your browser's JS error log/console from other scripts on the page?

• You're not serving up the page with an XHTML <!DOCTYPE> are you? Or with the application/xhtml+xml MIME type?

• What gets displayed if you just do alert($("#result_div").length)?