JSFiddle - React, Tailwind, and code Playground

by ravi1989

HTML

<div data-role="page" id="Home" > 
        <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false" >
            <h1 class="ui-title"  id="hdr" style="text-align:left;margin-left: 100px;">My Cases</h1>
            <div class="ui-btn-right" id="headerButtons" data-role="controlgroup" data-type="horizontal">
                <a href="#UserSettingScreen" data-transition="none" data-role="button" data-inline="true" data-iconpos="notext" data-icon="gear" data-theme="b" id="Setting" data-rel="popup" data-position-to="window">Setting</a>
                <a href="#CaseInformationScreen" data-transition="none" data-role="button" data-iconpos="notext" data-inline="true" data-icon="plus" data-theme="b" data-rel="popup" id="Add" data-position-to="window">Add</a>
                <a href="" data-role="button" data-transition="none" data-inline="true" data-theme="b" data-rel="popup"id="Edit" data-position-to="window">Edit</a>
            </div>
        </div>

        <div data-role="content">

            <ul data-role="listview" data-inset="true" id="folderData" >
            </ul>
            <!-- **************Case Information Pop up Start*******************-->
            <div data-role="popup" id="CaseInformationScreen" data-close-btn="none"  data-overlay-theme="a" data-dismissible="false">
                <div data-role="header" data-theme="b" >

                    <a href="#" data-role="button" data-corners="false" id="Cancel">Cancel</a>
                    <h1>Case Information</h1>
                    <a href="#" data-role="button" data-corners="false" id="AddButton">Add</a>
                </div>

                <div data-role="content">
                    <div><img src="img/Documents.png"/></div>
                    <div data-role="fieldcontain">
                        <label for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label>
                        <input name="text-12" id="text-12" value="" type="text"...

CSS

/* 
    Document   : base
    Created on : Jun 19, 2013, 3:04:41 PM
    Author     : nksharma
    Description:
        Purpose of the stylesheet follows.
*/
    
        body{

            background : transparent url("http://i.stack.imgur.com/jGlzr.png") repeat 0 0 !important;
            background-size : cover;
        }
        #Home{
            background: transparent;}
		.ui-popup-screen.in{width: 100% !important; height: 1220px !important;}
        .ui-bar-b{
		background: #68b9fc;  /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background:...

JavaScript

$(document).ready(function() {

           // $.mobile.loading('hide');
 //$.noConflict();
     onDeviceReady();
 });

/*
Case pad Dat base
*/


var db = "";
//will create database Dummy_DB or open it

//function will be called when device ready
function onDeviceReady() {
   // alert("ddd")

    //$(document).bind('backbutton', onPressBack);
	//$.mobile.ajaxEnabled=false
    //alert("onDeviceReady");
    
    db = window.openDatabase("Casepad", "1.0", "Casepad", 200000);
    if (window.localStorage.getItem("isAddSomeData") == "yes") {
      
        db.transaction(getallTableData, errorCB);
    }
    //   db.transaction(populateDB, errorCB, successCB);
}

function insertData() {
    db.transaction(createTable, errorCB, afterSuccessTableCreation);
}

//create table and insert some record
function createTable(tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS CaseTable (id INTEGER PRIMARY KEY AUTOINCREMENT, CaseName  TEXT unique NOT NULL ,CaseDate INTEGER ,TextArea TEXT NOT NULL)');
   
    tx.executeSql('INSERT OR IGNORE INTO CaseTable(CaseName,CaseDate,TextArea) VALUES ("' + $('.caseName_h').val() + '", "' + $('.caseDate_h').val() + '","' + $('.caseTextArea_h').val() + '")');

}
//function will be called when an error occurred
function errorCB(err) {
    navigator.notification.alert("Error processing SQL: " + err.code);
}

//function will be called when process succeed
function afterSuccessTableCreation() {
    console.log("success!");
    db.transaction(getallTableData, errorCB);
}



//select all from SoccerPlayer
function getallTableData(tx) {
    tx.executeSql('SELECT * FROM CaseTable', [], querySuccess, errorCB);
}

function querySuccess(tx, result) {
    var len = result.rows.length;
    $('#folderData').empty();
    for (var i = 0; i < len; i++) {

        $('#folderData').append(
                '<li class="caseRowClick" id="' + result.rows.item(i).id + '" data-rel="popup" data-position-to="window">' + '<a href="#">' + '<img src="img/Blue-Folder.png">' +...