Token Input - Moving from one div to other

Question

As per the requirement i want to move the token input from one div to another div.

I am able to move the token input data from one div to other but the token input feature is not working in other div.

Below is the code

<html>
<head>
    <script type="text/javascript" src="jquery-1.11.0.min.js" ></script>
    <script type="text/javascript" src="jquery.tokeninput.js" ></script>
    <link type="text/css" href="token-input.css"  rel="stylesheet"></link>
    <script type="text/javascript">
        $(document).ready(function() {
                initialize();
        });
        function initialize() {
            $("#demo-input").tokenInput([
                {id: 7, name: "Ruby"},
                {id: 11, name: "Python"},
                {id: 13, name: "JavaScript"},
                {id: 17, name: "ActionScript"},
                {id: 19, name: "Scheme"},
                {id: 23, name: "Lisp"},
                {id: 29, name: "C#"},
                {id: 31, name: "Fortran"},
                {id: 37, name: "Visual Basic"},
                {id: 41, name: "C"},
                {id: 43, name: "C++"},
                {id: 47, name: "Java"}
            ]);
        }
        function change() {
            if( $(".div2").html().trim().length == 0 ) {
                $(".div2").html( $(".div1").html() );
                $(".div1").html('');
            } else {
                $(".div1").html( $(".div2").html() );
                $(".div2").html('');
            }
        }
    </script>
</head>
<body>
    <div class="div1" style="border:1px solid red">
        <input type="text" id="demo-input" name="blah" />
    </div>

    <input type="button" onclick="change()"  value="ClicktoMove" />
    <div class="div2"  style="border:1px solid yellow">

    </div>
</body>

Can any one help on this...

Do you need to state of the token input to be maintained? If not, I image reinitialising would be the best move. — Chris, Apr 04 '14 at 16:43
@Chris reinitialising will not work as plugin duplicate the input — Aamir Afridi, Apr 04 '14 at 16:48

score 3 · Accepted Answer · edited May 23 '17 at 10:26

When you use .html(), the children will lose the events binded to it.

If you are copying just one element from one place to other than you can use .clone(true)

If you are moving multiple elements, like in your case, than you need to use element.contents()

For more details, read this.

Here is the Demo.

Changes to your code:

function change() {
    if($.trim($(".div2").html()).length === 0 ) {
        $(".div2").html($(".div1").contents());
        $(".div1").html('');
    }
    else
    {
        $(".div1").html( $(".div2").contents() );
        $(".div2").html('');
    }
}

Token Input - Moving from one div to other

1 Answers1