I have two html pages, in the index.html file, I have an button and an input textbox. I want the value in the textbox to show on the next page. how should i go about doing this, should i have two javascript file? or what?
Javascript:
$('#searchBtn').click(function(){
var search = document.getElementById('searchField');
document.getElementById("demo").innerHTML = search.value;
});
Index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/index.css" type="text/css" />
<title>The Lantzyfi Bay</title>
</head>
<body>
<div class="head">
<img class="logo" src="pics/logo.png">
</div>
<div class="body">
<form>
<div class="searchField">
<input id="searchField" type="text" placeholder="Lantzify Search" name="search" size="32"/>
<a id="searchBtn" class="search" href="results.html">Search</a>
</div>
<div class="checkboxes">
<input type="checkbox" name="music">Music</input>
<input type="checkbox" name="pics">Pics</input>
<input type="checkbox" name="videos">Videos</input>
<input type="checkbox" name="other">Other</input>
</div>
</form>
<div class="links">
Userpolicy
About
Lorem Ipsum
</div>
</div>
<script type="text/javascript" src="java/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="java/search.js"></script>
</body>
</html>
results.html:
<!DOCHTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/index.css" type="text/css" />
<link rel="stylesheet" href="css/results.css" type="text/css" />
<title>The Lantzyfi Bay</title>
</head>
<body>
<div class="head">
<form id="q">
<img class="logo" src="pics/logo.png">
<input id="searchField" type="text" placeholder="User serch" name="search" size="30"/>
<a id="searchBtn" class="search" href="results.html">Search</a>
</form>
</div>
<div class="content">
<h2>Serach: <!--Users Search word--></h2><h2 id="demo"></h2>
<div class="mainContent">
<table>
<thead>
<tr>
<th>Type</th>
<th>Name</th>
<th>DB</th>
<th>RP</th>
</tr>
</thead>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript" src="java/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="java/search.js"></script>
</body>
</html>
You could add it to the URL and than read it on the other side.
Index.html would something like this:
$("#searchBtn").on('click', function () {
var url = "results.html?q=" + $("#searchField").val();
window.location = url
}
Result.html would have something like:
$(document).read(function () {
$("...").html(getParameterName('q'));
}
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
Credit for getParameterName function
NOTE:
You do have to note that this is not the proper way of doing things as you will have a lot of problems like url encoding, strings that are too long. This is however a good way to start. All the best.
Also I was using some jquery in the code. If this is a problem let me know and I can change it to do without
Only with a simple JS and HTML can not. By means of storing value and Timer (1) or SignalR (2) it could do this.
1, store value somewear ( database or cookies if just for actual user) and at some time refrest Result Page, by JS or outher, and read values.
2, SignalR Async refresh content of page, but you nead ASP.NET (MCV).
http://www.asp.net/signalr/overview/getting-started/tutorial-getting-started-with-signalr#next
It appears two pages are served from the same origin.
localStorage is an option:
The Mozilla demo containing an example
If the first page has a reference to the window of the 2nd page, e.g. 2nd page is opened by calling window.open. window.postMessage is also an option, it also works for cross origin.
If the web server is also under your control, you can of course use the server as a transmitter by sending data back to server through ajax then let the server notify the 2nd page through Server Sent Event or Web Socket and etc.
Related
This is the page I currently have:
webpage
I am quite the beginner so bear with me!
I want to replace the column that says 'test' with data from a database through javascript. The first column can stay hardcoded in HTML, but the second column needs to be javascript. How would I go about this? Would the entire table have to be made in javascript or is there another way to fix this?
Current HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bedrijf</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<a href="./bedrijfslijst.html">
<button type="button" class="btnGedetailleerd">Terug</button>
</a>
<a href="./index.html">
<button type="button" class="btnGedetailleerd">Home</button>
</a>
<div id="title"></div>
<div id="containerDetails">
<table id="bedrijfDetails">
<tr>
<td>Naam</td>
<td>test</td>
</tr>
<tr>
<td>Sector</td>
<td>test</td>
</tr>
<tr>
<td>Ondernemingsnummer</td>
<td>test</td>
</tr>
<tr>
<td>Adres</td>
<td>test</td>
</tr>
<tr>
<td>Aantal werknemers</td>
<td>test</td>
</tr>
<tr>
<td>Omzet</td>
<td>test</td>
</tr>
<tr>
<td>Balanstotaal</td>
<td>test</td>
</tr>
<tr>
<td>Framework</td>
<td>test</td>
</tr>
<tr>
<td>B2B/B2C</td>
<td>test</td>
</tr>
<tr>
<td>Duurzaamheidsrapportering - percentage </td>
<td>test</td>
</tr>
<tr>
<td>Duurzaamheidsrapportering - score</td>
<td>test</td>
</tr>
</table>
</div>
</body>
<script src="./js/gedetailleerd.js" type="text/javascript"></script>
</html>
and js code:
function weergaveBedrijf(gekozenBedrijf) {
let title = document.getElementById("title");
let h1 = document.createElement("h1");
let text = document.createTextNode(`Gedetailleerd overzicht van "${gekozenBedrijf}"`);
h1.append(text);
title.append(h1);
};
let gekozenBedrijf = localStorage.getItem("zoekterm");
weergaveBedrijf(gekozenBedrijf)
Simple loop through rows, try this one:
const stringToFillSecondColumn = 'foo'
const lastColumn = document.querySelectorAll('#bedrijfDetails tr td:last-child')
for (const cell of lastColumn) {
cell.innerHTML = stringToFillSecondColumn
}
Example import found in js file
Please adjust it so that the code is saved in the js file
Hello Please Help Example import found in js file Please adjust it so that the code is saved in the js file
<html dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>table</title>
</head>
<script>
function myim() {
a.innerHTML = import code in b.js
}
</script>
<body >
<div id="a" align="center">
</div>
<p>
<input type="button" name="go" id="bn" value="import" onclick="myim()"></p>
</body>
</html>
file b.js
<table border="1" cellpadding="0" style="border-collapse: collapse" width="80" dir="rtl">
<tr>
<td> <span lang="en">number</span></td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
</table>
You can use XMLHttpRequest in javascript to request data from the server.
file.open("GET", "b.js"); can be used to open the file.
file.responseText is used to get data from that file.
Note:
Use this code on web server (local or online) to avoid CORS policy in some browsers.
<html dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>table</title>
</head>
<script>
function myim() {
var file = new XMLHttpRequest();
file.open("GET", "b.js");
file.onreadystatechange = function (){
content = file.responseText;
document.getElementById('a').innerHTML = content;
}
file.send(null);
}
</script>
<body >
<div id="a" align="center"></div>
<p><input type="button" name="go" id="bn" value="import" onclick="myim()"></p>
</body>
</html>
Thank you
I have two pages one for a user to input a bus stop id. This bus stop id parses a live API. And one page for the results of that. The pages are showing on the single page at the moment. I want the user to get redirected to the second page. I have tired linking the pages but it did not work. ANy Suggestions?
<!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 class="ui-mobile-viewport ui-overlay-a">
<div data-role="page1">
<div data-role="content">
<div class="content-primary">
<table cellpadding="5" cellspacing="5" align="center" width="100%">
<tr>
<td align="center"><h1>Get Next Bus Details</h1></td>
</tr>
<tr>
<td align="center">
<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">
Clear text
</div>
<input type="button" value="Get Current Update" id="button_get_bus" style="background-color: #fff;padding: 8px;"></td>
</tr>
</table>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div class="content-primary">
<div id="resultDiv" style="display:none; padding-top:40px">
<table cellpadding="5" cellspacing="5" align="center" width="50%" style="border:solid 1px #fff; ">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><strong>From</strong> </td>
<td>: </td>
<td><span id="from"></span> </td>
</tr>
<tr>
<td><strong>To</strong> </td>
<td>: </td>
<td><span id="to"></span> </td>
</tr>
<tr>
<td><strong>Arival Date Time</strong> </td>
<td>: </td>
<td><span id="arival"></span> </td>
</tr>
<tr>
<td><strong>Departure Date Time</strong> </td>
<td>: </td>
<td><span id="departure"></span> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- end of pageone -->
<!--Loading scripts at bottom of the page-->
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon-loading"></span>
<h1>loading</h1>
</div>
<div class="ui-panel-dismiss"></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
console.log(results);
var str = JSON.stringify(results);
// Code for parsing json and inserting data in html
var obj =jQuery.parseJSON(str);
var destination=obj.results[0].destination;
document.getElementById("to").innerHTML=destination;
var origin=obj.results[0].origin;
document.getElementById("from").innerHTML=origin;
var arrivaldatetime=obj.results[0].arrivaldatetime;
document.getElementById("arival").innerHTML=arrivaldatetime;
var departuredatetime=obj.results[0].departuredatetime;
document.getElementById("departure").innerHTML=departuredatetime;
document.getElementById("resultDiv").style.display="block";
}
});
});
</script>
</body>
</html>
Please see $.mobile.pageContainer.pagecontainer("change", "#page2"); in this example below:
//On click of button this function get call
$(document).on('click', '#button_get_bus', 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
console.log(results);
var str = JSON.stringify(results);
// Code for parsing json and inserting data in html
var obj = jQuery.parseJSON(str);
var destination = obj.results[0].destination;
document.getElementById("to").innerHTML = destination;
var origin = obj.results[0].origin;
document.getElementById("from").innerHTML = origin;
var arrivaldatetime = obj.results[0].arrivaldatetime;
document.getElementById("arival").innerHTML = arrivaldatetime;
var departuredatetime = obj.results[0].departuredatetime;
document.getElementById("departure").innerHTML = departuredatetime;
document.getElementById("resultDiv").style.display = "block";
$.mobile.pageContainer.pagecontainer("change", "#page2");
}
});
});
<!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, user-scalable=no">
<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" />
<link rel="stylesheet" href="css/custom.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div class="ui-content">
<div class="content-primary">
<table cellpadding="5" cellspacing="5" align="center" width="100%">
<tr>
<td align="center"><h1>Get Next Bus Details</h1></td>
</tr>
<tr>
<td align="center">
<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">
Clear text
</div>
<input type="button" value="Get Current Update" id="button_get_bus" style="background-color: #fff;padding: 8px;"></td>
</tr>
</table>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-add-back-btn="true"></div>
<div class="ui-content">
<div class="content-primary">
<div id="resultDiv" style="display:none; padding-top:40px">
<table cellpadding="5" cellspacing="5" align="center" width="50%" style="border:solid 1px #fff; ">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><strong>From</strong> </td>
<td>: </td>
<td><span id="from"></span> </td>
</tr>
<tr>
<td><strong>To</strong> </td>
<td>: </td>
<td><span id="to"></span> </td>
</tr>
<tr>
<td><strong>Arival Date Time</strong> </td>
<td>: </td>
<td><span id="arival"></span> </td>
</tr>
<tr>
<td><strong>Departure Date Time</strong> </td>
<td>: </td>
<td><span id="departure"></span> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- end of pageone -->
<!--Loading scripts at bottom of the page-->
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon-loading"></span>
<h1>loading</h1>
</div>
<div class="ui-panel-dismiss"></div>
</body>
</html>
Remove your old jquery library and add the library before you start the script.You can add any of these following CDN to start it.
Google:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Microsoft
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
your above example
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have a simple table and am using knockout to populate the data.
I am trying to toggle my table body using two templates. I believe that's what the boostrap does not like. Please take a look at my code and give me suggestions.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type='text/javascript' src='Scripts/knockout-3.1.0.js'></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table" data-bind="visible: folks().length > 0" >
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th></th>
</tr>
</thead>
<tbody data-bind="template: { name: templateToUse, foreach: folks}"></tbody>
</table>
<button data-bind="click: $root.addItem">New Item</button>
</div>
</body>
</html>
<script type='text/javascript' src='Scripts/myscript.js'></script>
<script id="itemTmpl" type="text/html">
<tbody>
<tr>
<td>
<span data-bind="text: name"></span>
</td>
<td>
<span data-bind="text: age"></span>
</td>
<td class="buttons">
<button>Edit</button>
<button>Delete</button>
</td>
</tr>
</tbody>
</script>
<script id="editTmpl" type="text/html">
<tbody>
<tr>
<td>
<input type="text" data-bind="value: name" ></input>
</td>
<td>
<input data-bind="value: age"></input>
</td>
<td class="buttons">
<button>Done</button>
<button>Cancel</button>
</td>
</tr>
</tbody>
</script>
You're including the tbody tag unnecessarily in your templates. The template content gets inserted into the parent tag, which in your case is already a tbody element. Bootstrap is failing because the rendered table looks like
<table>
...
<tbody>
<tbody>
...
I want to put datepicker on my Application . Can you guys please help me?. I don't have much knowledge on JQuery . Do I need add any Extra Plugin for that or Just type put only the coding??.This is the coding I using for that.
<html xmlns="http://www.w3.org/1999/xhtml">
<%#include file="header.jsp"%>
<head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$('#example6').datetimepicker({
showSecond: true,
timeFormat: 'hh:mm:ss',
stepHour: 2,
stepMinute: 10,
stepSecond: 10
});
</script>
</head>
<div id="templatemo_content_right">
<h1>Login Form</h1>
<center>
<form action="LoginServlet" method="POST" id="theform" name="theform">
<table cellspacing="20" cellpading="10">
<tr>
<td>Department Id:</td>
<td><input type="text" name="departmentId" id="userName"/></td>
</tr>
<tr>
<td>Department Name:</td>
<td><input type="password" name="departmentName" id="password"/></td>
</tr>
<tr>
<td>Department Name:</td>
<td><input type="password" name="departmentName" id="password"/></td>
</tr>
<tr>
<td>Appointed Date:</td>
<td><input id="example6" type="text"></td>
</tr>
<tr>
<td><input type="submit" value="Login"/></td>
</tr>
</table>
</form>
</center>
<div class="cleaner_with_height"> </div>
</div> <!-- end of content right -->
<%#include file="footer.jsp" %>
</html>
You need to add the jQuery UI script:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
Add it right after the jQuery script tag.
Between the load of jQuery and your script, you need to load the plugin. Or I missed something. Also, for future reference, if you get stuck, create a jsfiddle