Note that there are some explanatory texts on larger screens.

plurals
  1. POJavascript change div content upon a click
    primarykey
    data
    text
    <p>I'm pulling a content from PHP array and I have a situation like this:</p> <pre><code> &lt;div class="weight-display"&gt; &lt;span&gt;04/25/2011&lt;/span&gt; &lt;span&gt;100lbs&lt;/span&gt; &lt;span&gt;Edit&lt;/span&gt; &lt;a href="http://foo.com"&gt;Delete&lt;/span&gt; &lt;/div&gt; &lt;div class="weight-display"&gt; &lt;span&gt;04/27/2011&lt;/span&gt; &lt;span&gt;150lbs&lt;/span&gt; &lt;span&gt;Edit&lt;/span&gt; &lt;a href="http://foo.com"&gt;Delete&lt;/span&gt; &lt;/div&gt; etc... </code></pre> <p>Now when somebody clicks on Edit within, let's say, first div where weight is 100lbs, I just need that "div" to change and to have input field instead of simple text where weight is (while others will remain the same) and to be like this:</p> <pre><code>&lt;div class="weight-display"&gt; &lt;span&gt;04/25/2011&lt;/span&gt; &lt;input type="text" value="100" /&gt; &lt;span&gt;Save&lt;/span&gt; &lt;span&gt;Cancel&lt;/span&gt; &lt;/div&gt; &lt;div class="weight-display"&gt; &lt;span&gt;04/27/2011&lt;/span&gt; &lt;span&gt;150lbs&lt;/span&gt; &lt;span&gt;Edit&lt;/span&gt; &lt;a href="http://foo.com"&gt;Delete&lt;/span&gt; &lt;/div&gt; etc.. </code></pre> <p>So basically div has to "reload itself" and change content. Now I really need some very simple Javascript solution. Preferably I would like a solution with a hidden div beneath original one, so they just swap places when user clicks on EDIT and in a case if CANCEL is pressed to swap places again so original div with text is displayed...</p> <p>Thanks, Peter</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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