Alter the div's HTML content once the Ajax operation is completed

I have a div element that looks like this: 

<div class="progress" id="progress-bar"></div>

I am using the following JavaScript code along with an ajax call to retrieve some data. The data returned is 0, however, the content is not being added to the div when I place the code within the .done section of the ajax call. It only works when I place the code at the beginning of the JavaScript and then the progress bar appears filled to 45%. 

$("#ipaddress_form").submit(function(e) {           
    var ipjs = $("#input_ipaddress").val();
    var hostjs = $("#input_hostname").val();
    var commjs = $("#input_comms").val();

    $.ajax({
        url: "include/handlingJS.inc.php",
        type: "POST",
        data: {
            "ipjs": ipjs,
            "hostjs": hostjs,
            "commjs": commjs    
        }

    }).done(function(data) {
        alert(data);
        if(data == 0) {
            bar = $('#progress-bar');
            bar.html('<div class="progress-bar progress-bar-striped active"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</span></div>');
        }
    });
});

Am I overlooking something?

javascriptjquerycssajaxtwitter-bootstrap

Answer №1

If the data is being displayed in an alert message, it could be due to:

  1. The response data might not be in integer format and needs conversion.

  2. There may be white spaces present in the string data.

To address this issue, you can use data.trim() == '0'

Answer №2

    if(parseInt(data) === 0) {
        progress = $('#progress-bar');
        progress.html('<div class="progress-bar progress-bar-striped active"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</span></div>');
    }

Answer №3

The issue arose when I was attempting to submit the form. I decided to switch the form submission event to a button click event:

