CRM 2011, after saving, fields revert back to invisible - javascript

I'm new to CRM 2011 so I apologize if the answer is obvious. The entity I made is a form where the user fills out information, some fields are hidden until the meets certain requirements to have them visible.
Example: Were you late? Yes/No
(hidden until yes is selected)Reason:
I used javascript to make them invisible at the start and then make them visible if the requirements are met. After the user presses the save button, the field "Reason" would go back to being invisible, is there a way to make it stay visible?
Thanks

You'll have to write javascript code in the onLoad event to see if the field's values are already in a state that would result in the fields being visible. After the entity is saved, it reloads itself, incase a plugin happened to edit an attribute.

If you already attached your function to the attribute onchange event you need to add the following to your onload event:
//Will fire all functions connected to the attribute change event
Xrm.Page.getAttribute("attribute_name").fireOnChage();
Or directory call the function that implements the code i.e.
//Will only call the specified function.
ShowHideField();
Also you might find it easier to attach to onchange handlers
directly from onload code instead of the form UI i.e.
Xrm.Page.getAttribute("attribute_name").addOnChange(ShowHideField);
And to summarize:
function OnCrmPageLoad() {
var attrObj = Xrm.Page.getAttribute("attribute_name");
attrObj.addOnChange(ShowHideField);
attrObj.fireOnChage(); // OR ShowHideField();
//… more code here
}
function ShowHideField() {
// hide fields depending on yes/no questions …
}

Related

Refocus input field after page gets refreshed in wicket

Is it somehow possible to refocus an input field after a refresh which was last focused before the page was requested?
I have a Wicket Form within my WebPage and in this Form there are quite some input fields (like text fields) the user can use to filter my data view. But when the user for example has the focus on the second input field and then clicks on 'go to next page' within the data view he loses the focus, but due to accessibility it is necessary to refocus the second input field.
My idea was to first tag the input field with jQuery with "regain-focus" when focused:
$("input").focus(function() {
$("input").removeAttr("regain-focus");
$(this).attr("regain-focus", "regain-focus");
});
Then on server update search for the element with the "regain-focus" tag - but that's the part, I don't know how to do that... - tag the corresponding component with "autofocus":
input.add(AttributeModifier.append("autofocus", "autofocus"));
and refocus with javascript:
$('[autofocus]').focus();
Since you have JavaScript experience it would be much simpler to do it completely client side: $(document).on('focusin', 'input textarea', function(event) {localStorage.setItem('focus:'+location.pathname, event.target.id)}) and then use jQuery.ready() based logic to read the entry and use it.
When your page DOM/elements change between requests/refresh/ajax calls, it is better to use a CSS selector using optimal-select to store just a unique identifier for the element and use a JQuery selector to find it again for focus setting. I used this in the NoWicket web framework to remember the focused element on ajax calls. Example JS code here.

Change color when form changes

I have a form with multiple textboxes inside a table.
Also inside the table but outside the form there is a cell (said Cell A).
When you first access the form, texboxes in the form are filled with data from a DataBase using php/MySQL.
You can change the textbox values, and submit them to the database with POST. The Database is updated, and you are returned to the same (but now updated) form.
My issue: I want to appear in Cell A a colored text indicating if the data in the form was sent or not. On first arrival to the page or after update in should read "Actualized data" in green. But when you are changing the form without submitting it should change to "Unsent data" in red (or something like that).
I know how to format the text with php
style="color:<?php echo $ColorChange ?>"
but when the form changes (before submitting) I need OnChange and some JavaScript, for example
function ChangeColor()
{
var col=document.getElementById("UpdateSign");
col.style.color="#FF0000";
}
My problem is how to combine those two. Any ideas?
Keep Javascript event triggers outside of HTML elements, and use event listeners. jQuery makes binding event listeners to elements very easy.
For example,
$("#form_input_element").on("onchange", ChangeColor);
takes in the id of the form element and binds the ChangeColor function to the onchange event.
use the onchange event of the body, i suppose this should work. I dont know your complete code so this is more guessing than knowing.
<body onchange=ChangeColor()>

Update individual form element values in database via ajax?

