1

I want to make custom confirm function.

so, I make a code like :

function confirm(msg){
  var obj = document.createElement("div");
  var body = document.createElement("div");
  body.innerHTML = msg;

  var foot = document.createElement("div");

  var ok = document.createElement("div");
  ok.innerHTML = "OK";

  var cancel = document.createElement("div");
  cancel.innerHTML = "Cancel";

  foot.appendChild(ok);
  foot.appendChild(cancel);
  obj.appendChild(body);
  obj.appendChild(foot);

  document.getElementsByTagName("body")[0].appendChild(obj);

  ok.onclick = function(){
    return true;
  }

  cancel.onclick = function(){
    return false;
  }
}

or

returnValue = -1;
ok.onclick = function(){
  returnValue = true;
}

canacel.onclick = function(){
  returnValue = false;
}

while(true){
  if(returnValue !== -1) break;
}

return returnValue;

If this custom confirm function must get 1 parameter like original confirm function.

How can make the custom confirm function?

Danny Beckett
  • 20,529
  • 24
  • 107
  • 134
WebEngine
  • 157
  • 2
  • 10
  • 2
    You can not do sleeps in JavaScript so it is impossible to replace the confirm and have it pause execution until the user selects something. You would need to use callbacks. – epascarello Mar 03 '13 at 06:17

3 Answers3

1

Personally, I would use a third-party dialog already written for this, write a jQuery plugin, or at least take a more object-oriented approach. As it stands, you are putting a confirm function in the global namespace (where a confirm function already exists).

Also note that you can't halt execution of the page and wait for a response like window.confirm can. See: How can I reproduce the "wait" functionality provided by JavaScript's confirm() function? (where the accepted answer is "you can't").

The available way of performing such a task is to use a callback:

function customConfirm(message, resultCallback){

    ok.onclick = function(){

      // note that you can pass whatever you want to the callback
      // you are not limited to one parameter.
      resultCallback(true);
    }

    cancel.onclick = function(){
       resultCallback(false);
    }
}

In the above example, resultCallback is a function defined to perform an action(s) in response to events in your confirmation box.

You could pass an object with both the message and the callback to achieve the single parameter goal, but I suspect the real goal is to replace window.confirm which (as stated) behaves differently.

{ message: "foo", callback: function bar(status){ alert(status); } }
Community
  • 1
  • 1
Tim M.
  • 53,671
  • 14
  • 120
  • 163
  • this custom confirm function must get 1 parameter – WebEngine Mar 03 '13 at 06:13
  • This custom confirm function must get 1 parameter, because It will be use CMS like wordpress or XpressEngine, other cms.. so, this custom confirm function must be able to use like original confirm function. – WebEngine Mar 03 '13 at 06:17
  • I see. So you are attempting to *replace* the default `window.confirm` function? – Tim M. Mar 03 '13 at 06:17
  • Yes, I try that.but I was failed – WebEngine Mar 03 '13 at 06:19
  • I don't believe there is any way to truly halt execution like `window.confirm` does and wait for a return value. Certainly, a busy loop (`while(true)`) will not accomplish your goal. – Tim M. Mar 03 '13 at 06:20
  • I make alert function already.. but, i can't make confirm.. ok, i just give up now; – WebEngine Mar 03 '13 at 06:32
1

You can't have your confirm function halt until a value is found, otherwise the whole page would freeze. What you need in this case is to provide a callback to execute once either of the buttons is clicked (if you can not pass it as argument for any reason, you'd have to use a global var, or maybe a queue):

var queue = [];
function confirm(msg){
  ...
  var callback = queue.shift();
  ok.onclick = function(){
    callback(true);
  }

  cancel.onclick = function(){
    callback(false);
  }
}

You use it this way:

queue.push(function(returnValue) {
    if ( returnValue ) {
       // Code for "yes"
    }
    else {
       // Code for "no"
    }
});
confirm("Are you sure?");
mgibsonbr
  • 21,755
  • 7
  • 70
  • 112
  • this custom confirm function must get 1 parameter – WebEngine Mar 03 '13 at 06:13
  • 1
    @user2128228 I modified my answer so you can call it with one argument, but now it requires a separate step to add the callback. If you want it to return the needed value, you're out of luck - there's no way to do that with JavaScript, since the page will lock until your code finishes executing (it won't even show your newly created DOM elements in the page until then). – mgibsonbr Mar 03 '13 at 06:19
1

like my case i used promise to solve the delete confirmation problem, here is the code

function deleteBook(id, elm) {
const container_alert = document.querySelector('.container-alert') 
 
alertMsg('Anda yakin ingin menghapus?').then(() => {
        // console.log('i love you');
        let index = books.findIndex(book => book.id == id);
        books.splice(index, 1)
        updateDataToStorage();
        elm.parentNode.parentNode.remove()
        
        container_alert.classList.add('hidden')
}).catch(() => {
    container_alert.classList.add('hidden')
})

}

and my alert function code is as follows

function alertMsg(msg) {
const container_alert = document.querySelector('.container-alert') 
const btn_yes = document.querySelector('.action-alert .yes')
const btn_cancel = document.querySelector('.action-alert .cancel')

container_alert.classList.remove('hidden')

return new Promise((resolve, reject) => {

    btn_yes.addEventListener('click', function(){
        resolve()  
    })

    btn_cancel.addEventListener('click', function(){
        reject()
    })
})

}

zaldi 1
  • 3
  • 1