Adding custom JS to widget designer? Dropdown SelectedValue

Posted by Community Admin on 19-Apr-2013 00:00

I submitted this to telerik support, but I figured I'd also ask the community (plus hoping this would be useful to others, too)...

I have a custom widget that I created a while ago. I added a widget designer recently using SF Thunder (via add designer to existing widget option). This seems to have worked fine and my widget designer loads and works fine.

Now, I would like to add some custom javascript for the designer. For example, I have a dropdown menu and two "div" elements (this is all in the designer ASCX itself). When the user selects value1 in dropdown I want to show div1 and hide div2. When user selects value2 in dropdown, I want to hide div1 and show div2. I know how to do this with some basic jQuery but I'm not sure WHERE in the auto-generated designer JS file i should add this, and which syntax to use. That would be my first question.

For example, I'm used to doing something like this:

$(document).ready(function ()

$("#MyDropdown").change(function ()

if ($(this).val() == "value1")

$("#div1").show();

$("#div2").hide();

else if ($(this).val() == "value2")

$("#div1").hide();

$("#div2").show();

);

I was able to add this to the very bottom of the auto-generated designer JS file, and it ran fine (although i don't know if that was a recommended way of doing it). However, I also need the div1 and div2 to be shown/hidden (based on selected dropdown value) when the designer LOADS each time (when the user click on "edit" to view/edit the widget properties in UI). I tried the following, but it doesn't work because the selected value of dropdown shows as always being "value1" even though value2 is stored as the property value (so it just evaluates to the first option in the dropdown). When the designer UI loads, the dropdown itself shows the proper value (value2 in this case), which reflects the saved property value, but when JS executed it saw it as "value1" and therefore set the incorrect div1 and div2 visibility.

$(document).ready(function ()

/* --------------------- Startup scripts: ------------------------------- */

var selectedValue = $("#MyDropdown").val();

if (selectedValue== "value1")

$("#div1").show();

$("#div2").hide();

else if (selectedValue == "value2")

$("#div1").hide();

$("#div2").show();

/* --------------------- Event handlers: ------------------------------- */

$("#MyDropdown").change(function ()

if ($(this).val() == "value1")

$("#div1").show();

$("#div2").hide();

else if ($(this).val() == "value2")

$("#div1").hide();

$("#div2").show();

);

Any thoughts?

Posted by Community Admin on 23-Apr-2013 00:00

I believe I've solved this. For the startup/initialization scripts, instead of doing this (BAD):

$(document).ready(function ()

var selectedValue = $("#MyDropdown").val();

if (selectedValue== "value1")

$("#div1").show();

$("#div2").hide();

else if (selectedValue == "value2")

$("#div1").hide();

$("#div2").show();

);

...I did this (GOOD):

$(window).load(function ()

var selectedValue = $("#MyDropdown").val();

if (selectedValue== "value1")

$("#div1").show();

$("#div2").hide();

else if (selectedValue == "value2")

$("#div1").hide();

$("#div2").show();

);

I guess $(document).ready happens too early in the process, before the dropdown got initialized and set to the previously-saved widget property value. By contrast, $(window).load seems to happen later in the process, and getting dropdown selected value returns the correct value.

So, my whole script is now this:

/* --------------------- Event handlers: ----------------------- */

$(document).ready(function ()

$("#MyDropdown").change(function ()

if ($(this).val() == "value1")

$("#div1").show();

$("#div2").hide();

else if ($(this).val() == "value2")

$("#div1").hide();

$("#div2").show();

);

/* --------------------- Startup/initialization: ----------------------- */

$(window).load(function ()

var selectedValue = $("#MyDropdown").val();

if (selectedValue== "value1")

$("#div1").show();

$("#div2").hide();

else if (selectedValue == "value2")

$("#div1").hide();

$("#div2").show();

);

Posted by Community Admin on 24-Apr-2013 00:00

Hi Marko,

This is great input! Thank you for sharing your observations with the community.

All the best,
Pavel Benov
the Telerik team

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

This thread is closed

All Replies