JavaScript function that waits for user input before returning

[Frinavale]

Call me crazy because I'm basically trying to re-invent the wheel here but I learn from doing things the hard way....and the sales guys want the site to look consistant.

I'm attempting to create like the JavaScript Confirm....

I already have a control that asks the user to confirm what they are doing.

It's a little complicated because there's a bunch of different aspects to the control. I guess the important part is that it was originally designed to be displayed and ask confirmation before continuing. The response that the user selects is then posted back to the web server (or may just close client side if configured to prevent postback).

Anyways, I'd like to modify this control so that it displays, waits for user input, and returns the value the user chose via JavaScript (without posting back to the server).

I have been attempting to modify the JavaScript function used to display the control so that it waits for user input and returns the value that the user selected.

The problem is that I'm not sure how to "wait for user input".

Any information, or even keywords to use in a google search, on this topic would be greatly appreciated.

Thanks again,

-Frinny

[Dormilich]

hm, recently (yesterday or so) someone posted here a link to a "custom alert function" (i.e. overwriting the window.alert method) maybe you're interested?

on the other hand, "waiting for input" seems to me like just another event handler (onclick - button, onchange/onselect - dropdown, etc.)

[Frinavale]

I'll look for that other thread...

Basically, yeah it's another event....sort of?

Right now I'm applying the onclick event for a button to call the JavaScript that displays the "confirm" control. The button would never submit to the server, the "confirm" control would.

Now I'd like to be able to create a function that returns the user's selection.
So instead of just calling the JavaScript function in the onclick event and not submitting, I'd like to be able to submit according to the user's selection:

<input type="mybutton" onclick="return myFunctionThatWaitsForUserInput();" value="some button" />

Hopefully the other thread can help me get an idea of how to do this...I'm not great with JavaScript (just know the basics to get me by)...events are something that I have very basic knowledge of.

Thanks

-Frinny

[Dormilich]

you're not done with just one event. you need one to bring up the confirm dialogue and another who submits the input from the confirm, doing with it what you like. a return doesn't seem sensible to me, maybe just feeding the next processing function is better? you could also store the user input in an object and access that later.

maybe I can convince you to use EventListeners, too...

PS: what is <input type="mybutton"> supposed to be for a type?

[Frinavale]

Hehe, it's supposed to be a Button with an ID = "myButton"
You got my point though right?

I'm actually not at all interested in using the existing JavaScript confirm.

Looking back at what I posted yesterday I realise that I have not been overly clear on what I mean by "custom confirm control".

My custom confirm control is made up of a bunch of <div>s and buttons and labels and stuff. It's draggable and has a close button in the top corner. It let's me create messages on the server which I can then display in the client's browser.

