Dynamics using section to manage fields - javascript

I have a tab, containing a section which a large number (20+) of fields occupy. They are all checkboxes, one of which is a "N/A" choice. Can anyone suggest a simple way of writing javascript that will ensure at least one choice is made, or if not, only let the user continue past this section if N/A is ticked. I'm trying to avoid checking the value in each and every checkbox. Any suggestions?
Thanks

From a user interface standpoint, you could split that section into two sections (without header label so it looks like one section). The first would have the N/A checkbox, and if checked the Javascript would simply hide the section with all the other checkboxes.
If you actually want to check values, you should still be able to use the same concept, but use jQuery to find all checkboxes in that section with all the normal checkboxes. If none of them are checked, you could stop a Save with an error message if N/A is also not checked.

I think this is just a case of using some of the existing functions in the Xrm.Page object, there are a couple for working with lots of attributes at once. Regardless of how you do it you will have to check every field, but you can do it in quite a succinct way.
I would suggesting adding an OnSave event, with code that does something like this:
//we want to make sure that at least one of these is populated
//new_na is the na field
//the others are the possible choices
var requiredFields = ["new_na", "new_field1", "new_field2", "new_field3"];
//this loops through every attribute on the page
Xrm.Page.data.entity.attributes.forEach(function (attribute, index) {
//this will track if at least one field was set
bool atLeastOneSet = false;
//see if the requiredFields array contains this field
if (requiredFields.indexOf(attribute.getName()) != -1) {
//if it is required, check the value
if(attribute.getValue()) {
//if it set update the bool flag
atLeastOneSet = true;
}
}
//finished processing all fields, if atLeastOneSet is false no field has been set
if(!atLeastOneSet) {
//If this code is used in an on save event this will prevent the save
Xrm.Page.context.getEventArgs().preventDefault();
//Give the user some message
alert("At least one field must be populated");
}
});
Untested code, but should hopefully give you a good idea of how to progress.

Related

How to fill in Google Form's drop down and text inputs with Tampermonkey?

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

Getting row data on Interactive Report

Morning,
I'm currently using an Interactive Report on APEX that contains several columns, some of them being checkboxes that represent if a certain number is present in the table that is being used to fill the report.
For example, row 1 has a telephone number "99091021", row 2 a provider, and the following 5 rows are checkboxes that should represent branches in certain areas. If a checkbox is clicked, it means that this number is present in that area.
Now, I'd like to create a dynamic action that inserts that number into that table when I click the checkbox (and it becomes checked), and a delete for when it's also clicked (and becomes unchecked). Problem is, I don't know how to access the rest of the data in the row of the IR to use as a comparison for the delete and insert statements.
Say I try to click the Checkbox 3 on the row where the telephone number is "99091021". A dynamic function would get the data row, then a true action would compare the necessary data to perform either an insert or delete, depending on the state of the checkbox. That's the plan.
I've done something similar before, using localStorage, but it didn't quite work, because before I used it on an interactive grid. Is there a similar function for interactive reports?
Also, is there a way to check if a checkbox is checked or unchecked in a PL/SQL Code?
Here's the solution I found:
I had a select that got the necessary data for the Interactive Report, but because I kept getting an error of temporary data table being exceeded and always breaking the server, I had to change the checkbox query to something like this:
apex_item.checkbox (1, '1_'||a.pk, case when max(decode(b.nr,1,1,null)) is null then '' else 'CHECKED' end) as checkbox1
The '1_' part represents me selecting the first checkbox. With the value still there as the selection, I was able to do the following:
$s("P165_GET_PK",this.triggeringElement.value)
The result would basically be "1_PK_number". With this function I was able to get the value (a.pk) hidden in the checkbox to an Apex item, and then continue using it for my insert and delete statements. It's just a matter of separating the value in it with substring functions and so on.
Now I can delete or insert new data inside that table with a simple click.
I hope it helps in case someone tries doing something similar.

creating custom logic for focusing html elements while validating form

