Git Product home page Git Product logo

Comments (8)

Obiwan-Kennedy avatar Obiwan-Kennedy commented on June 8, 2024

OK ! If my code is not wrong, it seems to be an issue, not a jQuery version problem.
I have temporarily replaced my jQuery file with the lastest version. Same result, also encountered with the confirm dialog.

from alertify.js.

dparlevliet avatar dparlevliet commented on June 8, 2024

Alertify doesn't rely on jQuery.

_answer will always be undefined in this code. _answer will be the result of whatever is returned from your prompt function.

window.prompt = function() { ... }

Which, in your case is nothing. Hence, undefined. I do not believe you can use alertify for the functionality that you are looking for in this instance because the very nature of JavaScript is non-blocking. However, Since you're using jQuery I recommend (actually I recommend other things, but this will do) using a bind which will achieve something close to it.

<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="/js/plugins/alertify/themes/alertify.css">
  </head>
  <body>
    <script type="text/javascript" src="/js/plugins/jquery.min.js"></script>
    <script type="text/javascript" src="/js/plugins/alertify/lib/alertify.js"></script>
    <script type="text/javascript">
      var _oldprompt = window.prompt;
      window.prompt = function() {
        var _message ;
        var _position ;

        _message = arguments[0] ;
        alertify.prompt(_message, function(e, str) {
          $(document).trigger('prompt_callback', (e) ? str : null);
        });
      };
      prompt("What's your favorite color ?");
      $(document).one('prompt_callback', function(e, answer) {
        console.log(answer);
        prompt("Really, you like "+answer+"?");
        $(document).one('prompt_callback', function(e, answer) {
          alertify.log('OK! Werido.');
        });
      });
    </script>
  </body>
</html>

Note: the use of one() and not on(), this will help ensure your binds don't overlap.

Example for keeping yourself inside an object.
<script type="text/javascript">
  var _oldprompt = window.prompt;
  window.prompt = function() {
    var _message ;
    var _position ;

    _message = arguments[0] ;
    alertify.prompt(_message, function(e, str) {
      $(document).trigger('prompt_callback', (e) ? str : null);
    });
  };
  object = {
    initialize: function() {
      prompt("What's your favorite color ?");
      $(document).one('prompt_callback', this, this.callback);
    },
    callback: function(e, answer) {
      self = e.data;
      console.log(e, self, answer);
      prompt("Really, you like "+answer+"?");
      $(document).one('prompt_callback', self, self.callback2);
    },
    callback2: function(e, answer) {
      alertify.log('OK! Weirdo.');
    }
  }
  object.initialize();
</script>

from alertify.js.

fabien-d avatar fabien-d commented on June 8, 2024

@dparlevliet gave you good advice. I haven't tested the code, but it makes sense. For me, I would have asked why you wanted to do it this way? The only 2 things I can think of:

  1. You don't like writing alertify. everytime, or you wish to replace all existing native dialogs without changing any of the code base.
  2. You like that the native dialogs return a value
alert(...)   // returns undefined
confirm(...) // returns true/false
prompt(...)  // returns input value/null

Both of which are very hard to deal with.

because the very nature of JavaScript is non-blocking

This is it. A user can't interact with a piece of UI while the script is executing, so if a user has to interact with UI before the script finishes, and the script has to finish before the user can interact with the UI... the browser would hang.

This is why alertify is using callbacks. It ensures that the script is only executed after the interaction has been made, but it doesn't block the execution of the rest of the code.

I would consider changing the implementation and adding a finally function as a parameter. I'm not sure if it adds too much value, but could be worth exploring.

alertify.alert("string", fnYes, fnFinally);
alertify.confirm("string", fnYes, fnNo, fnFinally);
alertify.prompt("string", fnYes, fnNo, fnFinally);

Above is very rough, but the fnFinally method would be called after the fnYes or fnNo to continue with your next code block.

from alertify.js.

Obiwan-Kennedy avatar Obiwan-Kennedy commented on June 8, 2024

Hey guys,

Thanks for your answers.

fabien-d, you got it ! (« You don't like writing alertify. everytime, or you wish to replace all existing native dialogs without changing any of the code base »)

dparlevliet, thanks for your advice. I'll try it, but first I need to understand it in details !
So, I'll dive into it immediately. Hope I'll be able to return to surface and breathe rapidly. ;-)

Obiwan

from alertify.js.

pavanvusirika avatar pavanvusirika commented on June 8, 2024

It would be very helpful if the prompt dialog is blocking by default.The problem is we can't replace the basic java script dialogs. If we wanted to do we need to write extra code like above every where, which is cumbersome.We were going to replace every prompt with alertify.js but because of this problem we dropped.Any way thanks.

from alertify.js.

dparlevliet avatar dparlevliet commented on June 8, 2024

It's not possible. JavaScript is non-blocking by design. Also you could extend the code above to pass a callback, which would greatly minimize the amount of code you would have to change in your project.

Maybe some more investigation is necessary before passing up on it completely.

from alertify.js.

fabien-d avatar fabien-d commented on June 8, 2024

As @dparlevliet mentioned, JavaScript is non-blocking by design. The idea that alertify. can simply be thrown in front of native dialog and everything just works is flawed.

I also get that it would be nice if it could, but it's just not possible. It's just a matter of separating the code a little bit.

Step 1: Current code

// using native dialogs
function init () {
    var answer = prompt("question");
    // do something with answer
}

Step 2: Separate the dialog from the rest of the code

// change to
function init () {
    var answer = prompt("question");
    handleAnswer(answer);
}

function handleAnswer (answer) {
    // do something with answer
}

Step 3: using alertify

// alertify 0.3.8
function init () {
    alertify.prompt("question", function (e, answer) {
        if (e) {
            handleAnswer(answer);
        }
    });
}

function handleAnswer (answer) {
    // do something with answer
}
// alertify 0.4.0rc1
function init () {
    Alertify.dialog.prompt("question", function (answer) {
        handleAnswer(answer);
    });
}

function handleAnswer (answer) {
    // do something with answer
}

from alertify.js.

dparlevliet avatar dparlevliet commented on June 8, 2024

Just to follow up on this for anyone else that might stumble across it and want to achieve the same thing. If you're using underscore with something like Backbone and you want to be able to get back inside your object to do more events, this is an example of how you can achieve this.

window.confirm = function (message, callback) {
  alertify.confirm(message, callback)
}

var myobj = {
  method: function() {
     confirm('Are you sure?', _.bind(function(choice) {
        if (choice)
          this.follow_up_method();
      }, this));
  },
  follow_up_method: function(e) {

  }
};

from alertify.js.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.