I don't know the term for the techniques I'm using (and maybe there's no term at all). I needed a way to be able to have the server communicate with the user without printing values into the "real estate" area (the main content) of the page. Instead it's printed into a...um let's call it a <div> that has an CSS absolute position (so that it floats on top of the "real estate" area). My messages are displayed within that <div> and the user is able to select "yes", "no", or "cancel/other" or even "close".

It's pretty cool and I'd love to show it off (it's got rounded corners and a title bar and everything) but I can't.

So, whenever I was talking about using a "confirm" control I was referring to my custom control made of a bunch of HTML. I guess using the double quotes around the word confirm didn't help with my clarification at all....

Anyway, I'm going to do some research into event listeners to see if they can help me with my function that "waits for user input".

Thanks for your help

-Frinny

[Dormilich]

@Frinavale
sounds a bit like AJAX, though the communication there is reversed, the client requests the server (but you can use that by regularly requesting that return an answer if something new is on the server, like a news ticker for instance)

I really like to see it (even though it's not perfect) - looks like an interesting project anyways.

@Frinavale
MDC - Event Listener

[Frinavale]

@Dormilich
The control can be used in conjunction with Ajax calls to the server.
This is one of the cool things about it. When an asynchronous call to the server happens and validation occurs or some sort of confirmation is required, this control can be used by the server to display a response to the user... it is also used to accept input from the user to relay that back to the server.


@Dormilich
Oh it is perfect just the way it is ;)
It just needs this modification to be "more prefect".

@Dormilich
This is but a very tiny but important part of the project....It's been released along with my web application for some time now.

Now it's time for it to grow as the new features require.

[Frinavale]

I can't see how EventListeners are going to help me.

Is there a way to Wait for an event to occur in JavaScript?
I'm not fond of the idea of looping until something occurs...I can see this causing problems and it's just ugly.

[Dormilich]

@Frinavale
EDIT: you don't need to do anything else than registering your function, everything else is done by the system.

let's have a look at an example:

you have somewhere an element

<a id="example">link</a>

to this element you can attach Event Listeners (say, on page load)

var ref = document.getElementById("example");
ref.addEventListener("click", myFuncOnClick, false); (1)
ref.addEventListener("mousover", myFuncOnMouseOver, false); (2)

event (1) fires myFuncOnClick() when the user clicks on this link (no matter when)
event (2) fires myFuncOnMouseOver() when the mouse is moved over the link (no matter how often)

so speaking boldly, any registered event waits to occur without having you to worry about it. just tell the handler what function to call when the event happens.

[Frinavale]

So...

A button is clicked and my function is called because the EventListener catches the onclick event. The button's onclick event is handled and that's that. ([edit] apparently that's Not That [/edit])

Now another button is clicked in my custom confirm control.
Another event is fired....which will be caught by another EventListener.

Now I have to either have to somehow raise the first button click event, or somehow submit the page to the server and indicate that it originated from the original button click instead of the second button click.

[Dormilich]

1. right

2. right

3. hää? (engl.: ???) it depends on what the first two handlers trigger... you can arrange matters so that event 1 sets a special property which event 2 checks before submitting....

maybe it's time to use some of your code, because it's getting complicated for me to stay on the right track. explaining with actual code is better because Javascript offers oh so many ways to do such a task.

[Frinavale]

@Dormilich
Could you elaborate on this?

@Dormilich
In the following I am not using my custom control.
I'm using a regular JavaScript confirm:

function CheckBeforeProcessing(){
    if(Check('someControlsID')==true)
    {
        if(confirm('The check suggests that I should prompt you before continuing. Do you want to proceed?'))
        {
            SomeMethodThatDoesStuff();
            return true;
        }
        else
        {
            return false;
        }
    } 
    else 
    {
        SomeOtherMethodThatDoesStuff();
        return true;
    }
}

Now instead of using the:

if (confirm('... Do you want to proceed?'))

I want to call my own function. It would display the custom confirm control and wait for the user's input. It would then return true or false based on the user's input. Like the confirm control...it waits for user input before returning to the function.

So far, the function displays the custom confirm control...but I still lack the knowledge of how to use JavaScript events to proceed.

[Dormilich]

ok, that's something I can imagine.

function CheckBeforeProcessing()
{
    if (Check('someControlsID') == true)
    {
        // this brings up your confirm control
        // and adds the event listeners
        showConfirm();
 
        // a global object, where the confirm status is saved
        return Frinny.confirmed;
    } 
    else 
    {
        SomeOtherMethodThatDoesStuff();
        return true;
    }
}

let's assume you have 2 buttons (for the sake of simplicity) in your confirm dialogue:

<input type="button" id="yes" value="yes">
<input type="button" id="no" value="no">

showConfirm has to do 2 things:

1. bring up your control
2. register the necessary event handlers

function showConfirm()
{
    /* your code for the confirm dialogue */
 
    /* code for event handling */
// get the confirm button
    var btn_yes = document.getElementById("yes");
    var btn_no  = document.getElementById("no");
// register events
    btn_yes.addEventListener("click", SomeMethodThatDoesStuff, false);
    btn_yes.addEventListener("click", closeConfirmDialogue, false);
    btn_no.addEventListener("click", SomeMethodThatDoesStuffIfUserDenies, false);
    btn_no.addEventListener("click", closeConfirmDialogue, false);
}
 
// the object holding the confirm status
// defaults to false
Frinny = { confirmed: false };
 
// somewhere in SomeMethodThatDoesStuff()
{
    /* code */
    Frinny.confirmed = true;
    /* more code */
}

[Frinavale]

I swear I tried something similar before...although I didn't use an Object to store my value, I simply used a hidden field.

But the problem was that (see comment):

function CheckBeforeProcessing()
{
    if (Check('someControlsID') == true)
    {
        // this brings up your confirm control
        // and adds the event listeners
        showConfirm();
 
        // a global object, where the confirm status is saved
//-------------------------------------------------------------------------------------
// This was called before the button was clicked
        return Frinny.confirmed;
//-------------------------------------------------------------------------------------
    } 
    else 
    {
        SomeOtherMethodThatDoesStuff();
        return true;
    }
}

[Frinavale]

@Dormilich
This "MethodThatDoesStuff" is not linked with my custom confirm control.
It's used by other controls too...

I can't modify this to be dependent on my confirm control.
That's why I was using the CheckBeforeProcessing() method.
The CheckBeforeProcessing() method is called during a button click event:

<input id="someButton" type="submit" style="width: 100px;" onclick="return CheckBeforeProcessing();" value="Do Something" name="someButton"/>

I just want to prevent posting back to the server if the user does not confirm.....
(well...and execute SomeOtherMethodThatDoesStuff() if the do not confirm)

[Dormilich]

@Frinavale
well, I noticed that too, but at that time I had trouble connecting to bytes.

I think the best is to drop the return and let the event take over.

//instead of
if (checkBeforeProcessing())
{
    executeCommand();
}
// do
button_yes.addEventListener("click", executeCommand, false);

[Frinavale]

Urg, that's what I already have.

Fine, I'll place Multiple custom confirms on the page for each control that "might" require a confirmation. Do away with All the page's button click events and just depend on the custom confirm events instead.

I'm not happy with this though because it's going to use a lot of resources.

My custom control is not small...it has a lot of stuff attached to it.

I was really hoping to have just 1 custom confirm control on the page which would just act like a JavaScript confirm.

[Frinavale]

:( It's going to be way too big.

There are too many controls that would require the same confirmation before continuing.

There has to be a better way to do this!

[Dormilich]

@Frinavale
that doesn't matter. just make a function for that and add it to the event stack.

var setConfirm = function() 
{
    Frinny.confirmed = true
}
btn_yes.addEventListener("click", setConfirm, false);

@Frinavale
then its probably easier to submit the form only via Javascript.
like

var chainExec = function()
{
    // definition of form
    form.submit();
}
btn_yes.addEventListener("click", chainExec, false);
 
// prevent form submission without confirming first
<input id="someButton" type="submit" style="width: 100px;" onclick="return false" value="Do Something" name="someButton"/>

[Frinavale]

@Dormilich
The event stack??
I'm still in the midst of reading up on JavaScript Events


@Dormilich
I thought about this too, but there are two problems with this:
1) I'm developing an ASP.NET application and other junk is added to validate that the events that happen in the page originate from a control on the page. It is unlikely that the page will validate and the user will be directed to a generic "an error occurred" page.

2) If/when the page is submitted back to the server I wont be able to tell what originally caused the post back to occur....

[Dormilich]

@Frinavale
well, if the confirmation dialogue is only called before form submission, all you have to do is tell the confirm which form it should submit (you could use "this" for that or again the global Frinny object which knows the form to submit)

<form action="..." id="ex1">
// form content
    <input ... onclick="confirm(); return false;"> // in this case the child of <form>
</form>
 
function confirm()
{
    // set the form id
    Frinny.formID = this.parentNode.id;
    showConfirm();
}
function submitForm()
{
    document.getElementbyId(Frinny.formID).submit();
}
// in showConfirm()
btn_yes.addEventListener("click", submitForm, false);

[Dormilich]

@Frinavale
I don't know if that's the right name, but you can register more than one function for an event (that's why it was invented)

@Frinavale
1) I didn't know about that. you just need to add that other junk like before (however that is done...)

2) that's probably directly depending on 1)

is there a difference if you do form.submit() or a regular submit? my Javascript resource says it's the same.

[Frinavale]

>>HUGS<<
:D :) :) :D

