I am attempting to achieve a smooth transition effect by fading in and out the CSS background color using JQuery and AJAX

Can anyone help me with my issue related to using Ajax to fadeIn a background color in beforeSend and fadeOut in success? I seem to have made some mistakes but can't figure out what went wrong.


            var data={
                action: 'tag_user_update',
                postSearchNonce : MyAjaxSearch.postSearchNonce,
                tag : $(this).closest("a").text(),
                users_id : $("#users_id").val()
            }

            $.ajax({
                url: MyAjaxSearch.ajaxurl,
                type:'POST',
                cache: false,
                data:data,
                beforeSend: function() {
                    $('.tag_link').animate({ backgroundColor:'yellow'},'slow');
                },
                success: function(data){
                    $('.tag_link').animate({ backgroundColor:'white'},'slow');
                }
            });//ajax
javascriptjquerycssajax

Answer №1

Ensure that when using ajax methods, you structure them like this: $.ajax({}).done({}) or $.ajax({}).success({}). It seems you've mistakenly placed the callback function .success() inside the .ajax({}) request.

In the example provided below, notice how .done() is outside of the .ajax() call. Similarly, .success() should not be internal either. These are both callback functions that execute after your ajax() request. Furthermore, since .success() is being deprecated, using .done() has the same effect as shown in the following example.

retrieved from http://api.jquery.com/jquery.ajax/

$.ajax({
    url: "http://fiddle.jshell.net/favicon.png",
    beforeSend: function( xhr ) {
    xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
    }
})
.done(function( data ) {
   if ( console && console.log ) {
   console.log( "Sample of data:", data.slice( 0, 100 ) );
   }
});

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

Getting Started with NextJs and Firestore Setup

Recently, I have been incorporating Firebase into my NextJs project. I've set up a file called initFirebase.tsx for the server-side implementation. import * as Sentry from '@sentry/nextjs'; import * as admin from 'firebase-admin'; ...

javascriptfirebasegoogle-cloud-firestorenext.jsfirebase-admin

Exploring the principles of object-oriented design within the context of Node

I am facing challenges with the asynchronous flow of Node.js. Let's assume we have the following class: function myClass() { var property = 'something'; var hasConnected = false; this.connect = function(params) { // Logic to conn ...

javascriptperformanceoopnode.jsmodularity

Solving templateUrl resolution of directives in Angular with RequireJS

Currently, I am using AngularJS and RequireJS in my single-page application (SPA). To organize imports efficiently, I rely on RequireJS. With RequireJS, I can utilize features like baseUrl to resolve import paths seamlessly. Now, I wish to apply the same r ...

javascriptangularjsrequirejsangular-directive

Unpredictable preset inline styles for HTML input elements

While developing a full-stack MERN application, I encountered an unusual issue when inspecting my React UI in Chrome DevTools. If any of these dependencies are playing a role, below are the ones installed that might be contributing to this problem: Tail ...

javascriptreactjsmaterial-uitailwind-css

What is the process for dynamically inserting a new object into an array of data objects in Vue.js?

