Express application acting funny why

kravmaguy · August 19, 2019, 2:08am

building an express application for someone. The way I had it set up before was to have different places in the html for the diffrent modals depending on the action the user does, but then he said he doesn’t want different places in the html for the different modals for a confirmation of a delete action and clicking on an edit button (the edit form should pop up), rather he wants the form to be dynamically generated into the same html. Or thats what ive understood from him.

So ive made some progress in this but its acting wierd. sometimes it works but sometimes hitting the delete button causes the edit modal to be created instead of just the response from the delete action (which I expect to happen) why is wrong with the code:
basically clicking on delete button will still delete it but it sometimes shows the edit modal.

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <link rel="stylesheet" href="styles.css">
</head>
<meta charset="UTF-8">
<title>Client Data</title>
</head>

<body>
  <div class="container">

    <div class="row h-100 justify-content-center align-items-center">



              <!--update form modal here -->
              <!-- <div class="editmodal" style="display: none">
                  <div class="editoverlay"></div>
                  <div class="edit_modal_content"> -->
                    <!-- Dynamic Section -->
                    <!-- <h2 id="editmodaltitle"></h2>
                    <form id="editcommentForm" method="put" action="/update" >
                        <div class="form-group">
                          <label>Name</label><input type="text" class='form-control' name="client-name" placeholder="Enter name" required>
                        </div>
                        <div class="form-group">
                          <label>Comments</label><textarea id="editInputs" class="form-control" name="comment" placeholder="Enter Comments "rows="3"></textarea>
                        </div>
                        
                        <button id="edit-btn" type="submit" class="btn btn-primary btn-lg btn-block">Submit Data</button>
                      </form> -->
                    <!-- End of Dynamic Section -->
                    <!-- <button title="Close" class="editclose_modal">
                      <i class="fas fa-times"></i>
                    </button>
                  </div>
                </div> -->
      <div class="modal" style="display: none">
        <div class="overlay"></div>
        <div class="modal_content">
          <!-- Dynamic Section -->
          <h2 id="modaltitle"></h2>
          <div id="placeholder"></div>
          <!--iframe src="" id="iframe" width="480" height="273" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/">via GIPHY</a></p>-->
          <!-- End of Dynamic Section -->
          <button title="Close" class="close_modal">
            <i class="fas fa-times"></i>
          </button>
        </div>
      </div>
			

      <div class="col-md-5 col-sm-9 col-xs-9">
        <h1>Node Js Crud Custom Modals</h1>

        <form id="form">

          <div class="form-group">
            <label>Name</label><input type="text" class='form-control' name="client-name" placeholder="Enter name" required>
          </div>

          <div class="form-group">
            <label>Email</label><input type="email" class='form-control' name="client-email" aria-describedby="emailHelp" placeholder="Enter email" required>
            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
          </div>

          <div class="form-group">
            <label>Comments</label><textarea class="form-control" name="comment" placeholder="Enter Comments "rows="3"></textarea>
          </div>
          
          <button id="submit-btn" type="submit" class="btn btn-primary btn-lg btn-block">Submit Data</button>
        </form>

        <ul id=comments class='list-group'></ul>
      </div>

    </div>
  </div>
  </div>
 <script src="index.js"></script>

</body>

</html>

and here is the javascript:

