unable to retrieve data using ajax

Having some trouble with my ajax code that is supposed to print values:

success: function(returndata) {
    $('#first').html("<div id='first' class='progress-bar progress-bar-primary' role='progressbar' aria-valuenow='22' aria-valuemin='0' aria-valuemax='100' style='width: "+ returndata[0] +"%;>"+ returndata[0] +"%'</div>");
    }

The value of returndata[0] is being printed in the first part, but it's not showing up in the second part as expected.

It should adjust the background color width and display a number over it like this: https://i.sstatic.net/5HJET.png

Currently, only the width of the color is displaying correctly without the number over it. It looks like this:

https://i.sstatic.net/4TnYL.png

If anyone can help me figure out where I am making a mistake, please let me know.

javascriptjqueryhtmlcssajax

Answer №1

It looks like you missed closing the style tag by mistake.

style='width: "+ data[0] +"%>'//Don't forget the quotation mark

The corrected version of this code is:

 success: function(data) {
    $('#progress').html("<div id='progress' class='progress-bar progress-bar-primary' role='progressbar' aria-valuenow='22' aria-valuemin='0' aria-valuemax='100' style='width: "+ data[0] +"%;'>"+ data[0] +"%'</div>");
  }

Answer №2

Follow these steps

   
var data=[];
data.push(40);

$('#second').html('<div id="second" class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="22" aria-valuemin="0" aria-valuemax="100" style="width:'+data[0]+'%;">'+data[0]+'</div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div id="second">
  
  </div>

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

Custom attribute in ReactJS component - I am not defined in my custom attribute in React component

I am currently working with ReactJS and I am facing an issue regarding accessing a custom attribute -name- of my ReactJS component. Despite trying to use e.target.name, it keeps returning "undefined" on my console. I cannot seem to figure out why this is ...

javascriptreactjs

"Is there a way to ensure that jPlayer plays the same song even after a page refresh

I have been working on integrating jPlayer with Ajax to ensure that when the page of my website is refreshed, jPlayer will continue playing its current song seamlessly. I have successfully stored track information and the current track during refresh, ho ...

javascriptjqueryajaxjplayer

Sharing the checkbox's checked status with an AJAX script

I am faced with a challenge involving a table that contains checkboxes in the first column. When a checkbox is checked, it triggers an AJAX script that updates a PHP session variable with the selected values. The functionality is currently operational, but ...

javascriptjqueryajaxcheckbox

Enhancing an element by incorporating animation into its active state

For my web assignment, I have received specific instructions regarding a section of the webpage involving five dice: There are five dice in play. When the webpage loads, a three-dimensional image of each dice must be displayed. Upon clicking a dice, it ...

htmlcsscss-animations

Creating a Dynamic Navigation Bar with HTML and CSS

I've been exploring the code on w3schools.com, and while there are some great examples, I'm struggling to understand it all. Unfortunately, there aren't any instructions on customizing the code for a third level of menus. Can someone simplif ...

htmlcssnavigationhoverdropdown

Most efficient method for comparing two JSON arrays and rearranging their positions

I am faced with a challenge involving two Javascript JSON arrays. The arrays in question are named this.BicyclePartsOLD and this.BicyclePartsNEW. Both arrays contain an attribute named "ListOrder". The OLD array is currently ordered from ListOrder 1 to n ...

javascriptjson

Testing the capabilities of AngularJS with e2e testing using the angular-recaptcha library

I have been attempting to e2e test my basic application, but I am facing challenges with the angular-recaptcha plugin from VividCortex (https://github.com/VividCortex/angular-recaptcha). Here is the test case I am working on: it('should redirect t ...

javascriptangularjsseleniumprotractor

Tips for troubleshooting a timeout issue in electron-html-to with node.js

Encountering a timeout issue while attempting to convert an html file to pdf using electron. The js app is being run through node. `{ Error: Worker Timeout, the worker process does not respond after 10000 ms at Timeout._onTimeout (C:\Users\Owner ...

javascriptnode.jselectron

Is it possible to use @ViewChild to target an element based on its class name?

The author of this article on Creating Advanced Components demonstrates selecting an element by creating a directive first: @Directive({ selector: '.tooltip-container' }) export class TooltipContainerDirective {} Then, the author uses this d ...

javascriptangulartypescript

Capturing the dynamic server response with nested JSON structures

I am in the process of creating a dynamic data-binding function named assemble that requires two input parameters: server response (JSON) - nested JSON object. instruction set (JSON) - a configuration object that dictates the binding. The Issue: The cur ...

javascriptjsonmongodbdata-bindingnosql

CasperJS hits a roadblock when trying to scrape AJAX-powered website

I am attempting to scrape data from http://www.snapdeal.com/offers/deal-of-the-day, where JSON data is loaded using an AJAX call to the following page: json_url = http://www.snapdeal.com/json/getProductById?* The code snippet I am utilizing is shown bel ...

ajaxweb-scrapingphantomjscasperjsheadless-browser

Tips for positioning one set of menu buttons to the left and another set to the right

I am currently utilizing bootstrap 5 and I want to align two groups of menu buttons on the same line - one to the left and the other to the right. At the moment, my code is displaying the second group below the first group to the left. This is how it curr ...

htmlbootstrap-5

What is the best way to modify an array of objects within component state?

I am currently working on updating a specific property of an object that is stored in an array. Here's a glimpse of my current state: state = { todos: [ { id: '1', title: 'first item, completed: false }, { ...

javascriptarraysreactjsobject

Vue js is throwing an error message that says "Reading 'push' property of undefined is not possible"

I've encountered an issue while trying to navigate to other routes. The error I'm receiving is: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'push') at eval (JoinRoom.vue?bd9d:74:1) This is how I pu ...

javascriptvue.jsvuejs2

Primefaces Command Button Ajax Only Functions Once before needing to be refreshed

I have a command button that triggers the saveData method once: <p:commandButton id="saveBtn" value="#{messages['um3.common.label.save']}" actionListener="#{advisorBean.saveData}" disabled="#{advisorBean.d ...

ajaxjsfprimefaces

Is it permissible to use multiple JWT tokens in the HTTP header?

Currently, I have implemented the jwt access and refresh token pattern for client-server communication. The method involves sending two jwt tokens in the header: the access token and the refresh token. This is done by adding the following code to the heade ...

javascripthttpexpressjwtfetch

Enhancing your CircularProgressBar with dual variant colors using Material-UI

https://i.sstatic.net/0d35R.png Best practices for customizing MUI components with React ...

htmlcssreactjsmaterial-uiweb-frontend

Issues with CSS rendering in the Chrome browser are causing display problems

After successfully creating an iFrames page tab on Facebook that looks great in Firefox and Internet Explorer, I encountered an issue with the div positioning in Chrome. You can view the page here: Oddly enough, this is the only page experiencing problems ...

cssgoogle-chrome

I possess a JSON array object and need to identify and extract the array objects that contain a specific child node

const jsonArray = { "squadName": "Super hero squad", "homeTown": "Metro City", "formed": 2016, "secretBase": "Super tower", "active": true, "members": [ { "name": "Molecule Man", "age": 29, "secretIdent ...

javascripttypescript

The 'else' statement does not seem to function properly with the 'src' attribute

I have been attempting to include alt text in a web page using jQuery with the code below. However, I am only able to get the correct value for the first image. The else if and else conditions do not seem to be working properly as I am unable to add alt ...

javascriptjqueryif-statementsrc