Populate Fields via Drop-down selection

ok – im on a mac so im guessing it doesn’t do a good job of keeping the tick specifics … although the first code did work fine.

Im i right in thinking it is only that line you mentioned than needs the specific back tick – and is that at the beginning and end, or does it need a ‘curly 6’ at the front and ‘9’ at the back (single quotes) ?

Im was using Visual Studio Code to write this btw – and changing the ticks has changed the colouration of the code. Seems dreamweaver displays correctly.

Are there any other specific single qor double quotes that need to be curly?

Who knew it could get this in depth.

I forgot but there should also be backtick around

venueCtrl.innerHTML = '<option value="0">${dropDownLabel}</option>'

Please replace the single quotes with backtick

• This reply was modified 9 months, 2 weeks ago by mandresi.

ok – added to both lines …

  const buildLink = (value, link = value) => {
    return ‘<a href="${link}">${value}</a>’;
  };

&

venueCtrl.innerHTML = ‘<option value="0">${dropDownLabel}</option>’;

sadly not fixed it

In fact, it is not a backtick that you just entered. Here is a link about how to do it on a mac

https://discuss.codecademy.com/t/how-do-i-get-a-backtick-on-mac/536139/5

I hope I don’t put you off helping others … I’ve located the backtick (new one on me) and input correctly but astill nothing changes. just the same as the screengrab from earlier…. code

any other ideas gratefully accepted

============
Javascript
============

function processJSONVenue({venueFilename, venueCtrlId, venueInfoId, dropDownLabel}) {

  /**
   * This function creates an HTML link from a value.
   * It can be used to generate website, email or tel link
   */
  const buildLink = (value, link = value) => {
    return <a href="${link}">${value}</a>;
  };

  /**
   * The following object comprises properties, each housing
   * a function that produces HTML code responsible for formatting
   * the branch item associated with the property's name.
   */
  const fieldFormat = {
    "name": v => 'Name: ' + v,
    "email": v => buildLink(v, 'mailto:' + v),
    "website": v => buildLink(v),
  };

  let fieldList = [];

  function loadVenue() {
    fetch(venueFilename)
      .then(response => {
        if (!response.ok) {
          throw new Error('Unable to load the venue file');
        }
        return response.json();
      })
      .then(data => {
        fieldList = data[0] ? Object.keys(data[0]) : [];
        initVenue(data);
      })
      .catch(error => {
        alert(error);
      });
  }

  function initVenue(venues) {
    const venueCtrl = document.getElementById(venueCtrlId);
    const venueInfoEl = document.getElementById(venueInfoId);

    /* Populating the drop-down field */
    venueCtrl.innerHTML = <option value="0">${dropDownLabel}</option>;
    venues.forEach((venue, i) => {
      const name = venue.name;
      const venueItemObj = document.createElement('option');
      venueItemObj.setAttribute('value', i + 1);
      venueItemObj.appendChild(new Text(name));
      venueCtrl.appendChild(venueItemObj);
    });

    /* Set event listener on drop-down when selection changes */
    venueCtrl.addEventListener('change', () => {
      const selectedId = venueCtrl.value - 1;
      venueInfoEl.textContent = '';

      if (selectedId < 0) {
        return;
      }

      const venue = venues[selectedId];
      fieldList.forEach(fieldName => {
        if (venue[fieldName]) {
          const fieldValue = venue[fieldName];

          /* formats the field if a formatting function exists */
          const fieldContent = fieldFormat[fieldName] ?
            fieldFormat[fieldName](fieldValue) :
            fieldValue;

          const el = document.createElement('div');
          el.className = "venue__" + fieldName;
          el.innerHTML = fieldContent;
          venueInfoEl.appendChild(el);
        }
      });
    });
  }

  document.addEventListener('DOMContentLoaded', () => {
    loadVenue();
  });
}

/* ****************************************** */
/*  update the following parameters as needed */
/* ****************************************** */
processJSONVenue(
  {
    venueFilename: '/wp-content/uploads/national-venues.json', // JSON file name
    venueCtrlId: 'nationalVenue-ctrl',   // ID of the drop-down
    venueInfoId: 'nationalVenue-info',  // ID of the DIV placeholder to display the branch info
    dropDownLabel: 'Select a National Branch'
  }
);

processJSONVenue(
  {
    venueFilename: '/wp-content/uploads/regional-venues.json', // JSON file name
    venueCtrlId: 'regionalVenue-ctrl',   // ID of the drop-down
    venueInfoId: 'regionalVenue-info',  // ID of the DIV placeholder to display the branch info
    dropDownLabel: 'Select a Regional Branch'
  }
);

processJSONVenue(
    {
      venueFilename: '/wp-content/uploads/recreational-venues.json', // JSON file name
      venueCtrlId: 'recreationalVenue-ctrl',   // ID of the drop-down
      venueInfoId: 'recreationalVenue-info',  // ID of the DIV placeholder to display the branch info
      dropDownLabel: 'Select a Recreational Branch'
    }
  );

• This reply was modified 9 months, 2 weeks ago by nomisrenrut.
• This reply was modified 9 months, 2 weeks ago by nomisrenrut.

ffs. keeps dropped those backticks. but they are there

https://snipboard.io/ICE4Y8.jpg

Can you look if there is an error on the developer console when you load your page ? You press F12 and click on the Console Tab. This console shows all Javascript errors.

JQMIGRATE: Migrate is installed, version 3.4.1
menussi/:110 Uncaught SyntaxError: Unexpected token ‘===’ (at menussi/:110:117)
content.js:73 Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
at g (content.js:73:33710)

I think this error has nothing to do with the dropdown.

I have already tested the code and it works on my machine. Perhaps it has something to do with how it is implemented with DIVI. I don’t really know what to say as I can’t see what is really happening on your side.

Maybe It may help if you put your website online.

you got a private email?

ill send you the link

• This reply was modified 9 months, 2 weeks ago by nomisrenrut.
• This reply was modified 9 months, 2 weeks ago by bcworkz. Reason: email removed

ok.

• This reply was modified 9 months, 2 weeks ago by bcworkz. Reason: email removed

@imandresi & @nomisrenrut — FYI contacting other members off-forum is against our guidelines here. This had become necessary because people with bad intent have tried to victimize other members who might not be very tech savvy. I’m confident this does not describe either of you. I’m not concerned at all, but please refrain from doing so in the future.

I did remove your email addresses from your replies for privacy reasons. I assume you both have already made email contact so the addresses here no longer serve any purpose.

The contents of the “page I need help with” field in the original new topic form is only visible to logged in members and cannot be crawled by search bots. That’s the proper place to share links. I realize there’s no way for you to go back and add it after the fact. Keep in mind for any future topics.

@bcworkz – I understand your point. Thank you.

@bcworkz – me too, bit of novice around these forums. Apols