(function(window) {

  const $body = document.querySelector('body');
  const $areaToast = document.createElement('div');
  $areaToast.classList.add('area-toast');
  $body.appendChild($areaToast);

  function Options() {
    const hasIcon = (content, icon) => {
      const $icon = typeof icon !== 'undefined' ? document.createElement('i') : false;
      $icon ? $icon.className = icon : false;
      $icon ? content.appendChild($icon) : false;
    }

    const hasTimeout = (content, time) => {
      setTimeout(() => {
        content.classList.remove('snap-now-content--state-open');
        content.addEventListener('webkitTransitionEnd', () => content.remove());
      }, time);
    }

    this.hasIcon = hasIcon;
    this.hasTimeout = hasTimeout;
  }

  function getSnap(config, callback) {
    const options = new Options();
    const $divContent = document.createElement('div');
    const classDefault = 'snap-now-content';

    config.icon ? options.hasIcon($divContent, config.icon) : false;
    config.timeout ? options.hasTimeout($divContent, config.timeout) : false;

    $divContent.classList.add(classDefault);
    $divContent.classList.add(classDefault + '--' + config.type);
    $divContent.innerHTML += config.text;

    $areaToast.appendChild($divContent);
    callback($divContent);
  }

  function Snap(options) {

    const open = () => {
      getSnap(options, $divContent => this.content = $divContent);
      this.content.classList.add('snap-now-content--state-open');
    };

    const close = () => {
      this.content.classList.remove('snap-now-content--state-open');
      this.content.addEventListener('webkitTransitionEnd', () => this.content.remove());
    };

    this.open = open;
    this.close = close;
  }

  window.Snap = Snap;
  window.Options = Options;
}(window));


const tSuccess = new Snap({
  type: 'success',
  text: 'Gabriel, seu cadastro foi atualizado com sucesso!',
  icon: 'fa fa-check'
});

const tError = new Snap({
  type: 'error',
  text: 'Cadastro não foi realizado!',
  icon: 'fa fa-ban'
});

 
const appendEditModal = () => {
  let title = document.getElementById('modaltitle');
  let x = document.createTextNode("Edit :");
  title.appendChild(x);
  let editForm = document.getElementById('placeholder');
  const $form = document.createElement('form');
  $form.setAttribute('method',"put");
  $form.setAttribute('id',"editcommentForm");
  $form.setAttribute('action',"/update");
  let form_group = document.createElement('div');
  form_group.setAttribute('class',"form-group");
  let nameLabel= document.createElement('label')
  nameLabel.innerText = 'name'
  form_group.append(nameLabel)
  
  $input = document.createElement('input')
  $input.setAttribute('type','text')
  $input.setAttribute('class','form-control')
  $input.setAttribute('name','client-name')
  $input.setAttribute('placeholder','enter name')
  $input.setAttribute('required','')
  form_group.append($input)
  
  let form_group2 = document.createElement('div');
  form_group2.setAttribute('class',"form-group");
  let commentLabel= document.createElement('label')
  commentLabel.innerText = 'comments'
  form_group.append(commentLabel)
  $input2 = document.createElement('textarea')
  $input2.setAttribute('id','editInputs')
  $input2.setAttribute('class','form-control')
  $input2.setAttribute('name','comment')
  $input2.setAttribute('placeholder','enter comments')
  $input2.setAttribute('rows','3')
    form_group2.append($input2)

  let submit = document.createElement('button')
  submit.setAttribute('id','edit-btn')
  submit.setAttribute('type','submit')
  submit.setAttribute('class','btn btn-primary btn-lg btn-block')
  submit.innerText = 'submit'




  $form.appendChild(form_group)
  $form.appendChild(form_group2)
  $form.appendChild(submit)
  editForm.appendChild($form);

}

