Databases
StackOverflow2013
Postsdbo
POJquery/ajax problem displaying
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery/ajax problem displaying
    primarykey
    data
    text
    <p>this is my code. im having problem when i submit comment the textarea will lost its postion. i dont know why. ive checked its css. no luck. </p> <pre><code> $(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 &lt; 1 || message == "Leave your message here"){ submit.fadeOut('fast'); messageArea.fadeOut('slow', function(){ nameArea.fadeOut('slow'); var errorMessage = 'Oops! You haven&amp;#8217;t typed anything. Please have another go...'; var error = $('&lt;div id="too-short"&gt;&lt;span class="error"&gt;' + errorMessage + '&lt;/span&gt;&lt;/div&gt;').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 = $('&lt;div id="loader"&gt;&lt;img class="load-gif" src="' + loaderImage.src + '" /&gt;&lt;/div&gt;').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 &lt;table align="left" style="margin-left:30px; width:520px; border:1px solid;"&gt; &lt;?php while($fetchcom=mysql_fetch_array($comment)) { echo"&lt;tr&gt;"; echo"&lt;td style='font-size:15px'&gt;"; echo $fetchcom['c_name']; echo"&lt;/td&gt;"; echo"&lt;td align='right' style='font-size:12px; font-style:italic'&gt;"; echo $fetchcom['date']; echo"&lt;/td&gt;"; echo"&lt;/tr&gt;"; echo"&lt;tr&gt;"; echo"&lt;td colspan='2' style='padding:10px 10px 5px 10px; font-size:14px; color:gray; font-style:italic;'&gt;"; echo $fetchcom['Comment']; echo"&lt;/td&gt;"; echo"&lt;/tr&gt;"; } ?&gt; &lt;div id='append' style="margin-left:-20px; position:relative; width:300px;"&gt;&lt;/div&gt; &lt;/table&gt; &lt;div id="submission"&gt; &lt;form name="comment-submission"&gt; &lt;div style="position:relative; float:left; left:30px; top:5px;" &gt;Add Comment&lt;/div&gt; &lt;div style="position:relative; left:30px; top:3px;"&gt;&lt;input type="text" id="comment-name" /&gt;&lt;/div&gt; &lt;textarea id="message" name="message" &gt;&lt;/textarea&gt; &lt;div style="position:relative; top:-85px; height:70px; width:100px; right:-458px;"&gt;&lt;input type="button" id="submit-comment" value="Submit" /&gt; &lt;/div&gt; &lt;/form&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>//and heres the css hope this helps </p> <pre><code>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'); } </code></pre> <p>i think the problem is in the prepend(data) part. there must be something there to add to restore the position of the textarea, but i dont know what and how. im new to jquery and ajax.</p> <p>btw i have screenshot to show you the textarea ive mentioned. before submitting comment - <a href="http://i.stack.imgur.com/67eVU.png" rel="nofollow">http://i.stack.imgur.com/67eVU.png</a> and heres a screenshot after submitting comment - <a href="http://i.stack.imgur.com/zFSXC.png" rel="nofollow">http://i.stack.imgur.com/zFSXC.png</a> thanks in advance</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USuser628961
    1. USuser628961
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COJust a quick side note, if you're using an ID for a jQuery selector, don't use the element as well. Change `$('textarea#message')` to `$('#message')`. The first way is redundant and makes more work for jQuery's selector engine.
      singulars
      1. POJquery/ajax problem displaying
      1. USStephen
    2. COBy its new (floated) position I assume that you are correct and it's in the prepend, but, the context of the textbox is missing in your code. Is it located IN the `div#append`? if so, add the full HTML context and the full css related to it.
      singulars
      1. POJquery/ajax problem displaying
      1. USyossi
    3. COive modified above and add the css and the id append div
      singulars
      1. POJquery/ajax problem displaying
      1. USuser628961
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload