I'm attempting to use a large amount of simple show/hide scripts in Adobe Live Cycle to combine a few forms into one. I'll be layering text entry fields on top of each other and have them all start as invisible (using Live Cycle's invisible settings). The showing/hiding of these objects will be controlled through use of a drop down list.
The basic task would be:
-Click an item from a dropdown list.
-Initiate a show of relative invisible elements on the page based on the
raw value of the item selected.
-If user changes dropdown value, hide previously displayed data and show new
corresponding data.
Can this all be accomplished from inside the dropdown list itself? I've inherited this project from a previous developer, so I'm cobbling together some of his code and attempting to get a grip on what actually needs to be done so that I can accomplish the task. Here is an example of what the show hide structure looks like:
xfa.resolveNode("form1.#subform.indPaymentOptions").selectedIndex = 0;
xfa.resolveNode("form1.#subform.VendPaymentOptions").selectedIndex = 0;
xfa.resolveNode("form1.#subform.Display_Field_Pay_Types").rawValue =
"Please select an option from the 'Select type' drop-down menu above.";
taxReportable.rawValue = "";
AccountCodesDynamic.rawValue = "";
if (xfa.resolveNode("form1.#subform.payeeType").rawValue == 2) {
xfa.resolveNode("form1.#subform.indPaymentOptions").presence = "visible";
xfa.resolveNode("form1.#subform.VendPaymentOptions").presence = "hidden";
}
else if (xfa.resolveNode("form1.#subform.payeeType").rawValue == 3) {
xfa.resolveNode("form1.#subform.indPaymentOptions").presence = "hidden";
xfa.resolveNode("form1.#subform.VendPaymentOptions").presence = "visible";
}
else if (xfa.resolveNode("form1.#subform.payeeType").rawValue == 1) {
xfa.resolveNode("form1.#subform.indPaymentOptions").presence = "hidden";
xfa.resolveNode("form1.#subform.VendPaymentOptions").presence = "hidden";
}
All the code above seems pretty straightforward, but there is also some code in the initialize section of the document:
if (xfa.resolveNode("#subform.RadioButtonList[2].ind").rawValue == 1)
indPaymentOptions.presence = "visible";
else if (xfa.resolveNode("#subform.RadioButtonList[2].vend").rawValue == 2)
vendPaymentOptions.presence = "visible";
I'm curious to know if this sort of thing is necessary. If it is, could someone please explain to what extent such code is needed in the initialize section of the document?
If it isn't necessary, is the show/hide coding that I pasted at the top of this post sufficient for what I'm trying to accomplish?
I've tried slogging through Adobe's livecycle documentation, but it is difficult to find a broad overview of what is necessary, so I'm having difficulty making use of it. Any help is greatly appreciated. If there is a resource I'm missing I would love to teach myself how to do this. Also, this is my first post here. I did my best to follow the submission guidelines in the FAQ, but apologies in advance if I violated any submission guidelines. Thanks.
The code for the drop-down looks pretty straight forward and should be fine (although you will probably find after using LiveCyle for a while, even some of the simpler tasks with logical code don't work).
The code in the initialize event is actually for a radiobutton group rather than the drop-down so it's possible that the functionality of the visible forms is actually driven by more than just the drop-down.
What you tend to end up with in LC is the code for a change or validate event being repeated in the initialize event so that when the form opens it displays/processes correctly. This can of course be worked around by invoking an event with the code from the object's other eventsevent. eg. in the Drop-down initialize event you would hold the dropdown code and in the change event of the dropdown you would use this.execEvent("initialize") which would call the code when the change event is triggered.
It's a little difficult to get a view of what's happening in your particular case without seeing the form but let me know if anything isn't clear or I can help with anything else.
Related
I am trying to automate an attendance form hosted by Google Forms, but the inputs aren't HTML <input> or <select> elements, so I am not sure how to change them other than manipulating the mouse and keyboard (an approach I used with Selenium).
Based off a fast peak; you could
let Form = document.querySelector('.freebirdFormviewerViewItemList');
let itemContainer = Form.querySelectorAll('.freebirdFormviewerViewNumberedItemContainer');
itemContainer.forEach((element)=>{
// Your code here, you should in theory be doing deeper loops depending on how advanced you want this.
});
Inside the loop we'd need to just find all the active inputs we want with a
itemContainer.forEach((element)=>{
if(element.querySelector('.exportOuterCircle')) {
console.log('we found ourselves a radio button but just one, we could go deeper with querySelector (and help of loops/etc)')
}
});
This is a bit of a large-task but not so bad, just make sure the freebirdFormviewerViewNumberedItemContainer class is correct every-form to or y ou find the pattern per-page that selects the questions for a fast loop through.
On loop, you're to query select one or more(if so apply another loop) to find the options you want. In this demo above radio button search, if the pages stay static you should with my example be able to grab/see a console pop-up no errors;
For setting these values, it's as easy in some cases setAttribute/value/ and other modifiers once selection is made. So you know click already and so the radio buttons be a good example. Any issues try navigating your elements in developer menu and sort if selections are going down correctly.
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
I am very very new to Javascript so i do apologise if its simple.
On my site I have lots of pages with lots of information on them, the info is split into sections in an accordion format.
I want to be able to track if someone engages with the expandable sections but I only need to know one click/Event per user at this moment in time.
I just need to know where i would put my code and what javascript i would need to write in order to track if someone clicks on a section then stops tracking once they have clicked.
In my head I am thinking of having script per expandable section but if someone clicks on one, how will the other sections know not to track any more.
An example is http://www.disabledgo.com/access-guide/tower-hamlets-council/tower-of-london
I hope someone is able to help.
Thanks
If you want to only track on thing you can add a Boolean value to a variable inside an if statement and test that for each event.
So in basic language
lets say you have a button.
<button id='b1'>my button<button>
if you want to only track one of the button clicks you can do something like this. Note: I used jQuery so you need to link to the api in your head tags.
var boolval = true;
$('#b1').click(function () {
if (boolval) {
//alert('worked!'); for debugging
_gaq.push(['category', 'action','lable','opt_interaction','value'])
boolval = false;
}
});
I added an if statement based on the variable boolval that I set to false after the first click. Then when you click again it checks it and comes up false and does not fire the function.
Here is a working jsfiddle http://jsfiddle.net/nicomiceli/L2Efh/
You can do this for your accordion menu. Set the event listener to your class and after the first click make something false so if they try it again it won't fire.
Let me know if you have any questions.
basically I have a form and it has 2 different expansions depending on whether a single or multi day trip is selected (not coded yet, once I get this working I can sort that out properly). I have looked at a lot of similar questions but unfortunately, many of them use jQuery.
I've been working on it for 2 days now, Googled, looked here and got this far on my tutor's suggestion but it isn't quite there yet and I don't understand enough to fix it. I'm hoping it's something simple and I'm just a bit too inexperienced at this point to recognize it.
Right now, I'm just trying to make a div with 2 different classes show depending on which is clicked. The classes being hard coded into the function doesn't matter at the moment. Eventually I will want the div's to appear (still depending on the check box selected) when the submit button is clicked, but that can be a future endeavor (would assume it's just some if/else statements.
If anyone can help, or even just point me in the right direction (keeping in mind I started learning this around 3 weeks ago and haven't even used it in the last 2) I would greatly appreciate your help.
I have attached a JSFiddle of current code, and a picture of the final result from photoshop. (everything below the horizontal white line will initially be hidden until a checkbox is selected).
http://imgur.com/8mY2ZVH
First of all under Frameworks & Extensions, set the select box to No Wrap - in body instead of onLoad. (In the top left).
Second, you have multiple syntax errors.
Multi day<input type="checkbox" name="multi-day" value="multi-day" onclick=""ShowExtraForm1('multiBooking')"">
Remove one set of "" around the ShowExtraForm1.
document.getElementById('singleBooking')style.display="none";
document.getElementById('multiBooking')style.display="none";
Add a . before the 'style' attribute, it's currently a syntax error.
And also, where are the actual forms you are trying to hide?
I have edited your jsfiddle link
think its not working there but this is the function you want
function ShowExtraForm1()
{
var singlechecksts;
var multichecksts;
singlechecksts= document.getElementById('singlecheck');
multichecksts= document.getElementById('multicheck');
if(singlechecksts.checked)
{
document.getElementById('singleBooking').style.display="block";
document.getElementById('multiBooking').style.display="none";
}
if(multichecksts.checked)
{
document.getElementById('singleBooking').style.display="block";
document.getElementById('multiBooking').style.display="block";
}
}
where singlecheck and multicheck are id's of your checkboxs
Completely new to Java Script & LiveCycle and I've searched Google for days, so I'm trying to find the answer here. It seems to me it should be simple, but I'm not a programmer.
What would the Java Script code look like in LiveCycle to make a check box return a variable that contains a set of values?
For example, if I select a YES check box to a situation (called "Sit_1_YES"), a new instance will be created of a subform (called "subReqIA") and a set of values from a variable (called "Cat_COP_Sit_1") will automatically appear.
Thank you so much for your help!!
I'm not sure exactly where you plan for the values to go in a subform. Normally there would need to be a text field or something similar in that subform (I'm going to presume that there is). You can add something like this to the exit event for the checkbox.
if (this.rawValue == "1"){
var rowNum = subReq.instanceManager.count;
subReqIA.instanceManager.addInstance();
subReqIA[rowNum].tfExample.rawValue = Cat_COP_Sit_1;
//whatever else you would do
}
else {
subReqIA.instanceManager.removeInstance();
//whatever other cleanup you need to do
}
I have tried jQuery and overflow hidden and toggle options but none of them will allow me to do what i wish to do with these tables.
here's a picture of what I want to do....
http://26.media.tumblr.com/tumblr_lmvixzfYyY1qzp8feo1_500.jpg
I want the tables I've created to span the whole browser, I presume its a bit like tabs except I don't want them to be visible until the user clicks on the text option; I hope there's a way - I've seen it done before - so that when the page loads only the text is visible and then when the user clicks on the text the picture and options drop down. The code I've tried only work for one link or the code conflicts and the tables aren't 100% across either.
Sorry, I'll tell you I'm fairly basic in my coding knowledge but any help is greatly appreciated!
culturecouture.cc
alternative to jquery-ui jquery-tools might be: http://flowplayer.org/tools/demos/tabs/index.html
you could use:
$("#mytabs .shouldBehidden").hide();
Or I hope this code will clarify the potential methods and provided by jQuery Tools!
// Place the filter in the appropriate position
$("#new-filter-tab").before(data.filter);
$("#new-filter-pane").before(data.content);
// Remove the existing Tabs instance
$("ul.filter-tabs").removeData("tabs");
// Recreate the Tabs
$("ul.filter-tabs").tabs("div.filter-panes > div");
var filters = $("ul.filter-tabs").tabs();
// And select the new filter
var filterCount = filters.getTabs().length;
filters.click(filterCount - 1);