Why does this work in jsfiddle but not in my document

I found a wonderful jsfiddle that someone has made and wanted to use part of it in my project:

http://jsfiddle.net/manuel/29gtu/

It works on the jsfiddle but not in my HTML document. Here is what in my document:

<!DOCTYPE html>
<html>
<head>
<script src="scripts/jquery-1.7.2.js"></script>

<script>

$("button").click(function() {
    var id = $("#id").val();
    var text = "icon-"+id;
    // update the result array
    var result = JSON.parse(localStorage.getItem("result"));
    if(result == null)
        result = [];

    result.push({id: id, icon: text});
    // save the new result array
    localStorage.setItem("result", JSON.stringify(result));

    // append the new li
    $("#bxs").append($("<li></li>").attr("id", "item-"+id).html(text));
});

// on init fill the ul
var result = JSON.parse(localStorage.getItem("result"));
if(result != null) {
    for(var i=0;i<result.length;i++) {
        var item = result[i];
        $("#bxs").append($("<li></li>").attr("id", "item-"+item.id).html(item.icon));
    }
}?

</script>
</head>

<body>
<ul id="bxs" class="tabs"> 
</ul>

<input type="text" id="id" /><button>save</button>
</body>
</html>

The code is copied and pasted from the fiddle. I think it has to do with me not having a plugin for local storage. For that jsfiddle to work, do I need some external plugin that I am missing?

Answers:

Answer

You should wrap your whole code within $(document).ready(function() {...});

So.

<script type="text/javascript">

    $(document).ready(function() {
        $("button").click(function() {
            var id = $("#id").val();
            var text = "icon-" + id;
            // update the result array
            var result = JSON.parse(localStorage.getItem("result"));
            if (result == null) result = [];

            result.push({
                id: id,
                icon: text
            });
            // save the new result array
            localStorage.setItem("result", JSON.stringify(result));

            // append the new li
            $("#bxs").append($("<li></li>").attr("id", "item-" + id).html(text));
        });

        // on init fill the ul
        var result = JSON.parse(localStorage.getItem("result"));
        if (result != null) {
            for (var i = 0; i < result.length; i++) {
                var item = result[i];
                $("#bxs").append($("<li></li>").attr("id", "item-" + item.id).html(item.icon));
            }
        }

    });

</script>

Note

In jsfiddle onLoad mode do that for you, i.e. when you select onLoad from left side panel drop down, then all js code execute after all resources become appeared in the DOM.

Answer

Put in $(document).ready like this, Also give type of script tag

<script type="text/javascript">
$(document).ready(function() {   

    $("button").click(function() {
        var id = $("#id").val();
        var text = "icon-" + id;
        // update the result array
        var result = JSON.parse(localStorage.getItem("result"));
        if (result == null) result = [];

        result.push({
            id: id,
            icon: text
        });
        // save the new result array
        localStorage.setItem("result", JSON.stringify(result));

        // append the new li
        $("#bxs").append($("<li></li>").attr("id", "item-" + id).html(text));
    });

    // on init fill the ul
    var result = JSON.parse(localStorage.getItem("result"));
    if (result != null) {
        for (var i = 0; i < result.length; i++) {
            var item = result[i];
            $("#bxs").append($("<li></li>").attr("id", "item-" + item.id).html(item.icon));
        }
    }
})?;    
 </script>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.