[JSF/JSP] Onbekende vorm submitten vanuit JS

[flowerp]

Ik heb een webcomponent gemaakt als een JSP taglib. Deze werkt opzich uitstekend. Belangrijk aspect van dit component is dat het een form renderd die na een bepaalde client-side actie gesubmit wordt.

Nu wilde ik dit component ook in een JSF omgeving kunnen gebruiken. Binnen deze omgeving zorgt de JSF view tag er dikwijls voor dat alle componenten al binnen een form vallen. Ik kan mijn JSP component hier in toevoegen door zelf geen form tags te renderen.

Echter, als ik dat die weet ik niet wat de naam van het form is die ik moet submitten vanuit mijn javascript. Iets als this.form.submit(); werkt niet vanuit JS.

Wat technisch wel werkt, maar heel lelijk is:

HTML:

<input type="button" value="bar" onclick="this.form.submit();" name="a" id="a" />

<script language="javascript" >
function test() {
    var obj = document.getElementByID('a');
    obj.click();
}
</script>

Als ik deze code vanuit mijn component op de pagina 'inject' kan ik dus het onbekende form submiten. Helaas komt die button dan wel zichtbaar op mijn pagina, wat ik niet wil.

Is er een betere/standaard manier om dit probleem op te lossen? Wellicht de DOM tree omhoog aflopen vanaf een hidden element tot aan het eerste form element wat je tegen komt?

[ Voor 6% gewijzigd door flowerp op 27-11-2005 12:57 . Reden: op verstuur ipv bekijk gedrukt. Topic title moet Form zijn ipv vorm :o ]

[crisp]

Als je een hidden element hebt kan je door dat element te benaderen ook het form bepalen:

HTML:

<input type="hidden" id="dummy">

JavaScript:

function test()
{
  var form = document.getElementById('dummy').form;
  form.submit();
}

(natuurlijk kan je dan dus ook een willekeurig bestaand veld van je eigen component nemen)

Verder, als er maar 1 formulier in je pagina staat, kan je ook gewoon dit doen:

JavaScript:

function test()
{
  document.forms[0].submit();
}

Ik weet uiteraard niet hoe je component er uit ziet en wat het doet, maar vanuit een form-element kan je natuurlijk ook gewoon weer referenties naar een JS functie doorgeven.
Stel dat je component bestaat uit een select waarbij je onchange wat acties uitvoert en daarna het formulier wilt submitten; dan kan je dus gewoon dit doen:

HTML:

<select name="foo" onchange="test(this)">

JavaScript:

function test(select)
{
  // doe iets met select

  // submit het formulier
  select.form.submit();
}

ergo, 3 zaken:
- elk formcontrol-element heeft een property 'form' die verwijst naar het formulier waar het element zich in bevind
- je kan vanuit een eventhandler altijd een referentie naar het element doorgeven aan een functie dmv het 'this' keyword
- de document.forms-collectie bevat referenties naar alle formulieren op een pagina (bij naam en bij index)

[ Voor 107% gewijzigd door crisp op 27-11-2005 13:11 ]

[flowerp]

crisp schreef op zondag 27 november 2005 @ 12:59:
ergo, 2 zaken:
- elk formcontrol-element heeft een property 'form' die verwijst naar het formulier waar het element zich in bevind
- de document.forms-collectie bevat referenties naar alle formulieren op een pagina (bij naam en bij index)

Kijk, dat eerste punt is erg interesant en wellicht precies wat ik zoek. Het component is overigens een data visualizer, waarbij je met select boxen parameters aangeeft voor je data. Data wordt dan in een aantal kleine grafiekjes gezet (die server side dmv Jfreechart gegenereerd worden), waarbij je op een grafiekje kunt clicken die dan als enigste groter wordt weergegeven. Deze click triggert dan een page submit*.

Die document.forms collectie had ik ook gezien. Een 2de idee was om deze collectie af te lopen, en dan stuk voor stuk te testen of 1 van mijn 'eigen' elementen hier in voor kwam. Dat is natuurlijk een omweg als je gewoon die 'form' property kunt gebruiken.

* (wellicht dat alleen lokaal refreshen dmv AJAX beter/mooier is, maar zo ver ben ik nog niet )