How to change this code in order to work another way
I have this code :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$(function() {
$(".button").click(function() {
var dataString = "message= "+$('#message').val();
$.ajax({
type: "POST",
url: "calculate.php",
data: dataString,
success: function(data) {
$('#result').append("<div id='message'> "+ data +" </div>");
}
});
return false;
});
});
</script>
</head>
<body>
<div class="content">
开发者_运维问答<?php
displayForm();
function displayForm() {
?><div id="result"></div>
<div class="content2">
<form action="practicalTask.php" method="post">
<div class="firstLine">
<label for="message"> Message </label> <div class="time"> Time </div>
</div>
<div class="secondLine">
<input type="text" name="message" id="message" onclick="this.value='';" onblur="this.value=!this.value?' Please enter a message...':this.value;" value=" Please enter a message..." />pr
<input type="submit" name="submitButton" class="button" value="OK" />
</div>
</form>
<br/>
</div>
<div id="result"></div>
</div>
<?php } ?>
</body>
</html>
this is the calculate.php :
<?php
// Check the sum of the charachters of the message entered by user
// Assumption - only white space is not a charachter
$feel = "Sorry";
$count = 0;
$message = $_POST["message"];
$string = trim($message);
for ($i=0; $i<strlen($string); $i++) {
// ord() - cast to ascii
$count += ord($string[$i]);
}
if ( $count%2==0 ) {
$feel = "Glad";
}
$result = $feel . " to hear that ...";
// Server side date for the result
$date = date('d/m/Y H:i');
$form = "
<div class=\"content2\">
<form action=\"practicalTask.php\" method=\"post\">
<div class=\"firstLine\">
<label for=\"message\">Message</label> <div class=\"time\"> Time </div>
</div>
<div class=\"secondLine\">
<input type=\"text\" name=\"message\" value=" . $message . ">
<input type=\"submit\" value=\"OK\" />
<div id=\"time\"> " . $date . "</div>
</div>
</form>
</div>";
echo $form;
$resultLine = "<div class=\"firstLine\"> Result </div>
<div class=\"resultLine\">
<div class=\"result\">
<p class=\"" .$feel . "\">" . $result . "</p>
</div>
<div class=\"timestamp\">
<p class=\"" . $feel . "\">" . $date . "</p>
</div>
</div>";
echo $resultLine;
echo "<div class=\"margintop\"> <img src=\"sepsmall.jpg\" /> </div>";
?>
I want to change the way it works, in order that the new line (where i write the new things) will be at the bottom. i tried many ways, they all failed.
Thanks a lot..
Okay I am not completely sure I understand what you need, but here is how I usually avoid such positions problems:
Instead of:
$(function() {
$(".button").click(function() {
var dataString = "message= "+$('#message').val();
$.ajax({
type: "POST",
url: "calculate.php",
data: dataString,
success: function(data) {
$('#result').append("<div id='message'> "+ data +" </div>");
}
});
return false;
});
});
you can have: $(function() { $(".button").click(function() {
var dataString = "message= "+$('#message').val();
$.ajax({
type: "POST",
url: "calculate.php",
data: dataString,
success: function(data) {
$('#result').html(data);
}
});
return false;
});
});
And render the entire thing at server lvl, in PHP, which basically means include "<div id="message"></div>" in your PHP return. Not the most clever thing in the world, but I never have positions problems when feeding content back from PHP via jQuery/Ajax.
加载中,请稍侯......
精彩评论