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
https://forums.phpfreaks.com/topic/224993-jquery-help-ajax-is-soo-frustrating/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.