current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →
up vote 0 down vote favorite

I got a foreach that generates a list of links now in the top right corner of every link I got a clone button that when clicked should clone that element. The below code in its current format.

    <?php
      foreach ($result as $value) {
        list($classname, $origin, $name) = explode('_', $value);
        $classname = trim($classname, '[]');
        $origin    = trim($origin, '[]');
        $name      = pathinfo($name, PATHINFO_FILENAME);
        echo "<li class='audiofile " . $name . " " . $classname . "' id='" . $value . "'>".
                "<a class='btn_clone' id='' onclick='repeat()'>#</a>".
                "<a href='" . $directoryname . "/" . $value . "'>".
                  "<img src='images/avatars/" . $classname . ".jpg'>".
                  "<div class='audiotext'>".
                    "<span class='audiotitle'>" . $name . "</span>".
                    "<span class='audioorigin'>" . $origin .  "</span>".
                  "</div>".
                "</a>".
              "</li>";
      }
    ?>

This goes together with this js further down the file.

    var i = 0;
    var original = document.getElementById('<?php echo $value ?>');

    function repeat() {
      var clone = original.cloneNode(true);
      clone.id = "clone" + ++i;
      original.parentNode.appendChild(clone);
    }

Currently it will clone only the last item of the list no matter what item you clicked the clone button. And that is I think because the $value used for the var original is simply the last item of the foreach.

So how to make it work with the generated id's in the foreach. Or if there is another way to make each item clone but keeping the foreach intact I would really appreciate it to hear it. Thanks in advance for helping.

share|improve this question
up vote 2 down vote accepted

You can select the element by usin this.parentElement when the click event occurs:

var j = 0;
function repeat(event) {
    var original = event.target.parentNode;
    var clone = original.cloneNode(true);
    clone.id = "clone" + ++j;
    original.parentElement.appendChild(clone);
}

And you have to add the event in your onclick attribute:

//.......
"<a class='btn_clone' id='' onclick='repeat(event)'>#</a>".
//.......                                   ^ add this

I hope this will help you.

share|improve this answer
    
How would I make this into the function repeat? I am trying now but get a few errors like original not defined. Thanks so much for helping btw! I used this. jsfiddle.net/z4dkaz1u Now testing the revised code. Appreciate the help! – purple11111 Jul 22 at 0:38
    
Just tested your latest revised code and it ain't giving a error but it ain't cloning either. – purple11111 Jul 22 at 0:42
    
Sorry my bad please just remove var original = document.getElementById('<?php echo $value ?>'); and use the code in the answer ! – Ismail RBOUH Jul 22 at 0:48
    
I am sure i am doing it wrong somehow. Really appreciate you taking the time to help me on this. I got it now like this: jsfiddle.net/no2vv2vp – purple11111 Jul 22 at 0:55
    
I've added that to prevent the URL from changing the page but since your URL doesn't have an Href attribute you can remove that ;) – Ismail RBOUH Jul 22 at 0:59

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.