modernizr - Passing data to variables from other Javascript files -
i'm working on project driving me crazy, i've searched through articles here on site i've not been able head how make work.
i using modernizr.js file check geolocation , localstorage, localstorage piece working fine finding latitude, longitude , creating map geolocation file. issue i'm having passing latitude , longitude values main js file can pass values (along form data entered on page) constructor function.
i don't know if order of statements or if passing data incorrectly, i've been battling while , have succeeded in confusing myself more. if can clarify me appreciate it.
i including files project, again stuck on passing values latitude , longitude geolocation.js file.
html file:
<!doctype html> <html> <head> <title>javascript, ajax , json: list</title> <meta charset="utf-8"> <link rel="stylesheet" href="todol14o2.css"> <script src="http://maps.google.com/maps/api/js?sensor=true"></script> <script src="modernizr.js"></script> <script> modernizr.load([ "todol14o2.js", { test: modernizr.geolocation, yep: "l14o2geolocation.js", nope: "l14o2nogeolocation.js" }, { test: modernizr.localstorage, yep: "l14o2localstorage.js", nope: "l14o2nolocalstorage.js", complete: function() { init(); } } ]); </script> </head> <body> <div> <h1>my list</h1> <ul id="todolist"> </ul> <!-- display map//--> <div id="mapdiv"> <h1>where it</h1> <div id="map"> </div> </div> <!-- display search results //--> <div id="searchresults"> <h2>results</h2> <ul id="searchresultslist"> </ul> </div> <form> <!-- display search input //--> <fieldset> <legend>search items</legend> <div class="tablecontainer"> <div class="tablerow"> <label for="searchterm">search: </label> <input type="text" id="searchterm" size="35" placeholder="search term"> </div> <div class="tablerow"> <label for="searchbutton"></label> <input type="button" id="searchbutton" value="search"> </div> </fieldset> <fieldset> <legend>add new item</legend> <div class="tablecontainer"> <div class="tablerow"> <label for="task">task: </label> <input type="text" id="task" size="35" placeholder="get milk"> </div> <div class="tablerow"> <label for="who">who should it: </label> <input type="text" id="who" placeholder="scott"> </div> <div class="tablerow"> <label for="duedate">due date: </label> <input type="date" id="duedate" placeholder="mm/dd/yyyy"> </div> <div class="tablerow"> <label for="submit"></label> <input type="button" id="submit" value="submit"> </div> </fieldset> </form> </div> </body> </html> todo javascript file:
function todo(id, task, who, duedate, days, lat, lon) { this.id = id; this.task = task; this.who = who; this.duedate = duedate; this.done = false; this.days = days; this.lat = lat; this.lon = lon; } var todos = new array(); var lat; var lon; console.log("before onload: " + lat + ", " + lon); window.onload = init; function init() { var submitbutton = document.getelementbyid("submit"); submitbutton.onclick = getformdata; // search term , call click handler var searchbutton = document.getelementbyid("searchbutton"); searchbutton.onclick = searchtodos; gettodoitems(); } function gettodoitems() { if (localstorage) { (var = 0; < localstorage.length; i++) { var key = localstorage.key(i); if (key.substring(0, 4) == "todo") { var item = localstorage.getitem(key); var todoitem = json.parse(item); todos.push(todoitem); } } addtodostopage(); } else { console.log("error: don't have localstorage!"); } } function addtodostopage() { var ul = document.getelementbyid("todolist"); var listfragment = document.createdocumentfragment(); (var = 0; < todos.length; i++) { var todoitem = todos[i]; var li = createnewtodo(todoitem); listfragment.appendchild(li); } ul.appendchild(listfragment); } function addtodotopage(todoitem) { var ul = document.getelementbyid("todolist"); var li = createnewtodo(todoitem); ul.appendchild(li); document.forms[0].reset(); } function createnewtodo(todoitem) { var li = document.createelement("li"); li.setattribute("id", todoitem.id); var spantodo = document.createelement("span"); spantodo.innerhtml = todoitem.who + " needs " + todoitem.task + " " + todoitem.duedate + " @ lat: " + todoitem.lat + " & lon: " + todoitem.lon + "task has " + todoitem.days + " days until due"; var spandone = document.createelement("span"); if (!todoitem.done) { spandone.setattribute("class", "notdone"); spandone.innerhtml = " "; } else { spandone.setattribute("class", "done"); spandone.innerhtml = " ✔ "; } // add click handler update done state spandone.onclick = updatedone; // add delete link var spandelete = document.createelement("span"); spandelete.setattribute("class", "delete"); spandelete.innerhtml = " ✗ "; // add click handler delete spandelete.onclick = deleteitem; li.appendchild(spandone); li.appendchild(spantodo); li.appendchild(spandelete); return li; } function getformdata() { var task = document.getelementbyid("task").value; if (checkinputtext(task, "please enter task")) return; var = document.getelementbyid("who").value; if (checkinputtext(who, "please enter person task")) return; var date = document.getelementbyid("duedate").value; if (checkinputtext(date, "please enter due date")) return; // later, process date here //send date input checkdate function, validate correct format //and return value how many days until due or how many days overdue. checkdate(date); var numofdays; calculatedays(date); var id = (new date()).gettime(); //the findlocation function call either l14o2geolocation.js or //the l14o2nogeolocation.js files, using modernizr.js file check //to see if geolocation enabled, if display map //item done , if not return message no geolocation //enbled. //var lat; //var lon; findlocation(lat, lon); console.log("return lat , long! " + lat + ", " + lon); var todoitem = new todo(id, task, who, date, lat, lon); todos.push(todoitem); addtodotopage(todoitem); savetodoitem(todoitem); // hide search results hidesearchresults(); } function checkinputtext(value, msg) { if (value == null || value == "") { alert(msg); return true; } return false; } //move function l14o2localstorage.js , //14o2nolocalstorage.js files. //function savetodoitem(todoitem) { // if (localstorage) { // var key = "todo" + todoitem.id; // var item = json.stringify(todoitem); // localstorage.setitem(key, item); // } // else { // console.log("error: don't have localstorage!"); // } //} function updatedone(e) { var span = e.target; var id = span.parentelement.id; var item; (var = 0; < todos.length; i++) { if (todos[i].id == id) { item = todos[i]; break; } } if (item.done == false) { item.done = true; span.setattribute("class", "done"); span.innerhtml = " ✔ "; } else if (item.done == true) { item.done = false; span.setattribute("class", "notdone"); span.innerhtml = " "; } var itemjson = json.stringify(item); var key = "todo" + id; localstorage.setitem(key, itemjson); } function deleteitem(e) { var span = e.target; var id = span.parentelement.id; // find , remove item in localstorage var key = "todo" + id; localstorage.removeitem(key); // find , remove item in array (var = 0; < todos.length; i++) { if (todos[i].id == id) { todos.splice(i, 1); break; } } // find , remove item in page var li = e.target.parentelement; var ul = document.getelementbyid("todolist"); ul.removechild(li); //clear map page var map = document.getelementbyid("map"); map.innerhtml = ""; // hide search results hidesearchresults(); } // search function searchtodos() { // new search, clear previous results clearsearchresultslist(); // text search var searchterm = document.getelementbyid("searchterm").value; var count = 0; // check todos in list (var = 0; < todos.length; i++) { var todoitem = todos[i]; // make regular expression match search term, regardless of //case var re = new regexp(searchterm, "i"); // try matching expression task , //do item if (todoitem.task.match(re) || todoitem.who.match(re)) { // if find match, add item search results addsearchresulttopage(todoitem); // keep count of number of items match count++; } } // if don't match items, display "no results" if (count == 0) { var ul = document.getelementbyid("searchresultslist"); var li = document.createelement("li"); li.innerhtml = "no results!"; ul.appendchild(li); } // show search results showsearchresults(); } // add search result search results list in page function addsearchresulttopage(todoitem) { var ul = document.getelementbyid("searchresultslist"); var li = document.createelement("li"); li.innerhtml = todoitem.who + " needs " + todoitem.task + " " + todoitem.duedate; ul.appendchild(li); } // clear previous search results function clearsearchresultslist() { var ul = document.getelementbyid("searchresultslist"); while (ul.firstchild) { ul.removechild(ul.firstchild); } } function hidesearchresults() { var div = document.getelementbyid("searchresults"); div.style.display = "none"; clearsearchresultslist(); } function showsearchresults() { var div = document.getelementbyid("searchresults"); div.style.display = "block"; document.forms[0].reset(); } function checkdate(date) { if (isvaliddate(date) == false) { return false; } console.log(date + " valid date"); return true; } function isvaliddate(date) { // checks following valid date format of mm/dd/yyyy // mm/dd/yyyy , yyyy/mm/dd var regex1 = /^(\d{2,2})(\/)(\d{2,2})\2(\d{4}|\d{4})$/; // var regex2 = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/; //if (date != "" && date.match(regex1) && date.match(regex2) ) if (date != "" && date.match(regex1)) { alert("invalid date format: " + date); return false; } return true; } //function calculate number of days until item either due //or overdue. function calculatedays(date) { var today = new date(); var d1 = today.gettime(); var datein = new date(date); var d2 = datein.gettime(); var year = today.getfullyear(); var month = today.getmonth()+1; var day = today.getdate(); var time = today.gettime(); var total = parseint((d1-d2)/(24*3600*1000)); console.log("total: " + total); return total; } the geolocation javascript file:
//if geolocation found modernizr map item //to completed displayed in mapdiv on page. function findlocation(lat, lon) { console.log("in geolocation"); navigator.geolocation.getcurrentposition(displaylocation); } function displaylocation(position) { var map = null; latitude = position.coords.latitude; longitude = position.coords.longitude; lat = latitude; lon = longitude; console.log("lat: " + lat + " lon: " + lon); if (!map) { showmap(latitude, longitude); } addmarker(latitude, longitude); return(lat, lon); } function showmap(lat, long) { var googlelatlong = new google.maps.latlng(lat, long); var mapoptions = { zoom: 12, center: googlelatlong, maptypeid: google.maps.maptypeid.roadmap }; var mapdiv = document.getelementbyid("map"); map = new google.maps.map(mapdiv, mapoptions); map.panto(googlelatlong); } function addmarker(lat, long) { var googlelatlong = new google.maps.latlng(lat, long); var markeroptions = { position: googlelatlong, map: map, title: "task location" } var marker = new google.maps.marker(markeroptions); } nogeolocation javascript file:
//if geolocation not found modernizr message displayed //in console , on page showing geolocation not enabled. function findlocation() { var mapdiv = document.getelementbyid("map"); mapdiv.innerhtml = "geolocation not enabled on browser."; console.log("geolocation not enabled on browser."); } localstorage javascript file:
//if localstorage found modernizr item stored in //localstorage , message displayed in console. function savetodoitem(todoitem) { var key = "todo" + todoitem.id; var item = json.stringify(todoitem); localstorage.setitem(key, item); console.log("item: " + key + ", " + item + " stored in local storage"); } nolocalstorage javascript file:
//if localstorage found modernizr item stored in //localstorage , message displayed in console. function savetodoitem(todoitem) { var key = "todo" + todoitem.id; var item = json.stringify(todoitem); localstorage.setitem(key, item); console.log("item: " + key + ", " + item + " stored in local storage"); }
first, need remove code findlocation() todo javascript file. call findlocation() in getformdata function.
your createnewtodo() code should start with:
function createnewtodo(todoitem) { var li = document.createelement("li"); li.setattribute("id", todoitem.id); var spantodo = document.createelement("span"); var daysuntildue = calcdaysleft(todoitem.duedate); spantodo.innerhtml = calltodostr(todoitem, daysuntildue); } finally, should have code in find geolocation file:
function calltodostr(todoitem, daysuntildue) { var todostr = "(" + todoitem.latitude + ", " + todoitem.longitude + ") " + todoitem.who + " needs " + todoitem.task + " " + todoitem.duedate + " " + daysuntildue; return todostr; }
Comments
Post a Comment