Im still new to javascript and ajax and all that. Im working on a project for my web dev course and have been stuck on this for a while now. The professor hasnt been of any help.
I am making a data page. On the index there are 4 radio buttons, each on loading another html page into the div. Each of these other pages have data sets and allow for searches on a few of the fields. The issue is that when these pages are called by the index page, none of the functions work on them anymore. The functions work on them when I open the page alone and not through the index.
This is the Index Page html and javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Index</title>
<link href="index.css" rel="stylesheet">
<script src="index.js"></script>
</head>
<body>
<h1> Welcome to Data Sets - Calgary</h1>
<table id="buttons">
<tr><td>Find Calgary Libraries</td><td>Find Traffic Incidents In Calgary</td><td>Search Calgary Building Permits</td><td>Search Calgary Crimes</td></tr>
<tr><td><p>Clicking on this loads a search for Calgary Libraries</p></td><td><p>Clicking on this loads a search for Calgary traffic incidents</p></td><td><p>Clicking on this loads a search for Calgary Building permits</p></td><td><p>Clicking on this loads a search for Calgary Crimes</p></td></tr>
<tr><td><input type="radio" id="calgLib" name="butt"></td><td><input type="radio" id="calgTraff" name="butt"></td><td><input type="radio" id="calgBuild" name="butt"></td><td><input type="radio" id="calgCrime" name="butt"></td></tr>
</table>
<div id="buttonresults">
</div>
</body>
</html>
window.onload=registerListeners;
function registerListeners() { var asd; asd=document.getElementById("calgLib"); asd.addEventListener("change", function () { getContent("liblocations.html");}, false); asd=document.getElementById("calgTraff"); asd.addEventListener("change", function () { getContent("trafficincident.html");}, false); asd=document.getElementById("calgBuild"); asd.addEventListener("change", function () { getContent("buildpermit.html");}, false); asd=document.getElementById("calgCrime"); asd.addEventListener("change", function () { getContent("commcrime.html");}, false); }
function getContent(infopage) {
asynchrequest= new XMLHttpRequest();
asynchrequest.onreadystatechange = function() {
if (asynchrequest.readyState == 4 && asynchrequest.status == 200) { document.getElementById("buttonresults").innerHTML = asynchrequest.responseText; } }; asynchrequest.open("GET", infopage, true); asynchrequest.send(); }
This is one of the pages being called from the index
<script src="liblocations.js"></script>
<h1>Find Calgary Libraries</h1>
<div >
<table id="fields">
<tr><td><label>Find Libraries by Name </label></td><td><input type="text" id="libname"></td></tr>
<tr><td><label>Find Libraries by Postal Code </label></td><td><input type="text" id="libPostal"></td></tr>
<tr><td><label>Find Libraries by Square Feet </label></td><td><input type="text" id="libSquareFeet"></td></tr>
</table>
</div>
<br>
<br>
<h3 id="searchvalue"> Enter a search</h3>
<table id="searchresults">
</table>
This is the unfinished Java script for the liblocations page
var xhr = new XMLHttpRequest; var parsedrecord; window.onload=pageSetup;
function pageSetup() {
document.getElementById("libname").addEventListener("keyup", function (){ searchByLibraryName();},false);
document.getElementById("libPostal").addEventListener("keyup", function (){ searchByLibraryPostal();},false);
document.getElementById("libSquareFeet").addEventListener("keyup", function (){ searchByLibrarySqrFeet();},false);
xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { parsedrecord = JSON.parse(xhr.responseText); } }; xhr.open("GET", "https://data.calgary.ca/resource/m9y7-ui7j.json", true); xhr.send();
}
function searchByLibraryName() { document.getElementById("searchvalue").innerHTML="Searching by Library Name"; var librarytoUse=libname.value.toUpperCase(); libPostal.value=""; libSquareFeet.value=""; var gmap=""; var position=""; var output="<tr><th>Library</th><th>Postal Code</th><th>Square Feet</th><th>Phone Number</th><th>Location</th></tr>";
for(var i=0;i<parsedrecord.length;i )
{
var record=parsedrecord[i];
var searchLib=record.library.toUpperCase();//assign
if(searchLib.startsWith(librarytoUse))//partial match on string
{
output ="<tr><td>";
output =record.library;
output ="</td><td>"
output =record.postal_code;
output ="</td><td>";
output =record.square_feet;
output ="</td><td>";
output =record.phone_number;
output ="</td><td>";
position=record.location.latitude "," record.location.longitude;
gmap ="<a href=https://www.google.com/maps/search/?api=1&query=" position " target=_blank>Click here to see map</a> ";
output =gmap;
output ="</td></tr>";
}
}
document.getElementById("searchresults").innerHTML=output;
}
When opening liblocations.html, the functions work but when I use the radio button and the index.html loads the page, the functions stop working. I'm not sure what is going on, or how to fix it. Any help is appreciated!
This is the index page calling the liblocations enter image description here
This is what the liblocations page looks like when I open it alone enter image description here
CodePudding user response：
In the index.html page put this line <script src="index.js"></script> end of the body tag . I mean here:
<script src="index.js"></script>
</body>
CodePudding user response：
From personal experience, things can quickly get messy when using XMLHttpRequest for fetching data in JavaScript. A much better option would be to use the Fetch API, which you can read more about on the MDN Web Docs. I'm not sure if this is the exact problem you're facing, but I do know that trying to run asynchronous code with XMLHttpRequest (rather than async/await and the Fetch API) can cause many unintended consequences that can be confusing unless you really know what you're doing. That is unless you have a valid reason for using XMLHttpRequest, such as having to target IE.