Why is my materialize modal opening again each time I click on it?

up vote
0
down vote

favorite

When I click on any image on the page the modal should open, which it does, but then each time I click on the modal or anywhere in the page the modal opens again and again for each click. How can I stop it from doing this ?

I'm using ThymeLeaf and the materialize library for building the modal.

HTML:

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="UTF-8"/>

    <meta name="viewport" content="width=device-width, initial-scale=1"/>



    <link rel="icon" th:href="@{/favicon_heladeria.png}" />



    <link rel="stylesheet" th:href="@{/vendor/materialize/css/materialize.css}" />

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

    <link rel="stylesheet" th:href="@{/app.css}" />



    <title>Copito de Nieve | Home</title>

</head>

<body>

    <div class="navbar-fixed">

        <nav>

            <div class="container">

                <a th:href="@{/}" class="brand-logo">Heladeria</a>

                <a href="#" data-activates="mobile-nav" class="button-collapse right"><i class="material-icons">menu</i></a>

                <ul class="right hide-on-med-and-down">

                    <li class="active"><a th:href="@{/}">Home</a></li>

                    <li><a th:href="@{/gustos}">Gustos</a></li>

                    <li><a th:href="@{/ingresar}">Ingresar</a></li>

                </ul>

                <ul id="mobile-nav" class="side-nav">

                    <li class="active"><a th:href="@{/}">Home</a></li>

                    <li><a th:href="@{/gustos}">Gustos</a></li>

                    <li><a th:href="@{/ingresar}">Ingresar</a></li>

                </ul>

            </div>

        </nav>

    </div>

    <div class="search-bar container">

        <div class="row">

            <div class="col s12">

                <form action="#" method="get">

                    <div class="input-field">

                        <input name="q" type="search" placeholder="Buscar todos los helados..." required="required" autocomplete="off"/>

                        <i class="material-icons">search</i>

                    </div>

                </form>

            </div>

        </div>

    </div>

    <div>

        <h2 class="mid-title">Productos</h2>

    </div>

    <div class="helados container">

        <div class="row">

            <div th:each="producto : ${productos}" class="col s12 l4">

                <img id="prod-img" th:src="@{'/images/' + ${producto.nombre} +'.png'}" />

                <p class="product-name" th:text="${producto.nombre}"></p>

                <p class="desc" th:text="${producto.descripcion}"></p>

            </div>

        </div>

    </div>

    <!-- Modales -->

    <div id="prodModal" class="modal">

        <div>

            <div class="modal-content">

                <h4 class="modal-title">Haga su pedido</h4>

                <p class="flavour" th:each="gusto : ${gustos}" th:text="${gusto.nombre}"></p>

            </div>

        </div>

    </div>



<script th:src="@{/vendor/jquery/jquery-1.11.3.js}"></script>

<script th:src="@{/vendor/materialize/js/materialize.js}"></script>

<script th:src="@{/home.js}"></script>

</body>

</html>

JS:

 document.querySelectorAll('#prod-img').each(addEventListener('click', () => {

  var element = document.querySelector('#prodModal');

    var modal = M.Modal.init(element, {});

    modal.open();

}));

enter image description here

asked Nov 21 at 16:32

Nacho Zve De La Torre

1689

add a comment |

up vote
0
down vote

favorite

I'm using ThymeLeaf and the materialize library for building the modal.

HTML:

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="UTF-8"/>

    <meta name="viewport" content="width=device-width, initial-scale=1"/>



    <link rel="icon" th:href="@{/favicon_heladeria.png}" />



    <link rel="stylesheet" th:href="@{/vendor/materialize/css/materialize.css}" />

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

    <link rel="stylesheet" th:href="@{/app.css}" />



    <title>Copito de Nieve | Home</title>

</head>

