The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> JQuery to pull XML into a table only works in Edge, Newbie has a spaghetti tangle!
EdNerd
post May 12 2020, 11:22 PM
Post #1





Group: Members
Posts: 8
Joined: 12-May 20
Member No.: 27,340
I have a good history of coding in VBA (Word, Excel, Access). Unfortunately, it doesn't automatically transfer into HTML, JavaScript, and JQuery! :8>(

I have a properly configured XML document. When my web page opens (built in HTML using Notepad), it reads the XML and pulls everything into a table on the web page. At least -- it's supposed to. It works in Edge on Windows 10, but not in IE, FireFox, or Chrome on Win 10 or Win 8.1 (I don't have Edge on the 8.1 box).

-- First, the code to do this was copied from W3Schools. I can't say I fully understand it.
-- Second, this is all being done on a local machine - the web page has not been tried on a server yet. Dunno if that makes a difference. I do know the server we have is Linux based - again, no clue what difference that will make.
-- Third, I'm pretty much helpless here! I can search the internet for code snippets and copy/paste, but I can't understand why things aren't working or how to fix them. And I don't know what you need to see to help me out. So I'm going to copy in all my HTML - please edit it out if it's irrelevant or too much.

NOTES:
1. The CSS is all copy/paste from other sources. I kinda understand it, but I need to work at it more.
2. The link just above the <body> tag is where I got the code to search my table results and highlight the results.
3. The commented button was an attempt to create a button to clear the highlights. Don't understand the workings of all that enough yet to accomplish it.
4. The first script is the search / highlight. The second script pulls the data off the XML doc and dynamically builds the table. Or it should - but so far only in Edge. I do note that there isn't any specified path to get to "Incidents.XML". On the local machine, these are all in the same folder on the desktop.
5. The function runs when any item in the table is clicked; it pulls that line of information into a space above the table.


If anyone can give me a boost - or at least a healthy drop-kick - in a good direction, I will be very grateful for the help.
Ed


CODE


<!DOCTYPE html>

<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
  font: 14px Georgia, serif;
}
th,td {
  padding: 5px;
}

#showCD {
  font: bold 20px/30px Georgia, serif;
}

/* Style the input */
.on-page-search {
width: 65%;
font-size: 14px;
line-height: 26px;
color: #787d85;
background-color: #fcfcfc;
border: 1px solid #e0e1e1;
padding: 5px 15px;
}

/* Style the list */
.demo-links {
border-bottom: none;
padding: 5px 5px;
line-height: 36px;
}

/* Style the results */
.results {
background: #de1919;
color: white;
}
.results:hover {
background: #333;
color: white;
}

</style>

</head>

<!--  https://www.thriveuk.com/quick-tips-how-to-search-on-a-page-for-text-and-highlight-it/ -->

<body>

<p></p>
<p></p>
<p>Enter text to search this page.</p>
<p></p>

<input class="on-page-search"></input>
<p></p>
<!--  button type="button" name="clearme" onclick="alert('Hi user!')">Clear highlights</button -->

<p></p>
<p></p>

<script type='text/javascript'>
jQuery(document).ready(function($) {
    $(".on-page-search").on("keyup", function () {
        var v = $(this).val();
        $(".results").removeClass("results");
        $("tr").each(function(){
            if (v != "" && $(this).text().search(new RegExp(v,'gi')) != -1) {
                $(this).addClass("results");
            }
        });
    });
});
</script>

<p>Click on a name to display information.</p>
<p id='showCD'></p>
<div id="data">
<table id="demo">

<script>
var x,xmlhttp,xmlDoc
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "Incidents.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
x = xmlDoc.getElementsByTagName("INC");
table="<tr><th>Last Name</th><th>First Name</th><th>Date</th><th>Type</th></tr>";
for (i = 0; i <x.length; i++) {
    table += "<tr onclick='displayCD(" + i + ")'><td>";
    table += x[i].getElementsByTagName("LNAME")[0].childNodes[0].nodeValue;
    table += "</td><td>";
    table += x[i].getElementsByTagName("FNAME")[0].childNodes[0].nodeValue;
    table += "</td><td>";
    table += x[i].getElementsByTagName("DATE")[0].childNodes[0].nodeValue;
    table += "</td><td>";
    table += x[i].getElementsByTagName("TYPE")[0].childNodes[0].nodeValue;
    table += "</td><tr>";
  }
document.getElementById("demo").innerHTML = table;

function displayCD(i) {
  document.getElementById("showCD").innerHTML =
  "Last: " +
  x[i].getElementsByTagName("LNAME")[0].childNodes[0].nodeValue +
  "<br>First: " +
  x[i].getElementsByTagName("FNAME")[0].childNodes[0].nodeValue +
  "<br>Date: " +
  x[i].getElementsByTagName("DATE")[0].childNodes[0].nodeValue +
  "<br>Offense: " +
  x[i].getElementsByTagName("TYPE")[0].childNodes[0].nodeValue;
}
</script>

</table>
</div>

</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 13 2020, 05:53 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
Check that the browsers run any kind of javascript from local pages. Windows may disallow it by default, for security reasons.

If javascript does run, check the developer consoles of your browsers to see if there's any script errors.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
EdNerd
post May 13 2020, 09:04 AM
Post #3





Group: Members
Posts: 8
Joined: 12-May 20
Member No.: 27,340
I decided to forgo the script to dynamically build the table.

The idea behind this is that I get reports which are Excel files. I use VBA to pull all the individual reports into a master spreadsheet. All was good - until they said "Can we pull this up on our tablets away from the office?" That means it needs to go on the web site. I'm a fish that swims in a tank, and they throw me in the ocean!!

So I found that I can use code to build a table from XML. And I built the VBA to generate an XML file from my master spreadsheet. Now, finding that the script to build the table doesn't work everywhere, I figure I'll just use the VBA to generate a text file, which is the underlying HTML code for this web page. In doing that, I can code the table into it.

<d'oh!!>
Ed
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Client-side Scripting · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 18th April 2024 - 08:50 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC