How to change this code in order to work another way_问答_开发者

How to change this code in order to work another way

开发者 https://www.devze.com 2023-01-18 04:04 出处：网络

I have this code : <html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\"> <head>

相关专题：javascript php

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.