Ensure that the Materialize CSS modal form remains open even after submission

Is there a way to reload a form inside a materialize modal with empty fields without closing the modal after submitting? The issue is that currently, when the submit button is clicked, the modal closes and redirects.

        <div class="modal" id="docModal{{applications.id}}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="height: 500px;">
            <div class="modal-dialog modal-full-height modal-right modal-notify modal-info" style="margin: 0;" role="document">
          ........

            {{ form_start(form) }}

                <div class="form_group">
                   <label for="{{form.nom.vars.id}}">Nom</label>
                         <input type="text" class="form_control" id="{{form.nom.vars.id}}" name="{{form.nom.vars.full_name}}" value="{{form.nom.vars.value}}" required>
                 {{form_errors(form.nom)}}
                {% do form.nom.setRendered %}
              </div>
                  <!-------BTN AJOUT---------->
                 <input  type="submit" class="btn btn-success" onclick="M.toast({html: 'Lien ajouté !', classes: 'rounded'});" value="Ajouter" style="transform: translate(32em);"
                                    id="carto_cartographiebundle_liendocapp_ajouter" name="carto_cartographiebundle_liendocapp[ajouter]">
                  {% do form.ajouter.setRendered %}
           {{form_end(form)}} 
      </div>
 </div>

Controller

      public function indexAction(Request $request)
       {

    $em = $this->getDoctrine()->getManager();
    $applications = $em->getRepository('CartoBundle:Application')->findAll();
    $lienDocApp = new LienDocApp();
    $form=$this->createForm(LienDocAppType::class, $lienDocApp);
    $form->handleRequest($request);
    if ($form->isSubmitted()&& $form->isValid()){
        $em = $this->getDoctrine()->getManager();
        $em->persist($lienDocApp);
        $em->flush();
        return $this->redirectToRoute('carto_accueil');
    }

    return $this->render('CartoBundle:Accueil:index.html.twig', array(
        'applications'=>$applications,
         'lienDocApp' => $lienDocApp,
        'form' => $form->createView(),
    ));
}

Answer №1

There are a couple of ways you can achieve this task.

  1. One option is to utilize ajax for form submission in order to update the modal's content dynamically - this approach is relatively straightforward as explained by Fabian above.

  2. Alternatively, you can have the form redirect back to the same page with a parameter that triggers the modal to load. Although this method may not be seamless since the modal opens after the page loads, it might suit certain scenarios better. For more information on this technique, refer to the following question: How I can open a materialize modal when a window is ready?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

jQuery slider - display unlimited images

Currently, I am encountering issues with a Flickity carousel of images. When an image/slide is clicked, a modal window opens to display a zoomed-in version of the image. The problem arises when there are more or fewer than 3 images in the slider — my cod ...

Is there a way to update an image dynamically within CSS using the :before pseudo-element?

I am attempting to dynamically change the background image, but I am having trouble accessing the wrapper before "wrapper:before{}" from jQuery $('.wrapper:before) .wrapper:before { content: ""; position: fixed; left: 0; right: 0; z-index: -1; displa ...

Positioning a designated div directly above a designated spot on the canvas

I'm grappling with a challenge in my game where the canvas handles most of the animation, but the timer for the game resides outside the canvas in a separate div. I've been struggling to center the timer around the same focal point as the squares ...

The site is visually appealing in Firefox, but has a few issues on Chrome

I've encountered a common issue where my website displays perfectly in Firefox but looks terrible in Dreamweaver and Chrome. To fix it, I made live CSS edits in Firefox then copied them to Dreamweaver resulting in a mess. Here's how it should lo ...

Unable to populate dropdown list using jquery, ajax, and json

I am so close to figuring it out, but I am struggling with iterating through JSON objects to populate a dropdown list. Here is the JavaScript code I have written: The JSON data I am working with looks like this: <pre>{"name":"County1","name":"County ...

How to transfer a user's comment from HTML to a C# model through a list within the MVC framework

I have been attempting various solutions, but none seem to be working. My goal is to create post and comment partial classes for a main page where end users can add comments. Currently, I am using MVC 5 and the page loads posts and previous comments. Howe ...

Ineffective Implementation of While Loop for Div Visibility

Here's a simple code that generates divs using a while loop. However, it doesn't seem to be working as expected. It's actually just basic HTML, nothing too complex. But for some reason, it's not displaying any of the five divs. <? ...

Implementing the style tag within a view

In my exploration of various Razor views, I've noticed a common practice where developers include a <style> tag directly in the CSHTML file. While this method may seem to work without issue, it actually places the <style> tag within the & ...

Ways to implement div on hover in my table's td cells

Here is the HTML table code I have: <table border='1px'> <tr> <td id='td'>first</td> <td>last</td> <tr> <td id='td'>newFirst</td> <td>newSecond</td> </t ...

Passing a list of objects containing lists in MVC3

Is it possible for me to send an array of objects, each containing arrays, from JavaScript to a MVC action result method? Essentially, I have a KeyValuePair with keys as arrays of strings and I need to return a list of these KeyValuePairs. In my code, I ha ...

Generating a PDF file from an HTML and CSS page can be done without relying on APIs or libraries, by leveraging the

Is there a way to directly convert an HTML page generated using PHP and CSS into a PDF format without the use of libraries? I have come across multiple libraries that can accomplish this task, but I would prefer not to rely on any external libraries and i ...

Is there a way for me to automatically go back to the home page when I press the back button on the browser?

My ecommerce website has a shopping cart page where customers can purchase products and make payments. After the payment is completed, they are directed to a thank you page. The flow of the website is as follows: Home page => Products => Shopping ca ...

What is the best way to execute JavaScript on the main MVC page when an AJAX request in a partial view has finished?

My Asp.net MVC partial view is designed for searching and makes an Ajax call to retrieve results. After the results are displayed, the user can select a search result by clicking on a link in one of the rows. Upon selecting a search result, an Ajax post re ...

Is there a way to utilize the reset() function within an input form?

Is there a way to automatically reset the textbox when submitting a value? Below is my code: <!DOCTYPE html> <html> <body> <ul id="myList"> </ul> <input type="text" id="myText" value="&q ...

Steps for stopping the sass --watch function on a specific folder

Successfully got my SASS up and running with the help of fantastic documentation available everywhere. The guide I followed was http://sass-lang.com/guide. sass --watch myfolder/css Running a specific command worked like a charm, enabling every change in ...

Using loops in Sass mixins causes errors

I have been developing a SASS code to generate CSS output that has the following format. background: -webkit-linear-gradient(top, 50%); background: -moz-linear-gradient(top, 50%); background: linear-gradient(top, 50%); This is the SASS mixin code I cr ...

The modal window does not display a scroll bar

I'm currently facing an issue where the scroll bar is not appearing on my page when more elements are added. In addition, I have a modal that covers the entire page when clicking on an item. However, changing the CSS position: fixed property affects ...

Display endless data within a set window size

I am looking to create a fixed-size window for displaying text from the component <Message/>. If the text is longer, I want it to be scrollable within the fixed window size. See screenshot below: Screenshot export default function AllMessages(){ ...

Every fourth list item, beginning with a designated number

I'm attempting to add a border to specific list items in my HTML. I want the border to start from the 9th child and then continue every 4th child after that. For clarification, I'd like the 9th, 13th, 17th, 21st, 25th... list items to have white ...

Adjust the appearance of elements depending on whether the user has activated dark mode or

What is the most efficient way to implement both dark and light themes in my Vue app? One option is to create a 'dark.scss' file and use the '!important' property to override styles defined in components. Another option is to utilize pr ...