[js] zelf events afvuren a la form.submit()

[Not Pingu]

Ik heb een webapplicatie (in ASP.NET gemaakt) die ik dmv. XmlHttpRequests wat aan het opbeefen ben. Het gaat om een registratiesysteem voor een hardloopwedstrijd.

Ik heb een inschrijfformulier, en zodra ik op de knop 'Inschrijven' druk dan wordt er een extern bestandje aangeroepen dat in de Querystring wat info over de deelnemer meekrijgt, en vervolgens controleert of de deelnemer niet in een verkeerde categorie zit, en eventuele errors output.
Mochten de gegevens idd niet kloppen, dan wordt er een confirm dialog weergegeven met de vraag of je alsnog wil submitten, ook al klopt het niet.

Normaal zou je zeggen, cancel de event als de confirm() false oplevert, maar het probleem met XmlHttpRequests is dat je het resultaat ervan moet laten afhandelen met een callbackfunctie die niet meer de controle heeft over het onclick event van de knop waaran hij verbonden is.
Ik moet dus altijd de event cancellen, en vervolgens in de callback functie dat weer ongedaan maken.

Ik kan dan wel document.forms[0].submit() doen, maar dat pikt ASP.NET niet want de serverside code achter de 'Inschrijven'-knop verwacht te zien dat die knop is ingedrukt (in de HTTP POST Request weetjewel), anders doet ie niks. Nu hoopte ik eigenlijk dat er een manier is om willekeurige events van willekeurige elementen te triggeren, net zoals je dat met form.submit() ook kan (hoewel dan niet de onsubmit event handler afgevuurd wordt).

Is er dus een manier om het onclick event van een knop te laten afgaan dmv. Javascript?

[ Voor 5% gewijzigd door Not Pingu op 19-08-2005 00:04 ]

[Verwijderd]

werkt gewoon de functie callen niet?

document.forms[0].elements['inschrijven'].onclick();

[André]

Er bestaat wel een fireEvent methode, alleen die is wel IE only

[crisp]

Je kan een XmlHTTPRequest ook synchroon uitvoeren
Verdere mogelijkheid om toch de name/value van de submitbutton mee te sturen (belachelijk dat ASP daar vanuit gaat; een submit mbv enter in bijvoorbeeld een zoekboxje stuurt in IE ook niet de name/value van de submitbutton mee) is door onsubmit een hidden tekstveld aan te maken met die name/value.
Buttons en anchors hebben in IE overigens ook gewoon een click() method...

[Not Pingu]

crisp schreef op vrijdag 19 augustus 2005 @ 10:58:
Je kan een XmlHTTPRequest ook synchroon uitvoeren

idd, daar dacht ik dus ook ineens aan toen ik in bed lag
gewoon een Interval aanmaken die net zolang loopt totdat de readystate == 4.

Verdere mogelijkheid om toch de name/value van de submitbutton mee te sturen (belachelijk dat ASP daar vanuit gaat; een submit mbv enter in bijvoorbeeld een zoekboxje stuurt in IE ook niet de name/value van de submitbutton mee) is door onsubmit een hidden tekstveld aan te maken met die name/value.

Hee, je hebt gelijk, het wordt idd niet meegestuurd. Vreemd dat dan wel de juiste serverside eventhandler wordt aangeroepen als ik in IE op enter druk. Misschien gaat ASP.NET dan uit van de event handler van de eerste knop op het form.

Vreemd is dan wel dat als ik zelf document.forms[0].submit() aanroep, de pagina wel opnieuw wordt geladen maar de serverside event handler achter de Inschrijven knop niet wordt aangeroepen.

Buttons en anchors hebben in IE overigens ook gewoon een click() method...

Ik heb geprobeerd (in IE):

code:

document.getElementbyId('btnInschrijven').click();

maar dat gaf geen sjoechem, vandaar ook dit topic.

[BtM909]

Gunp01nt schreef op vrijdag 19 augustus 2005 @ 12:24:
[...]