Thanks Dormilich I think I know what I'm doing now!
Sorry about my slow learning...but I think I get it.

I'm going to create an JavaScript Object that represents my confirm control.
It's going to have a Confirm method.

This method will take 2 parameters: the control that is calling the confirm method, and the event that triggered the control to call the confirm method.

The confirm method will display the custom confirm control, listen for the yes or no (etc) button click events, and then return False to prevent a postback from occurring.

If the user confirms (clicks "yes") then the Object will set a property indicating so and trigger the event for the control that originally called the confirm method.

The control that originally called the confirm method will issue the confirm method again but since the user has already confirmed the method will not display the confirm control and will simply return true.

Now I just have to figure out how to implement this :)

[Dormilich]

I think your app is too complex for me to understand so easily.... well, I cross the fingers for you.

anyways, your plan does make sense (inbetween I had something alike in mind).

did you know that everything in Javascript is an object? (even strings, numbers and functions)

[Frinavale]

@Dormilich
I know you said this already but it just took me this long to figure out how to get what you said to work with my control.

I'm going to try and implement this tomorrow....at which time I'll probably be asking for help figuring out how to trigger the event of the original control from the method.

@Dormilich
Yeah :) It's pretty cool
Did you know that you can't create your own custom events without using an existing event?

[Dormilich]