//update comment modal functionality
const displayUpdateModal= id =>{
   // call appendEditModal here
  appendEditModal();
  let newId=id;
  var modal = document.querySelector('.modal');




  function attachModalListeners() {
    console.log('attached')
    document.querySelector('.close_modal').addEventListener('click', toggleModal);
    document.querySelector('.close_modal').addEventListener('click', console.log('it was .. clicked'));

    document.querySelector('.overlay').addEventListener('click', toggleModal);
    document.getElementById('edit-btn').addEventListener('click', EditComment);

  }
  
  function detachModalListeners() {
    document.querySelector('.close_modal').removeEventListener('click', toggleModal);
    document.querySelector('.overlay').removeEventListener('click', toggleModal);
    document.getElementById('edit-btn').removeEventListener('click', EditComment);

  }

  function toggleModal() {
    var currentState = modal.style.display;
    // If modal is visible, hide it. Else, display it.
    if (currentState === 'none') {
      modal.style.display = 'block';
      attachModalListeners(modal);
    } else {
      modal.style.display = 'none';
      detachModalListeners(modal);  
    }
  }
  function EditComment(e){
    const formData = new FormData(document.getElementById("editcommentForm"));
    e.preventDefault();
    console.log('inside EditCOmment the id is :'+newId)
        fetch('/update/' + newId, {
        method: 'Put', 
        body : new URLSearchParams(formData)
  })
       .then(response => response.json())

      .then(function (response) {
        if (response.status === 'success') {
         console.log(response)
         toggleModal()
         updateDomComment(newId, response.data.comment)
         tSuccess.open();
         setTimeout(tSuccess.close, 3000);  
        }
       

      })
      .catch(err => {
        console.log('fetch update didn\'t succeed\n' + err);
        toggleModal()

        tError.open();
        setTimeout(tError.close, 3000);  
      });
  }
   toggleModal();
}
//end Update comment modal functionality


//here is the delete modal
const modal = (() => {
  const modal = document.querySelector(".modal");
  //const iframe = document.createElement('iframe');
  const modaltitle = document.getElementById("modaltitle");
  //iframe.setAttribute("src", "");
    //iframe.style.width = "480px";
    //iframe.style.height = "273px";
    //modaltitle.insertAdjacentHTML("afterend", iframe);
   // modaltitle.appendChild(iframe);  

   //let element = document.getElementById("placeholder");
   //let template = document.getElementById("iframeTemplate");
    //let html = template.innerHTML;
    
    //element.innerHTML = html;
    
  const toggleModal = function() {
    const currentState = modal.style.display;
    modal.style.display = currentState === 'none' ? 'block' : 'none';
  };

  const attachListeners = () => {
    modal.querySelector('.close_modal').addEventListener('click', toggleModal);
    modal.querySelector('.overlay').addEventListener('click', toggleModal);
  };

  const displayModal = (status) => {
   
    const setModalStatus = () => {
      // const successVideo = 'https://giphy.com/embed/l52CGyJ4LZPa0';
      // const failureVideo = 'https://giphy.com/embed/EXHHMS9caoxAA';
      // iframe.src = status === 'success' ? successVideo : failureVideo;
      modaltitle.innerHTML = status;
    };

    toggleModal();
    setModalStatus();
  }

  attachListeners();

  return {
    displayModal  
  }
})();
//end delete modal functionality

const updateDomComment = (id, response) => {
  const elem = document.getElementById(`${id}`);
  console.log('updated :')

  let updated= elem.childNodes[3].innerHTML;
  console.log(updated)
  console.log('response :')
  console.log(response)
  elem.childNodes[3].innerHTML=response;
}

const removeComment = (id) => {
  const elem = document.getElementById(`${id}`);
  elem.parentNode.removeChild(elem);
};

const clearForm = () => {
  document.getElementById("form").reset();
};

const displayComments = ({ comments }) => {
  const commentsElem = document.getElementById("comments");
  commentsElem.innerHTML += comments.reduce((html, comment) => {
    const commentDiv = `
      <div>${comment.email}</div>
      <div>${comment.comment}</div>
    `;
    return html += `
      <li id=${comment._id} class="list-group-item">${commentDiv}
        <button type="button" class="btn btn-danger delete">delete</button>
        <button type="button" class="btn btn-info update">update</button>
      </li>
    `;
  }, '');
};

const getComments = () => {
  fetch('/comments')
    .then(response => response.json())
    .then(displayComments)
    .catch(err => console.log('fetch get didn\'t succeed\n' + err));
};

