First experience with Django Bootstrap Modal Ajax was flawless, but on the second attempt, it was not as successful

I am currently utilizing Django 2.2 in conjunction with Bootstrap.

The method implemented is as follows:

  1. Triggering the opening of a modal window,
  2. User updates the data,
  3. User saves the data,
  4. Underlying table from where the window originated is updated and the modal window closes.

All functions smoothly up until this point, however, an issue arises upon attempting to reopen the same window - nothing occurs!

This pertains to the javascript file:

            
$("#modal-risk-profile").on("submit", ".form-risk-profile", function () {
    var form = $(this);         

    $.ajax({
        url:form.attr("action"),
        data:form.serialize(),
        type:form.attr("method"),
        dataType:'json',
        success: function(data) {
            console.log(data.form_is_valid);
            if(data.form_is_valid) {
                console.log(data.html_planner_client_list);
                $("#id_client_table tbody").html(data.html_planner_client_list);
                $("#modal-risk-profile").modal("hide");
                console.log("Success!");
            }
            else {
                console.log("Something went wrong.");
                $("#modal-risk-profile .modal-content").html(html_form);
            }                       
        }
    });

return false;
}); 

The output provided by html_planner_client_list is presented below:

<tr>
<td> Rajesh </td>
<td> 01-04-2000 </td>
<td> Bangalore </td>
<td> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99ebf8f4f8faf1f8f7fdebf8f7b7edfceaedd9fef4f8f0f5b7faf6f4">[email protected]</a> </td>
<td> Salaried </td>
...

No errors detected in Inspector Log or Django logs.

What might be causing the issue?

Answer №1

I encountered a problem and found the solution by following this link :

            $('.button-risk-profile').click(function(){

            var btn = $(this);
            console.log("I am in client Risk Profile")

            $.ajax({
              url: btn.attr("data-url"),
              type: 'get',
              dataType: 'json',
              beforeSend: function () {
                $("#modal-risk-profile").modal("show");
              },
              success: function (data) {
                $("#modal-risk-profile .modal-content").html(data.html_form);
              }
            });             

        });

After making some modifications, my updated version looks like this:

            $('.client-table').on('click',".button-risk-profile",function(){

            var btn = $(this);
            console.log("I am in client Risk Profile")

            $.ajax({
              url: btn.attr("data-url"),
              type: 'get',
              dataType: 'json',
              beforeSend: function () {
                $("#modal-risk-profile").modal("show");
              },
              success: function (data) {
                $("#modal-risk-profile .modal-content").html(data.html_form);
              }
            });             

        });

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

Issue with passing values from JavaScript to PHP not working as expected

For some reason, I just can't seem to get this line of code to work. It's like my brain is not cooperating: var all = color.val('all'); $('#cssColor" + <?php echo $page ?> + "', parent.document).attr("background-color", ...

How to Force a jQuery Redraw Following Data Retrieval Using Ajax

Hey everyone, It's been a long time since I started listening, but this is my first post... I have a client who needs a complex feature on their website. They want to merge the content of 3 different pages into one seamless experience for users afte ...

How to calculate a date x days before a given date using javascript

In my Angular application, I am dealing with a date value that is stored in local storage. My current code snippet retrieves the date like this: $scope.selectedDate = localStorage.getItem('selDate'); The returned date from this code is '1 ...

Alter the color of the initially chosen option in the dropdown selection

I'm struggling to modify the color of the initial selection while keeping the remaining selection-options at their default black color. Unfortunately, I haven't been successful in achieving this. Currently, all colors are #ccc. What I want is fo ...

What is the process for retrieving randomized data using mongoose?

I recently came across the mongoose-random package which allows for retrieving a JSON array of random records using mongoose. My goal is to retrieve three random records with a specific field. Despite reviewing the documentation, I have yet to find a work ...

Achieving the functionality of toggling a div's visibility using jQuery by simply clicking on a

Here is the JavaScript code I am using: $(document).ready(function() { $('.LoginContainer').hide(); $('.list li a').click(function(){ $('.LoginContainer').togg ...

How to order a list of model objects based on a computed value using Django's sorting/order_by

Currently, I am working with two models: a Slot and an Appointment. The Slot objects represent appointment requests by Users and are defined for a specific week starting date. My task involves matching two slots to create an Appointment object for that pa ...

JavaScript zooming library designed to provide interactive zoom functionality similar to Google Maps

Seeking guidance on creating a web app centered around a zooming principle (ZUI). Currently researching frameworks or starting points, similar to OpenZoom but in javascript. Any recommendations appreciated! ...

In AngularJS, variables can undergo automatic value changes without any external connections

Within my AngularJS controllers, I have initialized two variables: _this.currentData=new Array(); _this.masterCurrentData=new Array(); Later on, I created a temporary array of objects called tmpDataSort and populated it separately using loops. var tmpDa ...

What is the best way to verify if an array of nullable integers is empty?

The information for this class is retrieved through an AJAX post request. public class FilterViewModel { public int?[] size { get; set; } public decimal? Price { get; set; } } When checking the price property, w ...

Steps for creating checkboxes for individual table rows in HTML using embedded PHP and updating their values in a PostgreSQL database:1. Begin by iterating through each

I have already retrieved the data from the database. It is displayed on the HTML table, but it is currently in non-editable mode. I need to ensure that the data shown is accurate and update its Boolean value in the database. Otherwise, incorrect records sh ...

What is the best way to choose $(this) within a JavaScript expression inside a template literal?

Is it possible to use template literals in the append method and get the index of the row generated? I understand that calling "this" inside the function selects the specified selector passed as an argument. $(document).on('click', '.ad ...

Stopping an endless loop in JavaScript by pressing a key on the keyboard can be a useful

I've been working on creating a JavaScript game and am currently tackling the challenge of implementing gravity. One crucial aspect I need to address is creating an infinite loop without causing the browser to crash. Is there a way for me to include a ...

Angular $watch not working as expected

I have a specific directive code: .directive('myDirective', function(){ 'use strict'; return { restrict: 'A' , link: function(scope, element, attrs) { var count = 0; function d ...

There seems to be an issue with node.js - headers cannot be set after they have already been sent to

As I work on developing my blog, I've encountered an issue with rendering different paths using the router parameter. Each time I attempt to display another route, an error surfaces. Unfortunately, I'm unable to provide more details at this momen ...

Running two servers at the same time using nodemon might seem complex, but it

Is it possible to run two servers (www.js and apiServer.js) simultaneously using nodemon? I have set the value for the "start" key in package.json as https://i.stack.imgur.com/r8M7p.jpg After running nodemon in the command prompt with the current working ...

What is the best way to determine which watchers are triggered in Vue.js?

Within my parent component, there are numerous nested child components. Whenever a click occurs on one of the child components, it triggers an update to the route. The parent component watches the route property and performs certain actions when it change ...

Combine an array of objects into a regular object

Imagine having an array structure as shown below: const student = [ { firstName: 'Partho', Lastname: 'Das' }, { firstName: 'Bapon', Lastname: 'Sarkar' } ]; const profile = [ { education: 'SWE', profe ...

How can you eliminate a specific element from an HTML document?

Utilizing localStorage can be tricky when it comes to keeping the JSON file hidden from being displayed on the HTML page. One approach I used involves sending the JSON file to the client once and then performing all logic using that file. To prevent the JS ...

How can data be transmitted to the client using node.js?

I'm curious about how to transfer data from a node.js server to a client. Here is an example of some node.js code - var http = require('http'); var data = "data to send to client"; var server = http.createServer(function (request, respon ...