Modify Field In On Instance In LiveCycle - javascript

I'm working in LiveCycle creating a form that allows the user to duplicate a sub form as they need. In that set of fields there is a dropdown and if it is set to certain values a field that is normally hidden should display. I only want this to display in that instance of the sub form that they made that selection. So my question is how do I determine which instance fired off the event? If I get that I think I can go from there with making the change.
I'm still new to LiveCycle and the resources out there are scattered at best. Any help is appreciated.
PS I'm using Javascript and not FormCalc.

the easiest way is to use built-in functionality that helps you to address proper objects in your code. When you are typing your code in the script window, just hold Ctrl and mouse click the object you want to refer your code to. It will generate a correct short version DOM name for that object. If you hold Ctrl-Shift and then click, you'll get a full DOM address for that object.
For example, you have a 1-page form that has a subform, which can get multiple instances. Inside that subform you have a drop-down "Selector" which controls visibility of the text field called "Weight". Your DOM addresses will look like follows
form1.page1.subform.Selector - this is your drop-down
form1.page1.subform.Weight - this is your text field
Now because your script is located inside of the object in the same subform that has also the object you want to control, you don't even need to pay attention of any instance numbers.
In your script window of form1.page1.subform.Selector just type
if (this.rawValue == "Yes"){
Weight.presence = "visible";
}
It will address only the object that is located in the same subform with your drop-down controller.

Related

Auto preview form content before submit using javascript

I am planning to design a form for collecting user communication details. These are typically comprised of address, name, phone number etc.
My requirement is to create a printer label-size box below the form to automatically start displaying how the address will look on the printed label.
Any pointers to do this using bootstrap JavaScript?
Take a look at Mutation Observer API:
here
and here
It lets you track changes in the DOM and invoke callback functions. I recently made an editable HTML table using it, it's pretty intuitive. You can watch for attribute changes, DOM tree changes, etc. So I suggest building a 'template' which will accomodate your variables (address, name, etc.), style it with Bootstrap and use the Mutation Observer API to fill it whenever you see fit.
You could also use good old event listeners and clone the user input from the form to the template below i.e. using 'onkeypress' event. Whenever something is typed it will be displayed on the template.

Adding web content dynamically with jquery and jstl in a Spring-MVC app

I'm developing a control panel web app. Now, i have to do an edit user window in order to add or delete roles of the user. I'm thinking in many ways to do it so i would like to ask you how i can afford this in the simpliest way and respecting good practises.
The jsp view has a select with available roles for the user. When you click an option a new div element with a button, rolename and role description has to be displayed. I catch the event with jquery but i have some doubts:
1- How can i pass the username to the jquery function? i'm using jstl but it´s server-side and javascript client-side. Maybe.. i have to do.. /admin/userRoles/john and get the user from the url? Or set a var with jstl? I read about get an attribute model mixing jstl and javascript but it doesn't seem a good practise...
2- Continuing with the jstl and javascript... When i click a select option to select a new role i need to create a new div with the role info (role name, role description,...) and a button to delete the div. I have a jquery function which captures this event and disable the option of the select. How can i manage to refer the div to the role in order to enable the option if the delete button is selected?
Maybe i have to set the div id with the rolename?
4- The div has a button with a text (delete) but i need to translate it depending on the language. How can i get the translation?
thank you (i will check the most useful answer and vote up the others)
How can i pass the username to the jquery function?
Just reference nomrally using EL
<script>
var yourJsVar = "${yourUsernameVar}";
<script>
2,3,4 don't fully understand the question.
You can map spring forms to pojo's easily. Or alternatively submit and return data using Ajax and json, which is also made easy by spring-mvc and jackson. The choice of how you do this CRUD is up to you.

How to use form input to update code?

I have a page where I need to filter certain values provided by an embedded widget based on user input in a text field.
I can do this by appending certain parameters to the widget code embedded on the page and refresh the page
How do I take the user input , replace the widget code and refresh the page?
this is the code I might need to append to the widget code that already exist on my page.
%22filter%22:%7B%22keyword%22:%22userprovidedvalue%22%7D,
I am using jsp
You should be able to handle it by putting an onchange on the input field, and sending it to a function that reads the value off of the input field. Alternately, you can have the submit button call a function, that first reads the value off the input field, then performs whatever logic you need, then submits the form.
Jquery is often useful for making things like this easier and more intuitive, though it does have a bit of a learning curve to ramp up.

About onSubmit and how I should use it

So I am trying to create four select menus within a form that give the user several item options/combinations.
So basically they can chose different values from all four select menus and onSubmit the user will be taken to the correct URL. Example (Agra -- Blue/Aqua -- Traditional -- $99-$199) and the url for that filter will direct the user.
The question I have is how should I go about defining a function for something like this?
I essentially need the form (we already have the URLS for every combo) to direct the user to the appropriate url when they click submit. Part of me thinks this is a very inefficient way of doing things and that I should be using jQuery or something.
Any help is appreciated
When using the drop down option each listing contains a value. depending on what values you set you could create a filter to locate the correct URL.
Also depending on ur URLS you could create them with the values of the drop down menu.
You might want to consider adding a search button so u know when the user has selected all of the options.

Browser back button and dynamic elements

I have a page that uses jQuery to create a number of <input> DOM elements dynamically based on what user picks from a <select> box.
Let's say the user picks 4 from the select box, my script dynamically shows 4 input boxes.
The problem is when the user refreshes or goes back to this page (with the browser back button). The elements that are created dynamically are not repopulated to their last values, while all the other 'static' elements are.
I was thinking I could create a hidden input that would be serialized through javascript with the contents of the dynamic boxes, then read from it on $document.ready and then repopulate my boxes.
Is there a better way?
legenden - there are a number of possible solutions to this, I would check out these history plugins for one:
History Remote
jQuery History plugin
Deep Linking plugin
They are a little fidgety, but you should be able to hack up something positive. I will also add, that this can probably be done by storing the dynamically elements in a cookie(s) and somehow repopulating. Check out the jQuery Cookie plugin. Hope that helped you get started.
You need to manage history yourself if you want things to work in this way. You need Really Simple History.

Categories

Resources