performing validations on p:dialog in JSF form - javascript

I am using p:message for doing validations in p:dialog which opend on a button click on the form. So my main form has two dialog boxes which open on button click and these two dialog boxes have a h:form in it.
In the main form I have two fields username and password so when the user enter empty values and clicks on submit the error messages are shown on the main form and the dialog also pops up with the error messages which should not be the behavior. I want the validations for the main form to be shown on the form only and the validations for the fields in the p:dialog to be shown in the p:dialog only. Could you help me on this?
Let me know if any more information is required.

One of the possibilities is to have a separate <p:message> component for every input in every form. This way only the relevant messages will be shown. Example:
<h:form>
<h:inputText id="value" ... />
<p:message for="value>
...
</h:form>
<p:dialog>
<h:form>
<h:inputText id="value" ... />
<p:message for="value>
...
</h:form>
<p:dialog>
If you'd like to have global messages displayed as well you could consider using a 'hovering' component like <p:growl> with globalOnly="true".

Related

Contact Form not allow to enter data inside fields

Have one big problem that dont can resolve myself, because it seems more complex that i can handle myself. I have Contact Form created, and inserted CSS class that trigger popup window, with contact form. But when contact form is loaded, it dont allow me to enter any data inside fields, because looks like it is locked in some way. For example:
when press "Contacto" button (from right on image) is opening this popup window taht contain phone number about customer, and also another button called "Enviar email" that when is pressed trigger a new popup that contain contact form. This is code from that button:
<form>
<input class="spu-open-1734" type="button" value="Enviar email" />
</form>
class spu-open-1734 is CSS class generated by Popupups plugin.
When Contact Form is loaded into popup, it dont allow to enter any content into fields, like fields are blurred, and not allowing to enter nothing. Example here
Its really weird, because if upper code is inserted into Wordpress page for ex. its working fine, and allow to enter data. See here on this test page.

How to Hide a button on one page and show that button on different page?

I have two buttons of type="submit" one for submitting to the database and other for updating the database and for the same purpose I got two PHP files one for submitting and other for updating.
The problem is that I want to hide update button on fist.php and show the submit button and vice-versa.
Let's say the page, which has the two buttons you mentioned, send a request to query existing record.
If no record found, the page is supposed to submit to "submit" page, else to "update" page.
Then, in your code, you can put a hidden input element, which contains the value, by which you know where to submit.
maybe something like this:
<input type="text" id="direction" value="" display="hidden">
Then, you have a button, not a type=submit, but a type=button.
something like this:
<input type="button" id="submitBtn" value="submit" onclick="submitForm()">
Then you have a javascript function. something like this:
<script language="javascript">
function submitForm(){
if(document.getElementById("direction").value=="submit"){
//Change form1 to your real form name.
document.form1.action="submit.php";
document.form1.submit();
}else if(document.getElementById("direction").value=="update"){
//Change form1 to your real form name.
document.form1.action="update.php";
document.form1.submit();
}else{
alert("error happened. the direction unknown, unable to submit the form");
}
}
</script>

My event ajax keydown is too slow

I have a problem with a h:inputText and i don't know how to solve it.
I'm working on a xhtml page using JSF and RichFaces which contains fields as Calendar, SelectOneMenu, InputTextArea, Input. At the end of my form, there are two buttons Print and Save.
If one of the fields is modified (text, date, etc), i have to disable the Print button. In every field, i have add ajax event.
For example :
<rich:calendar datePattern="dd/MM/yyyy" timeZone="#{timeZone.timeZone}" value="#{myBean.date}">
<f:ajax event="change" listener="#{myBean.verifyModification}" render="myForm"/>
</rich:calendar>
If my date is changed, i call a method stored in my bean and it's ok.
But, i have a problem with my inputText and inputTextArea.
<h:inputText value="#{myBean.name}" maxlength="50">
<a4j:ajax event="keydown" render="myForm" listener="#{myBean.verifyName}" />
</h:inputText>
If i write fastly, for example i stay on the letter a to write aaaaaaaa in my field. The field will contain aaaaaaaa then aaaa. Is it because the ajax event is too slow? The problem doesn't come from my bean method because i only test a value.
Because of that, i can't test this field. I have tried the others events like blur, change. If i use these events, i have to click out of my field then my button is refresh.
Could you help me, please?
Thank you.
The problem is most likely that you render your complete form, not only the part of it that needs updating. JSF will then replace your form with the values you submitted on the first ajax request. Try:
<h:inputText value="#{bean.name}">
<f:ajax event="keydown" render="myButtonP" listener="#{bean.verifyName}" />
</h:inputText>
<h:panelGroup id="myButtonP">
<h:commandButton id="printBtn" value="Print" action="#{bean.printMe}"
disabled="#{bean.canPrint}" />
<h:commandButton id="saveBtn" value="Save" action="#{bean.save}" />
</h:panelGroup>
If you use disabled instead of rendered on the button, you can even reference printBtn directly in the render attribute.

