Issue with LightSwitch restyling custom control with delayed rendering

Question

I was playing around with a LightSwitch custom control using the simple code:

myapp.Facility_Details.ScreenContent_render = function (element, contentItem) {
    $(element).append("<ul><li><label><input type='checkbox'/><span>Test</span></li></ul>");
}

And I notice LightSwitch makes a valiant effort to rewrite my HTML after I render it, adding it's own control styling classes to the HTML and doing a bit of re-organizing. I figured I could live with this & just get used to what it did, but then I hit a worse issue when I added some AJAX to the mix. When I do my actual rendering in the done method of a Promise the post-processing doesn't happen.

EG:

myapp.Facility_Details.ScreenContent_render = function (element, contentItem) {
  contentItem.data.getCommodityGroups().done(function (data) {
    $(element).append("<ul><li><label><input type='checkbox'/><span>Test</span></li></ul>");
  });
}

Renders totally differently (Doesn't edit the HTML). I could live with this too, but then if I browse away from this page & back to it then it swaps over to the first display... I tried returning the Promise from render thinking maybe that'd let it wait for me to be done, but no dice.

Does anyone know how can I either:

a) Prevent this reprocessing so I get the HTML I write every time.

b) Trigger this reprocessing explicitly so I can make sure it happens after I render inside a Promise.

score 2 · Answer 1 · answered Mar 22 '14 at 10:38

2

It is jQuery doing the work so wrap into jQuery object before appending it perhaps? Look at the samples down the page here MSDN article.

answered Mar 22 '14 at 10:38

Xpert360

156
2

I am already wrapping it in jQuery, that's what the $( around element is. `$(element).append` is a jQuery function. That said, noticing on that link that it's actually jQuery mobile styling lead me to find the actual answer by looking up jQuery Mobile's help so thanks :) – fyjham Mar 23 '14 at 22:29

score 1 · Accepted Answer · edited May 23 '17 at 12:01

This restyling is coming from jQuery Mobile. Turns out the solution is to trigger a create event after editing the HTML (EG: $(element).trigger('create');) to tell jQuery Mobile there's new HTML to style.

Another approach is to add data-role='none' so jQuery Mobile leaves your HTML alone. I'll probably mostly use the latter, but it's good to know both exist.

Actually found the answer over at another StackOverflow question - the trick was knowing it was jQuery Mobile that mattered which is a lot easier to find info for than LightSwitch itself.

Issue with LightSwitch restyling custom control with delayed rendering

2 Answers2