Ik heb geprobeerd (in IE):

code:

document.getElementbyId('btnInschrijven').click();

maar dat gaf geen sjoechem, vandaar ook dit topic.

Dan doe je toch echt wat verkeerd Geef eens wat code van de button

[Not Pingu]

de button:

HTML:

<input type="submit" name="inschrijven:btnInschrijven" value="Deelnemer inschrijven" id="inschrijven_btnInschrijven" tabindex="9" onclick="return CheckCategorie();" />

(het voorvoegsel 'inschrijven_' verwijst naar de user control (soort serverside include) waarop de button staat)

En de functies CheckCategorie en de callback ReportCategorie:

JavaScript:

    function CheckCategorie(e)
    {
        if(!formconfirm)
        {
            subcat = document.getElementById('inschrijven_ddlCategorie').value;
            geslacht = document.getElementById('inschrijven_lstGeslacht').value;
            startnr = document.getElementById('inschrijven_txtStartNummer').value;
            gebdat = document.getElementById('inschrijven_txtGeboorteDatum').value;
        
            if(subcat != '' && startnr != '')
            {       
                url = 'getdata.aspx?action=CheckCategorie&subcat='+subcat+'&geslacht='+geslacht+'&startnr='+startnr+'&gebdat='+gebdat;
                //document.getElementById('dump').value = url;
                ExecuteAsyncTextRequest(url, 'ReportCategorie');            
            }       
        
                        // hehe, niet op onderstaande code letten :P het event afvangen in FF wil nog niet echt lukken
            if(window.event)
            {
                event.cancelBubble = true;
            }
            if(!e){e = window.event;}
            e.returnValue = false;
            if(e.stopPropagation) e.stopPropagation();
            if(e.preventDefault) e.preventDefault();
            return false;
        }
    }
    
    function ReportCategorie(response)
    {
        //document.getElementById('dump').value += response;  <- temp debug code
        if(response != 'ok')
        {
            if(confirm('De ingevoerde gegevens komen niet overeen met de geselecteerde categorie. Wilt u deze deelnemer toch inschrijven?' + response))
            {
                formconfirm = true;
                document.getElementById('inschrijven_btnInschrijven').click();
            }
        }
        else
        {
            formconfirm = true;
            document.getElementById('inschrijven_btnInschrijven').click();
        }
    }

Ok, het lijkt nu in eerste instantie wel te werken, als je in de Confirm dialog op OK klikt. Het werkt echter niet als je eerst op Annuleren klikt, daarna weer op Inschrijven en dan op OK. In dat geval moet je alsnog op Inschrijven klikken en dan wordt het gesubmit zonder dialog (als gevolg van de boolean 'formconfirm')

[ Voor 12% gewijzigd door Not Pingu op 19-08-2005 14:37 ]

[maikel]

Gunp01nt schreef op vrijdag 19 augustus 2005 @ 14:34:
de button:

HTML:

<input type="submit" name="inschrijven:btnInschrijven" value="Deelnemer inschrijven" id="inschrijven_btnInschrijven" tabindex="9" onclick="return CheckCategorie();" />

(het voorvoegsel 'inschrijven_' verwijst naar de user control (soort serverside include) waarop de button staat)

Als die button in een UserControl zit, krijgt ie een ander ID en name. Zoals je hierboven ook al aangeeft bestaat de name uit <naam usercontrol>:<naam button>. Het ID wordt op een zelfde manier opgebouwd: <naam usercontrol>_<naam button>.
Je JavaScript met document.getElementById('btnInschrijven').click(); moet dus worden:
document.getElementById('inschrijven_btnInschrijven').click();

Overigens kun je dat scriptje dan het best in de codebehind opbouwen, dan kun je btnInschrijven.UniqueID gebruiken om het juiste ID te achterhalen. Dan werkt het scriptje ook nog wanneer je de naam/id van de usercontrol verandert.

[ Voor 9% gewijzigd door maikel op 19-08-2005 22:48 ]