Neglecting to refresh the content within the modal body

I am facing an issue with an empty modal on my webpage and an AJAX call that I am trying to execute as shown below (simplified for easier understanding).

function fetchContent(x)
{
    $.ajax({
    type:"POST",
    url:"link",
    data:{id:"123"},
    success: function(data)
        {
        data=JSON.parse(data);
        var content=document.getElementById("fetchContentModalBody").innerHTML;
        for(var i=0;i<data.length;i++)
            {
            if(data[i]["nick"]==1)
               content+="<p>"+data[i]["upd"]+"</p>";
            else
               content+="<p>"+data[i]["upd"]+"</p>";
            }
        alert(content);
        $("#fetchContentModal").modal('show');
        }
     });
}

Even after setting the alert to display the content, the modal opens up blank without any content inside it.

I am not sure what I am missing here. Any help or suggestions would be greatly appreciated.

Thank you.

javascriptajax

Answer №1

let retrieveContent=document.getElementById("returnItModalBody").innerHTML;

By using the code above, you are storing the value of the innerHTML (which is a string) in a variable called retrieveContent.

retrieveContent+="<p>"+data[i]["upd"]+"</p>";

After that, you are adding a new paragraph string to the retrieveContent variable.

alert(retrieveContent)

Subsequently, you are displaying the current string content stored in the retrieveContent variable.

It is important to note that the original innerHTML is not being altered in this process.

If you intend to change the innerHTML, you must assign a new value to it directly.

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

Discovering specific keywords within HTML tags and performing replacements using jQuery

I am searching for specific strings within my HTML code, and if I find them, I want to replace them with nothing. For example: HTML: <img src=`javascript:alert("hello ,world!")`> My goal is to locate keywords like javascript, alert, etc, within H ...

javascriptjqueryhtml

Uploading files with AJAX form in MVC3 leads to empty Request.Files

Currently, I am utilizing MVC3 and attempting to develop multiple ajax forms that each have the capability to upload a file within a single page. Below is the layout of the page: @{ ViewBag.Title = "Index"; } <h2> Index</h2> @Html ...

ajaxasp.net-mvcasp.net-mvc-3uploading

What is the method for showcasing an image before it has been uploaded?

I must start by apologizing for my English, as I am not the most fluent speaker. Here's where I'm facing a dilemma: I have created an application that allows users to edit questions for a game. These questions are stored on a server and can be ...

javascriptimage

Logging DOM elements with Electron's webview preload feature

Within my Electron program, I am utilizing a webview in my index.html file. The webview is equipped with a preloader, and my goal is to manipulate the DOM of the webview specifically, not just the index.html file. In my preloader code snippet below, the c ...

javascripthtmlwebviewelectron

Node.js client encounters ENOBUFS error due to excessive number of HTTP requests

Currently, I have the following setup: An end-to-end requests system where a node.js client communicates with a node.js server. However, the issue arises when the client fails with an ENOBUFS error in less than a minute. client: (function(){ var lo ...

javascriptnode.js

Modifying the hue of Material UI tab label

I attempted to modify the label color of a tab to black, but it seems to be stuck as white. Is this color hard-coded in material-ui? If not, how can I change it? Here's what I've tried: const customStyles = { tab: { padding: '2p ...

javascriptmaterial-ui

utilizing services across multiple controller files

Service - optionService.js controllers - app.js & welcomeCtrl.js & otherCtrl.js app.js var app = angular.module('mainapp', ['mainapp.welcome','optionServiceModule']); app.controller('mainappCtrl', functio ...

javascriptangularjsnode.jsangular-servicesangular-controller

Utilize a Google Chrome extension to interact with the DOM of the active tab

Alright, so I've got a good grasp on JavaScript/jQuery and can use them for various tasks. However, my current challenge involves manipulating the DOM of the open tab. I'm curious to know if it's feasible or if all the actions performed by a ...

javascriptjquerygoogle-chromegoogle-chrome-extension

Animating slides with CSS Keyframes and React, incorporating toggle slide fade out and slide fade (back) in

I am seeking a solution for toggling a box (div) with slide-out animation and then sliding back in animation (in reverse) upon button press. My requirement is to have no animations during the initial page render. While I can successfully slide the box to ...

javascriptcssreactjscss-animations

Using JavaScript to place a particular tag at a designated position

I have a string that looks like this: var txtstr='<p>Text 1</p><p>&nbsp;</p><p>Text &nbsp;2</p><p>&nbsp;</p><p>Text 3&nbsp;</p>'; I have an <img src=..../> tag and ...

javascripttypescript

Guide on updating a text value using AJAX to request a PHP file without the need to refresh the webpage

Exploring the world of AJAX, I have a desire to develop a basic web application to apply my newfound knowledge practically. My goal is to calculate various percentages based on user input, and display the results on the webpage instantly using AJAX, witho ...

phpajaxforms

Why is the Javascript code outputting undefined and NaN during execution?

As a newcomer to the world of javascript, I am venturing into learning its fundamental concepts. In my quest for knowledge, I've dabbled in file reading and came up with a small script which you can find below. // Incorporating the fs (filesystem) mo ...

javascriptnode.js

Implement VueJS functionality to prevent form submission upon submission and instead submit the form upon keyup

My form has the following structure: <form id="myForm" action="/searchuser" method="POST" @submit.prevent="onSubmit(inputValue)"> <div class="field"> <label class="label">Name</label> <div class="control"> ...

javascriptajaxformsvue.js

Is there a way to load a URL within a DIV element using AJAX?

These two PHP files are set up to capture a user's input from a form and then display that text. Below you'll find the code for each file: file1.php: <form action="output.php" method="post"> Paste text document: <br> ...

javascriptphpajax

"Troubleshooting: Resolving 404 Errors with JavaScript and CSS Files in a Vue.js and Node.js Application Deploy

I successfully developed a Vue.js + Node.js application on my local server. However, upon deploying it to a live server, I am facing a 404 error for the JavaScript and CSS files. I have double-checked that the files are indeed in the correct directories on ...

javascriptnode.jsvue.jsexpress

Tips for customizing the appearance of Bootstrap 5.0 popovers on the fly

Back in Bootstrap 4.0, you could easily change the popover content dynamically based on the selector or reposition it using the $tip property. $("body").popover({ container: 'body', content: 'loading...', html: tru ...

javascriptbootstrap-5bootstrap-popover

When working with Function components in NextJS, it's important to note that they cannot be assigned refs directly. If you're trying to access a ref within a Function component, you

I'm having an issue with wrapping a card component using the Link component from 'next/link'. Instead of redirecting me to the desired link when I click the card, I receive a warning that says 'Function components cannot be given refs. ...

javascriptreactjsnext.jsjsx

Want to know how to center the value of a slider range input in your React project using NextJS and Tailwind

Can someone help me with the issue I'm having with the offset? Is there a way to link a value to the thumb? I've tried two methods, but one gives a significant offset and the other gives less. However, it seems more like a workaround than a solu ...

javascriptcssreactjsnext.jstailwind-css

Trouble arises when trying to create an auto suggest text box using PHP and Javascript

I've been working on creating a basic auto-suggest input feature that connects to a MySql database to retrieve data. However, I'm facing a particular issue where when I enter the name of an object that I know exists in the database, the input bar ...

javascriptphpjquerymysql

Integrate a button following the first paragraph exclusively when there are two or more paragraphs present

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> jQuery(document).ready(function($) { if ( $('p').length < 1 ) { $('p:last-child').after('<div id="toggle" class="btn"> ...

javascriptjqueryhtml