jquery/ajax問題顯示

Question

這是我的代碼。即時通訊有問題，當我提交評論textarea將失去其位置。我不知道爲什麼。我檢查了它的CSS。沒有運氣。

$(document).ready(function(){ 
     $("#box-table-a").tablesorter(); 


     var messageArea = $('textarea#message'); 
     var nameArea=$('#comment-name'); 
     var submit=$('#submit-comment'); 

     nameArea.val('Enter your name').css('color', '#666666'); 
     messageArea.val('Leave your message here').css('color', '#666666'); 


     messageArea.focus(function(){ 
      $(this).val('').css('color', '#000000'); 
      $(this).unbind('click').click(function(){ 
       return false; 
      }); 
     }); 

     nameArea.focus(function(){ 
      $(this).val('').css('color', '#000000'); 
      $(this).unbind('click').click(function(){ 
       return false; 
      }); 
     }); 

     $('input#submit-comment').click(function(){  
      // Store vars 
      var message = messageArea.hide().val(); 
      var cname = nameArea.hide().val(); 
      // Validation 
      if(message.length < 1 || message == "Leave your message here"){ 
        submit.fadeOut('fast'); 
        messageArea.fadeOut('slow', function(){ 
        nameArea.fadeOut('slow'); 

        var errorMessage = 'Oops! You haven&#8217;t typed anything. Please have another go...'; 
        var error = $('<div id="too-short"><span class="error">' + errorMessage + '</span></div>').insertBefore($(this)); 
        error.hide().fadeIn('slow', function(){ 
         setTimeout(function(){ 
          error.hide(); 
          messageArea.fadeIn('slow'); 
          nameArea.fadeIn('slow'); 
          submit.fadeIn('slow'); 
         }, 1000); 
        }); 
       }); 

       return false; 
      } 

      var dataString = 'message='+ message+'name='+ cname; 


      // Show loader 
      var loader = $('<div id="loader"><img class="load-gif" src="' + loaderImage.src + '" /></div>').insertBefore($(this)); 

      //alert (dataString); 
      $.ajax({ 
       type: "POST", 
       url: "commentconnect.php", 
       data: {message:message, name:cname}, 
       success: function(data) { 
        $('div#loader').find('img.load-gif').remove(); 
        $('div#loader').hide().fadeIn('slow'); 
        $('span.limit').remove(); 
        $('div#append').prepend(data); 
        $('input#submit-comment').unbind('click').click(function(){ 

         return false; 
        }); 
       } 
      }); 
      return false; 
     }); 
    }); 

//ive added the appended part of the comment which is in the table 

    <table align="left" style="margin-left:30px; width:520px; border:1px solid;"> 
     <?php 

        while($fetchcom=mysql_fetch_array($comment)) 
        { 

        echo"<tr>"; 
         echo"<td style='font-size:15px'>"; 
         echo $fetchcom['c_name']; 
         echo"</td>"; 

         echo"<td align='right' style='font-size:12px; font-style:italic'>"; 
         echo $fetchcom['date']; 
         echo"</td>"; 
        echo"</tr>"; 

        echo"<tr>"; 
         echo"<td colspan='2' style='padding:10px 10px 5px 10px; font-size:14px; color:gray; font-style:italic;'>"; 
         echo $fetchcom['Comment']; 
         echo"</td>"; 
        echo"</tr>"; 
        } 
        ?> 
        <div id='append' style="margin-left:-20px; position:relative; width:300px;"></div> 
</table> 
<div id="submission"> 
        <form name="comment-submission"> 
        <div style="position:relative; float:left; left:30px; top:5px;" >Add Comment</div> 
        <div style="position:relative; left:30px; top:3px;"><input type="text" id="comment-name" /></div> 
        <textarea id="message" name="message" ></textarea>    

        <div style="position:relative; top:-85px; height:70px; width:100px; right:-458px;"><input type="button" id="submit-comment" value="Submit" /> </div> 

</form> 
<div class="clear"></div> 
</div> 

//和繼承人的CSS希望這有助於

div#submission { 
    position:relative; 
    height:50px; 
    width:520px; 

} 
div#submission textarea#message { 
    float:left; 
    width:400px; 
    height:46px; 
    padding:5px 25px 5px 5px; 
    border:1px solid #666; 
    font-family: Tahoma, sans-serif; 
    font-size:14px; 
    margin-left:30px; 

} 

#comment-name{ 
float:left; 
    width:400px; 
    height:20x; 
    padding:5px 25px 5px 5px; 
    border:1px solid #666; 
    font-family: Tahoma, sans-serif; 
    font-size:14px; 
    margin-bottom:5px; 
} 

div#submission input#submit-comment{ 
cursor:pointer; 
height:30px; 
width:70px; 
margin-top:54px; 
margin-left:5px; 
color:#050; 
    font: bold 84% 'trebuchet ms',helvetica,sans-serif; 
    background-color:#fed; 
    border: 1px solid; 
    border-color: #696 #363 #363 #696; 
    filter:progid:DXImageTransform.Microsoft.Gradient 
    (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ffeeddaa'); 

} 

我認爲這個問題是在預定（數據）的一部分。必須有東西在那裏添加恢復textarea的位置，但我不知道什麼和如何。即時通訊新的jQuery和ajax。

順便說一句我有截圖向你展示textarea提到。提交評論後http://i.stack.imgur.com/67eVU.png和繼承人截圖 - - 提交評論之前http://i.stack.imgur.com/zFSXC.png 由於事先

Answer 1

它真的是你的過錯CSS這裏，你需要定義與像高/寬尺寸符合您的輸入形式的區域（格） ，然後它不應該以你現在看到的方式變形。很難再告訴你，因爲我在這裏沒有看到任何合適的CSS。

做這樣的事情：

<div style="position: relative"> 
    <div style="position: absolute; left: 50px;">Add comment</div> 
    <div style="position: absolute; right: 20px;">Blah blah</div> 

    ... 

</div> 

保持主容器作爲「相對」項目可以讓你在關係到其定位你內心的項目。目前你在那裏有一個position:relative;混亂，這是你的問題所在。

在一個簡單的HTML頁面上練習一些CSS定位以使您的表單看起來正確，然後集成到您的應用中。

我只用內聯CSS爲快速參考，您shoudl在現實世界中使用

Answer 2

第一圖像中的文本區域上面的輸入是在某個設定爲塊級一個div使用外部CSS表。在第二個圖像中，該文本框和我假設的div不在那裏。該塊級別div推浮動textarea到其在第一個圖像中的位置。有幾種方法可以通過css來修復它，但最明顯的是確保輸入和它包含div在提交後仍然存在。