function for ajax response is received

Question

function for ajax response is received

How can I replace HTML code with the 'for from django' function using a jQuery AJAX call?

$.ajax({                                                                                                                           
    url: url,
    data: $('#FormSite').serialize(), 
    type: "POST",
    async:false,
    success: function(response) {
        $($("#Pic").first()).replaceWith($(response['Pic']));
        $("#HeaderWpis").text(response['h1']);
        $("#WpisChild").html("<div id='WpisChild'> {% for News in Messags %} <p>{{ News.title }}</p> </div>");
    },
    error: function(data)
    {
        alert('Bad connection');
        console.log(data);
    }

});

After trying this, I noticed that the {%for%} from the third div 'WpisChild' is displayed as text instead of being processed by the function. Can you explain why this is happening?

javascript django ajax

Answer 1

Answer №1

When accessing your views, the Django template language is processed, making it inaccessible to JQuery interpretation. Here are a couple of solutions:

To utilize the Django template language in generating HTML, use the render() function in your views.py file. Create a new template containing the HTML segment and direct the AJAX call to a new view. Pass the Messages as context to the template and implement a {% for %} loop to work with it. The response will be the fully constructed HTML that can be appended to the desired div.

def get_messages(request):
    if request.method == 'POST':
        # Perform actions with the request, fetch messages

        context = {
            'Messages': messages
        }
        return render(request, 'message-template.html', context)

$("#WpisChild").append(response)

Alternatively, embed the Messages data in your current response, iterate through the list, and append each one as an element to the div. This approach may be preferable if your response contains other data.

response['Messages'].forEach(function(news) {
    $("#WpisChild").append('<p>' + news.title + '</p>')
});

Answer 2

When accessing your views, the Django template language is processed, making it inaccessible to JQuery interpretation. Here are a couple of solutions:

To utilize the Django template language in generating HTML, use the render() function in your views.py file. Create a new template containing the HTML segment and direct the AJAX call to a new view. Pass the Messages as context to the template and implement a {% for %} loop to work with it. The response will be the fully constructed HTML that can be appended to the desired div.

def get_messages(request):
    if request.method == 'POST':
        # Perform actions with the request, fetch messages

        context = {
            'Messages': messages
        }
        return render(request, 'message-template.html', context)

$("#WpisChild").append(response)

Alternatively, embed the Messages data in your current response, iterate through the list, and append each one as an element to the div. This approach may be preferable if your response contains other data.

response['Messages'].forEach(function(news) {
    $("#WpisChild").append('<p>' + news.title + '</p>')
});

function for ajax response is received

Answer №1

Similar questions

Utilizing Vue.js with Firestore: Retrieve information from Firestore without rendering any data on the screen

Clicking on a checkbox within an HTML table that incorporates handlebar and Express.js

Storing Json data in a variable within Angular 2: a step-by-step guide

Form validation using jQuery and AJAX

When utilizing AJAX, certain web pages may contain a querystring

The reason behind my unsuccessful attempt to utilize AJAX with the Google GeoChart API

Tips on adding line breaks after periods that are not at the end of a sentence in HTML text nodes with regular expressions

What is the best way to keep a button visible at all times and active without needing to be clicked?

Passing parameters from a div to a single page component in Vue.js: A complete guide

What is the best way to iterate over JSON data and organize the output based on the key value?

Error: Conversion of "2018-01-01-12:12:12:123456" to a date is not possible for the 'DatePipe' filter

Using nodeJS's util module to format and pass an array

Jquery error - parser issue - JSON input unexpectedly terminated

How to create expandable nodes with lazy-loaded children in Dynatree?

Integration of Django Tastypie with Angular for secure user authentication

Dealing with Sideways Overflow Using slideDown() and slideUp()

Displaying feedback messages and redirecting in Flask may result in the response being visible in the developer tools, but

Discover the following `<td>` identifier through the act of clicking on a separate `<td>` element

Accessing a variable outside of the component constructor will result in the variable being

The spreading of personalized events