Is it possible to keep a popup modal visible even after a user has logged in?

There is a piece of code that restricts users from viewing our "pricing popup" until they log in. However, once the user logs in, I want the pricing popup to reappear as if the login never occurred. Ideally, the user shouldn't have to click again to open the popup if it was previously open before logging in.

Unfortunately, PHP cannot be used due to limitations with the web app being utilized. It is essential for the solution to be JavaScript-based. My development environment is Microsoft Visual Studio 2015 and I believe the framework being used is MVC.

I've experimented with rearranging elements to check for syntax errors but to no avail. Additionally, attempting to use location.reload resulted in the same issue where the modal wouldn't display after the refresh.

The current code mandates that the user must log in to access the popup. The problem arises when the popup disappears after the user logs in.

function CheckEmail(e) {
var data = $('#signInForm').serializeArray();
var controller = (typeof CURRENT_CONTROLLER != undefined) ? CURRENT_CONTROLLER : "Home";
ShowHideLoader(true);
if (isValidEmail(data[1]["value"])) {
    $.ajax({
        url: '/../Account/FindByNameOrEmailAsync',
        type: 'POST',
        dataType: "json",
        data: JSON.stringify({ "usernameOrEmail": data[1]["value"] }),
        context: this,
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
            ShowHideLoader(false);
            //alert(data);
            if (data.status) {
                $("#emailCheck").hide();
                $("#enterPassword").fadeOut(500, function () {
                    $('#enterPassword').fadeIn(500);
                });
            } else {
                //$.get("Account/RegisterRedirect", { Email: $("#signin_email").val() });
                if (controller == "Business") {
                    $("#login-modal").modal("hide");
                    $("#signup-modal").modal('show');
                    SignupEmail.SetValue($("#signin_email").val());
                } else
                    window.location = data.returnUrl;
            }

            ShowHideLoader(false);
        },
        error: function () {
            alert("Error! Src: /Account/FindByNameOrEmailAsync");
            ShowHideLoader(false);
        }
    });
} else {
    $("#wrongEmail").fadeOut(500, function () {
        $('#wrongEmail').fadeIn(500);
    });

    $("#authInfo").hide();
    ShowHideLoader(false);
}

}

function ShowHideLoader(visible) {
if (visible)
    $(".signin-preloader").css("visibility", "visible");
else
    $(".signin-preloader").css("visibility","hidden");

}

function ShowHideSignUpLoader(visible) {
if (visible)
    $(".signup-preloader").css("visibility", "visible");
else
    $(".signup-preloader").css("visibility", "hidden");

}

