Develop Reference

how to filter table based on multiple columns automatically upon refresh without losing text in input boxes?

i'm currently using multifilter (a jquery plugin at https://tommyp.github.io/multifilter/) in my code. if you take a look at that link it shows you how it filters the table in realtime. my problem is that whatever text i enter into the input boxes are lost when i refresh the page. i figured out that if i set the input to autocomplete=on, like so:
<input autocomplete='on' class='filter' name='name' placeholder='name' data-col='name'/>
it will retain the values in the input boxes. however, it does not trigger the multifilter.js upon refresh requiring me to still type something into the input boxes.
how would i trigger the plugin upon refresh so that the table will automatically filter results based on whatever text was in the input boxes?

You won't be able to use autocomplete for this, since autocomplete is a feature that is used for something different (w3schools autocomplete):
Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.
A good solution to solving your problem is localStorage.
The following code is what you're looking for:
$(document).ready(function() {
var name = localStorage.getItem('name') || '';
$("#name").val(name);
$('.filter').multifilter(); // for filtering values in the table
$('#name').keyup(function(e) {
var name = $(this).val();
localStorage.setItem('name', name);
});
});
The above code uses the localStorage API to get a value that has already been set with a call to localStorage.setItem() and sets the value of the input equal to the value retrieved from the getItem() call. The code then checks everytime the user types something into the input and saves the value for later retrieval using localStorage.setItem().
This way, the value is persistent and each time the user refreshes the page, because the value is stored using localStorage, it loads the value into the input using localStorage (note that you do need to have 3rd party cookies enabled to use lcoalStorage).

javascript Adobe Form copy text from field with comb

I would like to copy text from a field that is a postcode to another postcode field on selecting "As Above" check box, currently it copies the address fields, not the postcode. The field is using the COMB option spreading the input over 4 boxes, I am thinking this is why my current script wont work on this field, the scrip I am using is
//Set the source and destination vars:
var source = this.getField("Tradingaddress");
var destination = this.getField("Mailingaddress");
//See if destination is empty and if so, insert source value
if(destination.value==''||destination.value==null) {destination.value=source.value}
Any Help appreciated!

Ok so I used the same script as above, but before adding the custom script, i changed the field so it doesn't have a comb, and is just a standard field, added the script and worked, then went back into the properties of both fields and re-added the comb function and re-tested OK!~ :) Thanks for your help ME haha

Getting radio button group values using only CSJS

I've read a similarly entitled article but it didn't really provide a client sided solution.
I have a radio button group that will determine whether or not other things will be visible or hidden. I have code that will retrieve the value of this RBGroup in a xp:scriptBlock.
function getPTValue (bName) {
var pt=null;
for(var i=0; i<document.forms[0].elements.length; i++){
if(document.forms[0].elements[i].name=="#{id:PayType}" ){
if(document.forms[0].elements[i].checked == true){
pt=document.forms[0].elements[i].value;
break; //remove this if for check box groups and collect multiple values above instead
}
}
}
return pt
}
Here is the radio button group;
<xp:radioGroup
id="PayType"
value="#{FInvoiceDoc.PayType}"
defaultValue="Hourly"
style="color:rgb(0,0,0)">
<xp:selectItem itemLabel="Hourly" itemValue="Hourly"> </xp:selectItem>
<xp:selectItem itemLabel="Fixed" itemValue="Fixed"></xp:selectItem>
<xp:eventHandler event="onclick" submit="true" refreshMode="norefresh">
<xp:this.script><![CDATA[payTypeVis();]]></xp:this.script>
</xp:eventHandler>
</xp:radioGroup>
This works great while the document is in edit mode, but if I open it in readonly mode, the above routine gets executed, but doesn't return the value of the radio button group.
It appears that in read-mode, it shows the the payType radio-button group as a quasi-computed field. No buttons, just the value. I try retrieving it with a XSP.getElementById("#{id:payType}").innerHTML and I get the value but with lots of HTML tags around it. (.value returns nothing)
How do I properly retrieve a radio button group value on a document in read mode using strictly CSJS?

