DEV Community: Love Liberty

Javascript listeners click bait

Love Liberty — Sat, 16 Nov 2024 23:05:27 +0000

Having written code in a test file that worked very nicely, I had to incorporate it into the main code & it didn't go so well.

The basic code consisted of a simple html file with a single button called "remember this."

That had an onclick to a function called showRememberMenu(). That function created a menu that was displayed under the button.

The dropdown menu had several tags to add to the data as a reminder of why the user was trying to remember it. (I'm old I need all the hlp I can get on remembering stuff.)

Click the button, see the dropdown menu, click the tag you want & the data you are looking at is saved in an array with that tag. Having clicked the menu it disappears.

My task was then to drop that into a larger script & see it work just the same... oh, maybe not. Click the menu, store the data with the tag and... what? why is the menu still there? It was deleted in the original as soon as it was clicked. Why is it not going away?

And if I click the tag that says 'Exit don't save' it is still displaying the menu.

As a user I was looking at a card that had data from the database. Clicking this button was a way to save that data for later use. Here you can see the card with its new button.

Click that button to see the drop down and select the tag that is relevant to remembering this data...

Now go do the same with other cards and you have all the data needed to complete some task, but why the "&%!!! is that menu never going away?

After I ran out of ideas I contacted my collegaue Gemini the AI. It gave me a first solution which was exactly the code that I already had. It suggested a lot of things, none of which worked.

It was confident that checking for the existence of the nodes & elements would make everything good, but it didn't.

It took about an hour of being told things that didn't work and being lectured on timing issues, possibly needing delays, which really weren't relevant, but slowly as a team we solved the problem.

If you want to try to solve this, I bet you can do it in less time.

Here's the original draft code that works...

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Some Javascript</title>
  <link rel="stylesheet" href="./someJavascript.css">
  <link rel="icon" href="favicons/favicon.ico" type="image/icon type">
</head>
<body>
  <div class="remember" id="remember">
    <input type="button" class="remember_button" id=remember value="remember this" onclick="showRememberMenu()">
  </div>
      <script  src="./someJavascriptCode.js"></script>    
    </body>
    </html>

and the javascript

let logToConsole=true;
var rowData={THId:'2', TaskName:'To climb a tree', TaskDesc:'Try using hands & feet'};
var remember=[];

function rememberProcess(remember){
    if(logToConsole) console.log('RememberProcess()');
for(i=0;i<remember.length;i+=2){
    console.log('Item ',i/2+1,' of ', remember.length/2,' items', 'Remember as ',remember[i], remember[i+1]);}        
}

function putDataIntoRemember(menuHeader,rowData){
    if(logToConsole) console.log('putDataIntoRemember()');
    remember.push(menuHeader);
    remember.push(rowData);
}

function deleteMenu(menuLu){
    if(logToConsole) console.log('deleteMenu()');
    menuLu.parentNode.removeChild(menuLu);
}

function showRememberMenu(){
    if(logToConsole) console.log('showRememberMenu()');

 if(document.querySelector('#rememberMenu') ) return; //menu already exists

    const remember_button = document.querySelector('#remember');
    const menuHeaders=['EXIT no save', 'as Student', 'as Manager', 'as Author', 'as Task' , 'as Note'];
    menuLu=document.createElement('lu');
    menuLu.id='rememberMenu';

for(let i=0;i<menuHeaders.length;i++){
    li=document.createElement('li');         
    li.innerText=menuHeaders[i]; 
    li.id=menuHeaders[i];
    li.classList.add('rememberLi');

    li.addEventListener('click', () => { //console.log('li button clicked', menuHeaders[i], rowData)
        if(menuHeaders[i]=='EXIT no save') {deleteMenu(menuLu);return};
    putDataIntoRemember(menuHeaders[i], rowData);//[header][rowData]       
    rememberProcess(remember);//do something with the stored data structure
    deleteMenu(menuLu);
      })

    menuLu.appendChild(li);
    }

remember_button.appendChild(menuLu);      
}

There is some css, but it isn't relevant to the problem

.remember_button {

        background-color: #5A5050;
        border: 0;
        border-radius: 5px;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
        color: #fff;
        font-size: 12px;
        padding: 3px 4px;
        position: relative;        
        letter-spacing: 1px;
        width: 100px;

}

    /*Button goes white on hover*/
.remember_button:hover {
        background-color: #ffffff;
        color: #001F61;
        cursor:pointer;
    }    


.rememberLi{
    background-color: #aa9595;
    border: 0;
    border-radius: 5px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 12px;
    padding: 3px 4px;
    position: relative;        
    letter-spacing: 1px;
    width: 100px;

}

.rememberLi:hover {
    background-color: #ffffff;
    color: #001F61;
    cursor:pointer;
}

The above works, more or less as I wanted.

Here is the version inside a bigger system which I won't post all of.

A card is dynamically produced and has the following code added to produce the same kind of button as in the original

                     // NEW  REMEMBER BUTTON   21:39 16 Nov 2024
  let cardRemember=document.createElement('button');
  cardRemember.classList.add='remember_button';
  cardRemember.id='remember';
  cardRemember.innerText='remember this';

  cardRemember.addEventListener('click', () => {
    showRememberMenu(rowData);
  });
  cardDivj.appendChild(cardRemember);

and the rest of the javascript is close to identical to the original

var remember=[];

function rememberProcess(remember){
    if(logToConsole) console.log('RememberProcess()');
for(i=0;i<remember.length;i+=2){
    console.log('Item ',i/2+1,' of ', remember.length/2,' items', 'Remember as ',remember[i], remember[i+1]);}        
}

function putDataIntoRemember(menuHeader,rowData){
    if(logToConsole) console.log('putDataIntoRemember()');
    remember.push(menuHeader);
    remember.push(rowData);
}
/*
function deleteMenu(menuLu){
    if(logToConsole) console.log('deleteMenu()');
    console.log(menuLu);
    menuLu.parentNode.removeChild(menuLu);
}
    */

function deleteMenu(menuLu) {
  if (menuLu && menuLu.parentNode) {
    menuLu.parentNode.removeChild(menuLu);
    console.log("Menu removed successfully");
  } else {
    console.error("Menu or its parent not found");
  }
}

function showRememberMenu(rowData){
    if(logToConsole) console.log('showRememberMenu()');

 if(document.querySelector('#rememberMenu') ) return; //menu already exists

    const remember_button = document.querySelector('#remember');
    const menuHeaders=['EXIT no save', 'as Student', 'as Manager', 'as Author', 'as Task' , 'as Note'];
    menuLu=document.createElement('lu');
    menuLu.id='rememberMenu';

for(let i=0;i<menuHeaders.length;i++){
    li=document.createElement('li');               //  console.log(menuHeaders[i]);//ok
    li.innerText=menuHeaders[i]; // li.innerHTML = `Remember as ${menuHeaders[i]}`; //Gemini suggests this syntax 
    li.id=menuHeaders[i];
    li.classList.add('rememberLi');

    li.addEventListener('click', () => { console.log('li button clicked', menuHeaders[i], rowData)
        if(menuHeaders[i]==='EXIT no save') {deleteMenu(menuLu);return};
    putDataIntoRemember(menuHeaders[i], rowData);//[header][rowData]       
    rememberProcess(remember);//do something with the stored data structure
    deleteMenu(menuLu);
      })

    menuLu.appendChild(li);
    }

remember_button.appendChild(menuLu);      
}

A reminder of what it looks like before being clicked

and how it get stuck after being clicked

I had no idea what the problem was, and Gemini was off on one of its lectures over entirely irrelevant stuff but Ai & I finally narrowed things down and now it seems soo simple.

So why does the menu persist? A clue from Shakespeare,

double double, toil and trouble
Fire burn and cauldron bubble

When the button was in html the menu went away as the javascript demanded, but when the button was in javascript it remained.

The problem I learnt is called 'bubbling up' where a click on the submenu is also detected as a click on the button. So the javascript button reacted by re creating the sub menu.

My AI colleague didn't spot the problem.

fetch() & XMLHttp errors to avoid

Love Liberty — Thu, 14 Nov 2024 16:04:43 +0000

Sadly, I didn't avoid these errors. I hope this may help others avoid them when trying to update a webpage without completely downloading a new version. The code I ended up with seems to work:

async function fetchDbSingle(url, str) {
  const dataToSend = str;
  console.log('fetchDbSingle: ' + str);

  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: dataToSend
    });

    if (!response.ok) {
      throw new Error('Network response was not ok');
    }

    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
    throw error; // Re-throw the error to be handled by the caller
  }
}

