I am working on a business cards project with variable data printing done online. I need a rule I can use so that the fields that are not used or left blank will be suppressed.
At the moment I am getting a blank test field between two text fields if it is left blank. I am new to this so any help will be appreciated.
I'm assuming your situation involves a user typing data into an HTML form after which the information is displayed somehow on an HTML page. If any of that is false, we will need more information to answer your question. It sounds like you have already figured out how to send the information from form to display and you just want to not see empty lines of display. That is handled with CSS style.
First, you need to have some way to test whether the field contains user input. Since you didn't offer any code to build on, I'm going to assume for the moment that you can figure out how to do that.
Then you can use JavaScript to programmatically alter the CSS of a given element. It will go something like this:
if (field_modified === false) {
// cause an HTML element to not be displayed
// here, the value associated to whatever field
// you are testing is displayed in an HTML node with ID 'id_of_node_here'
// There are various other ways of accessing specific HTML nodes
// without giving them IDs. You can research that yourself.
document.getElementById('id_of_node_here').style.display = "none";
}
To test user input in a field, it's probably sufficient to test the length of the value or whether a form element has been changed from default.
Related
Odoo 13.
I got two float fields: time_given and timer.
I have created a widget for 'timer' field. My widget works as real-time clock or some sort of timer. The problem I have encountered is that I want to change the style of 'time_given' field based on the following condition:
((time_given - timer) <= 30 sec) i.e less than 30 seconds left
To change the style of the field the widget attached to is pretty easy, but I am not sure hot to get access to other field elements in the form view I need and make some visual manipulations with them if needed.
I was able to get access to other field elements, change their style and add some text but the it is not a proper way.
this.__parentedParent.__parentedChildren
I get array of objects, then I loop through it and look for the field needed. After I found my target field element I am able to play with it.
For example:
$field_name.addClass('text-danger')
The way above works pretty fine but again as I said before, this is definitely not a proper way.
I was trying to find the right field element and add class to it by the following way:
$("[name='field_name']").addClass('text-danger')
It found the element, but did not add the class 'text-danger'.
I was trying my best by googling and reading the source code, but failed.
enter image description here
I have managed to solve this issue. Just used core.bus.trigger method mentioned in the official documentation.
P.s. In case if you are still interested how I did this in more details, just let me know in the comments section below.
I am creating an application to process a form online. The application pulls in information from the user's profile to autofill certain fields of the form. However, sometimes this information is either incorrect or missing when pulling from the user's profile.
Hence, I am using x-editable so the user can update their information from within the form on the fly. I have no issues getting the x-editable to work. The problem is that the information that is updated or inserted is contained within the anchor tag. Currently, I have this bit of code:
#Model.USER_PHONE
Unfortunately, even if I include the name inside the anchor tag, the data does not get submitted. Is there a clean way I can have the text stored between the anchor tags submitted to the server on post?
One thing I considered was having creating some hidden fields and then updating them via an onClick() event from when the user clicks the submit button. But the problem with this is that I would have to account for every single field that uses an x-editable. It's certainly doable, though I was wondering if I am just missing a easier approach.
What's the best way I can implement this?
The solution for this was a lot easier than I thought it would be. You do not need to account for every single field. Rather, you can just use the 'save' event, catch the name field, then store the value in it. Like this:
$('.fields').on('save', function (e, params){
let fieldname = $(this).attr('name');
$("#" + fieldname).val(params.newValue);
});
Hopefully this helps someone else in the future!
I have a Java EE JSF/Primeface app with an entry form for adding/editing an entity. Let's call it Product On that form is a field to specify the Salesperson, which would really be the Salesperson's Employee Number. But most data entry users don't know the salespersons employee number off the top of their head.
I'm looking for a way to either click open a popup window where the user can put in a keyword or two, find the right B.Smith, J.Doe, etc..., click their name and have that appropriate employee number pop into the text box on the parent form.
Or somehow do this inline in the parent form where the user starts typing any keyword and ajax queries the employee database, appropriate salesperson is selected and the employee number replaces the keywords typed in the input text box.
A nicety is to have (in an non-editable state) next to the text inputbox with the employee number, the salesperson's full name corresponding to the employee number.
Or some variant of those.
I had this working in a JSP application using some hacked together javascript, but I'm having trouble porting the functionality to JSF/Primefaces and was wondering if this functionality is already available in either technology. I've been searching for a solution for a while.
One of the biggest issues if I continue to use my old javascript is knowing the the parent forms textbox id to know where to pop the value in. Using JSF form I'm getting things like j_idt28:j_idt29
You should not need to mess around with Javascript for that case, so you won't need to know the generated ids.
Since you use PrimeFaces, you may want to look into the Autocomplete component.
Besides that, you can always make use of the f:ajax tag to respond to user input and update fields according to it for example.
I'm building a gramma-checker system for a client, where users can add comments/suggestions to a given text. When a user selects some text, a button appear to create a comment/suggestion to that given text selection. My problem comes when I want to save the text selection range in a database, along with the comment/suggestion.
I'm currently trying to solve the problem by using Rangy (http://rangy.googlecode.com/).
These are the ideas I'v tried so far:
Using the rangy serializer to serialize the range. The problem with
this approach is that the DOM is changing each time a new
comment/suggestion is added, and therfore not allowing for a
successful deserialization.
Using the rangy selection wrapper and save that directly in the
database, but like the idea above, the target elements content is
changing with each comment/suggestion, which again makes the approach
not work as intended.
Any suggestions to how I could solve this problem would be appriciated.
I haven't used rangy. But here is one way I would approach it.
Get a selected text from a element (tutorial here)
Then add a wrapper span with a specific id to it. (You might want to fetch a unique id from your server)
Then show a form to enter comments.
On Submit, send the span id and comment to server and store it in database.
When re rendering you can easily assign a class to this span to mark it and show comments on hover using css.
This will give you a system like google document where you can comment on text.
Let me know if that helps or you need more explanation on how to accomplish individual steps.
Advantage of this is you dont need to send the selected text back to server or worry about serializing. Just the id of span you wrapped it in.
I have an application with an input field that takes a dollar value. I need to change the way this dollar value displays so that the number is formatted with a $ and commas, like $5,550.00 if the user just enters 5550.
I found a way to do this, but doing so causes all hell to break loose in the code that uses the value from this field--it does a bunch of stuff, including database updates that break if given $5,550.00 instead of 5550.
There is a TON of underlying code and I am not empowered to go fix it all. I need to figure out a way to display this value to the user as $5,550.00 but keep the underlying value as 5550.
Any suggestions?
Use 2 text inputs. A "façade" one that the user sees, and a "real" one which is actually submitted to the server with the form. When the user enters text into the visible input, you can use JavaScript to set whatever corresponding value you want into the "real" (hidden) input. That effectively decouples the displayed value from the submitted one. You can even use a plugin such as jQuery Masked Input to do the front-end number formatting for you.
Make sure to only apply this when JS is enabled in the browser, otherwise your form will be broken with JS disabled.
If you are talking about an HTML form, I would submit the form using javascript.
You could revert the value back to unformatted before submitting the form.