The value of the field will not change in read mode, so for handling it in read mode, set a CSJS variable using the Script Block control and pulling directly from the bound field. Script Block controls allow you to run SSJS / Java as well, so:
var invDocPayType = "#{javascript:FInvoiceDoc.PayType}";
Set the rendered property so it only shows if the document is in read mode, so:
if (view.isRenderingPhase()) !FInvoiceDoc.isEditable();
Then in CSJS, check whether that variable exists (i.e. you're in read mode), otherwise get the value directly from the radio button dynamically.

I could think of a (possible) solution and a workaround.
The (possible) solution is to enable the "showReadonlyAsDisabled" property for your radio group. By (possible) i mean that i'm not 100% sure whether this exists for radio groups. But if it does your control should be rendered as a "control" with values in your html markup, with a "readOnly" attribute applied to it. Can't test this before tomorrow morning.
If this doesn't work you could also copy your value to a hidden field using the radio group's onchange event, then read that helper field's value which should be mich easier to retrieve.
Update:
just gave it a try: the "(possible)" solution unfortunately is not possible at all for radioGroups, so forget it.
You're most likely stuck with some other solution, as lined out in my 2nd option, or as #stwissel described it (his option #1). My workaround then would look a bit like this:
my radioGroup is bound to a field named rbGroup. There is also a simple data field on the same form named rbvalue, and on the Xpage I have an editBox control bound to rbvalue which is hidden through a css display:none statement. For this editBox I have the showReadonlyAsDisabled property set to true (for editBoxes this works):
<xp:inputText
id="rbGrpHelper"
value="#{doc1.rbValue}"
showReadonlyAsDisabled="true">
</xp:inputText>
The onchange event handler for my radioGroup performs some simple code copying the radio's selected value to rbvalue, and it performs a partial refresh on a div containing the rbGrpHelper editBox:
doc1.replaceItemValue("rbValue", doc.getItemValue("rbGroup"))
Now if my xpage is open in read mode, because of the showReadonlyAsDiabled property my hidden helper field looks like this in its HTML markup:
<input type="text"
value="1" id="view:_id1:rbGrpHelper"
name="view:_id1:rbGrpHelper"
readonly="readonly"
style="display:none"
class="xspInputFieldEditBox">
That way the rbGrpHelper is always up to date, and you can use your CSJS code to access the selected value.

Short: Don't
Long: By nature of forms, a readonly mode does not have input elements in it like radio buttons, inputboxes etc. You have a series of options:
You did bind your radio group to #{FInvoiceDoc.PayType}, so you could compute a hidden field (using a computed text with passthrou like <xp:text value="&lt:input type=\"hidden\" value=\"#{FInvoiceDoc.PayType}\"" escape="false"></xp:text>. Then simply use that value client side
If you need to switch even in read mode, you need to compute the radio group too, so it is switchable
Use a set of SSJS functions showSection_InterestingName(doc) {....} to compute the value true/false to show the sections in read mode (or use showSection(doc, sectionName). This way you abstract the computation from the display a little and it is easier to read for the dev after you
Hope that helps

How to disable Sharepoint textbox?

I am trying to disable a textbox in SharePoint WSS3 and force a specific value (given by another JavaScript function) but I can't seem to find the right way of doing it. I have come across different issues. Let's say I have a normal single line text value named prova and another one named Description. Description is required, prova is not.
First Issue: If the field IS required, even if there is something in the textbox, SharePoint says otherwise and does not allow me to insert the entry.
$(document).ready(function(){
//var value = someFunction(...);
var value = "test";
$("input[title='Description']").attr("disabled", "disabled");
$("input[title='Description']").val(value);
});
Second Issue: If the field IS NOT required SharePoint doesn't say anything but it inserts a blank value instead of the one given.
$(document).ready(function(){
//var value = someFunction(...);
var value = "test";
$("input[title='prova']").attr("disabled", "disabled");
$("input[title='prova']").val(value);
});
I have a feeling that tells me that there is some kind of SharePoint JavaScript function somewhere that listens for KeyUp or something. I have really no idea what to do now...
EDIT: It looks like the problem is related to disabling the textbox, if I comment the line where I disable the textbox it works in both scenarios. Maybe if I catch the insert request I can re-enable the textbox before SharePoint do the actual post. No idea how to do it though...

Your problem really is related to disabling the textbox first. By default disabled textboxes are not contained in the POST request in IE.
See this post: Disabled form inputs do not appear in the request or this one: how to save data by disabled text box?
What you actually want to do is set the readonly attribute of the field, not disable it (readonly="readonly"). The problem with that is that the readonly state sometimes looks the same as the default state, so you also have to add some CSS to make it look greyed out.

copying the value of a form's file input field to another form's input field

So I have two forms, both have a file type input field and I tried
$('.inputfield1').change(function(){
var file = $(this).val();
$('.inputfield2').val(file);
});
but then it doesn't get copied properly and firebug complains about "Security Error" in the error console
what did I do wrong and how can I properly copy the value of a file input field
by the way, the destination form has a target that is set to an iframe (not a different domain)

You can't move the value of one file input to another. Instead, clone the input, place the clone where the original is, and move the original into the hidden form.
$(".inputfield1").change(function(){
var $this = $(this), $clone = $this.clone();
$this.after($clone).appendTo(hiddenform);
});

If you need to copy the file from one input to another, you could use the below method.
$(".inputfield2")[0].files = $(".inputfield1")[0].files;

I know it is a late answer, but I had a similar problem that I just figured out today.
What I did was move the File input to the new location after deleting the current one in the other location. By moving the element, everything stayed intact on all my tests.
$('.inputfield1').change(function() {
$('.otherinputfield').remove();
$('#newform').append($(this));
});