locked
Jquery Event Handling In Custom control RRS feed

  • Question

  • I have created a custom control in lightswitch html and I tried to handle events but it doesn't work.

    myapp.BrowseProducts.Slider_render = function (element, contentItem) {
        // Write code here.
        var htmldirective = $('<input type="range" name="slider-step" id="slider-step" value="150" min="0" max="500" step="50" />');
        htmldirective.appendTo(element);
        htmldirective.change(function () {contentItem.screen.details.displayName='hi' } )
        //htmldirective.change(function () { console.log('slider value has changed') })
    };

    what is wrong with above code that none of event handling function work , neither console logging or title changing



    • Edited by GHR_ARASH Friday, February 21, 2014 10:09 AM
    Friday, February 21, 2014 9:56 AM

Answers

  • A couple of things to note:

    1. jQuery .change() uses a selector, not the entire DOM node as htmldirective is, for event handling.  Try selecting by either your Id or name tag and attaching the .change() handler to it.

                $('#slider-step').change(function() { ... });

    2. Assuming you have followed step #1, console.log() should work fine.  Changing the display name of the screen probably will not work as this is usually done in the screen .created() method.  As such, you will successfully change the value of the screen's display name, but there is no code explicitly telling LS to update the DOM node for the screen title, so the change will not be evident.

    • Proposed as answer by LittleBobbyTables Monday, February 24, 2014 5:16 PM
    • Marked as answer by Angie Xu Friday, February 28, 2014 2:38 AM
    Monday, February 24, 2014 4:47 PM

All replies

  • Hi GHR_ARASH,

    Did you have get any error information? Your code looks good.


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.


    • Edited by Eason_H Monday, February 24, 2014 8:17 AM
    Monday, February 24, 2014 8:17 AM
  • A couple of things to note:

    1. jQuery .change() uses a selector, not the entire DOM node as htmldirective is, for event handling.  Try selecting by either your Id or name tag and attaching the .change() handler to it.

                $('#slider-step').change(function() { ... });

    2. Assuming you have followed step #1, console.log() should work fine.  Changing the display name of the screen probably will not work as this is usually done in the screen .created() method.  As such, you will successfully change the value of the screen's display name, but there is no code explicitly telling LS to update the DOM node for the screen title, so the change will not be evident.

    • Proposed as answer by LittleBobbyTables Monday, February 24, 2014 5:16 PM
    • Marked as answer by Angie Xu Friday, February 28, 2014 2:38 AM
    Monday, February 24, 2014 4:47 PM
  • A couple of things to note:

    1. jQuery .change() uses a selector, not the entire DOM node as htmldirective is, for event handling.  Try selecting by either your Id or name tag and attaching the .change() handler to it.

                $('#slider-step').change(function() { ... });

    2. Assuming you have followed step #1, console.log() should work fine.  Changing the display name of the screen probably will not work as this is usually done in the screen .created() method.  As such, you will successfully change the value of the screen's display name, but there is no code explicitly telling LS to update the DOM node for the screen title, so the change will not be evident.

    you marked it as answer , but it doesnt work.

    try it and you will see.

    Sunday, March 2, 2014 12:05 PM
  • Oh, LightSwitch, you can so finicky sometimes....

    I looked back at an old blog post all the way back from the beta HTML Client that showed how to use LS' data-binding API to interact with a jQuery Mobile slider (which BTW, the team has updated for VS2012-3) and came across this little gem:

    • How do you get the $slider object? The simplest way is to let jQueryMobile do its usual post-processing, but this post-processing happens after the render functions have already executed. You could use setTimeout (which is sometimes necessary – see Joe’s Custom Controls post for an example), but in the case of jQueryMobile controls, we can just use their “init” functions.  For a slider control, the function we want is “slideinit”.  We’ll use jquery’s .one event handler to attach this one-time bit of code to the element initialization.

    So, the code isn't working because the .change() event is attached before jQM processes the slider element in the original code sample I showed.  The following code allows for that sequence of events to occur correctly:

    myapp.BrowseCustomers.ScreenContent_render = function (element, contentItem) {
        // Write code here.
            var htmldirective = $('<input type="range" name="slider-step" id="slider-step" value="150" min="0" max="500" step="50" />');
            htmldirective.appendTo(element);
            $(element).one('slideinit', function () {
                // jQuery event handler
                $('#slider-step').change(function () { alert('Change: new value: ' + $('#slider-step').val()) });
    
                // jQM event handler method 
                $('#slider-step').on('slidestop', function (e, ui) {
                    alert('Slidestop: new value: ' + e.target.value);
                });
            });
    };
    And I'll mark this as the proposed answer as it was tested personally as working.

    Sunday, March 2, 2014 5:08 PM