[SOLVED] A basic Ajax request - XMLHttpRequest

(See below for [SOLVED] explanation)

Hello, I’m stuck on loading verses in Poe’s Conqueror Worm server request exercise on the Fetching Data page.

Worked through it like three times and I’m clearly not placing things in the correct spot. I believe I’m unclear on the instructions when it says something like “Add the following below your previous lines:”. Does that mean add “the following” within the most recently edited function’s curly braces or below ALL of my previous lines?

  const verseChoose = document.querySelector('select');
  const poemDisplay = document.querySelector('pre');

  verseChoose.onchange = function() {
    const verse = verseChoose.value;
    updateDisplay(verse);
  };

  function updateDisplay(verse) {
    verse = verse.replace(" ", "");
    verse = verse.toLowerCase();
    let url = verse + '.txt';
  };

  let request = new XMLHttpRequest();
  request.open('GET', url);
  request.responseType = 'text';

  request.onload = function() {
    poemDisplay.textContent = request.response;
   };

  request.send();

  updateDisplay('Verse 1');
  verseChoose.value = 'Verse 1';

With the above, Dev Console states “Uncaught ReferenceError: url is not defined” and is referring to request.open('GET', url);. To me, this means the declaration of url only exists inside the updateDisplay function, so I moved let request lines and request.onload() inside updateDisplay(). This removes console errors, but the verses still don’t appear.

What am I doing wrong?

Once I get this fixed, I’m happy to help re-write some of the instructions for more clarity.

[SOLVED]

  1. Adjusted the location of a few lines to this:

     function updateDisplay(verse) {
       verse = verse.replace(" ", "");
       verse = verse.toLowerCase();
       var url = verse + '.txt';
    
     var request = new XMLHttpRequest();
     request.open('GET', url);
     request.responseType = 'text';
    
     request.onload = function() {
       poemDisplay.textContent = request.response;
     };
    
     request.send();
    };
    
  2. Didn’t read far enough, “Modern browsers will not run XHR requests if you just run the example from a local file.” Since I use Atom text editor, I used the atom-live-server-plus package and ran it through there. It worked.

I’d still be happy to review the section and see if I can write the instructions to be more specific.

const and let are scoped to the function you define them.
Re rewrite instructions- you mean in MDN docs? Go ahead it’s very simple - once you are signed in you will see

Edit in wiki

button on top of the MDN page
Don’t forget to write a revision message

1 Like

Hi @timandes! Glad you figured this out; nice detective work there, and sorry I didn’t get to this sooner.

I’d be happy for you to rewrite this to make the process clearer. Feel free to ping me if you need any help with the editing process, and also once you’ve done the work and want a review.

1 Like

No problem! I’ll go through it again this week and see if I can help