jeudi 31 mars 2016

Show data fetched from database on a different page? (JavaScript/SQLite)

I am having trouble figuring out how to display the data fetched from the SQLite database onto another page.

At the moment I am using a div (responsediv) that the results are displayed within, however this div is on the same page as the search textfields, so instead I want the user to be directed to another page which will display the results.

For example, the page that the user searches on is page5, and let's say I want the data from the database to be displayed on page6 in the "datadisplay" div.

I am using html, javascript, Cordova/Phonegap and JQuery mobile.

Please see my code below.

JavaScript -

    function fetchEvent()
             {
          db = window.openDatabase("SoccerEarth", "2.0", "SoccerEarthDB", 2*1024*1024);
          db.transaction(foundEvent, errorCB);
         }

          function foundEvent(tx)
            {
            var TitleT = document.getElementById("texttitle").value;
           tx.executeSql("SELECT * FROM SoccerEvents WHERE Title LIKE '%" + TitleT + "%'", [], renderEvent);
                        }

           function renderEvent(tx,response)
           {
          var div = document.getElementById("responsediv");

       var temp = "<table border=\"1\"><tr><th>Title</th><th>Location</th><th>NoPeople</th><th>Date</th><th>Description</th></tr>";
          alert(response.rows.length);
          for(var i=0;i<response.rows.length;i++)
          {
          temp += "<tr><td>" + response.rows.item(i).Title + "</td><td>" + response.rows.item(i).Location + "</td><td>" + response.rows.item(i).NoPeople + "</td><td>" + response.rows.item(i).Date + "</td><td>" + response.rows.item(i).Description + "</td></tr>";
          div.innerHTML = temp;
          }
}

HTML -

<div data-role="page" id="page5" data-theme="d">
    <div data-role="header">
        <h1>Search Soccer Event</h1>
    </div>
    <div data-role="content">
        <form onsubmit="fetchEvent(); return false;">
            <div class="ui-field-contain">
                <label for="texttitle">Title</label>
                <input type="text" id="texttitle">
                <label for="select-native-2">Location</label>
                <select name="select-native-2" id="select-native-2" data-mini="true">
                    <option value="" disabled selected>Select your option</option>
                    <option value="1">Tower Hamlets</option>
                    <option value="2">Greenwich</option>
                    <option value="3">Islington</option>
                    <option value="4">Bromley</option>
                    <option value="4">Hackney</option>
                    <option value="4">Lewisham</option>
                </select>
                <br>
                <label for="dateD" data-position="left">Date</label>
                <input type="date" id="dateD"   />
                <br>
                <input type="submit" value="Display Results">
            </div>
            <div id="responsediv">
            </div>
        </form>
    </div>
</div>

Aucun commentaire:

Enregistrer un commentaire