How can I convert this JavaScript to jQuery? -
i'm trying implement localstorage 1 of projects, i'm having problem because portion of code breaks jquery ui-layout.
function $(id) { return document.getelementbyid(id); } in order make layout work, have add $:
$(document).ready(function($) { being don't know how write javascript or jquery, can implement it, can code below written in way can avoid using "function $(id)" part , "$"?
here code in entirety:
// return value - prob? function $(id) { return document.getelementbyid(id); } // write data local storage function writelocal() { var key = $('lskey').value; var data = $('html').value; localstorage.setitem(key, data); updateitemslist(); } // remove item localstorage function deletelocal(keyname) { localstorage.removeitem(keyname); updateitemslist(); } // read actual data key localstorage function readlocal(keyname) { $('lskey').value = keyname; $('html').value = localstorage.getitem(keyname); } // allow retrieval of localstorage items function updateitemslist() { var items = localstorage.length; var s = '<p>saved items</p>'; s+= '<ul>'; (var i=0; i<items; i++) { var keyname = localstorage.key(i); s+= '<li class="lsdli">' + '<div style="float:right;">' + '<input onclick="readlocal(\''+keyname+'\');"/>'+ '<input onclick="deletelocal(\''+keyname+'\');"/>'+ '</div>'+ '<b>'+keyname+'</b>' + '</li>'; } $('lsvalues').innerhtml = s + '</ul>'; } // start loading whatever persistant in localstorage function load() { updateitemslist(); } window.onload = load;
so sounds using jquery ui , it's causing conflict. easiest thing might renaming $ convenience function using...
// return value - prob? function $$(id) { return document.getelementbyid(id); } // write data local storage function writelocal() { var key = $$('lskey').value; var data = $$('html').value; localstorage.setitem(key, data); updateitemslist(); } // remove item localstorage function deletelocal(keyname) { localstorage.removeitem(keyname); updateitemslist(); } // read actual data key localstorage function readlocal(keyname) { $$('lskey').value = keyname; $$('html').value = localstorage.getitem(keyname); } // allow retrieval of localstorage items function updateitemslist() { var items = localstorage.length; var s = '<p>saved items</p>'; s+= '<ul>'; (var i=0; i<items; i++) { var keyname = localstorage.key(i); s+= '<li class="lsdli">' + '<div style="float:right;">' + '<input onclick="readlocal(\''+keyname+'\');"/>'+ '<input onclick="deletelocal(\''+keyname+'\');"/>'+ '</div>'+ '<b>'+keyname+'</b>' + '</li>'; } $$('lsvalues').innerhtml = s + ''; } // start loading whatever persistant in localstorage function load() { updateitemslist(); } window.onload = load; it wouldn't hard convert have jquery either, grabbing first item out of each jquery object.
// write data local storage function writelocal() { var key = $('lskey')[0].value; var data = $('html')[0].value; localstorage.setitem(key, data); updateitemslist(); } // remove item localstorage function deletelocal(keyname) { localstorage.removeitem(keyname); updateitemslist(); } // read actual data key localstorage function readlocal(keyname) { $('lskey')[0].value = keyname; $('html')[0].value = localstorage.getitem(keyname); } // allow retrieval of localstorage items function updateitemslist() { var items = localstorage.length; var s = '<p>saved items</p>'; s+= '<ul>'; (var i=0; i<items; i++) { var keyname = localstorage.key(i); s+= '<li class="lsdli">' + '<div style="float:right;">' + '<input onclick="readlocal(\''+keyname+'\');"/>'+ '<input onclick="deletelocal(\''+keyname+'\');"/>'+ '</div>'+ '<b>'+keyname+'</b>' + '</li>'; } $('lsvalues')[0].innerhtml = s + ''; } // start loading whatever persistant in localstorage function load() { updateitemslist(); } window.onload = load; beyond 2 options, you'd looking @ changing code bit more things jquery way. instead of $('lskey').value $('lskey').val(), etc. you'd have update code use jquery methods.
Comments
Post a Comment