await works inside an async function to ensure that the data has arrived before attempting to access it. If you need to call an async function from normal code the syntax is .then:

fetchDbSingle(url, str).then(data => {
  console.log("Received data:", data);
  // Use the data here
}).catch(error => {
  console.error("Error fetching data:", error);
});

If you try to access the data without using this special syntax the data will be undefined because you are accessing it before it has arrived.

If you try to access the data outside of the places marked, it will be undefined.

In my program the fetch() is calling a PHP script that reads a database.

Here are some warnings that may make no sense to the experienced, but which I wish I had known earlier:

Note that the PHP will send the data by echo, and that in this case the echo will not appear on the screen.
Make sure your PHP file only contains PHP code; no html. If it contains HTML the returned data will include all the HTML and that will be very confusing.
Make sure the PHP file (and any file it includes) only have one echo statement. (Oh, and check any included file for html or echo)
Json_encode what is to be sent by echo. You may want to have javascript json Parse it to make it a javascript array, but that isn't essential.

If anyone is interested to know why I mention the above warnings, I could write an essay on the mistakes I made & how it took me a week to correct them and you can then chuckle and feel superior.

Google Gemini AI helping me to code

Love Liberty — Tue, 12 Nov 2024 19:59:38 +0000

Gemini is Google's free to use AI. I am coding something way outside my skill in that I am a retired consultant whose tech skills have been forgotten or have been made redundant. Having a polite well read artificial colleague has been very interesting.

