I am attempting to get the data fetched from the query to be displayed on a different page, however the data is not being displayed on a new page.
The table was being displayed with the data correctly on the same page as the search, however when I tried to change things around so the data is shown on a new page it doesn't work.
I am using JQuery mobile, so it's a one page structure (all pages under index.html) and I have all my javascript on a separate file.
Can anyone see the issue here?
Fetching data function:
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>";
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; */
}
var page6 = window.open("#page20", "mywin", '');
page6. dataFromParent = temp;
page6.render();
}
var dataFromParent;
function render() {
$('datadisplay').innerHTML(dataFromParent);
}
HTML (page 6):
<div data-role="page" id="page20" data-theme="d">
<div data-role="content">
<div id="datadisplay">
</div>
</div>
</div>
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; */
}
Ok , So u want a different page to show your data , When u move to another page response object which has your data is getting lost . I would suggest you to make a whole new page.
Something in this line.
var formElements = "<table id='resulttable' data-role='table' data-mode='reflow' class='ui-responsive table-stroke table-stripe'><thead><tr><th>Title</th><th>Location</th><th>NoPeople</th><th>Date</th><th>Description</th></tr></thead><tbody>";
for (var i = 0; i < response.rows.length; i++) {
formElements += "<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 + "<a href='map.html' rel='external' data-ajax='false' data-role='button' data-mini='true'>View on Map</a></td></tr>";
}
formElements+="</tbody></table>";
$('#page_body').append('<div data-role="page" data-theme="d" id="' + page_id + '"><div data-role="content">' + formElements + 'Return</div></div>');
$.mobile.initializePage();
$.mobile.changePage("#" + page_id);
page_id is specific id of the dynamic page , which u can set
Now you might need to make a few customization according to you.But the logic is you are making an entire div all from scratch and appending it . Now you need to write a function FORWARD() which would have your logic for navigation and BACK which would have your logic for BACK functionality .
Hope it helps.
Related
Right now I have a search bar on my website and its only function is to call the categories within my list.
picture of my website
But my filter search on the right is already doing that. So, I was wondering if anybody could help me figure out how to program the search bar to search for the products instead, so that anybody who arrives to my list can get their results from these.
products
Below is the code that I have, and again, its for only allowing my search bar to search category.
var array_html = "";
var data_array = boroughs[property];
for (var i in data_array) {
array_html +=
"<b>" + "<u>"+
data_array[i]["business"] +
"</b></u><br />" + "<i>" +
data_array[i]['adderess'] +
"</i>"+
data_array[i]['owner'] +
"<br />"+
'<a href="http://'+
data_array[i]['website'] + '" target=_blank" title="Opens in a new window">' +
data_array[i]['website']+ '</a>'+
data_array[i]['neighbourhood'] +
"<br />"+
'<a href="'+
data_array[i]['maps']+ '" target=_blank" title="Opens in a new window">' +
'<p> Open Maps </p>' +'</a>'+ "<p class='products'>"+ //products is defined
data_array[i]["products"]+ '</p>' +
"<br />"+ "<br />";
}
var collapse_html =
'<div class="collapse show" id="' +
property.split(" ").join("_") +
'">' +
'<div class="card card-body">' +
array_html +
"</div>" +
"</div>";
final_html += boroughs_html + collapse_html;
}
return final_html;
}
//search functionality
const search_btn_input = document.getElementsByClassName(
"search_btn_input "
)[0];
const categories = document.getElementsByClassName("category_name");
const products = document.getElementsByClassName("products");
search_btn_input.addEventListener("input", (e) => {
var search_key = search_btn_input.value.toUpperCase();
for (var i in categories) {
var category_name = categories[i].innerHTML;
var products_name = products[i].innerHTML;
if (category_name != undefined) {
category_name = category_name.toUpperCase();
} else {
return;
}
//search button recognizing the word
if (category_name.includes(search_key)) {
categories[
i
].parentElement.parentElement.parentElement.parentElement.style.order = -1;
} else {
categories[
i
].parentElement.parentElement.parentElement.parentElement.style.order = 0;
}
}
});
ideally, when somebody inputs a product value in the search bar, it would just pull that one business with that product to the very top of the column.
I have a .php file where I am using both HTML and JavaScript to display items from my database. I have a JavaScript append function that is creating cards where each item is display. On my cards, I have a button that will expand the card to show product history. Some products have more history than others so the expansion needs to be dynamic. The historical data is being pulled from database and is initially in a php array. I originally was going to institute php into the javascript append function but I could not figure out how to set the JavaScript index variable 'I' to my php index. So I want to just stay with JavaScript. But I don't know how to write a loop in the middle of this append function that will loop through the historical array and populate the expansion. Below is what I am attempting. I took out a lot of the lines in the append function but you can see what I am trying to do.
function get_products() {
clear_cards();
$.each(productNumbers,
function(i, value) {
$('.main_card_shell').append(
"<div class='card_content card_style' id='card" + i + "'>" +
"<div id='card_tab2" + i + "' class='tabcontent' data-tab='tab-name2'>" +
"<div class='details_tables'>" +
"<table>" +
"<tr>" +
"<th>Item Type</th>" +
"<th>Painted</th>" +
"<th>Last Sold" +
"<a id='_close_tab" + i + "' class='tablinks tab_override' onclick=\"openCity(event,'card_tab4" + i + "')\">" +
"<i class='large angle up icon'></i>" +
"</a>" +
"</th>" +
"</tr>" +
"<tr>" +
var itemdatesplit = itemdate[i].split("$$");
var itemtypesplit = itermtype[i].split("$$");
var itemsplit = item[i].split("$$");
var arraylength = itemsplit.length;
var counter = 0;
while(counter < arraylength)
{
+ "<td>" + itemtypesplit[counter] + "</td>" +
+ "<td>" + itemdatesplit[counter] + "</td>" +
counter = counter + 1;
}
+
"</tr>" +
"</table>" +
"</div>" +
"</div>" +
Please help. I had it working with PHP inserted in, but I just couldn't figure out how to set it to a PHP variable.
Place this code into a function:
function getSomething(i) {
var html = '';
var itemdatesplit = itemdate[i].split("$$");
var itemtypesplit = itermtype[i].split("$$");
var itemsplit = item[i].split("$$");
var arraylength = itemsplit.length;
var counter = 0;
while(counter < arraylength) {
html += "<td>" + itemtypesplit[counter] + "</td>";
html += "<td>" + itemdatesplit[counter] + "</td>";
counter = counter + 1;
}
return html;
}
And then use it in your HTML building block:
'<some html>' + getSomething(i) + '<some other html>'
// searching the country to select(js file)
function search_country(){
d3.csv("data/totalpopulation.csv", function(data) {
var v=f1.search.value;
for(var i=0;i<data.length;i++){
if(data[i].Name==v){
document.getElementById('tablediv').style.visibility="visible";
// retrun value
document.getElementById('poptable').innerHTML+="<tr id='"+data[i].Name+"' class='ComparisonTable' onclick='current_country(this.id)' style='cursor:pointer'><td>" + data[i].Name + "</td><td>" + (data[i].p1961/1000000).toFixed(2) + "</td><td>" + (data[i].p2016/1000000).toFixed(2) + "</td></tr>";
}
}
});
}
// Comparing the Selected Countries
function compare(){
window.location.href='country.php';
}
Here, I am selecting the countries from search bar and putting in CompareTable.
Furthur, On clicking a compare button i should move to next php file (country.php) and carry the same table data to compare them.
document.getElementById('poptable').innerHTML+="<tr id='"+data[i].Name+"' class='ComparisonTable' onclick='current_country(this.id)' style='cursor:pointer'><td>" + data[i].Name + "</td><td>" + (data[i].p1961/1000000).toFixed(2) + "</td><td>" + (data[i].p2016/1000000).toFixed(2) + "</td></tr>";
Use an arrya to store the complete tr values
var data_arr[];
function search_country(){
d3.csv("data/totalpopulation.csv", function(data) {
var v=f1.search.value;
for(var i=0;i<data.length;i++){
if(data[i].Name==v){
document.getElementById('tablediv').style.visibility="visible";
// push value to an object.
data_arr.push(document.getElementById('poptable').innerHTML+="<tr id='"+data[i].Name+"' class='ComparisonTable' onclick='current_country(this.id)' style='cursor:pointer'><td>" + data[i].Name + "</td><td>" + (data[i].p1961/1000000).toFixed(2) + "</td><td>" + (data[i].p2016/1000000).toFixed(2) + "</td></tr>");
}
}
});
}
// Comparing the Selected Countries
function compare(){
data_arr_json = JSON.stringify(data_arr);
window.location.href='country.php?data='+data_arr_json;
}
When you want to get the data of array in country.php:
$data_from_url = json_decode($_GET['data']);
What is the best way to make JUST card.price editable? I've futzed around with several different ways that seemed stupid simple, but it just isn't producing the right results. Does anyone out there have some suggestions?
html += "<li class='list-item ui-state-default' id=" + i + ">" +
card.card_name + ' - ' + card.price +
"<button class='removeThis'>" +
"X" + "</button>" + "</li>";
Here's a simple way to do that with input elements. Simplified example to illustrate it:
var card = {};
card.card_name = "Card Name";
card.price = "4.00";
var inputBeg = "<input size=8 style='border: none;' value='$";
var inputEnd = "'>";
var html = "";
for (var i = 0; i < 3; i++) {
html += "<li class='list-item ui-state-default' id=" + i + ">" +
card.card_name + ' - ' + inputBeg + card.price + inputEnd + "<button class='removeThis'>" +
"X" + "</button>" + "</li>";
}
document.body.innerHTML = html;
You could get much fancier with the styling if you wanted to.
I just started off with javascript and html, so please correct me if I am doing it the wrong way. I was trying to edit an html form table.
{%extends 'base.html'%}
{%block content%}
<html>
<body>
<h4> Search results</h4>
<p id="data"></p>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
<form id="update" action="/update/" method="POST">
<script>
function onEdit(btn)
{
var id=btn.id;
if(btn.value=="Edit") {
var input = document.getElementsByName("name"+id);
for(i = 0;i < input.length; i++) {
document.getElementById(input[i].id).removeAttribute("Readonly");
} //End of for loop
document.getElementById(id).value="Save";
return false;
}
if(btn.value=="Save") {
for(i = 0;i < input.length; i++) {
document.getElementById(input[i].id).setAttribute("Readonly", "readonly");
}
document.getElementById(id).value="Edit";
return false;
}
} // End of Function onEdit()
{% autoescape off %}
var data = {{ search|safe }}; //This will be the json value returned by django view
{% endautoescape %}
text = ''
var out = "<table style=\"width:50%\">";
out += "<tr>";
out += "<th>Domain</th>";
out += "<th>Points to</th>";
out += "<th>Type</th>";
out += "<th>TTL</th>";
out += "</tr>";
var i
var id = 0;
for ( var i = 0; i < data.records.length; i++) {
id = id + 1;
out += "<tr><td>" +
"<input readonly='readonly' name='name" + id + "' id='" + data.records[i].domain + "' value='" + data.records[i].domain + "'type='text'/>" +
"</td><td>" +
"<input readonly='readonly' name='name" + id + "' id='" + data.records[i].record_points_to + "' value='" + data.records[i].record_points_to +"'type='text'/>" +
"</td><td>" +
data.records[i].record +
"</td><td>" +
"<input readonly='readonly' name='name" + id + "' id='" + data.records[i].ttl + "' value='" + data.records[i].ttl + "'type='text'/>" +
"</td><td>" +
"<input id='" + id + "' value='Edit' onclick='return onEdit(this)' type='button'/>" +
"</td></tr>";
}
out += "</table>"
total = data.meta.total_records
page = data.meta.page
records_returned = data.records.length
records_shown = ((data.meta.page - 1) * 30) + data.records.length
out += records_shown + " returned of " + total
page = data.meta.page + 1
link = window.location.href
if (records_shown == total){
out += " End "
}
else{
url ="<a href='" + updateQueryStringParameter(link, "page", page) + "'> Next"
out += url
}
function updateQueryStringParameter(uri, key, value) {
var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
if (uri.match(re)) {
return uri.replace(re, '$1' + key + "=" + value + '$2');
}
else {
return uri + separator + key + "=" + value;
}
}
document.getElementById("data").innerHTML = out
</script>
<input type="submit" value="Submit">
</form>
I have the page displayed as expected.
What I am trying to achieve is to make these html tables editable, which is also working half way. When I click the Edit button, the table link turns editable, and I can change the value, and the Edit button changes to Save.
But when I click on "Save" button, firebug error shows
TypeError: input is undefined
for(i = 0;i < input.length; i++) {
----------↑
(Yes, arrow points to var i)
I want to capture the changes when I click on Save, and whatever changes in that page should be captured via POST method once clicked on the submit button below. Submit is redirected to action="/update/". Please let me know what should I do.
to avoid such problems please define all variables at the beginning of their scope (the scope is a function in case of Javascript)