• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Load data from XML depending on which link is clicked

 
Greenhorn
Posts: 10
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hello,
I’m trying to build a website for a real estate agent that is updated only through editing an XML-file, and putting pictures in the right folder.

My structure right now is an index.html with pictures of, and links to, the different houses for sale. The data about those houses are all showed on info.html, and the data comes from an XML-file through XMLHttpRequest triggered by an eventlistener that listens for the DomContentLoaded-event.
It works, but the problem is that my script is hardcoded to read the first house in the XML-file. It should of course read the right house according to which link is clicked in index.html.

I'm thinking I should place the links in the same class and then somehow send the id of the clicked link as a parameter to loadXMLDoc() with an eventlistener and getElementsByClassName. I have tried a lot but I can't seem to find a working solution.

Heres my code if somebody wants to show point in the right direction:

index.html: https://jsfiddle.net/crocky/nszd7wcf/4/
info.html: https://jsfiddle.net/crocky/6a0nqjqn/

This code was originally written for an assignment at my university, it was an introductory course in Internet technology. The assignment was really basic so now I'm trying to take it further when I came up with the idea to make an easily updated website.
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Anders Gren wrote:Heres my code if somebody wants to show point in the right direction:


Most people are reluctant to click links to another site for code. It would be best if you were to post the relevant parts here (be sure to use code tags to preserve the formatting).

It doesn't sound like you are using jQuery. Are you using some other framework? Doing this sort of stuff in raw JS, especially if you are planning to support all browsers, is tedious and error-prone.

Other questions:
  • Do you have control over the backend API? If so, JSON would be better as an interchange format over XML.
  • I assume there is an API to get a simple list of properties with id values, and one to give the details of a specific property given an id. Correct?
  • Is this an SPA (single-page web app) or are the list of properties and the property detail views on different pages?
  • Are you doing this as a learning exercise, or professionally?

  •  
    Anders Gren
    Greenhorn
    Posts: 10
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    Okay, here is a lighweight version of my problem.
    Suppose I have this HTML. Both links lead to the same page, the only difference is the id.



    In my current version I use this code to know when to load data from XML. As you can see I have to manually change the parameter sent to loadXMLDoc() to show another house.


    I guess I have to do something like this to send the id as parameter. It's not working.



    I'm using vanilla JavaScript, I read somewhere that it's recommended to learn JavaScript properly before moving on to frameworks. Since this is just for exercise I guess I don't have to support every browser.

  • I have written the XML-file myself. Why is JSON better here?
  • The goal is to have a simple list and a detailed list. I don't have the simple list yet.
  • The list of properties are on index.html, and property detail view on info.html.
  • This is only a learning exercise. Maybe I'm getting somewhere if that question have to be asked?

  •  
    Bear Bibeault
    Sheriff
    Posts: 67746
    173
    Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator

    Anders Gren wrote:for (var i = 0 ; i < linknumber.length; i++) {


    I don't understand the use of the for loop? Why?

    And yes, it's going to fail because you are trying to iterate over an element and that makes no sense.

    I'm using vanilla JavaScript, I read somewhere that it's recommended to learn JavaScript properly before moving on to frameworks.


    No argument there, but I'd move to jQuery as soon as you get a handle on basic JavaScript.

    Since this is just for exercise I guess I don't have to support every browser.


    This is important information as suggestions for an exercise can be vastly different from suggestions for professional production code.

  • I have written the XML-file myself. Why is JSON better here?

  • JSON is much easier to digest. Especially of you want to avoid frameworks. XML is not native to JS.

    When you get a block of JSON text from the server, a simple call to JSON.parse() gets you a JavaScript object. When using a framework for Ajax (jQuery, Axios, et al) the parsing is automatic in the case of JSON.

    XML is comparatively much more difficult to work with.
     
    Anders Gren
    Greenhorn
    Posts: 10
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator

    Bear Bibeault wrote:

    Anders Gren wrote:for (var i = 0 ; i < linknumber.length; i++) {


    I don't understand the use of the for loop? Why?

    And yes, it's going to fail because you are trying to iterate over an element and that makes no sense.



    I used a for loop since the script doesn't know how many links there are on the page.
    So what should I do instead? This is the part I need help with right now.
     
    Bear Bibeault
    Sheriff
    Posts: 67746
    173
    Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    Once you have the list of links on the page (that is correct, right?) when a link is clicked, you should be able to get the needed id value directly from the link. No iteration needed, and knowing how many links there are at this point is irrelevant.

    I'd suggest posting your current code (UseCodeTags) and also show the result of generating the HTML list of links.

     
    reply
      Bookmark Topic Watch Topic
    • New Topic