DEV'S

Students Record - JQueryMobile - GeoLocation - Ajax Addon

index.html
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" >
        <script src="js/jquery.min.js"></script>
        <script src="js/jquery.mobile-1.4.5.min.js"></script>
        <script src="js/studentsjs.js"></script>
    </head>
    <body>

        <div data-role="page" id="login_screen">
            <div data-role="header" data-position="fixed">
                <h1>Login</h1>
                <a href="register.html" data-icon="grid" class="ui-btn-right">Register</a>
            </div>
            <div data-role="main" class="ui-content">
                <div data-role="fieldcontain">
                    <label for="username">Username</label> 
                    <input type="text" id="username" placeholder="enter username">
                </div>
                <div data-role="fieldcontain">
                    <label for="password">Password</label> 
                    <input type="password" id="password" placeholder="enter password">
                </div>
                <div data-role="fieldcontain">
                    <label></label> 
                    <a href="javascript:checkLogin()" data-role="button">Login</a>
                </div>
            </div>
            <div data-role="footer" data-position="fixed">
                <h1>Copyrights 2011-15</h1>
            </div>
            <div data-role="popup" id="pwdalert">
                <div data-role="header" data-theme="b">
                    <h1>Wrong</h1>
                    <a href="#" data-icon="delete" data-rel="back" data-iconpos="notext"></a>
                </div>
                <div data-role="main" class="ui-content">Username/Password is Wrong!!</div>
            </div>
        </div>
    </body>
</html>

register.html

<div data-role="page" id="register_screen">
    <div data-role="header" data-position="fixed">
        <a href="#" data-icon="back" data-rel="back" class="ui-btn-left">Cancel</a>
        <h1>Register</h1>

    </div>
    <div data-role="main" class="ui-content">
        <div data-role="fieldcontain">
            <label for="regusername">Username</label> 
            <input type="text" id="regusername" placeholder="enter a username">
        </div>
        <div data-role="fieldcontain">
            <label for="regpassword">Password</label> 
            <input type="password" id="regpassword" placeholder="enter a password">
        </div>
        <div data-role="fieldcontain">

            <fieldset data-role="controlgroup">
                <legend>Gender</legend>
                <input type="radio" id="male" name="gender">
                <label for="male">Male</label>
                <input type="radio" id="female" name="gender">
                <label for="female">Female</label>
            </fieldset>

        </div>
        <div data-role="fieldcontain">

            <fieldset  data-role="controlgroup">
                <legend>Interested In</legend>
                <input type="checkbox" id="business" name="interest">
                <label for="business">Business</label>
                <input type="checkbox" id="arts" name="interest">
                <label for="arts">Arts</label>
                <input type="checkbox" id="travel" name="interest">
                <label for="travel">Travel</label>
                <input type="checkbox" id="others" name="interest">
                <label for="others">Others</label>
            </fieldset>

        </div>
        <div data-role="fieldcontain">
            <label></label> 
            <a href="javascript:registerUser()" data-role="button">Register</a>
        </div>
    </div>
    <div data-role="footer" data-position="fixed">
        <h1>Copyrights 2011-15</h1>
    </div>
</div>

students.html

<div data-role="page" id="students_screen">
    <div data-role="header" data-position="fixed">
        <a href="#panel" data-icon="gear" class="ui-btn-left">Settings</a>
        <h1>Students</h1>
        <a href="javascript:addEditDeleteStudent(-1)" data-icon="plus" class="ui-btn-right">Add</a>
    </div>
    <div data-role="main" class="ui-content">
        <ul data-role="listview" id="students_list" data-inset="true">

        </ul>
    </div>
    <div data-role="footer" data-position="fixed">
        <h1>Copyrights 2011-15</h1>
    </div>
    <div data-role="panel" data-theme="b" data-position="left" id="panel">
        <div data-role="main" class="ui-content">
            <ul data-role="listview">
                <li><a href="#">About</a></li>
                <li><a href="mylocation.html">MyLocation</a></li>
                <li><a href="javascript:logout()">Logout</a></li>
            </ul>
        </div>
    </div>
</div>

regeditstudent.html

<div data-role="page" id="student_register_screen">
    <div data-role="header" data-position="fixed">
        <a href="javascript:deleteStrudent()" data-icon="delete" class="ui-btn-left" id="deletestudent">Delete</a>
        <h1>Add Student</h1>
        <a href="#" data-icon="back" data-rel="back" class="ui-btn-right">Cancel</a>
    </div>
    <div data-role="main" class="ui-content">
        <div data-role="fieldcontain">
            <label for="firstname">First Name</label> 
            <input type="text" id="firstname" placeholder="enter Firstname">
            <div id="stidholder" style="display: none">
            <input type="text" id="stu_id" readonly >
            </div>
        </div>
        <div data-role="fieldcontain">
            <label for="lastname">Last Name</label> 
            <input type="text" id="lastname" placeholder="enter Lastname">
        </div>
        <div data-role="fieldcontain">
            <label for="rollnum">Roll No.</label> 
            <input type="text" id="rollnum" placeholder="enter Roll Number">
        </div>
        <div data-role="fieldcontain">
            <label for="subject">Subject</label> 
            <select id="subject">
                <option value="Math">Math</option>
                <option value="Physics">Physics</option>
                <option value="Chemistry">Chemistry</option>
            </select>
        </div>
        <div data-role="fieldcontain">
            <label></label> 
            <a href="javascript:addStudent()" data-role="button" id="stdaddedit">Add</a>
        </div>
    </div>
    <div data-role="footer" data-position="fixed">
        <h1>Copyrights 2011-15</h1>
    </div>
    <div data-role="popup" id="deletealert">
        <div data-role="header" data-theme="b">
            <h1>Sure?</h1>
            <a href="#" data-icon="delete" data-iconpos="notext"></a>
        </div>
        <div data-role="main" class="ui-content">
            Do you really want to delete?
        </div>
        <div data-role="footer" style="text-align: center">
            <a href="" data-rel="back" data-role="button">Cancel</a>
            <a href="javascript:deleteConfirm()" data-role="button" >OK</a>
        </div>
    </div>
</div>

mylocation.html

<div data-role="page" id="mylocation_screen">
    <div data-role="header" data-position="fixed">
        <h1 id="userlocation">User location</h1>
        <a href="#" data-rel="back" data-icon="back">Back</a>
    </div>
    <div data-role="main" class="ui-content">
        <ul data-role="listview" id="addresses" data-inset="true">

        </ul>
    </div>
    <div data-role="footer" data-position="fixed">
        <h1>Copyrights 2011-15</h1>
    </div>
</div>

studentsjs.js

//Array for holding students record
var students = [];
$(document).ready(function () {
    //localStorage.allStudents = ""; // used for clearing localStorage students record, use it when major changed done in code. // comment back after clearing the data

});

$(document).on("pagecontainerbeforechange", function (ev, ui) {

    if (ui.toPage[0].id === "login_screen") {

        //$("#female").attr("checked",true).checkboxradio("refresh"); // for setting checked state (acts as setter)
        if (sessionStorage.isLogin === "YES") {

            $.mobile.pageContainer.pagecontainer("change", "students.html", {transition: "slide"});

            ev.preventDefault();
        }
    } else if (ui.toPage[0].id === "students_screen") {
        initList();

    } else if (ui.toPage[0].id === "student_register_screen") {
        var stuObj = ui.options.student;
        $("#stu_id").val(stuObj.stid);

        if (stuObj.stid !== -1) {
            //restore values
            $("#firstname").val(stuObj.fname);
            $("#lastname").val(stuObj.lname);
            $("#rollnum").val(stuObj.rollnum);
            $("#subject").val(stuObj.subject).selectmenu("refresh");
            $("#stdaddedit").html("Edit");
            $("#deletestudent").show();
        } else {

            $("#stdaddedit").html("Add");
            $("#deletestudent").hide();
        }
    } else if (ui.toPage[0].id === "mylocation_screen") {
        $("#userlocation").html("Loading…...");
        navigator.geolocation.getCurrentPosition(function (position) {
            $("#userlocation").html("User’s Possible Location");
            //console.log(position);
            $.ajax({
                url: "https://maps.googleapis.com/maps/api/geocode/json?latlng=" + position.coords.latitude + "," + position.coords.longitude,
                type: "GET",
                success: function (response) {
                    console.log(response);
                    var resultsArray = response.results;
                    for (var i in resultsArray) {
                        console.log("Address: " + i + " Value: " + resultsArray[i].formatted_address);
                        $("#addresses").append("<li>" + resultsArray[i].formatted_address + "</li>");
                    }

                    $("#addresses").listview("refresh");
                }
            });

        });
    }

});

function registerUser() {
    var uname = $("#regusername").val();
    var pwd = $("#regpassword").val();

    if (uname !== "" && pwd !== "") {
        var isMale = $("#male").prop("checked"); // checking the radio or checkbox checked state // returns true or false
        var isFemale = $("#female").prop("checked");
        var isBusiness = $("#business").prop("checked");
        var isTravel = $("#travel").prop("checked");
        var isOthers = $("#others").prop("checked");
        var isArts = $("#arts").prop("checked");

        console.log("isMale " + isMale + " , isFemale " + isFemale);
        var regObj = {uname: uname, pwd: pwd, ismale: isMale, isfemale: isFemale, isbusiness: isBusiness
            , istravel: isTravel, isarts: isArts, isothers: isOthers};
        localStorage.regData = JSON.stringify(regObj);

        $.mobile.back();
    }
}

function checkLogin() {

    var regObj = JSON.parse(localStorage.regData);
    var registeredUname = regObj.uname;
    var registeredPwd = regObj.pwd;
    if ($("#username").val() === registeredUname && $("#password").val() === registeredPwd) {
        $("#username").val("");
        $("#password").val("");
        $.mobile.pageContainer.pagecontainer("change", "students.html", {transition: "slide"});
        //Registering session as user is logged in (it accepts string value)
        sessionStorage.isLogin = "YES";
    } else {
        $("#pwdalert").popup("open");
        //Unregistering session to "NO" as user has logged out
        sessionStorage.isLogin = "NO";
    }
}

function logout() {
    sessionStorage.isLogin = false;
    console.log("Called Logout");
    $.mobile.back();
}

function addStudent() {
    var stid = $("#stu_id").val();
    var s = parseInt(stid);
    var fname = $("#firstname").val();
    var lname = $("#lastname").val();
    var rollnum = $("#rollnum").val();
    var subject = $("#subject").val();
    var stuObj = {};
    // -1 for new entry
    if (s === -1) {
        stuObj = {stid: students.length, fname: fname, lname: lname, rollnum: rollnum, subject: subject};
        students.push(stuObj);
    } else {
        // 0 or positive sid for edit entry
        stuObj = {stid: stid, fname: fname, lname: lname, rollnum: rollnum, subject: subject};
        students.splice(stid, 1, stuObj);
    }

    localStorage.allStudents = JSON.stringify(students);
    $.mobile.back();
    initList();

}

function initList() {
    // recreating listview
    if (localStorage.allStudents) {
        $("#students_list").empty();
        students = JSON.parse(localStorage.allStudents);
        for (var i = 0; i < students.length; i++) {

            $("#students_list").append(’<li><a href="javascript:addEditDeleteStudent(’ + i + ‘)">’ + students[i].fname + ‘</a></li>’);
        }
        $("#students_list").listview("refresh"); // jQueryMobile Listview, radio,checkbox, selet-options need refresh method to be called for updating

    }
}

function addEditDeleteStudent(index) {
    var stuObj = {};
    if (index === -1) {
        //for new student record
        stuObj = {stid: -1};
    } else {
        //edit/delete existing student record
        stuObj = students[index];
    }

    $.mobile.pageContainer.pagecontainer("change", "regeditstudent.html", {student: stuObj, transition: "slide"});
}

function deleteStrudent() {
    $("#deletealert").popup("open");
}

