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