I have two form in the same Tapestry page's:
First one is composed of :
select
submit button.
If there is a valid result I display it.
Otherwise I want to display the 2nd form wich is composed of :
4 textfields
1 submit button
So the 2nd must not be displayed first time, but only in case of empty result from the 1st one.
First off: Please share what you have tried so far.
Second: You can do this in a number of ways. The easiest is just to use a
<form>
<t:if test="showFirstForm">
....your 1st form content ....
<p:else>
....your 2nd form content ....
<p:else>
</t:if>
</form>
You might also like to have a look at the FormFragment for ajax controlled dynamic form content using triggers to redraw.
Related
I've made an extension in Typo3 6.2 with extbase and fluid.
I've 2 actions in my controller
- action 1 (single) : simply show an object and a form (some filter for object list)
- action 2 (list) : show the same form as in action 1 and treat form result and show a list of object
in my two views, my form looks like :
<f:form action="list" controller="MyController" pluginName="MyPluginName" name="myName">
...
</f:form>
the MyPluginName refere the the 2nd view (list)
When i submit the form from the 2nd view (list), the action recieve correctly the form params
But, when i submit it from the 1st view (single), i'm correctly redirected to the 2nd view BUT with a Typo3 Error :
#1320830276: A hashed string must contain at least 40 characters, the given string was only 9 characters long. (More information)
So, how can i achieve this?
Thanks
for a form, you have to set the action to non-cacheable in ext_localconf.
OK, so first off, let's start with me acknowledging that the bind( ... ) way of binding Lift forms is so last week! :) I do know that, and I just haven't gone back to update this code yet. Also, I trust now that there's some really slick Lifty way to do this. That's what I seek. I'm stumped as to even how to hack something together. That said...
I have a list of Items that I initially display non-editable, and the title of each Item is an ajax-enabled link that calls to the server and replaces that line-item with an editable form of the Item (I use SetHtml to swap the form in at the < li> that listed that Item).
"parent" Items List view looks something like this
< form data-lift="form.ajax">
< div data-lift="creategamewizard?multipart=true" id="wizardform">
< ul>
< li>Item 1< /li>
< li>Item 2< /li>
< /ul>
some more form elements
< button>Submit< /button>
< input type="hidden" id='298356928734' />
< /div>
< form>
This ajax submit (via the hidden field) calls processSubmit().
The SetHtml that swaps in the editableItem form looks something like this.
NOTE: At the end of the following listing, the "save" binding has no server-side code tied to it because the "parent" submit button is already on the page, and when I put another hidden field in this binding or tried to tie any code directly to the Edit Item Save button, that code and the "parent" submit got triggered. So the approach below was to try to use the "parent" submit for both the parent submit as well as the Edit Item submit.
<a href="javascript://" onclick={ajaxOnClickHandler(editItemClickHandler(item.id.get))}>{item.title.get}</a>
def ajaxOnClickHandler(jsHandler: ()=>JsCmd) =
{
SHtml.onEvent( e => jsHandler()).toJsCmd+";return false;"
}
def editItemClickHandler(itemId: String): ()=>JsCmd = ()=>
{
trace.logAjaxComm("ExistingItem.Edit()")
JsCmds.SetHtml("LiId"+itemId, getEditableItem(promo) )
}
def getEditableItem(itemId) =
{
bind( ...
"promotitle" -> SHtml.text(editablePromo.get.promotitle.is,
(s:String) => {
trace.logUIDataManipulation("Saving new promo Title["+s+"]");
editablePromo.get.promotitle(s)
}, "id" -> "promotitle"),
"save" -> SHtml.button("Save", ()=> {})
)
}
Then when the user selects an Item, and the editable Item form is plugged in, there's "another" submit button that should ajax submit the form data for that item, and then swap back in the (now updated) nonEditable version of the data.
The problem for me is the submission. In addition to the Edit Item form above, I've got a ajaxified submit button on the "parent" non-editable list page to handle submitting some fields below the list. The Edit Item "save"-> binding adds a button, which should do (and in fact does) nothing for itself, but it does trigger the "Parent" submit button. And I route that submit to do the save of the Edit Item form.
The non-editable Item and the editable item code swaps fine, but changes made in the editable Item form is not saved, and I figured out that that was happening because the elements in the editable Item form are not being submitted at all, following is an example of a log message I don't see at all...
bind( ... "promotitle" -> SHtml.text(editablePromo.get.promotitle.is,
(s:String) => {
trace.logUIDataManipulation("Saving new promo Title["+s+"]");
editablePromo.get.promotitle(s)
}, "id" -> "promotitle")
)
In a normal ajaxified form, all element handlers are called (if there are changes to the field, I guess...) in order of rendering, with the submit/hidden elements' handlers being called last (if they're last in the bind list.
so finally, let's get around to my question:
if you're doing in-place editing like this, how do I manage 2 submit buttons (the one for the non-editable list page plus the additional one that gets added when editing an item)?
I'm sure I don't need to refresh the page, but I can't figure out how you'd do this with Ajax.
Maybe alternatively, the in-place editable form can be submitted as a non-submit ajax action, ie. somehow that doesn't trigger the parent submit?
For anyone tripping over this question, I figured I'd share the solution I eventually found...
1)The problem was that the submit (for AJAX this is the hidden html tag) happened before the editable Item's field handlers were called. So when the AJAX update that collapsed the editable Item back into just a non-Editable list item, the data hadn't yet been updated. So what was displayed in non-editable form didn't show the update, yet if I refreshed the page in the browser, the update had been saved to the database and now showed properly.
2)The reason for the mal-ordering is that Lift assigns each form tag's server-side handler an id (which are "monotonically increasing" with an additional string added to the end). That's fine until you do an ajax live-update of a form and add fields (as I did when I inserted the Editable Item fields). These newly-added fields were assigned server-side ids that came after the hidden field that got generated as part of the initial page rendering.
3)The solution was to explicitly shove the hidden field into a much higher id using S.formGroup. See here for more details...
The example from the last link below is as follows (and differs from mine in that it uses SHtml.submit, whereas I use SHtml.hidden). It adds the constant 1,000 to the submit button's server-side handler id:
"type=submit" #> S.formGroup(1000) {
SHtml.submit("Submit", process)
}
Discussion of a problem that is essentially the same as mine: https://groups.google.com/forum/#!topic/liftweb/MYJQeVlOYFM
Description of id assignment and S.formGroup under heading "Server side function order.":
https://www.assembla.com/spaces/liftweb/wiki/cool_tips
And lastly, linked to from the last link is some example code:
https://groups.google.com/forum/#!topic/liftweb/E9z7PVhogQw
I have a question about the wrappers/accordeons. I now have multiple wrappers and in each wrapper there is a form. Now, I want one sendbutton on the end of the page. The sendbutton which will send all the forms that have been filled in at once.
How can I do that?
I don't know why you want to break input into different forms and then submit them again at once. Would it not make sense to use one form and submit the data and process it the way you want using the processFormData hook? may be because you want the accordion to group you form fields. Let me help you this way:
Create your form in the format shown below. Make sure the form has a tabless layout to be able to use fieldsets.
Create a fieldset without a label. You may add the class ce_accordion just in case you have some styling attached to it.
Create a field of type html and add the following markup.
<div class="toggler">Form 1 headline here</div>
Create another field with the following markup
<div class="toggler">
Now create your input fields from here. for example a text field,textares.
Create a field of type html to close html markup created in step 3
</div>
Create a fieldset wrapper end here.
The above steps can be repeated as many as how many groups of fields you want to create in an accordion.
Now create you submit button here and it will send all your data the way you want.
Just a by the way:
If some one submits a form in a wrapper that is closed, how will he know which wrapper has error fields?
$(document).ready(function() {
$(".ce_accordion").each(function(index,el) {
if($(this).find("p.error")){
$(this).addClass("hasErrors");
$(this).find("div.toggler").addClass("active").attr("aria-expanded","true");
}
});
});
You can now add a style for .hasErrors rule
Good morning!
I need to post a form, I've already changed all the values inside that form (drop-drown list, text fields , check-boxes, etc), in this way:
final HtmlPage page4 = webClient.getPage("somepagemakinmemad");
HtmlForm formx= page4.getFormByName("lista_grupos");
changing values like:
HtmlSelect duracion = (HtmlSelect) page4.getElementByName("p_duracion_"+datum.getCrn()+"_1");
HtmlOption option1 = duracion.getOptionByValue("0029_029");
duracion.setSelectedAttribute(option1, true);
That is, I am changing the values through obtaining the html element from the page, not through the form (is that okay anyway?).
And then I try to submit the form, through:
<input id="p_guardar" class="boton" type="button" onclick="validaAPG()" value="Guardar">
Which is the "button-like" input where someone clicks when is over with the form.
I have to say, when I print the html code of the form, with "asXml()", I see the form the with selected values I've intended to select.
Question: How can I click on that button and send the form? That input runs a script, when clicked
Thanks everyone, let me know if you need any other kind of info.
You can use below code to click on the button to submit the form.
HtmlButtonInput button = (HtmlButtonInput)page.getElementById("p_guardar");
page = button.click();
You dnt need to care what script runs when clicked.If you dont need to run the script remove the attribute.
I have divided form in to two sections: sec1 and sec2. Each section is part of a div named as sec1Div and sec2Div. Based upon some selection one of div is hidden. But the problem is that still fields in hidden section are submitted. Please suggest a way so that all of fields in a div are not submitted on submit.
There are several ways to do that. You can hook a function to the form submit's event, or you can remove the name attributes of the fields inside the hidden div. You can also disable the fields, by setting disabled="disabled".
If you are using jQuery, you can do those examples.
To disable all fields in the hidden div, you can do something like:
function hideDiv(el) {
$('input', el).each(function(){
$(this).attr('disabled', 'disabled');
});
$(el).hide();
}
And, the appropriate show div function:
function showDiv(el) {
$('input', el).each(function(){
$(this).removeAttr('disabled');
});
$(el).show();
}
Please remind that this is just a code example. But you can take the idea from that.
The reason this is happening is because the elements are still within the form element. Hiding a div using CSS won't change this - they're still present in the DOM.
It would likely be easiest to add a hidden input field to each div that can be used to identify server side which one you should be processing. You can then simply ignore the data from the hidden form.
If you really must stop the data from being posted, it's a little messy but you could move the hidden div's contents outside of the form element so that the fields won't be submitted. If you wanted to display the div again, you'd then need to move the fields back in. Depending on how complex your CSS is, this could cause problems in some browsers, so I'd advise using my first suggestion.