function deleteConfirm() {
    var sidString = $("#stu_id").val();
    var sidInt = parseInt(sidString);
    console.log(sidInt);

    students.splice(sidInt, 1);
    // splice will reindex the objects in students array
    for (var i = 0; i < students.length; i++) {
        var stdObj = students[i];
        // updating stid also with new index (so further edits will work properly)
        stdObj.stid = i;
        students[i] = stdObj;
    }
    localStorage.allStudents = JSON.stringify(students);
    //reindex objects

    // to dismis the popup
    $.mobile.back();
    // to go back to previous page //Small 10ms delay is preferred between two Back calls
    setTimeout(function (){
      $.mobile.back();  
    },10);
    
    
}

HTML5

2018-11-27 21:35:02
1) Ionic - Angular Videos
2018-06-29 05:46:32
2) Service - Broadcast Receiver
2018-06-28 03:55:43
3) Activity - Bundle - Option Menu - ActionBar
2018-06-27 03:27:57
4) Relative Layout
2018-06-25 03:14:55
5) LinearLayout Calc
2018-02-08 05:14:15
6) PHP HelloWorld
2018-01-19 04:57:25
7) Angular 5 - Material Design - Reactive Form - Continued
2018-01-19 04:06:05
8) Feedback
2018-01-19 02:07:18
9) Angular 5 - Material Design
2018-01-18 03:05:47
10) Angular 5 - Custom Directives,Pipes - Promise And Observables
2018-01-17 22:51:45
11) Angular 5 - Component Interaction
2018-01-17 03:14:26
12) Angular 5 - Registration Form - WebService
2018-01-17 01:46:34
13) Angular 5 - Directives
2018-01-16 23:13:47
14) Angular 5 - Lifecycle Hooks - Routing
2018-01-16 21:36:25
15) CRUD Example - TS - LocalStorage - Delete
2018-01-16 13:34:40
16) Shopping App - Api Calls - JSON
2018-01-16 03:17:09
17) CRUD Example - TS - LocalStorage - View - Add
2018-01-15 23:57:32
18) TypeScript - Part 2
2018-01-15 23:02:07
19) TypeScript - Part 1
2018-01-15 04:46:29
20) TypeScript To JavaScript
2018-01-15 00:48:22
21) First Angular5 App
2016-01-17 23:47:13
22) JQuery Mobile - My Account Page Addon
2016-01-16 02:38:09
23) HTML5 - CSS - JavaScript Exam Preparation
2016-01-14 02:34:08
24) JQuery Validation Plugin - Basics
2016-01-13 02:35:46
25) Final - JQuery Mobile - IndexedDB Addon
2016-01-12 03:23:20
26) JQuery Mobile - IndexedDB Addon
2016-01-11 00:08:42
27) Students Record - JQuery Mobile App
2016-01-09 04:03:04
28) JQuery Mobile PageChange Event
2016-01-08 03:51:55
29) Beginning JQuery Mobile
2016-01-07 03:47:24
30) WebWorker Example
2016-01-06 04:11:18
31) IndexedDB - ObjectStore - Tansaction - Cursor - Part 2
2016-01-05 03:46:35
32) Student Record - IndexedDB Migration
2016-01-04 23:47:55
33) IndexedDB - ObjectStore - Tansaction - Cursor
2016-01-04 04:48:33
34) Single Page Design And Geolocation Example With Ajax
2016-01-03 23:39:19
35) Drag And Drop Example
2016-01-03 01:57:50
36) Beginning Responsive WebDesign Using JQuery
2016-01-03 01:56:17
37) HTML5 Canvas Simple Example
2016-01-03 01:55:11
38) JQuery Object - Context - Function Callbacks
2015-12-29 23:28:49
39) JQuery DOM Manipulation And LocalStorage
2015-11-30 23:50:59
40) JavaScript EventListeners
2015-11-30 04:34:08
41) MultiPage Design
2015-11-28 03:02:52
42) HTML Box Design
2015-07-03 03:09:55
43) KO Custom Component
2015-07-02 23:25:36
44) KO Custom Binding And Template Binding
2015-07-01 23:27:04
45) KO Simplelist
2015-07-01 01:44:40
46) KO Introduction And JQuery Simple List
2015-01-29 00:34:17
47) Canvas - DragDrop - Video - Audio Example
2015-01-28 03:57:05
48) CSS Media Type - IndexedDB WHERE And LIKE Clause
2015-01-27 02:24:12
49) IndexedDB Simple Example
2015-01-24 00:11:32
50) Students Record - JQueryMobile - GeoLocation - Ajax Addon
2015-01-24 00:08:19
51) GeoLocation And Ajax Example
2015-01-21 05:23:32
52) Students Record - JQueryMobile - SessionStorage - Login State
2015-01-19 23:33:29
53) JQueryMobile - Page Change - Popup Addon
2015-01-19 00:21:28
54) JQueryMobile - Data-Role Introduction
2015-01-17 03:22:07
55) Handle PageLinks
2015-01-16 04:28:20
56) Simple HTML5 Calculator
2015-01-16 03:03:45
57) Load External DOM - Ajax In Simple Way
2015-01-16 03:01:48
58) JQuery Document Ready - Placement Of Script Tag
2015-01-13 22:54:25
59) Dynamic Layout Technique Using JQuery
2015-01-13 04:04:19
60) JQuery - Introduction
2015-01-12 23:45:02
61) LocalStorage - CRUD
2015-01-12 00:06:03
62) JSON - LocalStorage Example
2015-01-11 22:47:24
63) JavaScript - Data Persistency Using LocalStorage - SessionStorage
2015-01-10 03:17:01
64) HTML - JavaScript - Dynamic Table
2015-01-10 00:32:26
65) JavaScript Introduction
2015-01-09 04:07:47
66) CSS - Continued
2015-01-08 03:26:39
67) CSS - Margin - Padding - HTML5 Semantic Elements
2015-01-07 22:44:01
68) HTML-CSS Introduction
2014-11-25 14:27:00
69) Angular JS Simple Example
2014-10-16 05:01:39
70) CSS Media Example - Different CSS For Desktop - Tablet - Phone Screen Sizes
2014-10-15 04:20:11
71) Miscellaneous In Addition To Previous Exercises
2014-10-15 04:13:45
72) Some Useful RegEx
2014-10-14 02:57:45
73) Shopping List App Using IndexedDB
2014-10-14 00:04:10
74) IndexedDB Introduction
2014-10-14 00:00:01
75) JavaScript Prototyping
2014-10-11 03:50:47
76) Introduction To Canvas Drawing - Tabs - Popup Warning Dialog
2014-10-11 00:03:50
77) Popup - Validation - Shopping List App Updated
2014-10-10 22:34:42
78) RegEx Pattern For Validation - Shopping List App
2014-10-10 05:12:13
79) Password Lock-Shopping List App
2014-10-09 22:49:34
80) JQuery Shopping - Updated
2014-10-09 05:10:00
81) JQuery Mobile Forms - Save Checkbox - Radio Button Checked States
2014-10-08 22:18:40
82) JQuery Mobile Forms - Additional Data-role Attribute Values
2014-10-08 02:17:48
83) JQuery Shopping List Alternate Approach. JQ Append & Pagechange
2014-10-07 03:02:43
84) JQuery Mobile Page Change Events
2014-10-06 02:19:53
85) JQuery Mobile Data- Attribute Reference
2014-10-06 00:13:01
86) Shopping List Using LocalStorage
2014-10-06 00:10:02
87) JQuery Mobile Introduction
2014-10-06 00:07:40
88) JQuery Page Loading Technique
2014-10-06 00:05:39
89) Mobile Ready Page Extended - Load Multiple Pages Using JQuery
2014-10-06 00:00:27
90) A Mobile First Design Using JQuery - Window-Size
2014-10-05 23:58:01
91) JavaScript Array - Create - Update - Delete
2014-10-05 23:55:43
92) JQuery CSS Capabilities - A Mobile Ready Page
2014-10-05 23:52:42
93) JQuery Introduction - Unit Conversion Using JQuery
2014-10-05 23:49:58
94) JavaScript - DOM Manipulation-Table-Calculator
2014-10-05 23:40:06
95) GeoLocation
2014-10-05 23:37:36
96) Margin And Border Radius
2014-10-05 23:34:06
97) HTML5 Semantic Elements, CSS,SVG Examples
2014-10-05 23:28:45
98) HTML,CSS Selectors

© Vasudev.H / Email: tech3in@live.com