Databases
StackOverflow2013
Postsdbo
POJquery dynamic text effect / class problem
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery dynamic text effect / class problem
    text
    copied!<p>I have a html file containing a table with some rows n columns. each row contain a button, which has some functions. First, it has to submit the data in a row to a php file, which is not printing anything. Then the button have to change its text and text in column 5 of its corresponding row. The change text effect of button is working well. But the change text effect of column 5 is buggy. Only the text of column5 in first row is changing, no matter which button you click.. Can anyone fix the problem for me??</p> <p>Thanks in advance :)</p> <p>blasteralfred </p> <pre><code>&lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt; &lt;style&gt; .style1 { background-color: #c3d9ff; font-family:arial,sans-serif; } .style2 { text-align: center; font-weight: bold; } .style3 { background-color: #FFFFFF; font-family:arial,sans-serif; text-align: center; font-weight: bold; } body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:15px; background-color: ; } .delete_button { font-weight:bold; float:right; } &lt;/style&gt; &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(function() { $(".delete_button").click(function() { var id = $(this).attr("id"); var dataString = 'id='+ id ; var parent = $(this).parent().parent(); $.ajax({ type: "POST", url: "del.php", data: dataString, cache: false, success: function() { if(id % 2) { parent.fadeOut('fast', function() {$(this).fadeOut();$(this).fadeIn();}); } else { parent.fadeOut('fast', function() {$(this).fadeOut();$(this).fadeIn();}); } } }); return false; } );}); $(document).ready(function() { $('.delete_button').click(function() { $(this).text($(this).text() == 'Inactivate' ? 'Activate' : 'Inactivate'); $("#clickme2").text($("#clickme2").text() == 'Inactive' ? 'Active' : 'Inactive'); return false; }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;table style="width: 90%" align="center" class="style1"&gt; &lt;tr&gt; &lt;td colspan="7" class="style2"&gt;MANAGER&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="style3" style="width: 139px"&gt;column1&lt;/td&gt; &lt;td class="style3" style="width: 139px"&gt;column2&lt;/td&gt; &lt;td class="style3" style="width: 139px"&gt;column3&lt;/td&gt; &lt;td class="style3" style="width: 139px"&gt;column4&lt;/td&gt; &lt;td class="style3" style="width: 139px"&gt;column5&lt;/td&gt; &lt;td class="style3" style="width: 144px"&gt;column6&lt;/td&gt; &lt;td class="style3" style=""&gt;Action&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="style3" style="width: 139px"&gt;msg1&lt;/td&gt; &lt;td class="style3" style="width: 139px"&gt;msg2&lt;/td&gt; &lt;td class="style3" style="width: 139px"&gt;msg3&lt;/td&gt; &lt;td class="style3" style="width: 139px"&gt;msg4&lt;/td&gt; &lt;td div id="clickme2" class="style3" style="width: 139px"&gt;Inactive&lt;/td&gt; &lt;td class="style3" style="width: 144px"&gt;msg6&lt;/td&gt; &lt;td style="width: "&gt; &lt;button class="delete_button" style="width:80px;height:"&gt;Activate&lt;/button&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="style3" style="width: 139px"&gt;msg1&lt;/td&gt; &lt;td class="style3" style="width: 139px"&gt;msg2&lt;/td&gt; &lt;td class="style3" style="width: 139px"&gt;msg3&lt;/td&gt; &lt;td class="style3" style="width: 139px"&gt;msg4&lt;/td&gt; &lt;td div id="clickme2" class="style3" style="width: 139px"&gt;Inactive&lt;/td&gt; &lt;td class="style3" style="width: 144px"&gt;msg6&lt;/td&gt; &lt;td style="width: "&gt; &lt;button class="delete_button" style="width:80px;height:"&gt;Activate&lt;/button&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="style3" style="width: 139px"&gt;msg1&lt;/td&gt; &lt;td class="style3" style="width: 139px"&gt;msg2&lt;/td&gt; &lt;td class="style3" style="width: 139px"&gt;msg3&lt;/td&gt; &lt;td class="style3" style="width: 139px"&gt;msg4&lt;/td&gt; &lt;td div id="clickme2" class="style3" style="width: 139px"&gt;Inactive&lt;/td&gt; &lt;td class="style3" style="width: 144px"&gt;msg6&lt;/td&gt; &lt;td style="width: "&gt; &lt;button class="delete_button" style="width:80px;height:"&gt;Activate&lt;/button&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="style3" style="width: 139px"&gt;msg1&lt;/td&gt; &lt;td class="style3" style="width: 139px"&gt;msg2&lt;/td&gt; &lt;td class="style3" style="width: 139px"&gt;msg3&lt;/td&gt; &lt;td class="style3" style="width: 139px"&gt;msg4&lt;/td&gt; &lt;td div id="clickme2" class="style3" style="width: 139px"&gt;Inactive&lt;/td&gt; &lt;td class="style3" style="width: 144px"&gt;msg6&lt;/td&gt; &lt;td style="width: "&gt; &lt;button class="delete_button" style="width:80px;height:"&gt;Activate&lt;/button&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="style3" style="width: 139px"&gt;msg1&lt;/td&gt; &lt;td class="style3" style="width: 139px"&gt;msg2&lt;/td&gt; &lt;td class="style3" style="width: 139px"&gt;msg3&lt;/td&gt; &lt;td class="style3" style="width: 139px"&gt;msg4&lt;/td&gt; &lt;td div id="clickme2" class="style3" style="width: 139px"&gt;Inactive&lt;/td&gt; &lt;td class="style3" style="width: 144px"&gt;msg6&lt;/td&gt; &lt;td style="width: "&gt; &lt;button class="delete_button" style="width:80px;height:"&gt;Activate&lt;/button&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="style3" style="width: 139px"&gt;msg1&lt;/td&gt; &lt;td class="style3" style="width: 139px"&gt;msg2&lt;/td&gt; &lt;td class="style3" style="width: 139px"&gt;msg3&lt;/td&gt; &lt;td class="style3" style="width: 139px"&gt;msg4&lt;/td&gt; &lt;td div id="clickme2" class="style3" style="width: 139px"&gt;Inactive&lt;/td&gt; &lt;td class="style3" style="width: 144px"&gt;msg6&lt;/td&gt; &lt;td style="width: "&gt; &lt;button class="delete_button" style="width:80px;height:"&gt;Activate&lt;/button&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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