I am a beginner with vue.js and currently working on a form. I have an add button in my form, so when the user clicks on it, the same form field will be added to the form. Users can add as many times as they want. Here is my initial data: data () { ret ...

javascriptvue.jsvuejs2

The Array Find() method keeps returning 'undefined' when trying to search for data based on URL parameters

Is there a way to display data from an array based on a specific condition? I have been attempting to do this by checking if the requested id matches any of the ids in the data array. Unfortunately, whenever I run the following code snippet, I always end u ...

javascriptjquerynode.jsreactjsexpress

Attempting to modify the information within the #content division of a webpage through the activation of a linked image within a jquery slideshow

I'm completely stuck on this one, even though I'm relatively new to jquery. My goal is to design a webpage where there is a slideshow of products at the top, and when a user clicks on one of the products, it should update the main #content div w ...

javascriptjquery

The dimension of HTML on an IOS web application

After successfully designing a web app that works well on desktop browsers and iPad Safari, I encountered an issue when trying to install it as a hybrid app using cordova 3.3.0. The problem arises with the height not displaying properly. Despite including ...

ioshtmlcsscordova

Unraveling the Enigma of AJAX in Ruby

Greetings, experienced ones! Pardon my novice inquiry. I am currently endeavoring to associate a checkbox click in a "projects" display with a Javascript function that manipulates the data and subsequently transmits it via AJAX to the "complete" action of ...

ruby-on-railsajaxbindingcontrollerunobtrusive-javascript

Having issues as a Node.js novice with error messages

Here is the code I have for a basic node.js application: var http = require('http'); var fs = require('fs'); var path = require('path'); var url = require('url'); var port = process.env.port || 1337; http.createSer ...

javascriptnode.js

Is there a specific method that can be implemented in Node.js to compare two strings and identify the common words or letters?

Looking for a solution: var str1="CodingIsFun"; var str2="ProgrammingRocks"; Is there any function that can provide a true value or flag in this case? ...

javascriptnode.jsstring

My navigation bar's CSS code falls short of extending across the full width of my screen, leaving a gap of approximately 10 pixels before reaching the edges

Can someone help me figure out what went wrong? I've been trying to remove the margins but it's not working. The background colors of other elements seem to be seeping into this empty space. Any thoughts or suggestions would be greatly appreciate ...

htmlcss

Issue: Anticipated the primary reducer to be a function, but was presented with: 'undefined' in Vanilla JS with Redux

Exploring the world of Redux, I decided to try out some code from a tutorial on YouTube. Building a simple Vanilla JS App, I integrated Redux into it. However, upon running the app in the terminal, an error message popped up saying: "Error: Expected the ro ...

javascriptnode.jsredux

Encasing newly inserted child components within my designated slot

If I have a component with a single slot and instead of simply rendering all its children, I want to wrap each element individually, the following approach can be taken: Vue.component('MyElement', { render: function(createElement){ for (l ...

javascriptvue.jsvuejs2vue-render-function

Creating a unique look for unordered list items in a dropdown navigation

I'm currently working on creating a drop-down menu using nested unordered lists. The functionality of the menu is all set, but I'm running into some styling issues. The main link that triggers the drop-down should have a blue background with whit ...

htmlcssdrop-down-menu

Construct a string by combining the elements of a multi-dimensional array of children, organized into grouped

My task involves manipulating a complex, deeply nested array of nodes to create a specific query string structure. The desired format for the query string is as follows: (FULL_NAME="x" AND NOT(AGE="30" OR AGE="40" AND (ADDRESS ...

javascriptjsonangulartypescriptmultidimensional-array

Having trouble connecting the controller variable in AngularJS to the HTML page

I'm struggling with a simple query that doesn't seem to be working for me. When making an Ajax call and retrieving data from the backend, everything seems to be in order. Here's the code snippet: $.ajax({ type: "GET", url: service ...

javascriptjqueryangularjsajaxdata-binding

What is the process of querying both a collection and a subcollection in Firebase using AngularFire?

I have a structure in my firebase database that looks like this: /profiles/{uid}/displayName /email /otherAttribues /roles/{roleName}/someAttribute /someOtherAttribute The reason ...

javascriptangularfirebasegoogle-cloud-firestoreangularfire2

Issue with Ajax/Json: "An object of type triggers a circular reference error when attempting to retrieve a list."

Recently, I encountered an issue with my server-side method that is triggered through JSON/Ajax. The method itself functions flawlessly and sends back a list as expected. However, I seem to have made an error in my JavaScript code, leading to the following ...

javascriptjqueryajaxjson

Organize JSON data based on the timestamp

What is the most effective method for sorting them by timestamp using jquery or plain JavaScript? [{"userName":"sdfs","conversation":"jlkdsjflsf","timestamp":"2013-10-29T15:30:14.840Z"},{"userName":"sdfs","conversation":"\ndslfkjdslkfds","timestamp" ...

javascriptjqueryjson