+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Adding custom JS to widget designer? Dropdown SelectedValue incorrect in designer load.

Adding custom JS to widget designer? Dropdown SelectedValue incorrect in designer load.

3 posts, 0 answered
  1. Marko
    Marko avatar
    148 posts
    Registered:
    30 Jul 2008
    19 Apr 2013
    Link to this post
    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?
  2. Marko
    Marko avatar
    148 posts
    Registered:
    30 Jul 2008
    23 Apr 2013
    Link to this post
    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();
        
    });
  3. Pavel Benov
    Pavel Benov avatar
    341 posts
    Registered:
    14 Mar 2016
    24 Apr 2013
    Link to this post
    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
3 posts, 0 answered