<body>

    <div class="navbar-fixed">

        <nav>

            <div class="container">

                <a th:href="@{/}" class="brand-logo">Heladeria</a>

                <a href="#" data-activates="mobile-nav" class="button-collapse right"><i class="material-icons">menu</i></a>

                <ul class="right hide-on-med-and-down">

                    <li class="active"><a th:href="@{/}">Home</a></li>

                    <li><a th:href="@{/gustos}">Gustos</a></li>

                    <li><a th:href="@{/ingresar}">Ingresar</a></li>

                </ul>

                <ul id="mobile-nav" class="side-nav">

                    <li class="active"><a th:href="@{/}">Home</a></li>

                    <li><a th:href="@{/gustos}">Gustos</a></li>

                    <li><a th:href="@{/ingresar}">Ingresar</a></li>

                </ul>

            </div>

        </nav>

    </div>

    <div class="search-bar container">

        <div class="row">

            <div class="col s12">

                <form action="#" method="get">

                    <div class="input-field">

                        <input name="q" type="search" placeholder="Buscar todos los helados..." required="required" autocomplete="off"/>

                        <i class="material-icons">search</i>

                    </div>

                </form>

            </div>

        </div>

    </div>

    <div>

        <h2 class="mid-title">Productos</h2>

    </div>

    <div class="helados container">

        <div class="row">

            <div th:each="producto : ${productos}" class="col s12 l4">

                <img id="prod-img" th:src="@{'/images/' + ${producto.nombre} +'.png'}" />

                <p class="product-name" th:text="${producto.nombre}"></p>

                <p class="desc" th:text="${producto.descripcion}"></p>

            </div>

        </div>

    </div>

    <!-- Modales -->

    <div id="prodModal" class="modal">

        <div>

            <div class="modal-content">

                <h4 class="modal-title">Haga su pedido</h4>

                <p class="flavour" th:each="gusto : ${gustos}" th:text="${gusto.nombre}"></p>

            </div>

        </div>

    </div>



<script th:src="@{/vendor/jquery/jquery-1.11.3.js}"></script>

<script th:src="@{/vendor/materialize/js/materialize.js}"></script>

<script th:src="@{/home.js}"></script>

</body>

</html>

JS:

 document.querySelectorAll('#prod-img').each(addEventListener('click', () => {

  var element = document.querySelector('#prodModal');

    var modal = M.Modal.init(element, {});

    modal.open();

}));

enter image description here

asked Nov 21 at 16:32

Nacho Zve De La Torre

1689

add a comment |

up vote
0
down vote

favorite

I'm using ThymeLeaf and the materialize library for building the modal.

HTML:

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="UTF-8"/>

    <meta name="viewport" content="width=device-width, initial-scale=1"/>



    <link rel="icon" th:href="@{/favicon_heladeria.png}" />



    <link rel="stylesheet" th:href="@{/vendor/materialize/css/materialize.css}" />

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

    <link rel="stylesheet" th:href="@{/app.css}" />



    <title>Copito de Nieve | Home</title>

</head>

<body>

    <div class="navbar-fixed">

        <nav>

            <div class="container">

                <a th:href="@{/}" class="brand-logo">Heladeria</a>

                <a href="#" data-activates="mobile-nav" class="button-collapse right"><i class="material-icons">menu</i></a>

                <ul class="right hide-on-med-and-down">

                    <li class="active"><a th:href="@{/}">Home</a></li>

                    <li><a th:href="@{/gustos}">Gustos</a></li>

                    <li><a th:href="@{/ingresar}">Ingresar</a></li>

                </ul>

                <ul id="mobile-nav" class="side-nav">

                    <li class="active"><a th:href="@{/}">Home</a></li>

                    <li><a th:href="@{/gustos}">Gustos</a></li>

                    <li><a th:href="@{/ingresar}">Ingresar</a></li>

                </ul>

            </div>

        </nav>

    </div>

    <div class="search-bar container">

        <div class="row">

            <div class="col s12">

                <form action="#" method="get">

                    <div class="input-field">

                        <input name="q" type="search" placeholder="Buscar todos los helados..." required="required" autocomplete="off"/>

                        <i class="material-icons">search</i>

                    </div>

                </form>

            </div>

        </div>

    </div>

    <div>

        <h2 class="mid-title">Productos</h2>

    </div>

    <div class="helados container">

        <div class="row">

            <div th:each="producto : ${productos}" class="col s12 l4">

                <img id="prod-img" th:src="@{'/images/' + ${producto.nombre} +'.png'}" />

                <p class="product-name" th:text="${producto.nombre}"></p>

                <p class="desc" th:text="${producto.descripcion}"></p>

            </div>

        </div>

    </div>

    <!-- Modales -->

    <div id="prodModal" class="modal">

        <div>

            <div class="modal-content">

                <h4 class="modal-title">Haga su pedido</h4>

                <p class="flavour" th:each="gusto : ${gustos}" th:text="${gusto.nombre}"></p>

            </div>

        </div>

    </div>



