Javascript, OnChange isn't triggering until second selection?

(0) Share

Report

Posted on by Cayshin

Let me preface that I have very little knowledge of what I'm doing, I've mostly googled to get this far.

I have an OptionSet (Yes/No) field on my form.

I've set a OnChange Event for the field it to trigger a Javascript function.

The Javascript function checks if the value of the field is Yes, and if so it makes a WebResource visible.

It "sort of" works, but it requires me to toggle away from Yes before the WebResource is shown.

I.E. If the field is defaulted to [ -- Select -- and I choose [ Yes , nothing happens. But as soon as I toggle from [ Yes to any other value (No or back to default --Select--), then the function triggers and the WebResource is shown. So apparently OnChange is seeing the previous value when I change the field??? I can't seem to make head-or-tails of what actually causes the OnChange to trigger.

Below is a sample of my code:

function SetInvisibleWebResource(executionContext) {
    var formContext = executionContext.getFormContext();    
    var Q1 = formContext.getAttribute("crc7b_segment1").getValue();

     if (Q1 !== null){
             if (Q1 == 260830000){ 
            formContext.getControl("WebResource_Segmentation_1").setVisible(true);
        }}
}

260830000 is the value of Yes

Can anyone help point out what I'm doing wrong?

I have the same question (0)

All responses (6)

Answers (0)

Suggested answer

a33ik 84,331 Most Valuable Professional on at

Like (1)

Report
Hello,

Try to use the following code:

function SetInvisibleWebResource(executionContext) { var formContext = executionContext.getFormContext(); var Q1 = formContext.getAttribute("crc7b_segment1").getValue(); formContext.getControl("WebResource_Segmentation_1").setVisible(Q1 === 260830000); }

Was this reply helpful? Yes No
Cayshin 2 on at

Like (0)

Report

Hi Andrew,

Thanks for the suggestion; however, the same issue persists.

Here's a video of what's happening.

[View:/cfs-file/__key/communityserver-discussions-components-files/117/Javascript-Issue.mp4:426:320]

Notice how the URL links only appear after I select away from [ Yes ].

Was this reply helpful? Yes No
Esteban Coto Alfaro on at

Like (0)

Report

Hello, try this:

function SetInvisibleWebResource(executionContext) {

var formContext = executionContext.getFormContext();

// OnChange must execute this even if the field is in "-- Select --" and you change to "Yes"

formContext.getAttribute("crc7b_segment1").addOnChange(SetInvisibleWebResource_aux);

}

function SetInvisibleWebResource_aux(formContext) {

var Q1 = formContext.getAttribute("crc7b_segment1").getValue();

if (Q1 !== null){

if (Q1 == 260830000){

formContext.getControl("WebResource_Segmentation_1").setVisible(true);

}}

}

I hope this work!

Thanks!

Community Support Team - Esteban

If this Post helps, then please consider Accept as solution to help the other members find it more quickly.

Was this reply helpful? Yes No
Suggested answer

meelamri 13,216 User Group Leader on at

Like (0)

Report

Hi,

I think that the issue is not in your JS code..can you please change your actual control with another one ?

Was this reply helpful? Yes No
Cayshin 2 on at

Like (0)

Report

Hi Mehdi,

I'm sorry, I'm very new to customizing CRM forms and am ignorant of most of the terms and what they mean/reference. When you say "actual control" what's that?

Would the control be my OptionSet field with the Yes/No selections? If so, I've tested it using the Two Options field type but ran into the same issue.

Was this reply helpful? Yes No
Suggested answer

Cayshin 2 on at

Like (0)

Report
Ok, so I figured out a messy way that "works". I had stop using formContext and go back to Xrm.page (I don't know enough about CRM to know what the difference is or why/when to use one over the other), Then I had to create a duplicate of my below javascript.

function SetInvisibleWebResource() { if (Xrm.Page.getAttribute("crc7b_segment1").getValue() == 260830000 && Xrm.Page.getControl("crc7b_segment1").getVisible() == true){ Xrm.Page.getControl("crc7b_segment2").setVisible(false); Xrm.Page.getControl("crc7b_segment3").setVisible(false); Xrm.Page.getControl("crc7b_segment4").setVisible(false); Xrm.Page.getControl("crc7b_segment5").setVisible(false); Xrm.Page.getAttribute("tcg_segmentationmodel").setValue(260830000); Xrm.Page.getAttribute("tcg_segmentationmodel").fireOnChange(); } else if (Xrm.Page.getAttribute("crc7b_segment1").getValue() == 260830001 && Xrm.Page.getControl("crc7b_segment1").getVisible() == true && Xrm.Page.getControl("crc7b_segment2").getVisible() == false){ Xrm.Page.getControl("crc7b_segment2").setVisible(true); Xrm.Page.getAttribute("crc7b_segment2").setValue(null); } if (Xrm.Page.getAttribute("crc7b_segment2").getValue() == 260830000 && Xrm.Page.getControl("crc7b_segment2").getVisible() == true){ Xrm.Page.getControl("crc7b_segment3").setVisible(false); Xrm.Page.getControl("crc7b_segment4").setVisible(false); Xrm.Page.getControl("crc7b_segment5").setVisible(false); Xrm.Page.getAttribute("tcg_segmentationmodel").setValue(799640000); Xrm.Page.getAttribute("tcg_segmentationmodel").fireOnChange(); } else if (Xrm.Page.getAttribute("crc7b_segment2").getValue() == 260830001 && Xrm.Page.getControl("crc7b_segment2").getVisible() == true && Xrm.Page.getControl("crc7b_segment3").getVisible() == false){ Xrm.Page.getControl("crc7b_segment3").setVisible(true); Xrm.Page.getAttribute("crc7b_segment3").setValue(null); } if (Xrm.Page.getAttribute("crc7b_segment3").getValue() == 260830000 && Xrm.Page.getControl("crc7b_segment3").getVisible() == true){ Xrm.Page.getControl("crc7b_segment4").setVisible(false); Xrm.Page.getControl("crc7b_segment5").setVisible(false); Xrm.Page.getAttribute("tcg_segmentationmodel").setValue(799640001); Xrm.Page.getAttribute("tcg_segmentationmodel").fireOnChange(); } else if (Xrm.Page.getAttribute("crc7b_segment3").getValue() == 260830001 && Xrm.Page.getControl("crc7b_segment3").getVisible() == true && Xrm.Page.getControl("crc7b_segment4").getVisible() == false){ Xrm.Page.getControl("crc7b_segment4").setVisible(true); Xrm.Page.getAttribute("crc7b_segment4").setValue(null); } if (Xrm.Page.getAttribute("crc7b_segment4").getValue() == 260830000 && Xrm.Page.getControl("crc7b_segment4").getVisible() == true){ Xrm.Page.getControl("crc7b_segment5").setVisible(false); Xrm.Page.getAttribute("tcg_segmentationmodel").setValue(799640002); Xrm.Page.getAttribute("tcg_segmentationmodel").fireOnChange(); } else if (Xrm.Page.getAttribute("crc7b_segment4").getValue() == 260830001 && Xrm.Page.getControl("crc7b_segment4").getVisible() == true && Xrm.Page.getControl("crc7b_segment5").getVisible() == false){ Xrm.Page.getControl("crc7b_segment5").setVisible(true); Xrm.Page.getAttribute("crc7b_segment5").setValue(null); } if (Xrm.Page.getAttribute("crc7b_segment5").getValue() == 260830000 && Xrm.Page.getControl("crc7b_segment5").getVisible() == true){ Xrm.Page.getAttribute("tcg_segmentationmodel").setValue(799640003); Xrm.Page.getAttribute("tcg_segmentationmodel").fireOnChange(); } else if (Xrm.Page.getAttribute("crc7b_segment2").getValue() == 260830001 && Xrm.Page.getControl("crc7b_segment5").getVisible() == true){ Xrm.Page.getAttribute("tcg_segmentationmodel").setValue(799640004); Xrm.Page.getAttribute("tcg_segmentationmodel").fireOnChange(); } }

So now on the Events for segment_1, segment_2., etc... controls I've added both javascripts.

I'm sure this is the completely wrong way to do it, but it works so I'm happy =).

Was this reply helpful? Yes No