|
Hey, my first post here...
I'm trying to make a wizzard-like form. So that every deck contains a form and the form is subitted when going to the next deck. But only if the form is validated the next dec should appear. How can I do this. I'm really (really!) new to BB. I'm hoping I'm not asking something stupid.
I was thinking it should be something like this...
<e:handler event="click" type="text/xml">
<e:call method="next" with="id('addUser')" />
</e:handler>
</b:button>
But the "onClick="Submit()"" is not accepted.
One more question. It's pretty hard to make the first steps in building an application. I'm a professional PHP programmer and Javascript/DHTML is nothing new to me. But it's quite difficult to find the right information. A lot of code I find is for earlier versions of BB and doesn't work for 4.1.2 Ofcourse I've been playing around with example codes and I've followed the tutorials provided with the package. But still...I'm in desperate need for some clear, step-by-step guides on how to build specific parts in dynamic websites. I'd love to see more detailed info on...
* Animations
* Forms
* Skinning
* Interaction with PHP
* etc.
..something like this -> http://www.mennovanslooten.nl/blog/ and http://www.thehutt.org/~brabson/Tech/Backbase/
But this one is outdated.
Is there a more recent guide? Help is much appreciated
Edit: I've found this -> http://devnet.backbase.com/#dev/home.xml[0]
But this is about version 3.3 ??
Validate form on b:deck "next" click
18 January, 2008 - 18:05 — yudiHi Bram,
You can try the following code example.The next button send to the next page only if the page is validated. If you want some effect , you can also make the next button disable if the page is not validated.
<e:handler event="click" type="application/javascript"><![CDATA[
var deck = bb.document.getElementById('deckExample');
var aFormFields = deck.selectNodes("./b:deckItem[@selected='true']/input[@bf:required='true']");
var number = 0;
for ( var i=0;i<aFormFields.length; i++){
if(bb.getProperty(aFormFields[i], 'validity') == true)
number=number+1;
}
if(number > 0){
deck.next();
}
]]></e:handler>
</b:button>
Or if you like XML :-)
19 January, 2008 - 09:47 — Richard<e:handler event="click">
<e:if test="count(id('deckExample')/b:deckItem[@selected = 'true']//input[@bf:required = 'true'][property::validity = true()])">
<e:call with="id('deckExample')" method="next" />
</e:if>
</e:handler>
</b:button>
This XPath expression starts with the deck, gets the selected deck item, finds all inputs anywhere within the deck which have the bf:required attribute and a validity of true. The way of testing true/false is different for attributes (which have string values) and properties (which have javascript boolean values).
Nice!
19 January, 2008 - 12:42 — BramI really like the XML way. It's nice and clean and this way I can keep the scripting, and Markup languages separated. Fantastic!
But how can I trigger the animations this way? With a submit button the invalid fields fade to red nicely and I use the bf:messageRef method which isn't triggered either if the form is not submitted.
edit: Or is there a way to trigger the validation per field (onchange or onkeyup)?
Not working solution
19 January, 2008 - 12:58 — BramI've found this method, but it doesn't work
<s:behavior b:name="OnChangeBehavior">
<s:event b:on="change">
<s:task b:action="trigger" b:event="validate" />
</s:event>
</s:behavior>
Neither does this one
<input name="txtDataInicio" id="txtDataInicio" type="text" onkeyup="bb.callMethod(this, 'validate');" />Validating each field
20 January, 2008 - 22:49 — RichardThe <s:behavior> code is for version 3 but the essence is correct: you want to call the validate method on blur.
<e:handler event="blur">
<e:call method="validate" />
</e:handler>
<input>
Now to avoid putting this instance handler on every field manually, you can create a behavior so you can add the behavior as an attribute to each field, keeping code and markup more separated. Here we're going to define a new behavior in the 'eg' namespace (replace it with your own organization's). you'll need that namespace prefix defined in your document for it to be recognized.
<d:namespace name="http://www.example.com/eg">
<d:behavior name="autoValidate">
<d:handler event="blur">
<e:call method="validate" />
</d:handler>
</d:behavior>
</d:namespace>
</d:tdl>
then on each field, you add the behavior attribute:
You can of course put a whole lot more into a behavior than a single handler. You can group common handlers and methods and change the behavior of any element with a single attribute. See the Widget Development Guide for more info - most of what you can do with d:element you can do with d:behavior (the big difference is that you cannot define a d:template inside a d:behavior).
Good luck with your form!
Partlially working
25 January, 2008 - 11:45 — BramThe
<e:handler event="blur">
<e:call method="validate" />
</e:handler>
<input>
method is working nicely. I don't understand how to use "http://www.example.com/eg". If I fill in my own domain name I get an error. Should "/eg" be a directory or file?
Namespaces
26 January, 2008 - 21:02 — RichardThis tutorial might be useful in helping you understand how namespaces work:
http://www.w3schools.com/xml/xml_namespaces.asp
If you change the namespace URI, you need to change it in both places: (1) the d:namespace tag containing the d:behavior tag that defines your behavior and (2) the URI of the xmlns declaration in your main document.
If you change the namespace prefix, you need to change it in two places: (1) the xmlns declaration and (2) everywhere you use tags that belong to the namespace.
So if you change the prefix from eg: to xx: then the behavior would be called:
No success
25 January, 2008 - 11:45 — BramBoth the javascript and XML methods do not function correctly.
The XML method doesn't work anymore if one field is filled in. So it will go to the next deck item anyway, even though not all fields are validated.
The Javascript version does not go to the next deck item at all. Even tough every field is filled in correctly and validated, It will not go to the next deck item.
Post some code
26 January, 2008 - 21:03 — RichardYou're going to need to post some code so we can see what's going on