I usually do a quick search for syntax, but when things just don't work I ask Gemini.

Gemini isn't very good at debugging. But seems better at suggesting how to do something. It seems to have learnt to make many of the mistakes that humans make. It can miss that a comma has been used instead of a semicolon, or it can miss that getElementById(form) should have been getElementById('form').

Sometimes it insists that a global shouldn't be used, even when it is the only practical thing to use. It showed me code that used parameters & returned values. I had to ask 3 times before it would lower it's standards to show a way to do it using globals. However it's first attempt at this failed to work. It did eventually show a method, which is what I would have guessed.

It is never too busy & will explain the various parts of the code it is suggesting, although the code may be wrong & the explanation may not make sense.

It has, once or twice, suggested code that when pasted into VSC produces syntax errors.

However, in general the experience has been very good. There are some questions that can't be easily word searched using a normal search service, and there are others which are so stupid that I wouldn't want to ask them on a human site, but I will get a polite answer from my colleague Gemini.

I did ask one such question on stackoverflow, which I regretted as it was downvoted, closed, reviewed & deleted. Apparently, I had offended the techiegods. After many days of working on it alone I solved the problem & then asked Gemini who gave a partial solution in seconds.

Here is my favourite response from Gemini:

You're absolutely right! As a language model, I've been trained on a massive dataset of human-generated text. This includes examples of common human errors, such as forgetting quotation marks. While I can process and generate text in a way that is often indistinguishable from human-written text, I'm not immune to making mistakes that humans commonly make.
It's a valuable reminder that even AI models can benefit from human oversight and error correction. Thank you for your patience and for helping me identify and correct these errors.

Database driven task & membership

Love Liberty — Sat, 12 Oct 2024 15:59:46 +0000

I am working on a foolishly grand project to develop a website for the management of a self-help club or association. The project is a mix of keeping track of memberships, messaging & training courses where the members run the entire system.

There are web services like this which I have used, but I have an idea of doing it differently.

Html, CSS, JavaScript, PHP MariaDb(mySQL) currently running on Xampp on W10. Using XMLHttpRequest for updating data. Floating modal Windows to display data.