Manage bootstrap modal with javascript

Question

Good evening guys,

I program a symfony website by using webpack encore bundle to manage js & css.

I used to work with jquery which is quite simple, but would like to evolve to pure javascript.

I try to translate the following code in javascript :

<html>
<button class="exercice-class" data-id="x">exercice button</button>
</html>

when an user click on the "exercice button", i want to get the value of data-id to generate an URL

<script>
$(function() {
    $('.exercice-class').on("click", function(e) {
        e.preventDefault();
        let id = $(this).data("id");
        let url = "../exercice-class/" + id + "/";
        $.get(url, function(data){
            $(".container-fluid").append(data);
            $('#showModal').modal('show');
        });
    });
});
</script>

Then i get the content of the URL and add it to the modal window

What I want to do first is to open a modal window by using a variable as a parameter.

Second question, I would like to get data from a modal (using a form) and send them to a database. I read things about asynchronous request by it's not really clear for me, i'm looking for something close to ajax request.

Thank you in advance.!

Juuk

score 0 · Answer 1 · answered Sep 20 '21 at 22:18

0

here is a small example, you can test it

var classbutton = document.querySelector('.exercice-class');

classbutton.addEventListener('click', (e) => {
  e.preventDefault();
  let id = element.getAttribute('id');
  let url = "../exercice-class/" + id + "/";
  let requete = new XMLHttpRequest(); 
  requete.open('GET', url);
  requete.send();
  requete.onload = function() {
    if (requete.readyState === XMLHttpRequest.DONE) {
      if (requete.status === 200) {
        let reponse = requete.response; 
        document.querySelector('.container-fluid').append(reponse);
        document.querySelector('#showModal').showModal();
      }
      else {
        
      }
    }
  }

});

answered Sep 20 '21 at 22:18

Yug Normand Ngangue

181
1
11

Thank you for your advices – juuk Sep 28 '21 at 18:30
u are welcome ;) – Yug Normand Ngangue Sep 28 '21 at 18:55
Did you see my other response in the feed? – juuk Sep 29 '21 at 19:27

score 0 · Answer 2 · answered Sep 28 '21 at 03:43

Thanks for your response! i tried your code and work on it... This is what i did :

        let httpRequest = new XMLHttpRequest();
        httpRequest.open("GET", url);
        httpRequest.send();

        httpRequest.onload = function (){
            if (httpRequest.readyState === XMLHttpRequest.DONE){
                if (httpRequest.status === 200){
                    let httpResponse = httpRequest.response;
                    console.log(httpResponse);
                }
            }
        }

It seems that fetch is a newer way to work with data since vanilla. I did the same thing we tried to do before and i succeeded to get data.

document.addEventListener('click', function (event) {

    if (!event.target.closest('.exercice-class')){
        return null;
    }
    else {
        event.preventDefault();
        let exercice = event.target.closest(".exercice-class");
        let dataAttribute = exercice.getAttribute('data-id');
        let url = "../exercice-class/" + dataAttribute + "/";
        fetch(url)
            .then(function (response) {
                return response.text();
            })
            .then(function (data) {
                console.log(data)
            })
            .catch(function (error) {
                console.log(error);
            });
    }
});

In reality i get the same result with the two solutions.. the problem is that i get "data" i can't exploit...

Imagine i use the second example : if i try to do :

.then(function (data) {
    let exerciceData = data.getElementById("#adiv");
    document.querySelector('container-fluid').append(exerciceData);
    document.querySelector('showModal').show();

"exerciceData" can't be used. Modal just don't open.

Thank for your help.

Manage bootstrap modal with javascript

2 Answers2