On-Page Edit Mode: run javascript (like uniform.js) without full

On-Page Edit Mode: run javascript (like uniform.js) without full page reload

Vladimir Levchuk

Vote:

Hi,

We use uniform.js to style our controls. But when editor changes a property (from on page edit mode) the property (actually it's a block) automatically updated using dojo ajax, and editor sees plain html controls (see screenshot below).

What is the easiest way to run something like $updatedBlock.find(".js-plugin").uniform() on each html container updated by AJAX ?

#91633

Oct 09, 2014 16:56

Vladimir Levchuk

Vote:

Missed screenshot (http://dl.dropbox.com/u/71573976//screenshots/2014-10-09_17h50_59.png):

(P.S. Not sure why, but I'm unable to add image, so placing a link to it)

#91634

Edited, Oct 09, 2014 16:57

Vote:

Have you found a solution to this?

#111606

Oct 16, 2014 13:26

Vladimir Levchuk

Vote:

Hi, Sara.

As a workaround I use @Html.FullRefreshPropertiesMetaData(...) to refresh the whole page.

I tried to hack it using dojo/request/notify (I'm not good in dojo, so probably there is a better way to do the same) and trying to run plugins code some time after ajax response received from server:

require([
    "dojo/request/xhr",
    "dojo/request/notify",
    "dojo/on",
    "dojo/dom", "dojo/dom-construct",
    "dojo/json", "dojo/domReady!"],
function (xhr, notify, on, dom, domConst, JSON) {
    console.log("TEST AJAX");
    
    notify("done", function (response) {
        console.log("done");
        console.log(response);

        if (response.text && response.url.indexOf("PropertyRender/Render") > -1) {
            var serverResponse = JSON.parse(response.text);

            if (serverResponse && serverResponse.innerHtml) {
                var $html = $(serverResponse.innerHtml);
                console.log("PLUGIN DETECTED");

                console.log($html);

                var targetWindow = $("iframe")[0].contentWindow;
                var App = targetWindow.App;

                setTimeout(function() {
                    var $container = targetWindow.$(".js-plugin");
                    App.Common.Plugins.uniform($container);
                }, 200);
            }
        }
    });

});

and it usually works, but not always

#111611

Oct 16, 2014 14:09