function ValidateForm(data) {
if (data.res) {
    ...
}

...

//This part checks if the user is signed in. If not, signing in is required to access the popup.

var showPopup;

var showModalForSignIn = function (seePricing) {
$("#login-modal").modal("show");
$("#authInfo").hide();
$("#needSigninMessage").show();

showPopup = seePricing;

}

Answer №1

It seems like $("#pricingPopup") is only being utilized once in your code. Unfortunately, without the HTML context, it's difficult to determine exactly what's happening. There could be another class or ID on the pricing popup that conflicts with a different popup element. In situations like this, it's beneficial to create a codepen to visually demonstrate the issue.

Have you checked if the pricing popup remains in the DOM after logging in, or if the template is removed?

If the pricing popup is still present, you can simply display it again after logging in using .show(). If it is no longer present, investigate what causes it to be removed from the DOM.

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

Does clip-path jump at the top because of JavaScript offset?

When hovering on the box, a circle appears and moves based on JavaScript offset values. However, when the circle reaches the second paragraph element, it jumps to the top. I am looking to understand why this is happening and how to ensure smooth movement o ...

Tips for ensuring an element is visible in CUCUMBER JS?

Whenever I run my code, it keeps returning the error message: NoSuchElementError: no such element: Unable to locate element Even though I have set up a wait function, it does not seem to actually wait. The step fails immediately without waiting for the s ...

Is it possible to execute NodeApp in a command-line fashion?

NodeApp's NLContext has the capability to interpret JavaScript using evaluateScript. Additionally, it also supports argv and env: Current functionalities: process: .argv, .env, .exit(), .nextTick() How can NodeApp be executed in a command-like man ...

manipulate particle systems using Three.js

I am struggling to determine if my mouse is hovering over a particle in order to move it away using a particlesystem in threejs. Despite using a raycaster, I am not getting any hits. I also attempted to attach a hitbox to the particle, but unfortunately, ...

Creating a front-end button that triggers pdfcrowd's node.js API to generate PDFs is a simple and effective way to streamline the process

I recently integrated pdfcrowd into my MERN-stack app to allow users to download PDFs of the app pages. I followed the example provided in the pdfcrowd documentation and successfully generated a PDF file using Node APIs. var pdfcrowd = require("pdfcrowd") ...

Unable to Display "Hello World" in Vue.js

I am attempting to launch the Vuejs hello world project on a Cloud 9 development environment. Despite its simplicity, I am unable to determine why it is not rendering, even though there are no visible errors. What could be the issue here? <!DOCTYPE h ...

Retrieving text content using the span element with JavaScript

Is it possible to retrieve the text value "user detail - 205 users" from the span element without altering the code to add an id or class? Can JavaScript be used for this task? <span style="color: rgb(0, 189, 12);">"user detail - 205 ...

Utilizing JavaScript and its scope to include text within an HTML document

I am currently working on a program that receives input from the user twice, specifically a risk carrier and a sum (although it is just a placeholder for now), groups these two values together, and then repeats the contents in a loop. You can see the progr ...

Automatically assign various classes

Hey there, I've got this awesome jQuery code that's working perfectly: var styles = ["first", "second", "third", "fourth", "fifth"]; var index = 0; $("body").find("h3").each(function() { $(this).addClass(styles[index++]); if (index >= s ...

Troubleshooting: Issues with JS DOM createElement and appendChild functions

I'm currently working on a project to showcase information about various students on a website. In order to achieve this, I'm trying to generate dynamic profile cards and add them to the webpage. However, I seem to be struggling with the Document ...

Unable to retrieve WordPress terms via an ajax request unless logged in

I've encountered a perplexing issue. I have two HTML lists - one for regions and another for provinces. When a region is selected, an AJAX request is sent to WordPress to retrieve the list of provinces within that region. Strangely, the get_terms() fu ...

The Google Maps JavaScript API is failing to load

While constructing a website that utilizes the Google Maps JS API, I encountered an issue where the map remains blank without any errors appearing in the Google Chrome Console. HTML code: <div id="map-container-5" class="z-depth-1" style="height: 200 ...

Combining two JSON objects in JavaScript by matching key values and index positions

After numerous attempts using various methods, I am still unable to achieve the desired outcome. Even implementing nested ng-repeats in Angular to filter down to specific properties proved to be too resource-intensive. My objective is to retrieve the valu ...

Exploring the number of checked checkboxes within a dynamic list using Ionic 3 and Angular

I'm developing an application where I need to display a dynamic number of checkboxes and determine how many are checked before enabling a button. Some suggestions recommend using myCheckbox.isChecked() to check each checkbox individually, but since ...

Exploring the power of chaining collection methods and promises in Node.js HTTP requests

My goal is to extract data from a MongoDB database using the find() method, specifically retrieving documents that have a specified "room" value. From there, I aim to identify all unique values within the array of rooms, based on the key "variety". I initi ...

Guide on transferring files between Node.js/Express servers from receiving files at Server A to sending files to Server B

Currently, I'm tackling node.js express servers and I've hit a roadblock! Despite my efforts to scour the documentation and other resources, I can't seem to find the right solution. Here's what I need to accomplish: Receive 2-3 PDF ...

Comparing Chaining jQuery Functions with If Statements in Checking Check Box Values

I'm working with multiple checkboxes and trying to determine the overall value for them all. For example, if one checkbox is checked then the value should be true/selected. If none are checked, then it should be false/unchecked. The HTML code I am ...

Challenge with setting asynchronous default value in React Material UI Autocomplete

Utilizing the 'Material UI' Autocomplete component to show a dropdown in my form. Whenever the user wishes to edit an item, the dropdown should autofill with the corresponding value fetched from the database. Attempting to simulate this scenario ...

"Enhanced Web Interactions with JavaScript Animations

I've been diving into my JavaScript project lately. I'm currently focusing on creating some cool animations, particularly one that involves making a ball bounce up and down. My code seems to work flawlessly for the downward bounce, but I'm f ...

Ways to effectively conceal an HTML div element with CSS or JavaScript

Is there a way to hide the div element that is nested inside a bootstraps radio or checkbox container using jquery? I'm unable to upload an image, but here is a preview: http://prntscr.com/6wrk2m <style> .my-radio{ border: 1px solid #F0F; } &l ...