Jump to content

textarea not working correctly using ajax


Shadowing
 Share

Recommended Posts

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 textarea.jpg

Link to comment
Share on other sites

Justsomeguy. im really having a massive problem wondering if maybe you could help me out.When I click on announcementsunexpand.jpga text area expands like this and when i click on it again it expands backexpand.jpg 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"));}

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 by Shadowing
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...