Home/ Questions/Q 8344147
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T06:16:26+00:00

I found a wonderful jsfiddle that someone has made and wanted to use part

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0