const postComment = e => {
  e.preventDefault();
  const formData = new FormData(document.getElementById("form"));
  fetch('/add-comment', {
    method: 'post',
    body: new URLSearchParams(formData)
  })
    .then(response => response.json())
    .then(comments => {
      displayComments(comments);
      clearForm();
    })
    .catch(err => console.log('fetch post didn\'t succeed\n' + err));
};

const deleteComment = e => {
  let target = event.target;
  if (target.className.indexOf('delete') != -1) {
    const id = target.parentNode.id;
    fetch('/delete/' + id, {
      method: 'Delete'
    })
      .then(response => response.json())
      .then(function (response) {
        if (response.status === 'success') {
          removeComment(id);
        }
        console.log('this is the issue when it pops up')
        modal.displayModal(response.status);
      })
      .catch(err => {
        console.log('fetch delete didn\'t succeed\n' + err);
        modal.displayModal('failure');
      });
  }
};

//in here first show the modal with the form and then update it
const updateComment = e => {
 
  let target = event.target;
  console.log(target)
  console.log(target.className.indexOf('update'));
  if (target.className.indexOf('update') != -1) {
    console.log('inside update')
    const id = target.parentNode.id;
    displayUpdateModal(id);
    
  }
};

getComments();
document.getElementById("submit-btn").addEventListener('click', postComment);
document.getElementById("comments").addEventListener('click', deleteComment);
document.getElementById("comments").addEventListener('click', updateComment);

kravmaguy · August 19, 2019, 2:12am

on looking at it again I see that the edit form only appears again when you click delete if youve already performed an edit on that element, I believe its being caused by the form not being removed since it was last generated. and since youve told the program to generate the form and never said anything about removing it, it will leave the form there where it was from previously.
ive treid to add the following snippet to the top of
const modal = (() => { }

 const myNode = document.getElementById("placeholder");
  while (myNode.firstChild) {
    myNode.removeChild(myNode.firstChild);
  }

but its still behaving the same as before. what is the problem? Why didnt it remove the children ?

yakhousam · August 19, 2019, 9:41pm

Hi kravmaguy
if you move your snippet inside the deleteComment function like this. it should work.

const deleteComment = e => {
  let target = event.target;
  if (target.classList.contains("delete")) {
    const id = target.parentNode.id;
    fetch("/delete/" + id)
      .then(response => {
        if(response.status === 200){
          return response.json();
        }else{
          throw new Error(response.status)
        }
      })
      .then(function(response) {
        removeComment(id);
      
        const myNode = document.getElementById("placeholder");
        while (myNode.firstChild) {
          myNode.removeChild(myNode.firstChild);
        }
        modal.displayModal("delete succefuly");
      })
      .catch(err => {
        console.log("fetch delete didn't succeed\n" + err);
        modal.displayModal("failure");
      });
  }
};

also if you want to to test if an elemnt has a classe (‘like i did’), you can use element.classList.contains(class)

kravmaguy · August 19, 2019, 10:09pm

I copied and pasted the code you wrote but it didnt work I was getting a 404 error and the same problem I was describing before happened.

currently i have

const deleteComment = e => {
  let target = event.target;
  if (target.className.indexOf('delete') != -1) {
    const id = target.parentNode.id;
    fetch('/delete/' + id, {
      method: 'Delete'
    })
      .then(response => response.json())
      .then(function (response) {
        let node = document.getElementById("placeholder");
 
        while (node.hasChildNodes()) {
          node.removeChild(node.lastChild);
      }
        if (response.status === 'success') {
          removeComment(id);
        }
        console.log('this is the issue when it pops up')
        modal.displayModal(response.status);
      })
      .catch(err => {
        let node= document.getElementById("placeholder");
        while (node.hasChildNodes()) {
          node.removeChild(node.lastChild);
      }
        console.log('fetch delete didn\'t succeed\n' + err);
        modal.displayModal('failure');
      });
  }
};

its working but the problem is now that the X button does not work to close the modal when its the edit modal. and also it keeps appending additional edit modals