The Alertify dialog vanished without being able to confirm

While working on some code, I encountered a specific issue:

alertify.dialog("confirm").set(
{
    'labels':
    {
        ok: 'Personal',
        cancel: 'Share'
    },
    'message': 'Select target:',
    'onok': function()
    {
        alertify.confirm($("#dir_select_user").get(0), function()
        {
            var i = $("#dir_select_user .dir_selector").val();
            t.find(".move_des").val(i);
            t.find(".move_verify").val("1");
            t.submit();
        }).set('labels',
        {
            ok: alertify.defaults.glossary.ok,
            cancel: alertify.defaults.glossary.cancel
        });
    },
    'oncancel': function()
    {
        alertify.confirm($("#dir_select_share").get(0), function()
        {
            var i = $("#dir_select_share .dir_selector").val();
            t.find(".move_des").val(i);
            t.find(".move_verify").val("1");
            t.submit();
        }).set('labels',
        {
            ok: alertify.defaults.glossary.ok,
            cancel: alertify.defaults.glossary.cancel
        });
    }
})   }).show();

I am utilizing the alertifyjs library available at (not from ).

If you test this code snippet, you'll notice that the 'onok' and 'oncancel' dialogs quickly vanish upon selecting either 'personal' or 'share'.

What could be causing this behavior? Any suggestions on how to resolve it?

Answer №1

The issue you are facing stems from attempting to display the same dialog while it is in the process of closing. AlertifyJS dialogs by default are singletons, meaning there can only be one instance at a time.

There are two possible solutions:

  1. Wait to show the second confirmation until after the first confirmation has completely closed.

    alertify.confirm("confirm ? ", 
        function onOk() {
            // Wait until the first confirm is fully closed
            setTimeout(function () {
                alertify.confirm("confirm another time ?");
            }, 100);
        },
        function onCancel() {
            // If not delayed, this will not be displayed
            alertify.confirm("this will not be shown!");
        }
    );
    
  2. Create your own transient (multi-instance) confirm dialog by extending the existing one.

    // Transient (multi-instance)
    alertify.dialog('myConfirm', function factory(){ return {};},true,'confirm');
    alertify.myConfirm("confirm ? ", function(){
        alertify.myConfirm("confirm another time ?");
    });
    

    Note: Exercise caution with this method as each call to a transient dialog will generate a new instance. You may want to store references to launched instances for reusability purposes!

Check out the demo here.

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

What is the process by which React loads and runs JSX content?

What is the method used to identify and handle JSX code? <script src="src/main.js" type="text/babel"></script> ...

Ajax request returns a 500 error, yet the request successfully executes

I have set up an API controller to manage an ajax request. Each time the Ajax request is sent from the script below, I encounter a 500 error: POST http://localhost:58463/api/Reservations 500 (Internal Server Error) jquery-2.1.0.min.js:4 l.cors.a.crossDomai ...

What is the best way to retrieve information from a json file using axios in a React project?

I'm having trouble retrieving JSON data. { ID string `json:"id"` Amount int `json:"amount"` Month string `json:"month"` PayFailed bool `json:"pay_failed"` } I’ve written the foll ...

How can we use Mongoose .find to search with an array stored in req.params and respond with an array containing each value along with its

It would be great if a user could input multiple tags in a search field, and have them separated client-side (before making the .get call) to send over ajax with each keypress. While testing the API with Postman on the server-side, if the .get method retu ...

Adjust the background of the page at regular intervals

I currently have: <script type='text/javascript'> var imageID=0; function changeimage(every_seconds){ //change the image if(!imageID){ document.getByTagName("body").src="icwXI.jpg"; imageID++; } else{if(imageID==1){ document.ge ...

Error when sending Angular 4 GET request with multiple Headers results in a 400 bad request code

I've been attempting to perform a POST request with headers in order to receive a response. The Angular code snippet I'm currently using for this request is shown below: const headers = new HttpHeaders({ 'Content-Type': 't ...

JavaScript queries in Selenium WebDriver

Lately, I have been using the selenium webdriver (nodejs module) along with mocha for writing automation tests, and encountered a few challenges along the way. Issue with Scrolling driver.findElement() seems to return false as it is unable to find the e ...

Distributing JWT to the recipient using Express

Allow me to provide you with an overview of my application, which is quite straightforward. The main concept revolves around a user inputting their accountname and password into an html form on the /Login page like so: <form action="/Login" m ...

Having trouble transferring data from Flask to JavaScript as JSON when using a separate .js file

In my templates/index.html file, I have the following code: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style> </style> </head> & ...

Steps for adding information to an AngularJS scope

I am facing an issue with setting the data inside the scope once it becomes active. On my HTML page, I have a show/hide menu that displays data when a button is clicked. I need to store this data within the scope correctly. Please advise on any corrections ...

How to stop the previous page from reloading with Express.js routing?

Just starting out with express and web development in general, I have a question regarding routing. Currently, I am working on a web app using Firebase with pure JS and implementing routing on Firebase cloud functions. The routing logic is outlined below: ...

Creating a multiline textarea with ellipsis using ReactJS

Looking to create a component with a multiline textfield that displays ellipsis (...) for text overflow beyond 2 lines. How can I achieve this through CSS only without modifying the actual stored text? Utilizing the React component found at: link Appreci ...

Prevent Xdebug from processing multiple requests

One recurring issue I encounter in my app is calling an API endpoint every 60 seconds. However, when I attempt to debug using Xdebug, stepping through the controller associated with that endpoint often takes longer than a minute. This results in another re ...

What could be causing the issue with res.send not functioning in node js?

I am currently working with node for the backend and angular for the frontend. My issue lies in checking the existence of a file in nodejs and passing the response to angular. Despite my efforts, this process is not functioning correctly. As a novice, I ha ...

The data display in MUI-Datatable is experiencing an issue where it is unable to read properties of undefined, specifically when trying to split the data

Whenever I include data within the MuiDatatable, it triggers this error: Cannot read properties of undefined (reading 'split') Is there a solution to this problem so that the data can be properly displayed? To demonstrate the issue, I have se ...

enable jQuery timer to persist even after page refresh

code: <div class="readTiming"> <time>00:00:00</time><br/> </div> <input type="hidden" name="readTime" id="readTime"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script&g ...

Making a switch from one image to another - JavaScript

I need a solution to swap out an image that is used in multiple locations on a webpage. Consider this sample HTML page: <html> <head> </head> <body> <img id="1" src="example.com/img/1889.png"> <d ...

Having trouble accessing the dashboard after uploading a document to Firestore

I am currently working on a project where I need to upload an audio file to Firebase storage and also add document data related to the audio file in Firestore database. The process involves recording the audio, uploading it to Firebase storage, submitting ...

Is there a way to determine the path of the fetch function within a PHP file?

I am using a JavaScript function to retrieve data from the backend server async getAllExpensesByUser() { let response = await fetch("router.php/getAll"); return response.json(); } My question is, how can I retrieve the path "/getAll ...

Angular2's $compile directive functions similarly to AngularJS 1's $compile directive

I am currently in the process of migrating my project from Angular 1 to Angular 2 and I am in need of a compile directive. However, I am struggling to rewrite it to achieve the same functionality as before. app.directive("compile", compile); compile.$inje ...