I am writing an app with node.js and coffee-script and coffeekup as template engine. I have a form where I'd like to enable or disable a button depending on whether there are values in some input fields. I am wondering whether there is a straightforward mechanism like in Sproutcore or Ember, where just a binding will do. How should I go about it?
No, there is no such binding out of the box. You have to either implement something like Ember, Knockout or Serenade.js, or roll it yourself. If it's just this one form, I would just have a small script (jQuery below):
function validateForm() {
// Check if form fields are valid, return true if valid, false if not.
}
// Update the disabled attribute on a button inside "formId" anytime an input field is changed.
$("#formId").on("change", "input", function(event) {
$("#formId button").attr("disabled", !validateForm());
});
Related
I am new to wordpress and this might be a really simple task.
I have a created a form using gravity forms plugin. I need to populate an options field in the form by making an API call. I had implemented this using gform_pre_render action and calling the function to make the API call. This code was in funtions.php of the active theme. This was working as expected.
However, now I'm required to do the same in a plugin file as I cannot have custom code in the themes file. When I place the same code in a plugin file and install the plugin, I am not getting the options field populated by API.
Is there any other way to do this? Please let me know. Any help is much appreciated.
You can use the gform_pre_render hook to add your custom code to the plugin. The only difference is that you need to use the add_filter function instead of add_action:
add_filter( 'gform_pre_render', 'populate_options' );
The add_filter function is the same as add_action except that it expects a callback function that returns a value. In the case of the gform_pre_render hook, the callback function should return the form object.
So, the code you want to run when the form is rendered should look something like this:
function populate_options( $form ) {
// your code goes here
return $form;
}
On a page I have some fields that I want to be "readonly" (in my meaning they can't be accessed but they will store values, read earlier question in this matter if issues...).
I use a client JS setting these attributes on page load:
$(".readonly").attr('readonly', true);
If I have a partial update on any of these fields the attribute is lost and the field is accessible.
What is the best practice to overcome this and make it work?
Every partial refresh has a oncomplete method bound to it. What you could do is add code to the oncomplete method so the item is being set readonly again. Another, better, approach would be not to change the attribute clientside but to have hidden fields which are used to store the data.
When you have an event bound to for instance an Link control you can change the oncomplete code by clicking in your source pane on the event tag. When you browse the events section in the properties pane you will see the onComplete, onError, onStart properties. You can add your own clientside script in these properties.
Before trying to overcome the "problem" You shoud try to understand what exactly partial refresh do and where the state of application is kept.
Unfortunately partial refresh is replacing current html content (or rather part of it) with a newly created one and only form fields that has backing controls will keep state.
I suggest You should try setting readonly property on controls which You would like to make readonly (if there is some logic here You can always use ssjs).
Optionally You can try to preserve the state on the client side by using csjs global variables but this is rather hard to manage.
And one more thing - try to use the technology to solve the problem(xpages) and try not to hack Your way through with use of stuff that You accidentally know (jquery).
I would agree with jjtbsomhorst on using onComplete event. But another alternative could be setting the readonly property via code like this:
var textField:com.ibm.xsp.component.xp.XspInputText = getComponent("inputText1");
var readOnlyAttr:com.ibm.xsp.complex.Attr = new com.ibm.xsp.complex.Attr("readonly", "readonly");
var list:java.util.ArrayList = new java.util.ArrayList();
list.add(readOnlyAttr);
textField.setAttrs(list);
You could call this on the afterPageLoad event of the XPage. But I really don't know whether this would be the best way to about!
I have dojo validation textbox in my xpage with required property computed (compute dynamically) as below
var syn = getComponent("SynCboxGrp").getValue();
if (syn == "Yes")
{return true;
}else{
return false;
}
Here the component SynCboxGrp is radio button. The text box is required based on the radio button value. But its not working properly. Changing radio button value doesnt change the required behaviour.
Appreciate any help
Update
Thanks stwissel, Per Henrik Lausten and Eric.
I only have this ssjs in required property
<xe:djValidationTextBox id="UBOCAgent" value="#{dsRacDoc.UBOCAgent}" disableClientSideValidation="true">
<xe:this.required><![CDATA[#{javascript:var syn = getComponent("SynCboxGrp").getValue();
if (syn == "Yes")
{
return true;
}else{
return false;
}
}]]></xe:this.required>
</xe:djValidationTextBox>
I also tried this partial refresh code on my radio button onclick event XSP.partialRefreshGet("#{id:UBOCAgent}");
This still doesnt change the behaviour. It works based on the initial radio button value. On the negative side since its a get request it updates the field content from the server. I also tried Eric's suggestion disable client validation but that didnt help.
Eric, I am also trying to go with CSJS wherever possible but in this case the required property only has the SSJS option. So not sure how to try CSJS. Should i try creating my own dojo field instead of using one from entension lib? If so i am not sure how to compute required property for that. If you can help me with some sample code that would be great help.
Thanks for your time.
You're doing a partialRefreshGet, which is updating the Dojo Validation Text Box. But you never post back the updated value from the radio, so the server-side value for the radio button is still the initial value. Consequently, required is still false.
Check the markup when required is true on the Dojo Validation Text Box, but the validation triggers client-side, so there should be an attribute in the markup that you can manipulate via CSJS, if that is your preferred route.
Do you have particular latency issues that you need to work around? Picking up on this and the other question you have about doing a lookup to a database on click of a button, you're hitting a few problems. I don't know how experienced you are in XPages development, but it's not an approach I would recommend without a good understanding of client-side output and server-side component trees. The initial page load of your XPage will also be slower and the size of the HTML passed to the browser will be larger, because of the amount of CSJS passed to the browser.
I would recommend using the in-built partial refresh except for situations where browser to server network is a significant issue, and only then falling back to coding your own partial refresh posting a subset of data. In my experience, it's easier and quicker to develop, easier to debug and more flexible.
For this particular scenario, regardless of whether you code the partial refresh yourself or use inbuilt functionality, one point I'm not certain of is this. That once you set validation on the Dojo Validation Text Box, that validation runs client-side and may impact any attempt to un-set the required property by posting to the server. I haven't tested, so can't be certain.
One of two things:
as previously mentioned, to trigger your SSJS value change, ensure a partial (at least) refresh of the element containing your above code; can be done with a container element. Also, check to see if your field's disableClientSideValidation parameter is set (All Properties view).
convert your SSJS code (which merely returns a binary assessment of a Yes or otherwise, I'm assuming No, value) to CSJS
Of late, after the primary development of my current project, I have started favoring the CSJS approach, for the sake of decreasing server-side call backs; most especially in situations where display/rendering of a component is all I'm trying to achieve. If you go this route, remember that dojo.byId("#{id:myControlsServerNameHere}").value (for a text field, see below for scraping a radio button value) combined with setting the display or visible CSS properties can be very handy. As the docs describe, if you want it to exist on the page but not show (for formatting purposes, also, can preserve default value), go the visibility route, otherwise display property.
The CSJS scrape of radio values that I'm currently using is as follows:
var result=null;
for(i=0; i<document.forms[0].elements.length;i++){
if(document.forms[0].elements[i].name=="#{id:serverNameOfRadioElement}"){
if(document.forms[0].elements[i].checked == true){
result=document.forms[0].elements[i].value;
break;
}
}
}
//then handle your result, either with an if, or switch statement
Hope this helps. If there's more you're having trouble with, post back with more code to give the bigger picture.
I have a button, In Button on click event has set of codes,
I want to update two particular element using Server side Javascript.
But these are in different tags...
I want to update an element using SSJS code.
I am using Lotu notes 8.5.2.
Please check out this blog by Tim Tripcony, It will show you how to update two panels via partial refresh.
http://www.timtripcony.com/blog.nsf/d6plinks/TTRY-84B6VP
basically the code for two refreshes looks like below.
XSP.partialRefreshGet("#{id:div3}", {
onComplete: function() {
XSP.partialRefreshGet("#{id:div4}");
}
});
You should update the datasource for the components and dont try to 'refresh' them. If you realy want to update their values you use
getComponent(x).setValue();
Another approach would be to just use the partialrefreshget()..
I have a search form I generated using the filterGrid option in JqGrid. I want to add a JavaScript logic which is invoked before I submit the Search form. I have added a method which is invoked by the beforeSubmit property for the filterGrid. It goes into the method before submitting, but always submits the form regardless of the value returned. I would like the form to not submit if the javascript returns false.
Have any of you guys implemented anything like this before. Or is there any othe rbetter way to implement this. Any help on this will be really appreciated.
Code:
$("#search").filterGrid("#resultsGrid",
{gridModel:true,gridNames:true,enableSearch:true,
formtype:"vertical",buttonclass:"submitButton",
enableClear:true,beforeSearch:validateDate});
function validateDate(dateDiff) {
if(daysDiff < 0){
return [false,"Message"];
}
} // ??? (commented by Oleg)
return [true,""];
}
There are at least three different ways how searching can be used: Toolbar Searching, Custom Searching which you use and Single field searching or Advanced Searching which share the same code. So one have currently three different implementations of close things.
Only Toolbar Searching has beforeSearch event handler which can return false to stop searching. In case of Custom Searching the value returned by the event handler beforeSearch will not used. Single field searching or Advanced Searching don't call any event handler before searching. In all cases for the searching will set searching filter and the jqGrid parameter search to true and then force grid reloading with the code like
$("#gridId").trigger("reloadGrid",[{page:1}]);
To be able to make any validations and stop reloading of the grid I see no simple way. So I suggest only following.
You can overwrite the standard reloadGrid event handler and chain it. The corresponding code con look like following:
var grid = $("#gridId");
var events = grid.data("events"); // read all events bound to
var originalReloadGrid; // here we will save the original event handle
var skipRefresh = false; // this can be changed by owe validation function
// Verify that one reloadGrid event hanler is set. It is typical sitation
if (events && events.reloadGrid && events.reloadGrid.length === 1) {
originalReloadGrid = events.reloadGrid[0].handler; // save old
grid.unbind('reloadGrid');
var newEvents = grid.data("events");
grid.bind('reloadGrid', function(e,opts) {
if (!skipRefresh && grid[0].p.search) {
originalReloadGrid(e,opts);
}
});
}
Probably I will create later a demo which demonstrate this on an example and place the link to the demo here. Moreover I will try to suggest code changes to jqGrid so, that in all different implementations of searching will be possible to stop serching by returning false by beforeSearch event handle.
UPDATED: OK! I prepared a demo for you. In the demo I use no server components, so it will not really do searching, but you can see the results if the grid will be refreshed and goes to the page 1.
To test the demo you can do following:
type in the "Client" input field a text not starting with 'test' and click "search" button. You receive an alert which simulate the validation dialog.
type in the "Client" input field a text starting with 'test' like test1 and click "search" button. Now the grig will refreshed because the validation will be OK.