<script th:src="@{/vendor/jquery/jquery-1.11.3.js}"></script>

<script th:src="@{/vendor/materialize/js/materialize.js}"></script>

<script th:src="@{/home.js}"></script>

</body>

</html>

JS:

 document.querySelectorAll('#prod-img').each(addEventListener('click', () => {

  var element = document.querySelector('#prodModal');

    var modal = M.Modal.init(element, {});

    modal.open();

}));

enter image description here

asked Nov 21 at 16:32

Nacho Zve De La Torre

1689

I'm using ThymeLeaf and the materialize library for building the modal.

HTML:

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="UTF-8"/>

    <meta name="viewport" content="width=device-width, initial-scale=1"/>



    <link rel="icon" th:href="@{/favicon_heladeria.png}" />



    <link rel="stylesheet" th:href="@{/vendor/materialize/css/materialize.css}" />

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

    <link rel="stylesheet" th:href="@{/app.css}" />



    <title>Copito de Nieve | Home</title>

</head>

<body>

    <div class="navbar-fixed">

        <nav>

            <div class="container">

                <a th:href="@{/}" class="brand-logo">Heladeria</a>

                <a href="#" data-activates="mobile-nav" class="button-collapse right"><i class="material-icons">menu</i></a>

                <ul class="right hide-on-med-and-down">

                    <li class="active"><a th:href="@{/}">Home</a></li>

                    <li><a th:href="@{/gustos}">Gustos</a></li>

                    <li><a th:href="@{/ingresar}">Ingresar</a></li>

                </ul>

                <ul id="mobile-nav" class="side-nav">

                    <li class="active"><a th:href="@{/}">Home</a></li>

                    <li><a th:href="@{/gustos}">Gustos</a></li>

                    <li><a th:href="@{/ingresar}">Ingresar</a></li>

                </ul>

            </div>

        </nav>

    </div>

    <div class="search-bar container">

        <div class="row">

            <div class="col s12">

                <form action="#" method="get">

                    <div class="input-field">

                        <input name="q" type="search" placeholder="Buscar todos los helados..." required="required" autocomplete="off"/>

                        <i class="material-icons">search</i>

                    </div>

                </form>

            </div>

        </div>

    </div>

    <div>

        <h2 class="mid-title">Productos</h2>

    </div>

    <div class="helados container">

        <div class="row">

            <div th:each="producto : ${productos}" class="col s12 l4">

                <img id="prod-img" th:src="@{'/images/' + ${producto.nombre} +'.png'}" />

                <p class="product-name" th:text="${producto.nombre}"></p>

                <p class="desc" th:text="${producto.descripcion}"></p>

            </div>

        </div>

    </div>

    <!-- Modales -->

    <div id="prodModal" class="modal">

        <div>

            <div class="modal-content">

                <h4 class="modal-title">Haga su pedido</h4>

                <p class="flavour" th:each="gusto : ${gustos}" th:text="${gusto.nombre}"></p>

            </div>

        </div>

    </div>



<script th:src="@{/vendor/jquery/jquery-1.11.3.js}"></script>

<script th:src="@{/vendor/materialize/js/materialize.js}"></script>

<script th:src="@{/home.js}"></script>

</body>

</html>

JS:

 document.querySelectorAll('#prod-img').each(addEventListener('click', () => {

  var element = document.querySelector('#prodModal');

    var modal = M.Modal.init(element, {});

    modal.open();

}));

enter image description here

javascript modal-dialog thymeleaf materialize

asked Nov 21 at 16:32

Nacho Zve De La Torre

1689

asked Nov 21 at 16:32

Nacho Zve De La Torre

1689

asked Nov 21 at 16:32

Nacho Zve De La Torre

1689

asked Nov 21 at 16:32

Nacho Zve De La Torre

1689

asked Nov 21 at 16:32

Nacho Zve De La Torre

1689

add a comment |

1 Answer
1

active

oldest

votes

up vote
0
down vote

I think is because you are using querySelectorAll with id and assign the same id to all img elements.
You can try assign an unique id like this or use a class

   <div th:each="producto : ${productos}" class="col s12 l4">

            <img id="prod-img-${producto.nombre}" th:src="@{'/images/' + ${producto.nombre} +'.png'}" />

            <p class="product-name" th:text="${producto.nombre}"></p>

            <p class="desc" th:text="${producto.descripcion}"></p>

   </div>