@Frinavale
sounds sensible.... *g*

[Frinavale]

I'm almost ready to give up on this idea.
This is going to be very hard to implement.

The JavaScript is going to have to know things about the .NET control.
The only way to do this is through to implement an ASP.NET Ajax Server Control. I can barely understand simple JavaScript and to implement this would require extensive knowledge of Ajax and JavaScript along with knowledge about how to use the ASP.NET Ajax Framework (a library of JavaScripts).

Never mind that, but everything I've learned about ASP.NET Ajax controls is that they are "Server Controls".

I'll have to re-design my entire custom confirm control to be a Server Control instead of a User Control....I don't even know if I can use other Ajax Extenders within this so I may end up losing a lot of functionality.

Suddenly this small control is turning into a massive project.

[Frinavale]

So I never did give up on the problem....I've made some good progress in continuing with the development of this control.

I've got to the point where I need to re-issue the event that was issued on the original control.

This is what I've tried so far:

_raiseOriginalEvent: function(e) {
        var originalEvent = this.get_currentAssociatedControlEvent();
//        originalEvent.rawEvent.initMouseEvent(originalEvent.type, true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
 
        var originalControl = this.get_currentAssociatedControl();
        originalControl.dispatchEvent(originalEvent);
    },

However I keep getting the following exception:

[Exception... "Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIDOMEventTarget.dispatchEvent]"
nsresult: "0x80070057 (NS_ERROR_ILLEGAL_VALUE)" location: "
JS frame :: url....] ::
anonymous :: line 146" data: no]
[Break on this error] originalControl.dispatchEvent(originalEvent);

[Frinavale]

I solved the problem by creating a new event instead of using the original one:

_raiseOriginalEvent: function() {
        var reissuedOriginalEvent = document.createEvent('MouseEvents');
        reissuedOriginalEvent.initMouseEvent(originalEvent.type, true, true, document.defaultView,
                                             1, 0, 0, 0, 0, false, false, true, false, 0, null);
        var originalControl = originalEvent.target;
        originalControl.dispatchEvent(reissuedOriginalEvent);
}

I'm looking for a way to do this using the ASP.NET Ajax Libraries ... I haven't found one yet.

But right now, this JavaScript solution is working!

My custom confirm box displays when required and if the user clicks yes the original event is re-issued and allowed to continue. This new solution is going to save me a lot of resources both server and client side; it's cleaned up my .NET code tremendously because it attaches to multiple controls instead of a single control attaching itself to it; and the JavaScript aspect of it so cool! It still needs a lot of tweaking and testing but the hard part's done.

I've learned so much about the JavaScript language taking on this mini project and, for a change, I'm actually looking forward to my next Ajax/JavaScript enabled control :)

Thanks :)