How to preselect a value in Listbox at page load?

I have this simplified self.jsp form:
<form name="count" action="self.jsp">
<input type="text" name="data1" id="data1" maxlength="50"/>
<input type="text" name="data2" id="data2" maxlength="50"/>
<input type="text" name="data3" id="data3" maxlength="50"/>
<button id="recalc" type="submit" value="recalc">Recalculate</button>
<button id="save" type="submit" value="save">Save to Database</button>
</form>
Now, I want to automatically submit this form at the page loading using javascript. I want to do some field pre-populating. The problem here is that I have more than one button to "submit" the form. So I can't use the js that ask the form to submit itself (like document.getElementById("count").submit();) because I wouldn't be able to know which button get pressed. But I seems to not able to use the javascript to "push" the button using code document.getElementById("recalc").submit();. The question is:
What is the javascript code if I want to "automatically run" the "recalc" button?
What is the javascript code if I want to "automatically run" the "save" button?
Is there any mistake in my html form code? For example, is it impossible to have two "submit" button at one form? Or is to "push" the button, I can't use submit() function, but another function, for example, click() maybe?
I'm just a beginner at javascript. Any help would be appreciated. Thanks.
Update:
I'm trying to have two button at one form. The recalculate button is to recalculate the value at data3 using the information data1 and data2. The save button is to save all the data1, data2, and data3 to database. All of the required java code is put before the form. You can see that the form is referring to itself. So if the recalculate is pressed, the form is only reload itself, but now with the data3 is prepopulated. If the save is pressed, the form is reload itself, but with all the data1, data2, and data3 is saved onto the database. But I want to be able to push the button using javascript, and I don't know how to trigger the button click. I can only trigger the form submission using javascript, hence the problem is I don't know which button was pressed or will be send onto the form itself. Sure I can check using the names at the JSP code, but how if I want to say "the button pressed was recalc button", or "the button pressed was save button" to the JSP that will receive the form data? So that's why I need to trigger the button individually. Or can't I?
A for Q1: document.getElementById('recalc').click();
A for Q2: document.getElementById('save').click();
A for Q3: You can have several submit buttons in a form, but you need to add "name" attribute to those submit buttons (name/value pair), so the server side would be able to know which button was pressed.
Hope these helps

How can I make Alfresco YUI validate prepopulated input fields and avoid "keyup"?

I have a html form with some input fields that need validation:
<input type="text" id="hrs-edit-oib" name="oib">
I also have two validators on it. So with the new forms it works great. But with the prepopulated forms, it doesn't work.
I believe it is because the validators are set to work on a "keyup" event:
createEmployeeForm.addValidation("hrs-edit-oib", Alfresco.forms.validation.mandatory, null, "keyup");
Is there a way to tell the validator to process the form rigth away, if it has been prepopulated on the server side?
Here's an example:
I load a page with markup:
"<input type="text" name="myid" value="preloaded" id="myid" />
And lets say that the value of "myid" needs to be longer then two chars (which is the case here). But there was no keyup and my Save button is disabled until I click into that field and press tab or something.
Thanks

Categories

Resources