Dynamically add Materialize modal with javascript

materialize modal not working
react-materialize modal
modal trigger
materialize open modal
css modal
modal-fixed footer
materialize alert dialog
material design modal

In the template page, I have an image and an input field. The image is a puzzle. If a user submits the wrong answer I want to show the user a modal with a message. So the modal will load only if the user submits the wrong answer.

image

html

<!-- show modal -->
        <div id="error" style="margin-top: 120px">
            <div id='modal1' class='modal modal-fixed-footer'></div>
        </div>

        <img class="materialboxed" width="480" height="200" src="{{ img_url }}" style="margin-top: 50px">
        <form class="" id="puzzle_form" name="puzzle_form" method="post" style="margin-left: 20px; margin-top: 10px">
            {% csrf_token %}
            <div class="row">
                <div class="input-field">
                    <i class="material-icons prefix">sentiment_very_satisfied</i>
                    <input id="answer" name="answer" type="text" class="validate" required>
                    <label for="answer">Your answer here...</label>
                </div>
            </div>
            <div class="row">
                <button id="submit_button" class="btn waves-effect waves-light" type="submit" style="margin-left: 90px">
                    Submit
                    <i class="material-icons right">send</i>
                </button>
            </div>
        </form>

js

let _html = "<!-- Modal Structure -->";
_html += "<div class='modal-content'>";
_html += "<h4>Modal Header</h4>";
_html += "<p>A bunch of text</p>";
_html += "</div>";
_html += "<div class='modal-footer'>";
_html += "<a href='#!' class='modal-close waves-effect waves-green btn-flat'>Agree</a>";
_html += "</div>";

$('#error').ready(function () {
    $('.modal').append(_html);
    $('.modal').modal();
});

But when the user submits the wrong answer, the modal is not shown in the HTML page. (It is loaded though. I can see it from the Inspect element.)

Have you tried adding class="modal-trigger" in your submit button?

JavaScript:How do i put dynamic content into a modal , In order for the modal to work you have to add the Modal ID to the link of the trigger. To add a close button, just add the class .modal-close to your button. Modal  Create and an empty div with.modal class and whatever the id you want to assign. Then in jQuery, create a variable and save a div with class modal-content. In that div specify your message or content, you want to add dynamically. After that, append that variable to modal using $ (.modal).append () and open your modal using.modal ()

Could you please provide the codepen/JSfiddle link? If you saying the html has been appended to the page and you can see it by doing inspect element. So based on this there are two possibilities:

  1. If you are using a plugin for this modal, it may not have been triggered.
  2. There is some issue with the CSS.

Please share a link or CSS code so that I can check where it is gone wrong.Cause if it has been appended there is no issue from HTML end. Only with triggering the modal or with CSS. Hope this helps!

Modals, Add New Option to Dropdown How to dynamically modify <code><select>​</code> in materialize css framework JavaScript + No-Library (pure JS) Tidy. Creating materialize modal is easy and require a few line of codes of HTML and jQuery. In order to modal component work, you need to include the reference to materialize.min.js along with jQuery on the web page. The following section shows how to create modal using materialize framework with live demo and code snippets. The example of simple modal

What I did is, in my error callback in Ajax, I wrote this piece of code.

$('#error').ready(function () {
    $('.modal').append(_html);

    let _modal = document.querySelector('.modal');
    let instance = M.Modal.init(_modal);
    instance.open();
});

According to the doc, I am creating an instance of the modal by initializing it and then calling the open method on this instance to open the modal.

How to dynamically modify <select> in materialize css framework , In order for the modal to work you have to add the Modal ID to the link of the trigger. Basic Modal. <!-- Modal Trigger --> <a  Learn how to create a Modal Box with CSS and JavaScript. Style the modal header, body and footer, and add animation (slide in the modal): Example /* Modal Header */

Materialize CSS Modals, Working with Modals in Materialize CSS, I want to create modal in materialize dynamically. this is my javascript code: In that div specify your message or content, you want to add dynamically. After that  Use a modal for dialog boxes, confirmation messages, or other content that can be called up. In order for the modal to work you have to add the Modal ID to the link of the trigger. To add a close button, just add the class .modal-close to your button. Modal

Materialize modal dynamically, This library adds support for the Materialize CSS framework in Angular 2. It is needed to add the dynamic behavior of Materialize CSS that is using JavaScript  The Modal is a popup window or dialog box that displayed over the current web page. It is very useful to display HTML content/elements on a single page. If your web application uses Bootstrap, the modal popup can be easily implemented on the web pages.

Materialize Tutorial #15 - Modals, This library adds support for the Materialize CSS framework in Angular 2. It is needed to add the dynamic behavior of Materialize CSS that is using JavaScript  Bootstrap Create Modal Dynamically in JavaScript / jQuery Bootstrap Create Modal Dynamically in JavaScript. The bootstrap-show-modal.js lets you to create an awesome, responsive, alert / confirm dialog boxes dynamically.

Comments
  • @sphoenix can you add an update about your submit_button function?
  • Can you explain a bit what you meant? I don't have a function name submit_button
  • the form is being submitted by ajax to a rest api and if the response is a failure then the above js code will be executed to load the modal
  • Yeah... there's no trigger... but the things is I don't want a button to trigger the modal. I only want the modal to be opened when the user submits a wrong answer.
  • the ans from the user is sent to the server with ajax and if the server response is failed then I want to load the modal.
  • So in you error callback of AJAX you can trigger the modal. For example if you using bootstrap you might write this to show it: $("#modal").modal('show');
  • I'm using materialize css... here's the link materializecss.com/modals.html#!
  • That's what I'm doing!! The js code above was from the error callback of Ajax! It doesn't work, man :(