displaying HTML Div upon successful Ajax response in Django

I have a Django App and I would like a message to appear to the user after a successful Ajax call. Here is my Messages HTML:

<a id="added" class="btn btn-template-outlined" href="{% url 'shop:add_product' id=products.id %}">Add to cart</a>

  <p id="connt" class="text-center">
   {% if messages %}              
   {% for message in messages %}
    {{message}}
   {% endfor %}
   {% endif %}
    </p>

And here is my Ajax script:

$("#added").click(function(e){
  e.preventDefault();
    $.ajax({url: "{% url 'shop:add_product' id=products.id %}",
    success: function(response){
      appendToUsrTable();
    }});
  });
function appendToUsrTable() {
 ("#connt").append(`

 `)
    }
  </script>

Answer №1

When discussing Django messages, it's important to note that the template is rendered and returned to the user before any Ajax call is made. This means that at the time of rendering, there will be no message displayed.

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

Issues with invoking jQuery AJAX in Firefox extension is causing dysfunction

Take a look at my code snippet: $.ajax({ url: 'xxx', success: function(data) { if (data.trim() == '0') { //CODE FOR IF } else ...

Jquery ripple effect does not function properly with background-attachment: fixed style

Is there a way to make the effect ripples () work with background-attachment: fixed? I'm trying to achieve this effect while keeping the background fixed in place. Any suggestions on how to make this work? background-attachment: fixed; ...

Execute JavaScript code via URL injection

One interesting aspect of the HTML is that it has a feature where it opens a webpage. The specific webpage it opens is determined by the URL, for example: https://mywebsite.com/index.html&audio=disabled In addition to this, there is a useful JavaScri ...

I am struggling to save a second variable that I received into my function

There is a function in my code that takes two values as input, both formatted like this: MyFunction("word1","word2") However, when the function receives the values, it looks like this: MyFunction(test1,test2){} The issue I'm facing is with storing ...

Enhance your web form with the Bootstrap 4 tags input feature that allows users to add tags exclusively

I'm currently utilizing Bootstrap 4 along with Bootstrap Tags Input to create a multiple category selection feature. My goal is to enable users to choose multiple items exclusively from the predefined categories listed in the predefined_list. At pres ...

Connecting HTML Attributes to an XML Data Source

I have limited familiarity with the SGML family, but I need to create a small website for an application installation process. This website will display the selected features permanently. Thanks to Bootstrap, the website looks great. However, I now want to ...

Unravel a complex array passed from jQuery to PHP using ajax communication

I have successfully constructed an array and sent it to my PHP function using ajax. However, I am encountering issues with decoding it as var_dump does not show anything in the response panel upon success. Here are my arrays: var data = JSON.stringify({ ...

Using Ajax requests in WordPress

I am working on creating a button that will send an email to the branch of the user who is logged in. To get started with the coding process, I need to ensure that the AJAX call is sent successfully and triggers the 'success' method of the AJAX o ...

Transforming a string to a Date object using JavaScript

Can someone assist me in converting a PHP timestamp into a JavaScript Date() object? This is the PHP code I use to get the timestamp: $timestart = time(); I need help converting this timestamp into a JavaScript date object. The concept of working with d ...

What is the best approach to execute the jquery script exclusively on mobile devices?

I want to modify this code so that it only functions on mobile devices and is disabled on computers. How can I achieve this? <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <ul id="pri ...

Guide on transferring a file between folders using JavaScript

I am currently experiencing difficulties transferring images from one folder to another. Is it possible to accomplish this using JavaScript? Please advise me on how I can achieve this task. I already have the image path (e.g.: C:\Program Files\xa ...

I'm in the process of designing a Todo list platform, but I've hit a roadblock trying to figure out the best way to showcase and delete tasks

Having some trouble with creating an li element even after following the necessary steps. Any guidance and explanation would be greatly appreciated. Thank you Managing HTML and CSS is fine, but when it comes to JavaScript, I always seem to struggle. I und ...

Using Javascript Reduce to Manipulate Objects

Here is the data I am working with: let info = [ {id: 1, name: "John Doe", type: "A", amount: 100}, {id: 2, name: "Jane Smith", type: "B", amount: 150}, {id: 3, name: "Alice Johnson" ...

After executing the controller function in AngularJS, the loading icon transitions into a status icon

Is it possible to dynamically change an icon in my view based on the status of a controller function? I want the icon to initially display as a spinning wheel to indicate loading and activity while the function is executing. https://i.stack.imgur.com/I ...

Unable to send message to iframe from a different origin

I am encountering an issue with the code below while attempting to post a message and receiving a Blocked autofocusing on a <input> element in a cross-origin subframe. error. import React from 'react' const MyFiles = () => { React.us ...

The absence of the import no longer causes the build to fail

Recently, after an update to the yup dependency in my create react-app project, I noticed that it stopped launching errors for invalid imports. Previously, I would receive the error "module filename has no exported member X" when running react-scripts buil ...

Tips on adjusting weight and height in CSS to ensure responsiveness as the screen size decreases

Is there a way to set the weight and height in CSS so that they remain responsive when the screen size is reduced? Currently, I am resizing using PHP before storing but I am considering using HTML and CSS or JavaScript instead. Is there a solution for this ...

Employing specific delimiters with hogan-express while managing the {{{ yield }}} statement

I've hit a roadblock trying to solve this issue. My goal is to incorporate hogan.js (via hogan-express) into a new expressjs application while also utilizing hogan.js on the front-end with Backbone, lodash, and other tools. The layout I am using cons ...

Showing the json encoded array received from an ajax response

I have encountered this data result {"policy":[{"id":"1","policy_name":"Policy 1","description":"Testing","status":"Active","valid_until":"2022-05-18& ...

JavaScript code to render a string variable passed by the PostController file within the Sails framework

How can I properly display a string variable in the postview.ejs file sent by the PostController.js in Sails? The variable being used is called 'val' [ ejs html javascript Sails express node.js ] PostController.js module.exports = { post : f ...