I have a csv file which contains items scraped from a supermarket website. I have now displayed them on html and added a "Add to cart" button. I want the item name and price to be saved on to local storage when the button is pressed.
The idea is to then show these saved data in the basket.
Showing my existing code below.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--<link href ="styles.css" type = "text/css" rel="stylesheet">-->
<title>CSV File to HTML Table Using AJAX jQuery</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- Header-->
<div id="header">
<button type="button" class="button">Basket</button>
</div>
<!-- CSV FILE DATA WILL APPEAR HERE-->
<div class="container">
<div class="table-responsive">
<div id="order_list" onload="appendRow()"><p id="tableintro"> Choose your desired supermarket</p>
</div>
</div>
</div>
<!--THIS BUTTON WILL LOAD DATA FROM CSV FILE-->
<div id="sidebar">
<div align="center">
<button type="button" name="load_data" id="load_sainsburys" class="btn btn-info">Sainsburys Colindale</button>
</div>
</div>
//Save item to local storage - DOESNT SEEM TO WORK
<script>
function SaveItem() {
var usrObject = {};
usrObject.product = document.getElementsById("12at").value;
usrObject.price = document.getElementById("34at").value;
//Store User
localStorage[usrObject.product] = JSON.stringify(usrObject);
}
</script>
Below is the code i am using to retrieve data from my CSV file:
<script>
$(document).ready(function(){
$('#load_sainsburys').click(function(){
$.ajax({
url:"sainsburys.csv",
dataType:"text",
success:function(data)
{
var tesco_data = data.split(/\r?\n|\r/);
var table_data = '<table class="table table-bordered table-striped">';
for (var count = 0; count < tesco_data.length; count++)
{
var cell_data = tesco_data[count].split(",");
var name = cell_data[0];
var price = cell_data[1];
if (count === 0)
{
table_data += '<tr><th>' + name + '</th><th>' + price + '</th><th>action</th></tr>';
continue;
}
table_data += '<tr><td id="12at">' + name + '</td><td id="34at">' + price + '</td><td><button type="button onclick="SaveItem()">Add to cart</button></td></tr>';
}
table_data += '</table>';
$('#order_list').html(table_data);
}
});
});
});
</script>
Related
I have been trying to resolve this but I don't know what I'm missing.
I have a table where I get API information using fetch. I want the input to filter the users as I type on it. This is what I have so far, if it's possible I want to keep using filter() and pure Javascript. I believe my problem is not knowing how to access the information in the rows
const listItems = document.querySelectorAll("#data");
This line seems not to work the way I want it to. Here is the code:
fetch(
"https://gist.githubusercontent.com/SuecoMarcus/a77af69f0e84c3125a5c0cf43a3ac41b/raw/918cd058b7e2286a36e79643c63a5ebca097d7c8/users.json"
).then((response) => {
response.json().then((data) => {
let row = "";
data.forEach((itemData) => {
row += "<tr>";
row += "<td>" + itemData.id + "</td>";
row += "<td>" + itemData.firstname + "</td>";
row += "<td>" + itemData.lastname + "</td>";
row += "<td>" + itemData.age + "</td></tr>";
});
document.querySelector("#data").innerHTML = row;
});
});
document.querySelector("#search-input").addEventListener("input", filterTable);
function filterTable(e) {
const searchInput = document.querySelector("#search-input");
const filter = searchInput.value.toLowerCase();
const listItems = document.querySelectorAll("#data");
listItems.forEach((item) => {
let text = item.textContent;
if (text.toLowerCase().includes(filter.toLowerCase())) {
item.style.display = "";
} else {
item.style.display = "none";
}
});
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>Hack Academy - Proyecto Base</title>
<!-- CSS de Bootstrap -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We"
crossorigin="anonymous"
/>
<!-- CSS Propio -->
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="container mt-5" id="app">
<input
style="width: inherit"
id="search-input"
placeholder="Ingresar texto a buscar...
"
type="search"
/>
<table class="table table-search">
<thead>
<tr>
<th>ID</th>
<th>Nombre</th>
<th>Apellido</th>
<th>Edad</th>
</tr>
</thead>
<tbody id="data"></tbody>
</table>
</div>
<!-- JS de Bootstrap -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
crossorigin="anonymous"
></script>
<!-- JS Propio -->
<script src="js/app.js"></script>
</body>
</html>
const listItems = document.querySelectorAll("#data"); selects the table as whole instead of the single table rows. If you specify #data > tr, you'll get the single rows instead and can iterate through them. Try this:
fetch(
"https://gist.githubusercontent.com/SuecoMarcus/a77af69f0e84c3125a5c0cf43a3ac41b/raw/918cd058b7e2286a36e79643c63a5ebca097d7c8/users.json"
).then((response) => {
response.json().then((data) => {
let row = "";
data.forEach((itemData) => {
row += "<tr>";
row += "<td>" + itemData.id + "</td>";
row += "<td>" + itemData.firstname + "</td>";
row += "<td>" + itemData.lastname + "</td>";
row += "<td>" + itemData.age + "</td></tr>";
});
document.querySelector("#data").innerHTML = row;
});
});
document.querySelector("#search-input").addEventListener("input", filterTable);
function filterTable(e) {
const searchInput = document.querySelector("#search-input");
const filter = searchInput.value.toLowerCase();
const listItems = document.querySelectorAll("#data > tr");
listItems.forEach((item) => {
let text = item.textContent;
if (text.toLowerCase().includes(filter.toLowerCase())) {
item.style.display = "";
} else {
item.style.display = "none";
}
});
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>Hack Academy - Proyecto Base</title>
<!-- CSS de Bootstrap -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We"
crossorigin="anonymous"
/>
<!-- CSS Propio -->
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="container mt-5" id="app">
<input
style="width: inherit"
id="search-input"
placeholder="Ingresar texto a buscar...
"
type="search"
/>
<table class="table table-search">
<thead>
<tr>
<th>ID</th>
<th>Nombre</th>
<th>Apellido</th>
<th>Edad</th>
</tr>
</thead>
<tbody id="data"></tbody>
</table>
</div>
<!-- JS de Bootstrap -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
crossorigin="anonymous"
></script>
<!-- JS Propio -->
<script src="js/app.js"></script>
</body>
</html>
I solved your issue by just adding childNodes at the end of querySelector("#data")
So that line should be:
const listItems = document.querySelector("#data").childNodes;
I am trying to pull data from a json file and display it in a table on my web page. The json file is updated dynamically with data about movies from an api. The function that I am using right now is giving a syntax error about needing a name.
I have tried naming the function but so far nothing has worked. I'm new to web development so if it's an obvious answer I'm sorry.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Furby</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="static/layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script>
$(function() {
var table = document.getElementById('userdata');
for(var i = table.rows.length - 1; i > 0; i--)
{
table.deleteRow(i);
}
$.getJSON('static/movies.json', function(data) {
$.each(data.movie, function(i, f) {
var url = "https://image.tmdb.org/t/p/w92/" + f.url;
var tblRow = "<tr>" + "<td>" + f.title + "</td>" + "<td>" + "<img id = 'url_img' >" + "</td>" + "</tr>"
$(tblRow).appendTo("#userdata tbody");
document.getElementById('url_img').src = url;
document.getElementById('url_img').id = url;
});
});
});
</script>
</head>
<body id="top">
<div id="pageintro" class="hoc clear">
<!-- ################################################################################################ -->
<div class="flexslider basicslider">
<ul class="slides">
<li>
<article>
<h3 class="heading">Find A Movie</h3>
<p>Search from thousands of online movies!</p>
<footer>
<form class="group" method="post" action="search" onsubmit="function();">
<fieldset>
<legend>Search:</legend>
<input type="text" value="" placeholder="Search Here…" name="search">
<button class="fa fa-sign-in" type="submit" title="Submit"><em>Submit</em></button>
</fieldset>
</form>
</footer>
</article>
<div class="wrapper">
<div class="profile">
<table id= "userdata" border="2">
<thead>
<th>Title</th>
<th>Cover</th>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</li>
</ul>
</div>
<!-- ################################################################################################ -->
</div>
<!-- ################################################################################################ -->
<script src="static/layout/scripts/jquery.min.js"></script>
<script src="static/layout/scripts/jquery.backtotop.js"></script>
<script src="static/layout/scripts/jquery.mobilemenu.js"></script>
<script src="static/layout/scripts/jquery.flexslider-min.js"></script>
</body>
</html>
The code below will update my table with the movie titles and images once but I have to do a hard refresh on the page to get it to update. I assume it's the name error that is preventing it from running this code every time I search a movie.
EDIT: Added more relevant code. Sorry this is my first time posting.
Remove the inline event listener from the form.
<form class="group" method="post" action="search">
Name your function
function performSearch () {
var table = document.getElementById('userdata');
for (var i = table.rows.length - 1; i > 0; i--) {
table.deleteRow(i);
}
$.getJSON('static/movies.json', function(data) {
$.each(data.movie, function(i, f) {
var url = "https://image.tmdb.org/t/p/w92/" + f.url;
var tblRow = "<tr>" + "<td>" + f.title + "</td>" + "<td>" + "<img id = 'url_img' >" + "</td>" + "</tr>"
$(tblRow).appendTo("#userdata tbody");
document.getElementById('url_img').src = url;
document.getElementById('url_img').id = url;
});
});
}
Call your function on page load.
$(function(){
performSearch();
});
And setup the form to perform the search on submit.
$(function(){
performSearch();
$('.group[action="search"]').on('submit', function(e){
e.preventDefault();
performSearch();
});
});
1 ) You have 2 jQuery Lib, that wrong, you need only one also check versions
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
. . .
<script src="static/layout/scripts/jquery.min.js"></script>
2) your HTML table is not valid : you forget placing forget <tr> .... </tr>
<table>
<thead>
<tr>
<th>Title</th>
<th>Cover</th>
</tr>
</thead>
<tbody id="userdata-tbody"></tbody>
</table>
I also place the id="userdata-tbody" on the <tbody> otherwise you also delete your <thead> row
so place your jQuery lib before the code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Furby</title>
<link href="static/layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
<script src="static/layout/scripts/jquery.min.js"></script>
<script src="static/layout/scripts/jquery.backtotop.js"></script>
<script src="static/layout/scripts/jquery.mobilemenu.js"></script>
<script src="static/layout/scripts/jquery.flexslider-min.js"></script>
<script>
$(function () {
var tableUserData = document.getElementById('userdata-tbody');
...
for(var i = tableUserData.rows.length; i--;)
{
tableUserData.deleteRow(i);
}
...
});
</script>
</head>
<body>
...
<table>
<thead>
<tr>
<th>Title</th>
<th>Cover</th>
</tr>
</thead>
<tbody id="userdata-tbody"></tbody>
</table>
...
</body>
</html>
I developed a basic site using CSS, semantic HTML, javascript, and API. I have built a basic search application using HTML, sass(scss), gulp, and javascript. It connects to an API that populates a page with the results. I chose to utilize the Movie Database API. However, I used jQuery and now need to convert it with just plain JS and the Fetch method. I can't seem to figure out how to do it.
Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel ="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/main.css" />
<title>Movie Box</title>
</head>
<body>
<!-----*** HEADER ***----->
<header>
<div class="clearfix">
<nav>
<!-- LOGO -->
<h1>MovieBox Logo</h1>
<!-- NAV LINKS -->
<ul class="main-nav">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
<!-- SEARCH FORM -->
<form action="#" class="js-search-form">
<p class="form-p">Search for movies by Title</p>
<div class="search">
<span class="fa fa-search"></span>
<input type="text" class="js-query" placeholder="ex. Star Wars" autofocus>
</div>
<button id="ghost-btn" type="submit">Submit</button>
</form>
</header>
<!-----*** SECTION - SEARCH RESULTS ***----->
<section class="js-search-results clearfix">
</section>
<!-----*** SECTION - VIEW MORE ***----->
<section>
<p class="max center-text">Showing max result of 20</p>
<p class="center-text">
<a class="btn second-btn" href="https://www.imdb.com/find" target="_blank">View More Details on IMDB</a>
</p>
</section>
<!-----*** FOOTER ***----->
<footer>Built by Eileen Villahermosa for DWS2</footer>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="js/index.js"></script>
</body>
</html>
Here is my JS:
// Single state variable for endpoint
var MD_BASE_URL = "https://api.themoviedb.org/3/search/movie?
include_adult=false&page=1";
var state = {
query: ''
};
// State modification functions
function getApiData(searchTerm, callback) {
var query = {
query: searchTerm,
language: 'en-US',
api_key: 'sssssssssssssss', // took the key out for privacy
};
$.getJSON(MD_BASE_URL, query, callback);
}
// Render functions
function displayMDSearchData(data) {
var resultElement = '';
if(data.results.length > 1) {
resultElement += '<section class="js-search-results clearfix">';
resultElement += '<h2>' + '<span>' + "Results for " + state.query + '</span>' + '</h2>';
if(data.results)
data.results.forEach(function(results){
resultElement += '<article>';
resultElement += '<div class="container">';
resultElement += '<img src="https://image.tmdb.org/t/p/w500' + results.poster_path + '"/>';
resultElement += '<div class="content">';
if(results.title.length > 20) {
resultElement += '<h3>' + results.title.substr(0,20) +'...</h3>';
} else {
resultElement += '<h3>' + results.title + '</h3>';
}
resultElement += '<p>Released: ' + results.release_date + '</p>';
resultElement += '</div>';
resultElement += '</div>';
resultElement += '</article>';
});
resultElement += '</section>';
console.log(data);
} else {
resultElement += '<p class="no-results">No results</p>';
}
$('.js-search-results').html(resultElement);
}
// Event listeners
function watchSubmit() {
$('.js-search-form').submit(function(e) {
e.preventDefault();
state.query = $(this).find('.js-query').val();
var query = state.query;
getApiData(query, displayMDSearchData);
});
}
$(function(){watchSubmit();});
Im creating a bus finder application. I want the user to be redirected to a new page after they have input information for the ajax api request. At the moment the information is inserted after page one but on the same page. How do I create a new page with the ajax results once the user has inout the information and sent the request. I have a variable created with the results as a virtual page.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dublin Concert Listings</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/custom.css" />
<link rel="stylesheet" href="css/theme.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Get Next Bus Details</h1>
</div>
<div data-role="content">
<div class="content-primary">
<div data-demo-html="true">
<div class="ui-input-search ui-shadow-inset ui-input-has-clear ui-body-inherit ui-corner-all">
<input data-type="search" placeholder="Bus Stop Id" id="bus_stop_id" name="bus_stop_id">
</div>
<input type="button" value="Get Current Update" id="button_get_bus">
</div>
</div>
</div>
</div>
<script type="text/javascript">
//On click of button this function get call
$('#button_get_bus').click(function(){
//Get Enter Bus Id
var bus_stop_id = document.getElementById("bus_stop_id").value;
//If Id is blank then given error
if(bus_stop_id == "")
{
alert("Please enter bus stop number");
return false;
}
// This Function post request to API with the given bus stop id
$.ajax({
url: "https://data.smartdublin.ie/cgi-bin/rtpi/realtimebusinformation?stopid="+bus_stop_id+"&format=json",
dataType: 'json',
success: function(results){
// It returnes json data
var str = JSON.stringify(results);
// Code for parsing json
var myObj = JSON.parse(str);
var destination = myObj.results[0].destination;
var origin = myObj.results[0].origin;
var arrivaldatetime = myObj.results[0].arrivaldatetime;
var departuredatetime = myObj.results[0].departuredatetime;
var routenumber = myObj.results[0].route
var virtualPage = "";
virtualPage +=
'<div data-role="page" data-theme="a" id="virtualPage">'
+ '<div data-role="header">'
+ '<h1>' + origin + '</h1>'
+ '<div data-role="content">'
+ '<h3>Venue: ' + destination + '</h3>'
+ '<h3>Date: ' + arrivaldatetime + '</h3>'
+ '<h3>Time: ' + departuredatetime + '</h3>'
+ '</div'
+ '<div class="wrapper"><a data-role="button" data-transition="slide" href="#pageone">Back</a></div>'
+ '</div>'
+ '</div>';
$(virtualPage).insertAfter($('#pageone'));
}
});
});
</script>
</body>
</html>
Before AJAX request
After AJAX request
I am trying to learn Jquery mobile and it seems to have some issues. Based on this I am trying to expand the example and do more things. So I have two lists and each list has some items. By clicking on an item I want to inject another html file (exercise.html) to show it but the injection doesn't work. Below is my code.
exercises.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://jquerymobile.com/demos/1.2.1/docs/_assets/js/jqm-docs.js"></script>
<script src="http://jquerymobile.com/demos/1.2.1/js/jquery.mobile-1.2.1.js"></script>
<script src="categoryData.js"></script>
</head>
<body>
<div data-role="page" id="exercises-page" class="type-interior">
<script src="categoryData.js"></script>
<div data-role="header" data-position="fixed" data-id="appHeader">
<h1>Lists</h1>
</div><!-- /header -->
<div data-role="content" >
<h4>Choose an item</h4>
<ul id="item_category" data-role="listview" data-inset="true"></ul>
</div>
</div><!-- /page -->
</body>
categoryData.js
(function($) {
var categoryData = {
list1 : {
name : "List1",
items : [{
name : "l1_item1",
level : "level1"
}, {
name : "l1_item2",
level : "level1"
}, {
name : "l1_item3",
level : "level2"
}, {
name : "l1_item4",
level : "level2"
}]
},
list2 : {
name : "List2",
items : [{
name : "l2_item1",
level : "level1"
}, {
name : "l2_item2",
level : "level1"
}, {
name : "l2_item3",
level : "level2"
}]
}
};
$(document).ready(function() {
var exercise_category = $('#item_category');
var iHtml = '';
for (var x in categoryData) {
category = categoryData[x];
iHtml += '<li>' + category.name + '<ul data-inset="true">';
iHtml += '<h4 data-role="content" >Choose an item</h4>';
// The array of items for this category.
cItems = category.items;
// The number of items in the category.
numItems = cItems.length;
for (var i = 0; i < numItems; i++) {
iHtml += '<li><a href=exercise.html#item-page?title=' + cItems[i].name + '>' + cItems[i].name + '</a></li>';
}
iHtml += '</ul>';
};
iHtml += '</ul></li>';
exercise_category.html(iHtml).listview('refresh');
});
// Listen for any attempts to call changePage().
$(document).bind("pagebeforechange", function(e, data) {
console.log('BEFORECHANGE');
// We only want to handle changePage() calls where the caller is asking us to load a page by URL.
if ( typeof data.toPage === "string" ) {
var u = $.mobile.path.parseUrl( data.toPage );
var re = /^#item-page/;
if (u.hash.search(re) !== -1) {
showExercise(u, data.options);
e.preventDefault();
}
}
});
function showExercise(urlObj, options) {
var categoryName = urlObj.hash.replace( /.*title=/, "" );
var catna = $.trim(categoryName.replace('_', ' '));
var category = categoryData[ categoryName ],
pageSelector = urlObj.hash.replace( /\?.*$/, "" );
if (catna) {
var $page = $( pageSelector ),
// Get the header for the page.
$header = $page.children( ":jqmData(role=header)" ),
// Get the content area element for the page.
$content = $page.children( ":jqmData(role=content)" );
$header.find( "h1" ).html( "pass something to change the Title" );
$page.page();
options.dataUrl = urlObj.href;
$.mobile.changePage( $page, options );
}
}
})(jQuery);
exercise.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://jquerymobile.com/demos/1.2.1/docs/_assets/js/jqm-docs.js"></script>
<script src="http://jquerymobile.com/demos/1.2.1/js/jquery.mobile-1.2.1.js"></script>
<script src="categoryData.js"></script>
</head>
<body>
<div data-role="page" class="type-interior" id="item-page" style="text-align: center;">
<script src="categoryData.js"></script>
<div data-role="header" data-position="fixed" data-id="exerciseHeader">
<h1>Title</h1>
</div><!-- /header -->
<div data-role="content">
<h2>Image</h2>
<div class="article">
<p><img src="" alt="...">
</p>
</div>
</div>
</div><!-- /page -->
</body>
I want to pass content to the of the header of the exercise.html and in the . Any idea why it doesn't work? It always shows the title that I have defined in the html.