$("#loading").on("click", function(e) {
    // perform ajax operations here
}

Unfortunately, I am unable to provide a clear explanation as to why this change resolved the problem.

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

New in the world of JavaScript: A method that replicates the functionality of jQuery's

Take a look at this JSFiddle example: https://jsfiddle.net/1a6j4es1/1/ $('table').on('click', 'td', function() { $(this).css('background', 'green'); }); How can you rewrite this code using plain JavaS ...

javascriptjqueryeventsselector

Conceal the div element if the screen size drops below a certain threshold

Is it possible to hide a div element when the browser width is less than or equal to 1026px using CSS, like this: @media only screen and (min-width: 1140px) {}? If not, what are some alternative solutions? Additional information: When hiding the div eleme ...

javascripthtmlcss

Converting a JavaScript dictionary into an array of documents: The ultimate guide

I have an object that looks like this: const obj = { "restaurant": 20, "hotel": 40, "travel": 60 } Is there a way to transform it into the format below? const newArray = [ { "category_name": "restaurant", "amount": 20 }, { "category_na ...

javascriptarraysjsonjavascript-objects

Instead of using a string in the createTextNode() function, consider utilizing a variable

I am attempting to use JavaScript to add another list item to an unordered list. I want the list item to display dynamic content based on a pre-existing variable. While I can successfully append a list item by using a string, things go awry when I try to i ...

javascriptdynamichtml-listsappendchildcreatetextnode

Is utilizing the bootstrap grid system to create nested rows a viable option?

Looking to feature 1 larger image alongside 4 smaller images in a 2x2 layout: I initially considered placing everything in one row, then dividing into two columns. In the second column, I would create two rows with two columns each to achieve the desired ...

csshtmltwitter-bootstrapgridgrid-system

Efficiently Parsing for PostgreSQL WHERE Clauses Using AJAX and PHP

Currently, I am facing a situation where I need to retrieve activities with corresponding version numbers. The challenge lies in the fact that some activities have only one version, while others have multiple versions. These activities are obtained through ...

phpjqueryajaxpostgresqlmultidimensional-array

The AJAX call to retrieve data from a file dynamically is experiencing issues

I am currently trying to use AJAX to dynamically retrieve data from my PHP page and display it on my HTML page. However, I am running into some issues with getting it to work properly. You can view the page here Here is the snippet from the HTML Page wher ...

javascriptjqueryajax

Navigating with Nokia Here maps: plotting a path using GPS coordinates

I am currently developing a GPS tracking system and my goal is to visually represent the device's locations as a route. The challenge I'm facing is that there is a REST API available for this purpose, but my client-side application relies on soc ...

javascriptnode.jsgps

Is There a Name Clash Issue with Dependency Injection in AngularJS?

Let's say I have two modules, finance2 and finance3, both of which define a service called currencyConverter. If I specify that my main module only depends on finance2, I can inject the service like this: angular.module('invoice2', [' ...

javascriptangularjs

Obtaining Values from Multiple Textboxes using jQuery in Model-View-Controller

I'm still learning about MVC and I encountered an issue while trying to edit a row and send the edited data to a controller method using jQuery and AJAX. When I click on edit, the specific row transforms into textboxes and the save ActionLink appears ...

jqueryajaxasp.net-mvcasp.net-mvc-4onclick

Showing skeleton placeholders while waiting for the completion of an Array map function in React

I am currently working on a country list component that includes phone codes, country names, and flags. The use of the map() function is causing some delay in loading time. I am looking for a way to determine if the map() function has finished executing or ...

javascriptarraysreactjsdictionaryjsx

Having trouble getting the map function to work in ReactJs while using Next.js?

Hey there, I am diving into ReactJS with the "Nextjs" framework and working on fetching data using async functions. However, I am facing an issue where I am unable to fetch data using the map function. The console.log is displaying a message saying "item ...

javascriptreactjsnext.js

Express encountered an issue when trying to upload a file through AngularJS

I am currently facing an issue with uploading a file to express and subsequently to mongoDB. Despite my efforts, when I attempt to upload the file to express, it appears that no data is being passed through the response. I am utilizing ng-file-upload.min. ...

javascriptangularjsnode.jsexpressng-file-upload

Errors and warnings caught off guard while running json-server with the --watch flag

I'm having some trouble using json-server in the following way: $ json-server --watch db.json Every time I try to run that command, I encounter errors or warnings depending on the version of json-server that is installed: 1.0.0-alpha.1-1.0.0-alpha.1 ...

javascriptnpmjson-server

Issue with JavaScript causing circles to form around a parent div

I am struggling to position a set of circles around a parent div in my code. I want 6 circles to form a circle around the parent div, but they are not lining up correctly. Can someone help me identify what I'm doing wrong? var div = 360 / 6; var ra ...

javascripthtmlarrayscss

The calculator is malfunctioning and unable to perform calculations

export default function App() { const [activeKey, setActiveKey] = useState(0); const [storeArr, setStoreArr] = useState([]); function click(selector) { setActiveKey(selector); if (activeKey !== "=") { setStoreArr([...storeArr ...

javascriptreactjs

Retrieve custom content from a database using Laravel and Ajax when clicking on a navigation bar

Recently, I've started working with Laravel 7 and AJAX. One of the features I want to implement is a 'product's name' navbar that displays product details in a div without refreshing the page when clicked. I came across a demo showcasin ...

javascriptjqueryajaxlaravellaravel-blade

Modify the button input value within a PHP script

I am currently working on a piece of code that involves following different users and inserting values from a MySQL table. <td align="center"> <input type="button" name="<?php echo $id; ?>" id="<?php ech ...

javascriptphphtmlmysql

What is the best way to align text in the center of a button?

When creating custom buttons in CSS using <button>, I noticed that the text appears to be centered both horizontally and vertically across all browsers without the need for padding, text-align, or other properties. Simply adjusting the width and heig ...

htmlcss

Leveraging server-side data with jQuery

When my client side JQuery receives an array of JSON called crude, I intend to access and use it in the following way: script. jQuery(function ($) { var x = 0; alert(!{JSON.stringify(crude[x])}); ...

javascriptjquerynode.js