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

What causes an Undefined array key error when using AJAX POST?

I am having trouble passing a text string to a PHP Variable using AJAX. Every time the POST request is sent, I see this error message: Warning: Undefined array key "mydata" Although the alert displays the correct value, the PHP page shows the ...

Transfer a JSON object to a Java Class without relying on a servlet

I have a form in HTML where I collect user input and store it as an object in JavaScript. Here is how I am creating the object: var dataObject = { Name: getName(), Age : getAge() } Now, I want to send this object using Ajax to a b ...

What is the best way to restrict the size of a table that is filled with data from a database?

Currently using a combination of React, Node, Express, and Postgres to populate a table with data retrieved from Postgres. The issue arises when the table becomes overly long, prompting the need to display only 5 rows at once while adding a scroll bar for ...

Display items in a not predetermined order

Despite its simplicity, I am struggling to get this working. My aim is to create a quiz program using JavaScript. Here is the basic structure: <ul> <li>option1</li> <li>option2</li> <li>option3</li> </ul> &l ...

Utilizing Jquery for deleting text content from a div element

I have a situation where I need to eliminate the text "(2012)" from a particular div using jQuery. Here is the code snippet that I am currently using: var el = $("#myDiv"); //replace(/word to remove/ig, ""); el.html(el.html().replace(/(2012)/ig, "")); ...

I noticed an excess of white space on the right side of my Angular website

Check out my website here. Everything seems to be functioning correctly, however, there is an issue with scrolling on mobile. It should only scroll up and down, not left and right! I have noticed a strange white space on the right side of my site when view ...

Add up the variables created by the Instagram API

$.ajax({ url: "https://api.instagram.com/v1/users/xxxxxxxxx", dataType: 'jsonp', type: 'GET', data: { access_token: accessToken }, success: function (data) { var followers_one = data.data.counts.followed_by; ...

I would like to create a layout featuring 3 columns spread across 2 rows, with each column showcasing only images

I've been experimenting with creating a column layout that spans three columns across the top and two rows down. So far, I've managed to create the first row but I'm unsure of how to split it into the second row. .container { display: ...

What sets apart using JQuery to run AJAX from using plain XMLHttpRequest for AJAX requests?

Can you explain the advantages and disadvantages of using JQuery versus XMLHttpRequest for running AJAX code? While I understand that JQuery is essentially a JavaScript library, there must be some key differences to consider. Please elaborate on this top ...

What is the best way to make a scrollable `div` that is the same height as my `iframe` with Material-UI?

I am developing a responsive Video Player with an accompanying playlist designed for Desktop and larger screens. The playlist has the potential to contain a large number of items, possibly in the hundreds. To view my progress so far, please visit https:// ...

Update the contents of a webpage using AJAX

Can anyone help me with loading likes into a div using AJAX every second? I want the page's URL to be likes.php?p=0 on page load, likes.php?p=1 after 1 second, likes.php?p=2 after 2 seconds, and so on. This is my code snippet: var loadLikes = func ...

After closing, the position of the qtip2 is being altered

I've successfully integrated the qtip2 with fullcalendar jQuery plugin, which are both amazing tools. However, I'm encountering an issue with the positioning of the qtip. Here's the code snippet I'm using: $(window).load(function() { ...

Unexpected Placement of CSS Grid Items

I am currently facing an issue with aligning items in a nested grid using grid-column/grid-row assignment. After setting the template with grid-template-rows:/grid-template-columns, I expected the $50 and Give Now items to appear on row 3, with one in colu ...

Can you explain the significance of 'height: 0;' in CSS coding?

I've recently come across some outdated CSS code that sets the height to height: 0; in multiple places. I'm curious about what this 0 signifies and what unit it is measured in. If anyone could provide some insight, I would greatly appreciate it. ...

Is there a way to use Spring MVC annotation-based controller for portlets to render a JSON view/response via AJAX?

After spending a significant amount of time searching Google and stackoverflow, I have not been able to find a solution to my problem. As a PHP developer originally, returning a JSON array from a PHP controller is easy for me. However, now that I am worki ...

Transferring a variable value between functions using autocomplete and AJAX communication

I am facing difficulties with implementing autocomplete jQuery along with AJAX call. The issue arises when a user enters text in the input field, triggering an AJAX POST request to the controller which retrieves values from the database and sends them back ...

Perform Jquery trigger on mobile by clicking, and on desktop by hovering

Despite encountering this question numerous times, I am still unable to find a solution. I have a dropdown menu and I want it to open on hover for desktop and on click for mobile devices. I attempted using the provided code, however, it only works after r ...

Issue with the transmission of FormData and string data to PHP

Struggling to properly handle sending file data and string data together through ajax to PHP. Having trouble retrieving the correct string data from $_POST[] in PHP, resulting in only receiving the initial alphabet of a string instead of the specific produ ...

Transmitting data from input table using JSON and AJAX

I'm encountering an issue with collecting values entered into a table and converting them into a JSON array. After that, I need to send the array for database processing. Here's what I have so far: The table is populated from the database, so I&a ...

Setting the UTF-8 character encoding in Struts2

I am currently working on a JSP file where I collect form values and send them to a Struts 2 action class using jQuery Ajax. Here is what my Ajax function looks like: var DataValues = $("#Form1").serialize(); alert(DataValues); alert(decodeURI(Da ...