JavaScript function that waits for user input before returning

[Dormilich]

But the problem was that (see comment):

//-------------------------------------------------------------------------------------
// This was called before the button was clicked
        return Frinny.confirmed;
//-------------------------------------------------------------------------------------

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]

This "MethodThatDoes Stuff" 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 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);

The CheckBeforeProc essing() 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.....

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

var chainExec = function()
{
    // definition of [I]form[/I]
    [I]form[/I].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]

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);

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

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

var chainExec = function()
{
    // definition of [I]form[/I]
    [I]form[/I].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"/>

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]

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

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]

The event stack??

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)

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....

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]

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

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.

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

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

[Dormilich]

Did you know that you can't create your own custom events without using an existing event?

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_ILLEG AL_VALUE) [nsIDOMEventTarg et.dispatchEven t]"
nsresult: "0x80070057 (NS_ERROR_ILLEG AL_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 :)