Trying to use a tag-editor, without success :(

Discussion in 'jQuery' started by mooiman, Oct 9, 2014.

  1. #1
    I'm trying to implement a tag-editor on my website, therefor I want to use the jquery found at:

    http://goodies.pixabay.com/jquery/tag-editor/demo.html

    So I tried making it work with this coding:
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script>
        $('#demo1').tagEditor({
        initialTags: ['Hello', 'World', 'Example', 'Tags'],
        delimiter: ', ', /* space and comma */
        placeholder: 'Enter tags ...'
        });
    </script>
    <script src="jquery.tag-editor.js" type="text/javascript"></script>
    <link rel="stylesheet" href="jquery.tag-editor.css">
    </head>
    <body>
            <div style="margin:0 0 1.2em">
                <p>The original field - textarea or text input - is normally hidden automatically. We show it here to make value changes visible:</p>
                <textarea id="demo1"></textarea>
            </div>   
            </body>
    </html>
    HTML:
    ( Both the .css and the .js file are in the same directory as my html file.)
    All I'm getting as a result is a plain textarea, which ain't producing tags when typing in it.

    I don't understand what I'm doing wrong here, so I hope someone can help me out..
     
    mooiman, Oct 9, 2014 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    I can at least tell you one error you're doing. The tageditor-script needs to be included BEFORE the inline script tag. So does the CSS (preferably).
    You should turn it around - first the CSS-file, then the link to GoogleAPIs, then the TagEditor-script, and THEN the inline-script enabling tageditor.
     
    PoPSiCLe, Oct 9, 2014 IP