Showing feedback upon Ajax completion

I've got this snippet of javascript that sends data to my database and then shows a success message.

Currently, when the operation is successful, the button fades out and hides correctly. However, the success message doesn't appear.

$(document).ready(function () {
    $('form.user_status').submit(function () {
        var userna = $(this).find("[name='userna']").val();
        var joborder_id = $(this).find("[name='joborder_id']").val();
        var user_email = $(this).find("[name='user_email']").val();
        var app_status = $(this).find("[name='app_status']").val();
        // ...
        $.ajax({
            type: "POST",
            url: "user_status.php",
            data: {
                userna: userna,
                joborder_id: joborder_id,
                user_email: user_email,
                app_status: app_status
            },
               success: function () {
                  $('form.user_status').hide(function () {
                     $('div.success').fadeOut();
                 });
                   success = 'Status changed';
          }
      });
       return false;
   });
});

This is the HTML where the success message should be displayed:

<div class="success" style="display: none;"></div>

Answer №1

The success string is not being utilized in any way.

Instead of doing nothing, why not try this:

success: function(data){
    $('form.user_status').hide();
    $('div.success').html('Status changed').delay(1000).fadeOut();
}

HOWEVER If your success div is nested inside your form, it will disappear immediately along with the form, which defeats its purpose. I've included passing data - essential for utilizing returned information.

If the default display is set to none, fadeout will keep the div invisible.

Edit: I have simplified the instructions. If you just want to change the content and then make the div vanish, simply add the html, fadeout, and it's done.

JSFiddle link

Delay allows users a moment to read the message.

Answer №2

When utilizing jQuery, the ajax method includes a success function that is triggered upon successful receipt of an ajax response. Given the asynchronous nature of ajax, once $.ajax is executed, control progresses to the subsequent line of code. Any instructions contained within the success function will be carried out promptly following a successful ajax call. It is imperative to modify the DOM within the success function rather than simply dealing with variables.

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

Maintain the functionality, but disable all stylesheets and scripts

I have 4 separate pages, each with their own distinct stylesheets and scripts that I switch between using ajax and historyPopState. The issue is that downloading them repeatedly can be inefficient. I am seeking a solution to keep the stylesheets and scri ...

Guide on incorporating descriptive text for an image by utilizing a data attribute within its parent element

I'm trying to find a way to attach an alt-text attribute to an image by assigning a data attribute to its parent container. Essentially, any text I input in the data-alt attribute will be set as the alt-text for the img element. How should I format ...

Looking to implement a collapsible feature on a webpage using PHP, JavaScript, and HTML

I am looking to enhance the appearance of a section in a table by making it collapsible. The code snippets below are from editor_transdata.php <script language="javascript> function toggle_message(type) { document.getElementById("div_message").s ...

To submit the form, users must check off multiple checkboxes using JavaScript conditional statements

Currently, I am working on creating a form that requires multiple fields like name and email. While I have been successful in sorting out those fields, I am facing a challenge with the checkboxes. I am trying to figure out how to make it mandatory for two ...

What is the best way to capture videos using Safari?

Hey there! I've set up the browser camera on my website for users to record live tests. It's been working great on Chrome and Firefox using MediaRecorder, but unfortunately, Safari isn't cooperating. Does anyone know of an alternative to Me ...

Utilizing displacement mapping in three.js

Currently, I am using a grayscale image as a bump map for my model. The model consists of an .obj file paired with the corresponding .mtl file for UV mapping. Below is the code snippet that I am utilizing: // Load material file var mtlLoader = new THREE.M ...

How can I dynamically set the width of a span element in HTML?

Hello there! As a beginner in html and angularjs, I'm experimenting with dynamically assigning span width based on an angular js response. <div class="statarea" ng-repeat="x in names"> <div class="ratingarea"> <div class=" ...

Convert the HTML content into a PDF while retaining the CSS styles using either JavaScript or Django

Looking to create a PDF of an HTML element with background color and images. Seeking a solution, either client-side or server-side using Django/Python. Tried jsPDF on the client side, but it does not support CSS. Considering ReportLab for Django, but uns ...

Changing dropdown values in PHP upon selection

When I try to send the value of a dropdown on change to a PHP script, I encounter an issue where both the form and status string are posted twice. One with the GET parameter set and the other without. I'm unable to figure out how to solve this problem ...

Using React.js to establish a connection with a database

Can someone help me with connecting my reactjs to mysql? I have already installed mysql and followed the usual instructions, but I keep getting an error "TypeError: mysql.createConnection is not a function". Below are the codes I am working with. import ...

Using jQuery to import an XML node into a document asynchronously

function generateNewMonth(month, year, table) { "use strict"; var url, updatedTable; url = 'newdata.php?m=' + month + '&y=' + year; $.ajax({ type: 'GET', cache: false, url: url, ...

Running ASP.Net with HTML5 JS and Twitter Bootstrap produces a unique design

During development, everything appears to be working fine in my environment. I have a pie chart that uses canvas and animation, and it displays correctly when hosted through the browser. Additionally, I am utilizing Twitter Bootstrap and have a navigation ...

The servlet is notified of a request with no data being sent from

I have encountered an issue with my JavaScript program that is attempting to send an AJAX request to a Java HTTPServlet. The servlet, which listens on the specific URL pattern "/users", is expected to return XML data. However, when the request is made to t ...

What is the best way to restrict the input options for a String field within a TextField component in Material-UI?

When working with Material-UI, how can we set a maximum length restriction for a text field? Below you will find an example of the TextField component: <TextField id="name" label="Name" type="string" //maxLengt ...

What is the best method to redirect users who are not logged in from every URL when using PassportJs?

I am currently developing a web application using NodeJS, and I have integrated PassportJS with passport-local-mongoose for authentication. Below is the code snippet I've created for the root route to verify if the user is logged in: app.get('/ ...

Tips for creating a concise summary of written content

I am interested in creating an AI-powered summary generator for text input within a textarea element. Below is the HTML code snippet I have been working with: <textarea id="summary">Enter your text here</textarea> If you hav ...

How to use AJAX to dynamically populate an HTML form with data retrieved from a PHP query结果

I'm having trouble populating a form with values after running a simple search. When I execute the script, I either receive an "undefined" response or nothing at all when I try alert(data);. search.php <?php include_once 'config/config.php&a ...

How can MessagePorts be effectively utilized in electron Js?

What are some real-world applications of using MessagePorts in Electron JS? Why is it necessary instead of just using ipcRenderer.invoke? I haven't been able to identify any practical scenarios where MessagePorts are indispensable. It seems like it&ap ...

What's the best way to switch between colors in a Vue list?

I have a custom tree-view component that I'm working on: <template> <li class="main__li list" :style="{'margin-left': `${depth * 20}px` ,'background-color': `${col}`}" @click="toggle(e); getEl( ...

Discover the underlying data within a nested JSON structure and track back to identify the corresponding values

In the JSON structure provided below, Suppose I have the chapter "number" and section "number". What is the most efficient way to search and trace backwards starting from what I already know, in order to find the "number" of the title within titles and t ...