I have been stuck in somewhere around validating the form. I have a nice 10-11 fields in
my .cshtml page in MVC. Those fields are using data anotations from model and here I
am using client side validations using jquery and unobtrusive javascript. So, validations
are firing up very good on submit but we need to implement a logic where a user will click on the
submit button but the page will automatically drags the user to the location of mandatory field.
Assume that all 11 fields in my form are mandatory. user has filled the first two and
left the third blank .So on submitting the form, the cursor should focus to that control
with the validation message.Due to the length of the page, it should be scrolling up and down
accordingly. And if suppose only first two fields are filled and others are empty,
the validation message should show the 3rd field with the focus on control and then
if user filled the 3rd field and hit save, it should focus to the fourth field.
On one instance it looks easy and I am trying it with following code snippet on click of submit button.
AS this is the class which mvc uses when validation fires, I select element from the first class like below:
var element = $('#' + $('.input-validation-error:first').attr('id'));
once I get the element then I am using the below code:
if (element.selector !== '#undefined') {
// The class "RequiredFeildDropdown" is applied to the control so that I can
check if that is kendo dropdown and I should focus to that kendo control of the element.
if (element.hasClass("RequiredFeildDropdown")) {
element.data("kendoDatePicker").element.focus();
}
// This class "RequiredFeildDate" has been applied to check whether the kendo control is datepicker
so that I can focus it.
else if (element.hasClass("RequiredFeildDate")) {
element.data("kendoDropDownList").focus();
}
// So here comes the real problem.The primaryaddressData contains the collection
of objects. Actually my page also consists of some table elements that i have created using for loop.
So, while validating , if primaryaddressData.length have count < 1, this div should show.Actually there should
be atleast one primary address. The div which have table elemets is "primaryaddressErrorMessage"
else {
if (primaryaddressData.length >= 1) {
$("#primaryaddressErrorMessage").hide();
} else {
$("#primaryaddressErrorMessage").show();
$('html,body').animate({
scrollTop: $("#primaryaddressErrorMessage").offset().top
}, 'slow');
isValid = false;
}
element.focus();
To make more clear of the second portion,My page also has a div called "primaryaddressErrorMessage" which I have described above
<div class="common-box padding25 ">
<span id="primaryaddressErrorMessage" class="margin-btm30" style="display: none; color: #ce3a36; font-size: 11px; font-family: 'signikaregular', Arial">Primary Addressed are required.</span>
#{Html.RenderPartial("~/Areas/Admin/Views/Common/_AddressPartial.cshtml", Model);}
</div>
So, This partialview has a set of controls which user uses to add primary address.
When this partial view loads, by using ajax request, I check from database
If this user has atleast one primary address,If yes, I keep its count it
"primaryaddressData"=1 and so when user submits a new primary address,
after an post request to controller, I get the primary address count from
database and again set "primaryaddressData"= count that I get from database through Json.
As this "primaryaddressData" is global, when user hits save from the main page i.e from the main
view which was containing the above partialview, I check the length of
"primaryaddressData" and if is having less than one, I will have to focus to
this span having id="primaryaddressErrorMessage"
I am going very hard through this. There might be someone who has also faced this problem in past. So, it could be a duplicate question but I asked it for this particular scenario. Please let me know if some more explanation is required.

Why does the wrong ID keep Populating?

I have run into a very odd situation, that I have not experienced before. In our code, we wanting to check the value of BillingDomainID once the page is loaded. Wrapped in a function with many other jQuery functions inside, I have the following code:
var vBDID = ".BillingDomainID" + $("#BillingDomainID").val() + "";
alert(vBDID);
$(".BillingDomainID").show();
$(vBDID).toggle();
We are using vBDID to dynamically create a class that will hide certain fields in the form if the BillingDomainID != 1. The Value exists in a hidden field that is at the bottom of the page. Since we have 7 BillingDomainIDs in our system, Anytime the BillingDomainID = 1 it will show the fields, and anytime it is 2-7, it hides them because of the classes that we have placed on the fields that we want to hide.
So here is the issue that I having. The alert that appears in the code above will say that the vaule of vBDID is .BillingDomainID2 for example, but the real value of the #BillingDomainID is 1 in the Database. Why is it that the value is being presented as a different value in the website, that it is in the database? Everything else works as it should, with the exception to this part.
I should also mention, that we are using ajax to change value when the Office dropdown is changed. This part also works fine, and the BillingDomainID will actually be correct after it is changed once. It is only initially when the page loads that it is incorrect.
Thank you all so much for your help!

Clear all option select entries by clicking radio button [duplicate]

This question already has an answer here:
Reset values from jQuery Mobile
(1 answer)
Closed 8 years ago.
I've been trying all day to figure this out, and it seems simple enough, but how can I clear (not remove) all the selections from a group of select option drop downs at once? I want them set back to their default state when the div was first loaded. I can't use .reset because there will be other information in the form that I need to gather, but I need to allow users to change their minds without penalty (having to fill the form out all over again).
This SO question shows you how to remove the options which isn't what I need.
This SO question seemed to give the answer, but I haven't been able to get it to work.
And this jQuery bug entry seems to imply that it can be done with .empty(), but that doesn't work either.
This SO question lists a bunch of different ways to do exactly what I want, and I've tried all of them (see code below), none worked. I'm obviously missing something.
Here's a JSfiddle with the problem.
How to view the problem in the fiddle:
At Repair Status, click on Repaired; two new inputs are shown, a set of radio buttons and then select-option drop downs for each. Under Category, choose Part Quality, then choose any item from the drop down. That choice should now show up in the drop down. Now click on any one of the other Categories, and then back to Part Quality. The same choice you just made will still be shown instead of the default of "Select Part Quality Reason", which is what I want.
My attempts have focused largely on the Part Quality radio button for proof of concept, but the production code needs to clear all of the entries from all of the option-selects in the form except the Reporting Department drop down. Preferably I can use a generic selection with a $(this) construct, but that's not required. Something like this:
$("select option:selected").each(function () {
$(this).val(''); //doesn't work
});
Requirements:
When the user chooses a different radio button (Category), all of the option select drop downs will be reset to their default states. That way when the user makes their final choice & hits Submit, there are no extraneous entries. When they change their choice of Category, the underlying code must preserve the Reporting Department drop down choice.
I can then gather all the bits and pieces of their choices to be placed into a JSON string for an AJAX call to my code-behind and insert the data into a MySQL database.
I don't care if the answer uses jQuery or just plain JavaScript, I can use either happily.
Here's a bunch of attempts that haven't solved it yet:
$("#formEvent_repair input[type='radio']").on('change', function () {
//$("#select_part_quality_repair option:selected").attr("selected", false);
//$("#select_part_quality_repair").find('[selected]').removeAttr("selected");
//$('#select_part_quality_repair').attr('selectedIndex', '-1');
//$('#select_part_quality_repair').val(null);
$("#select_part_quality_repair").find('option:first').attr('selected','selected');
//$("select option:selected").val([]);
//$("select option:selected").html('');
//$("select_part_quality_repair").html('');
$("select_part_quality_repair").append().html('');
$("select option:selected").each(function () {
console.log("Emptying select options");
$("#select_part_quality_repair").find('option:first').attr('selected','selected');
//#select_part_quality_repair-button > span
//$("#select_part_quality_repair").prop('selectedIndex', -1);
//$("#select_part_quality_repair").find('option').attr("selected", false);
//$("#select_part_quality_repair option").attr("selected", false);
$("#select_part_quality_repair option:selected").attr("selected", false);
console.log(this);
$(this).val([]);
});
Because you are using jquery mobile you need to issue a refresh command to the elemnt that you change.
$('#select_part_quality_repair').val('').selectmenu('refresh');
This will deselect any option and then refresh the layout to show the change..
For radio buttons you set in code use
$(<radio-button-selector>).checkboxradio("refresh");
You clear a dropdown selection like this:
$("#select_part_quality_repair").val("");
That will clear the selection without removing the members.
Also, this line in your code is improperly formed:
$("select_part_quality_repair").append().html('');
You forgot to put the "#" before the element ID, as is required by JQuery. That line won't help you anyway, so you should not even bother with it.
Cheers,
-=Cameron
Unchecked all radio button
$(".clear").click(function(){
$('input:radio').each(function () {
$(this).removeAttr("checked");
});
});
EDIT 2 :
Unselected all options
$(".clear").click(function(){
$('select').each(function () {
$(this).removeAttr("selected");
});
});

Categories

Resources