Jump to content

JQuery help... ajax is soo frustrating.


turkman

Recommended Posts

After i couldnt get my last example to work, someone recommended i try and use jquery as it auto sorts out all i.e bugs. So i looked around and managed to piece together some code.

 

In the example below #chatmsg is the input box  #chatwindow is the div id where i want the output to go.

 

Here is the problem. in the function update ... if i set the return data to #chatmsg  .. it works and populates the input box with the data from the database every 1000 milliseconds. However if i change that to #chatwindow nothing happens. I have no idea why this happens. Also i have no idea why its causing the page to display funny.

 

link here: http://www.imgboard.co.uk/chat-with-coon/chat.html

 

<html>
<head>
<title>Coon Chat V 1.0</title>
<style type="text/css">
body 			{ padding-left:40px; background:#E3EDF5; font-family:arial;}
input, textarea 	{ font-family: arial; color:white; background:#57767F; font-size: 11pt; line-height: 25px }
#content 		{ width:1000px; text-align:left;  }

#chatwindow 		{ border:1px solid #E8E8E8; padding:4px; background:#FFFFFF; color:#426A8A;  width:1000px;  margin: auto; height:auto; font-family:arial;line-height: 25px; font-size: 11pt; }
#chatnick 		{ color: black;  background:#FFFFFF; }
#chatmsg 		{ color: black;  background:#FFFFFF; }
#button			{ background:#FFFFFF;}
#cent{margin: auto; width 1000px;}
#info 			{ text-align:left; padding-left:0px; font-family:arial; }
#info td 		{ font-size:12px; padding-right:10px; color:#DFDFDF;  }
#info .small 		{ font-size:12px; padding-left:10px; padding-right:0px;}

#info a 		{ text-decoration:underline; color:#426A8A; font-size: 9pt; }
#info a:hover 		{ text-decoration:underline; color:#426A8A;}
.ai {font-size: 7pt; color: green; font-style: italic;}
.actiontaken font-size: 9pt; color: red;}

h3 {color: Orange; text-align: center;}

.dat {color: grey; font-size: 8pt; padding-left: 10px;}
.name {color: Orange; font-size: 11pt; padding-left: 5px; padding-top: 3px; padding-bottom: 3px; }
.name a {color: black; color: black; text-decoration: underline;}
#wrapper {width: 1200px; margin: auto; }

</style>
</head>
<body>
	<div id = 'wrapper'>
	<div id="info">




			Welcome to secret-ninja-coon -chat. <a href = 'http://www.imgboard.co.uk'>Return to the forum.<a>


	</div>


	<div id="content">
		<div id="chatwindow"> </div>		
<!--			<textarea id="chatwindow" rows="19" cols="95" readonly></textarea><br>
-->
<div id = "cent">
		<input id="chatnick" type="text" size="9" maxlength="9" > 
		<input id="chatmsg" type="text" size="100" maxlength="150"  onkeyup="keyup(event.keyCode);"> 
		<input type="button" id = "button" value="Post" onclick="submit_msg()";><br><br></div>

		<br>
	</div>
</div>
</body>
</html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">


function cite(num){

var reply_cite = num ;
document.getElementById('chatmsg').value += reply_cite;

}

function update()
{
    $.post("x.php", {}, function(data){ $("#chatwindow").val(data);}); 

    setTimeout('update()', 1000);
}

$(document).ready(

function()
    {
     update();

     $("#button").click(   
      function()
      {        
       $.post("x.php",
    { m: $("#chatmsg").val()},
    function(data){ 
    $("#chatwindow").val(data);
    $("#chatmsg").val("");
    }
    );
      }
     );
    });


</script>




</script>

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.