I have quite a few input elements on a page that a user can change. I don't want to submit a form. I just want the database value to be changed after the user changes the value inside one of the elements.
I'm currently experimenting with binding focusout to each of the inputs. Is this the way it's usually done (facebook, etc..)?
$('input').focusout(function() {
var current_val = $(this).val();
var preset_val = $(this).attr('rel');//attribute set with original value
if (current_val !== preset_val) {
alert ('Value changed.');//where I would post to php page to update database
}
});"
The way it is "usually done" is to wait until the user clicks a button to save or commit the changes. If you're going to update each change, you should make sure to be very clear about that to the user.
The appropriate event to use will be dictated by how aggressive you want to be in capturing changes. For per-keystroke updates, keyup would be appropriate for inputs, click for selects and radios/checkboxes. Less aggressive would be blur or change.
One way to be extremely proactive about capturing any possible change is to attach a click and a keyup to the form element itself. This will also save the overhead of adding a listener to every element. Each time an event is fired on the form, you can either a) check the original target, or b) ajax the entire form, or c) loop all the elements and detect changes, only ajax changed fields.
onbeforeupload can be used to do a final check of the form in case the window is closed, as well, but that's probably being a little too hyper.
Documentation
https://developer.mozilla.org/en-US/docs/DOM/HTMLFormElement
https://developer.mozilla.org/en-US/docs/DOM/element.onkeyup
https://developer.mozilla.org/en-US/docs/DOM/element.onchange
https://developer.mozilla.org/en-US/docs/DOM/element.onblur
https://developer.mozilla.org/en-US/docs/DOM/element.onclick

Setting a field based on a ComboBox selection

I'm not a newb to JavaScript but this is my first foray into Acrobat Scripting.
What I'm trying to do is change a text field based on the value selected in a comboBox.
Since I have many different comboboxes with the same set of options, and many text fields that are supposed to be bound to those, I would prefer a document scope function that could be reused for all of those.
I'm not sure if this is possible but here's what I'm thinking...
Detect when a combo box is changed. On the change event submission, take the export value from that and make it the value for the related text field.
Here's the steps:
capture combo box onmouseup event
detect which combo box triggered the event
match up the name of the combo box to its associated text field using an array listing
use a getField() to fetch the text field
set the text fields value to be the export value of the combo box
Any help with this would be appreciated. Especially good sources about Acrobat event triggers and how they work. I have been through a great deal of the API documentation and can't find anything on it.
Found it!
After exhaustive hours/days of Googling I finally found a solution that works.
The handler function needs to be bound to the 'Keystroke' event.
The handler function should contain:
if(!event.willCommit) {
this.getField('[field]').value = event.change;
}
Note: Where 'field' is the name of the field being updated and event.change is the value selected in the combobox.
To fetch the export value of the selection use the following:
if(!event.willCommit) {
this.getField('[field]').value = event.changeEx;
}
Apparently, 'Keystroke' is fired any time a UI element is interacted with. If you don't want it to execute when the document loads, be sure to bind the handler function to the event during the page load event.
Thoughts: AcroForms JS (Javascript for Acrobat) has a seriously broken event model. If you were to get the value of the combobox while using this even handler it would serve up a stale value. Not only does it take an obscure hack to make it work but there is little/no AcroForms JS community to provide answers to hard questions like these.

How can I catch a change event from an HTML text field when a user clicks on a link after editing?

Our webapp has a form with fields and values that change depending on values entered. Each time there is a change event on one of the form elements, we use an expensive AJAX call to update other elements on the page.
This works great for selects, radio buttons and checkboxes. The issue comes in when a user adds content to a text field, and then clicks a link without taking the focus from the text field. The browser moves to a new page, and the contents of the text field are never saved. Is there an easy way to code around this? The AJAX call is too expensive to call with each key press.
Here's an example of my Prototype code at the moment:
$$('.productOption input.text').invoke('observe', 'change', saveChangeEvent);
Have you considered hooking into the window unload() event? Here is a c/p jQuery example using .unload().
$(window).unload(function() {
var input = $("#MyInput"); // Text field to check for
if(input.length > 0)
{
//Ajax call to save data, make sure async:false is set on ajax call.
}
});
This lets you work around making a call on each key press, by making one if they leave the page.
using prototype, you can have a PeriodicExecuter listen while you're typing and sending off an ajax query when nothing has happened for e.g. 2 seconds and value has changed since the last AJAX request. Start the executor using a focus event and shut it down using a blur event, that way you only need one executor at a time

Categories