textarea not working correctly using ajax

[Shadowing]

Hey guys im placing a textarea on a page using jquery/ajax and having text already in the text area <textarea rows='12' cols='65' name='announcements' id='announcements'style='color:red;'/>Example test</textarea> but the crazy thing is that the content "Example test" doesnt go inside the text area. it gets put out side and blow the text area picture below

[justsomeguy]

The opening textarea tag closes itself, so that makes an empty textarea with everything after the tag going after the textarea. In that case the </textarea> tag is not used because the opening tag closes itself.

[Shadowing]

Hey thanks that fixed it. I didnt know that lol. using </textarea> always worked before wierd. i have it working in several pages.

[justsomeguy]

It's right to use </textarea>, it's not right to have the opening tag close itself. The </textarea> tag should close the opening tag.

[Shadowing]

Ohhhh because i had the /> after the opening tag.

[Shadowing]

Justsomeguy. im really having a massive problem wondering if maybe you could help me out.When I click on announcementsa text area expands like this and when i click on it again it expands back When I hit the update I trip some ajax and i have the ajax replacing whats in the <td>of "Last game announcements update was on 02:58 pm Mar/29" The problem is after it does that the java script for clicking on "Announcements" to toggle the textarea stops working.It doesnt make any since because for starters Announcement isnt even using the same id as anything. so I dont see how the element would ever change from not being readable. unless its because the textarea box isnt there anymore?The html

<tr class="odd"><th id="toggle">Announcements</th><td id="announcements_box" colspan="5">Last game announcements update was on $last_announcement_update"; <textarea rows='8' cols='65' name='announcements' id='announcements'><?php echo $announcements ?></textarea></td>   <td id="announcements_button" class="submit"><input type="submit" name="update_announcements" id="update_announcements" value="Update"></td> </tr>

This is my toggle java script

$(function(){    $("#announcements").hide();   $("#toggle").click(function(){    $("#announcements").slideToggle("slow");  }); });

My Ajax

$(function(){   $("#update_announcements").click(function(event) {		  event.preventDefault();  $.ajax({		      url: "/System_Lords/ajax/announcements.php?functions=submit_announcements",		      type: 'POST',		      dataType: 'json',		      data: {		announcements: $('#announcements').val(),	time_offset: '<?php echo $time_offset; ?>' 	},		   	success: function(response) {			 	 $('#announcements_box').html(response.announcements_box);	 	 }	   	 });	   	 });	 	 }); 

The php code being sent back

function submit_announcements() { echo json_encode(array("announcements_box" => "Last game announcements update was on $last_announcement_update"));}

[justsomeguy]

It changes because you remove the element and add it back again. When you remove it you also remove any Javascript event handlers that are attached to it. If you want to keep the handlers then either update only the content of the textarea instead of replacing the element, or run the code to add the handler again after you've replaced it.

[Shadowing]

Ahh i got it working, that was the problem, it was replacing the textarea. i added two seperate div's to seperate the two.

[Shadowing]

I really want to learn how to put the handler back small example

<div id="successful"></div>

im displaying a message then having it fade out but when i click the button again nothing happends cause i need to add the handler again like you mentioned.

$("#update_announcements").click(function(event) {		  event.preventDefault();  $.ajax({ // all my ajax stuff     $("#successful").html("Announcements Successfully Updated");    $("#successful").fadeOut(2000);

im reading the guide and i think this is the code i need or something close to it? do I need to notify the button that i pressed to start the ajax? which is "#update_announcements"

function notify() { alert(); }$("successful").on(notify);

[justsomeguy]

You should only need to replace the handler if it was on an element you removed, do you remove the element with the click handler?

[Shadowing]

no the button still works. it just stops inserting this into the <div id="successful">this is the only javascript that touches this divit only works once then i hit the button again and nothing. so when i click on this button "#update_announcementsit" it does some ajax stuff then at the end it the code$("#successful").html("Announcements Successfully Updated");$("#successful").fadeOut(2000);Then if i click the button again it doesnt work again but the ajax all works.

$(function(){ $("#update_announcements").click(function(event) {		  event.preventDefault();  $.ajax({		     url: "/System_Lords/ajax/announcements.php?functions=submit_announcements",		     type: 'POST',		     dataType: 'json',		     data: {		announcements: $('#announcements').val(),	time_offset: '<?php echo $time_offset; ?>' 	},		  	success: function(response) {				 $('#announcements_time').html(response.announcements_box);		 }	  	 });	  $("#announcements_box").hide("slow"); /*/ closes announcement box after hitting update /*/	 $("#successful").html("Announcements Successfully Updated");	$("#successful").fadeOut(2000);  	 });		 }); 

Edited March 30, 2012 by Shadowing

[dsonesuk]

Think about it! the message element is set as display: block; OR display: inline; at onload. You hit the update button, the successful message shows and then fades out, which use a opacity setting from 1 to 0, ending with DISPLAY: NONE; and it remain as that! until it is reset with show() to set it back to original state of display: block; OR display: inline;.

[Shadowing]

Hey dsonesuk. thanks alot, that works. For some reason i just assumed it was reseting the css haha. which makes sense that it wouldnt.