And in the js use the querySelectorAll with '^=' to check if the value starts with 'prod-img'

document.querySelectorAll('[id^="prod-img"]').each(addEventListener('click', 

() => {

 var element = document.querySelector('#prodModal');

 var modal = M.Modal.init(element, {});

 modal.open();

}));

edited Nov 21 at 19:13

answered Nov 21 at 18:55

Car Oj

263

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53416605%2fwhy-is-my-materialize-modal-opening-again-each-time-i-click-on-it%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

I think is because you are using querySelectorAll with id and assign the same id to all img elements.
You can try assign an unique id like this or use a class

   <div th:each="producto : ${productos}" class="col s12 l4">

            <img id="prod-img-${producto.nombre}" th:src="@{'/images/' + ${producto.nombre} +'.png'}" />

            <p class="product-name" th:text="${producto.nombre}"></p>

            <p class="desc" th:text="${producto.descripcion}"></p>

   </div>

And in the js use the querySelectorAll with '^=' to check if the value starts with 'prod-img'

document.querySelectorAll('[id^="prod-img"]').each(addEventListener('click', 

() => {

 var element = document.querySelector('#prodModal');

 var modal = M.Modal.init(element, {});

 modal.open();

}));

edited Nov 21 at 19:13

answered Nov 21 at 18:55

Car Oj

263

add a comment |

up vote
0
down vote

I think is because you are using querySelectorAll with id and assign the same id to all img elements.
You can try assign an unique id like this or use a class

   <div th:each="producto : ${productos}" class="col s12 l4">

            <img id="prod-img-${producto.nombre}" th:src="@{'/images/' + ${producto.nombre} +'.png'}" />

            <p class="product-name" th:text="${producto.nombre}"></p>

            <p class="desc" th:text="${producto.descripcion}"></p>

   </div>

And in the js use the querySelectorAll with '^=' to check if the value starts with 'prod-img'

document.querySelectorAll('[id^="prod-img"]').each(addEventListener('click', 

() => {

 var element = document.querySelector('#prodModal');

 var modal = M.Modal.init(element, {});

 modal.open();

}));

edited Nov 21 at 19:13

answered Nov 21 at 18:55

Car Oj

263

add a comment |

up vote
0
down vote

I think is because you are using querySelectorAll with id and assign the same id to all img elements.
You can try assign an unique id like this or use a class

   <div th:each="producto : ${productos}" class="col s12 l4">

            <img id="prod-img-${producto.nombre}" th:src="@{'/images/' + ${producto.nombre} +'.png'}" />

            <p class="product-name" th:text="${producto.nombre}"></p>

            <p class="desc" th:text="${producto.descripcion}"></p>

   </div>

And in the js use the querySelectorAll with '^=' to check if the value starts with 'prod-img'

document.querySelectorAll('[id^="prod-img"]').each(addEventListener('click', 

() => {

 var element = document.querySelector('#prodModal');

 var modal = M.Modal.init(element, {});

 modal.open();

}));

edited Nov 21 at 19:13

answered Nov 21 at 18:55

Car Oj

263

I think is because you are using querySelectorAll with id and assign the same id to all img elements.
You can try assign an unique id like this or use a class

   <div th:each="producto : ${productos}" class="col s12 l4">

            <img id="prod-img-${producto.nombre}" th:src="@{'/images/' + ${producto.nombre} +'.png'}" />

            <p class="product-name" th:text="${producto.nombre}"></p>

            <p class="desc" th:text="${producto.descripcion}"></p>

   </div>

And in the js use the querySelectorAll with '^=' to check if the value starts with 'prod-img'

document.querySelectorAll('[id^="prod-img"]').each(addEventListener('click', 

() => {

 var element = document.querySelector('#prodModal');

 var modal = M.Modal.init(element, {});

 modal.open();

}));

edited Nov 21 at 19:13

answered Nov 21 at 18:55

Car Oj

263

edited Nov 21 at 19:13

answered Nov 21 at 18:55

Car Oj

263

answered Nov 21 at 18:55

Car Oj

263

answered Nov 21 at 18:55

Car Oj

263

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Btukfyl