Ok, I think I've made some progress on this.

At the end of my XSLT I've added:

And while in Canvas mode, Umbraco does outputs something... Now in fact it is possible to see a link that says "Click here to edit companyLogo.", however when I click it, nothing happens. I suppose Umbraco is picking up even the right item because I see there is a tooltip that says "Click here to edit the companyLogo field in Homepage" (which is the name of my item, where that field is actually present).

The html output in the live editing mode is:

<umbraco:iteminfo itemId="5" name="companyLogo" nodeId="1046" title="Click to edit the companyLogo field of &#39;Homepage&#39;">
    <strong>Click here to edit companyLogo.</strong>
</umbraco:iteminfo>

Would someone be able to point me to the right direction to make this work?

Thanks in advance to all of you,

Cheers,

Gianluca.

I tried to investigate this a bit more...

It looks like there is some javascript issue:

Constructor, before init load
ScriptResource.axd:5In init...
ScriptResource.axd:5Live Editing - ItemEditing: Initialization.
ScriptResource.axd:5found 2 elements with selector: umbraco:iteminfo
ScriptResource.axd:5  Found 2 editable Umbraco item(s).
ItemEditing.js:160Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function

This stops on line 160 of ItemEditing.js

Do you think it is a bug? I believe it is not related to my system..

UPDATE:

Found the issue and apparently resolved it.

Line 160 of ItemEditing.js (in ~\umbraco\LiveEditing\Modules\ItemEditing)...

It was:

items.each(function() {
            var item = new umbraco.presentation.LiveEditing.activeItem($(this));
            _this._items[item.itemId] = item;
            Sys.Debug.trace("    " + (++i) + ". " + item.toString() + " is Live Editing enabled.");
        });

But it doesnt work. Instead it runs correctly if the "$" is changed into "jQuery", like:

items.each(function() {
            var item = new umbraco.presentation.LiveEditing.activeItem(jQuery(this));
            _this._items[item.itemId] = item;
            Sys.Debug.trace("    " + (++i) + ". " + item.toString() + " is Live Editing enabled.");
        });

I've tested it in Firefox, Chrome and IE, and all three work fine.

I hope this will be of some help to someone else!

Cheers,

Gianluca.

Hi Gianluca

I have also had some problems with canvas editing on elements rendered thrugh XSLT.

But there is an undocumented xslt extension called Item, that can be used to solve this in most cases. Normally we would render a field (let's take a richtext editor in this example) like this:

<xsl:value-of select="$currentPage/data[@alias='bodytext']" />

This can be changed to:

<xsl:value-of select="umbraco.library:Item($currentPage/@id, 'bodyText')" />

If the above code is used, it can be edited in canvas-mode. I don't know hos all of this works in the new version 4.5, but I'll try it out in a couple of days. If you have already fixed your problem nevermind, this was just a small input to it :)

Btw. I wrote a blogpost about the subject, but it's in danish, so I don't know if you can understand anything of it, otherwise you could try out Google Translate for a little help. It can be found here: http://www.kim-andersen.dk/umbraco/canvas-redigering-umbraco-vha-xslt.htm

/Kim A

Hello Kim,

Thanks for your reply. However I think the problem I am facing go beyond what you have documented.

Look at this for example:

<div id="footer"> 
   <umbraco:Item field='footer' runat='server' />
</div> 

This is a chunk of code that comes from the template used for my homepage.

When I try to live edit the homepage, I see the footer. If I move the mouse over the rendered footer, a tooltip message states that I can click to edit.

Well, if I do that, the edit box for that field doesnt come out anyway because of several errors in the javascript behind the page.

I can see Umbraco creates the tinyMCE box to edit that field:

<div id="footer"> 
   <umbraco:iteminfo itemid="4" name="footer" nodeid="1046" title="Click to edit the footer field of 'Homepage'">
  <textarea name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$EditorControlWrapper$DataEditor" rows="2" cols="20" id="ContentPlaceHolderDefault_EditorControlWrapper_DataEditor" class="tinymceContainer" style="visibility: hidden">
      my footer text
  </textarea>
  <input type="hidden" id="__umbraco_tinyMCE">
   </umbraco:iteminfo>
</div>

although for some reason it remains "visible:false". If I check for errors in the javascript I find out that the "$" accessor, used by Jquery is not recognized. In this case, this happens at line 172 of ItemEditing.js:

  jQuery(document).mousedown(function(event) {
            Sys.Debug.trace("DOCUMENT CLICKED");
            // the canStopEditing property is set in startEdit
 if (_this._activeItem != null) && $(event.trigger).data("canStopEditing"))  // <--- here is the javascript error

and also at line 68 in ItemEditing.js:

jQuery("*").each(function() $(this).data("canStopEditing", true); });

In both cases the exception is:

Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function

I am almost 100% sure that if I change that "$" in "jQuery", everything will start to work. 

What I don't understand is why this is happening. I am not loading any other javascript in the platform, so I don't think there is some sort of incompatibility issue.

In order to rule that out, I am going to create another clean instance, and I am going to check if the issue happens there too.

In the meanwhile, any suggestion would be great. 

Thanks again everybody,

Cheers,

Gianluca

I can confirm that even in a clean installation, based on Umbraco 4.5+MySql, and installing only the Runway package (in order to have a demo site), there is the same problem. The "$" is not recognized. 

Does anyone have any idea of why this is happening with the new release?

Thanks in advance,

Cheers,

Gianluca.

I added a page to document Item to the XSLT reference:

http://our.umbraco.org/wiki/reference/umbracolibrary/item

Hope that's ok.

Hi Andrew.

I read your wiki page but I can't find a solution to my issue in there.

The problem is that the jQuery apparently is not loaded at all. Although it is present in the umbraco/js folder...

Cheers,

Gianluca.

sorry my post on the wiki was only to document the undocumented Item function... not to solve these JS errors. maybe that is why it was undocumented. I use the jquery plugin for the website, maybe that is all that's needed to make it work (add it in your <head>).

I'm having the exact same problem as Gianluca. Anyone have any news on this?

V4.5.1

I have reported the issue as a bug in codeplex. 

Please check http://umbraco.codeplex.com/workitem/28077 and vote for it.

Done. Thank you for reporting the issue.

Hi All,

I have changed the $ to jQuery and everything worked well in IE and Firefox, but when I did some compatibility tests in other browsers, the RTE failed to load completely. I did the tests in both Safari and Chrome with no success in editing with the RTE. Can anyone else confirm this.

Another issue I would like to be confirmed is moving between pages in canvas mode. I could swear this used to work for me, but for some reason I cannot click on any of my buttons to edit them in canvas mode without going to the backend first. One solution is to right click on the link and open in new tab, but that is not really feasible.

Thank you

Ty

I have the same issue with regards to clicking links in canvas

is working on a reply...