Displaying an image or text briefly using javascript

Question

Displaying an image or text briefly using javascript

I am currently developing a web application, with the front-end being built in Angular and the back-end in Rails. Once users have completed filling out the application, they are required to click the "save" button to store the data.

Currently, when the user clicks the button, there is no visual feedback provided. I want to display text or an image saying "Data Saved" for 2 seconds after the button is clicked.

I would like to implement this feature, but I am unsure of where to begin. If anyone has experience with adding this functionality using Angular or JavaScript, please share your knowledge with me!

javascript angularjs

Answer 1

Answer №1

Although the information provided is limited, the following approach can be considered:

In JavaScript (ensure that $timeout and $scope are loaded as dependencies into the controller):

$scope.showImage = function() {
    $timeout(function() {
        $scope.isVisible = false;
    }, 2000);

    $scope.isVisible = true;
};

For HTML (IDs are not necessary, but included for clarity):

<div ng-show="isVisible" id="saveConfirmImg"></div>
<button ng-click="showImage()" id="saveButton"></button>

Answer 2

Although the information provided is limited, the following approach can be considered:

In JavaScript (ensure that $timeout and $scope are loaded as dependencies into the controller):

$scope.showImage = function() {
    $timeout(function() {
        $scope.isVisible = false;
    }, 2000);

    $scope.isVisible = true;
};

For HTML (IDs are not necessary, but included for clarity):

<div ng-show="isVisible" id="saveConfirmImg"></div>
<button ng-click="showImage()" id="saveButton"></button>

Answer 3

Answer №2

I'm sharing this much with you as there is no code visible:

<div ng-show="loading"></div>

$scope.loading = false;

$scope.onClick = function() {
    $scope.loading = true;
    saveData(data).then(function()) {
        $scope.loading = false;
    }
}

Answer 4

I'm sharing this much with you as there is no code visible:

<div ng-show="loading"></div>

$scope.loading = false;

$scope.onClick = function() {
    $scope.loading = true;
    saveData(data).then(function()) {
        $scope.loading = false;
    }
}

Displaying an image or text briefly using javascript

Answer №1

Answer №2

Similar questions

Clearly state the action of the form

How can I set the input tag to reset back to 1 when a certain event occurs?

Issue with menu display after clicking icon

Unable to utilize a variable from React Context for accessing the value within an object

Using javascript to color in cells of a grid of "pixels"

Encountering an issue... invariant.js:42 Error: A `string` value was received instead of a function for the `onClick` listener

What is the best way to use appendChild within an AJAX get function to manipulate the DOM

The color of the form button should switch when the user hovers over it with their mouse pointer

When the onClick event on one element triggers a change in another element within the

Oops! Looks like the maximum call stack size has been exceeded, resulting in a RangeError. Additionally, a warning from Vue has been triggered due to an error in the v-on handler related to

The scrolling action triggered by el.scrollIntoViewIfNeeded() goes way past the top boundary

The Express Generator is having trouble detecting the routes within the users file when using app.use('/login', users)

Alignment customization in Exceljs for richText cells

development of MapLayers with rails and javascript

Pulling a div from beneath numerous other divs

Tips on implementing smooth-scroll scrollLeft in Vue3 with JavaScript

Changing a button's value on click using PhoneGap

Transform a C# DateTime object into a JavaScript date format

Encountered a RunTime Error when attempting to Lazy Load a module

Deno-test encounters an undetermined AssertionError