nomisrenrut

@mandresi – all works perfectly now – thank you.

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

you got a private email?

ill send you the link

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

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)

https://snipboard.io/ICE4Y8.jpg

ffs. keeps dropped those backticks. but they are there

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, 1 week ago by nomisrenrut.
• This reply was modified 9 months, 1 week ago by nomisrenrut.

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

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.

https://snipboard.io/WV84bt.jpg

book = box !! sry

Sorry to ask again but it doesn’t seem to work this time around ….

Ive got a book with the drop down icon but nothing is loading, Ive check the link address and they are all correct (and I did it the exact same way as i did before which worked).

This is the slighly changed Java

============

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'

}

);

and this is the screen grab of the what I am seeing.

It just doesn’t seem to want to find the ‘info’

• This reply was modified 9 months, 1 week ago by nomisrenrut.

You’re so very kind – many thanks for the help. I love to learn new things, just figure my pea brain has limited space these days and if I don’t use the code often I tend to forget. but this stuff is an awesome reference,

Sorry re the ‘introduction’. i thought about adding this but then changed my mind. But I’m sure I can take that out. or leave it if it isn’t doing any harm.

Now to check over your code and see where i wetn wrong!

Thanks again

@imandresi – code works a treat thank you … however, now i need to change it to cope with how i want to display the info. I have used tabs within divi theme and places the code within each tab – national, regional and recreational … and my attempt works to a point, ive made 3 js files reflecting each section, and the same for the html and json – the issue is that even though I have the different lists showing under the different tabs – when i select a branch in tab 2 , it displays the region, but the info appears under the drop down under tab 1. i will paste my attempt at changing the code, would you have any ideas where I have gone wrong please? Im sure im close, just missing something that denotes the different tab!?

(() => {

/* ****************************************** */

/* change the following constants as needed */

/* ****************************************** */

const nationalVenueFilename = "/wp-content/uploads/nationalVenues.json"; // JSON file name

const nationalVenueCtrlId = 'nationalVenue-ctrl'; // ID of the drop-down

const nationalVenueInfoId = 'nationalVenue-info'; // ID of the DIV placholder to display the branch info

const buildLinkElement = (value, link = value) => {

const el = document.createElement('a');

el.setAttribute('href', link);

el.appendChild(new Text(value));

return el;

};

const fieldProcessor = {

"name": v => new Text(v),

"contact_name": v => new Text(v),

"position": v => new Text(v),

"number": v => new Text(v),

"email": v => buildLinkElement(v, 'mailto:' + v),

"website": v => buildLinkElement(v)

};

function loadVenue() {

fetch(nationalVenueFilename)

.then(response => {

if (!response.ok) {

throw new Error('Unable to load the venue file');

}

return response.json();

})

.then(data => {

initVenue(data);

})

.catch(error => {

alert(error);

});

}

function initVenue(venues) {

const nationalVenueCtrl = document.getElementById(nationalVenueCtrlId);

const nationalVenueInfoEl = document.getElementById(nationalVenueInfoId);

/* Populating the drop-down field */

nationalVenueCtrl.innerHTML = '<option value="0">Select a National Branch </option>';

venues.forEach((venue, i) => {

const name = venue.name;

const nationalVenueItemObj = document.createElement('option');

nationalVenueItemObj.setAttribute('value', i + 1);

nationalVenueItemObj.appendChild(new Text(name));

nationalVenueCtrl.appendChild(nationalVenueItemObj);

});

/* Set event listener on drop-down when selection changes */

nationalVenueCtrl.addEventListener('change', () => {

const selectedId = nationalVenueCtrl.value - 1;

if (selectedId < 0) {

nationalVenueInfoEl.classList.add('hidden');

return;

}

nationalVenueInfoEl.classList.remove('hidden');

const venue = venues[selectedId];

const fieldList = [

'name',

'contact_name',

'position',

'number',

'email',

'website'

];

fieldList.forEach(fieldName => {

const el = document.getElementById("venue__" + fieldName);

if (el) {

el.textContent = '';

if (venue[fieldName]) {

const fieldValue = venue[fieldName];

el.appendChild(fieldProcessor[fieldName](fieldValue));

}

}

});

});

}

document.addEventListener('DOMContentLoaded', () => {

loadVenue();

});

})();

js^^^

<style>

.hidden {

display: none;

}

.space {

margin-bottom: 25px;

}

</style>

<form>

<select id="nationalVenue-ctrl" class="space"></select>

<div id="nationalVenue-info" class="hidden">

<div id="nationalVenue__name">Name: </div>

<div id="nationalVenue__contact_name"></div>

<div id="nationalVenue__position"></div>

<div id="nationalVenue__number"></div>

<div id="nationalVenue__email"></div>

<div id="nationalVenue__website"></div>

<div id="nationalVenue__introduction"></div>

</div>

</form>

html^^

Also – tried to style from within divi and it didnt work – nor does the styling i added to the html (is just gets dropped when pasted in) – what is the best practise for trying to make the details look as the rest of the page?

Maybe it cannot be changed – anyway – ill keep trying meantime.

Many thanks in advance

Si

Mandresi …. blown away with your generosity! Many thanks for this – I shall give it a whirl and update you on what should be a favourable outcome.

Kudos to you ??