Databases
StackOverflow2013
Postsdbo
POjQuery inline editing selector
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery inline editing selector
    text
    copied!<p>I have a functional inline editing script on client side, however I'd like to add a button like <code>&lt;input type="button" value="edit here"&gt;</code> when someone clicks the button it should be able to select the value just like my hover selector works and produce the form </p> <p>In short I want to remove the hover status selector to the click button selector.</p> <p>Check out the code to understand more:</p> <pre><code>&lt;div id="pesa"&gt;&lt;p&gt;PERSONAL INFORMATION&lt;/p&gt; &lt;ul&gt; EMAIL:&lt;li class="editable"&gt;&lt;?php echo $email;?&gt;&lt;/li&gt;&lt;input type="button" value="edit here"&gt; NAME:&lt;li class="editable"&gt;&lt;?php echo $name;?&gt;&lt;/li&gt;&lt;input type="button" value="edit here"&gt; TELLPHONE:&lt;li class="editable"&gt;&lt;?php echo $tel;?&gt;&lt;/li&gt; COUNTRY:&lt;li class="editable"&gt;&lt;?php echo $country;?&gt;&lt;/li&gt; CITY:&lt;li class="editable"&gt;&lt;?php echo $city;?&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>Thank you.ok sorry i wass having trouble ith puting code tags here isthe js</p> <pre><code>$(document).ready(function() { var oldText, newText; $(".editable").hover( function() { $(this).addClass("editHover"); }, function() { $(this).removeClass("editHover"); } ); $(".editable").bind("dblclick", replaceHTML); $(".btnSave").live("click", function() { newText = $(this).siblings("form") .children(".editBox") .val().replace(/"/g, "&amp;quot;"); $(this).parent() .html(newText) .removeClass("noPad") .bind("dblclick", replaceHTML); } ); $(".btnDiscard").live("click", function() { $(this).parent() .html(oldText) .removeClass("noPad") .bind("dblclick", replaceHTML); } ); function replaceHTML() { oldText = $(this).html() .replace(/"/g, "&amp;quot;"); $(this).addClass("noPad") .html("") .html("&lt;form&gt;&lt;input type=\"text\" class=\"editBox\" value=\"" + oldText + "\" /&gt; &lt;/form&gt;&lt;a href=\"#\" class=\"btnSave\"&gt;Save changes&lt;/a&gt; &lt;a href=\"#\" class=\"btnDiscard\"&gt;Discard changes&lt;/a&gt;") .unbind('dblclick', replaceHTML); } } ); </code></pre> <p>and the css</p> <pre><code> #pesa a{ color: #000; } #pesa a:hover{ color: #; } #pesa a:hover{ text-decoration: none; } h1{ font-size: 30px; padding: 0; margin: 0; } h2{ font-size: 20px; } .editHover{ background-color: #E8F3FF; } .editBox{ width: 326px; min-height: 20px; padding: 10px 15px; background-color: #fff; border: 2px solid #E8F3FF; } #pesa ul{ list-style: none; } #pesa li{ width: 330px; min-height: 20px; padding: 10px 15px; margin: 5px; } li.noPad{ padding: 0; width: 360px; } #pesa form{ width: 100%; } .btnSave, .btnCancel{ padding: 6px 30px 6px 75px; } .block{ float: left; margin: 20px 0; } </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