locked
Trouble appending elements in a custom control's _render method RRS feed

  • Question

  • Could someone double-check to see if I'm doing something wrong?  I'm trying to use JQuery to insert a JQM checkbox to a browse screen of mine, depending on each record's data.  

    In this case I'm displaying a list of persons, some of whom have associated records in the 'employee' table.  The 'IsEmployee' component below is a custom control.

    myapp.BrowsePeople.IsEmployee_render = function (element, contentItem) {
        contentItem.dataBind("value.Employee",
            function (employee) {
                if (employee !== undefined) {
                    $element = $(element);
                    $element.append('<a href="#" data-role="button" data-icon="check" data-iconpos="notext">.</a>');
                    $element.append('<a>test</a>');
                }
            }
        );
    };

    This 'works', in the sense that if I leave the screen and come back to it I'll see the checkboxes in the right spot.  But not when the screen loads initially.  However, that $element.append('<a>test</a>') bit works fine when the screen loads.

    So there's something odd going on.  I've tried a few variations of this and nothing's worked.  Would anyone know what I might try next?  Any jQM experts here who have experience with the icons and such? 



    Saturday, August 9, 2014 10:00 PM

Answers

  • It figures.  Not long after posting, I came across these posts below on StackOverflow.  I needed to call $element.trigger("create") to get over the hump, now it all works great:

    http://stackoverflow.com/questions/6297470/forcing-jquery-mobile-to-re-evaluate-styles-theme-on-dynamically-inserted-conten

    http://stackoverflow.com/questions/7999436/jquery-mobile-does-not-apply-styles-after-dynamically-adding-content

    • Marked as answer by jim bancroft Saturday, August 9, 2014 10:18 PM
    Saturday, August 9, 2014 10:17 PM