Bump! Isn't anybody out there experiencing the same issue?

Here's a screenshot (it also sometimes has an "Add" form, same as the update one you can see here):

Hi Mark,

Can you tell me which version of uComponents you are using?

I will take a look, see if I can reproduce the issue.

Thanks, Lee.

Thanks Lee,

2 different 4.7.1.1 websites, each with a different version of the dll, as I was trying to see if it was a specific version that was causing the issue:

uComponents.Core.dll Version 3.1.1.29742

uComponents.Core.dll Version 3.1.0.27082

Both are exhibiting the same problem.

If it helps, the following packages are also installed on each website:

1. Config Tree
2. Full Text Search
3. Umbraco Contour
4. Umbraco Courier
5. XML Dump
6. Dictionary Dashboard

Those buttons are hidden on page load by a jquery script. It does look like something is preventing the script from running.

Could you check if there are any javascript errors in your backend?

Thanks, Ove. There are javascript errors. I've pasted two of them below. In each case the "UmbracoImageViewer is not a  function" error seems to be the problem, although I don't know what is causing this. In the jQuery selectors keyActivities and socialLinks are data type grid controls. I assume the following Inserticon and Editicon selectors are the Insert or Update forms with the property name ("icon") appended to it. Could the issue be that my document types have multiple data type grid controls? Or could it be that two different data type grid controls on the same document type that have the same property names causes an issue?

jQuery("#body_prop_keyActivities_Inserticon_ImgViewer").UmbracoImageViewer is not a function
http://testsite.local/umbraco/DependencyHandler.axd?s=L3VtYnJhY29fY2xpZW50L3VpL2pxdWVyeS5qczsvdW1icmFjb19jbGllbnQvQXBwbGljYXRpb24vTmFtZXNwYWNlTWFuYWdlci5qczsvdW1icmFjb19jbGllbnQvQXBwbGljYXRpb24valF1ZXJ5L2pxdWVyeS5jb29raWUuanM7L3VtYnJhY29fY2xpZW50L3VpL2pxdWVyeXVpLmpzOy91bWJyYWNvX2NsaWVudC9BcHBsaWNhdGlvbi9VbWJyYWNvVXRpbHMuanM7L3VtYnJhY29fY2xpZW50L0FwcGxpY2F0aW9uL1VtYnJhY29BcHBsaWNhdGlvbkFjdGlvbnMuanM7L3VtYnJhY29fY2xpZW50L0FwcGxpY2F0aW9uL1VtYnJhY29DbGllbnRNYW5hZ2VyLmpzOy91bWJyYWNvX2NsaWVudC9BcHBsaWNhdGlvbi9qUXVlcnkvanF1ZXJ5LmhvdGtleXMuanM7L3VtYnJhY29fY2xpZW50L3VpL2RlZmF1bHQuanM7L3VtYnJhY29fY2xpZW50L21vZGFsL21vZGFsLmpzOy91bWJyYWNvX2NsaWVudC9EYXRlVGltZVBpY2tlci91bWJEYXRlVGltZVBpY2tlci5qczsvdW1icmFjb19jbGllbnQvdGFidmlldy9qYXZhc2NyaXB0LmpzOy91bWJyYWNvL2pzL3VtYnJhY29DaGVja0tleXMuanM7L3VtYnJhY29fY2xpZW50L3Njcm9sbGluZ21lbnUvamF2YXNjcmlwdC5qczsvdW1icmFjb19jbGllbnQvRGF0ZVRpbWVQaWNrZXIvdGltZXBpY2tlci5qczsvdW1icmFjb19jbGllbnQvTWFza2VkSW5wdXQvanF1ZXJ5Lm1hc2tlZGlucHV0LTEuMy5taW4uanM7&t=Javascript&cdv=1/eval/seq/36
Line 10

jQuery("#body_prop_socialLinks_Editicon_ImgViewer").UmbracoImageViewer is not a function
http://testsite.local/umbraco/editContent.aspx?id=1054
Line 1079

Sounds more like you're missing a javascript file in your umbraco installation.

Could you check if there are any 404 errors when you load the page?

Specifically, if the file "ImageViewer.js" is loaded.

Thanks again, Ove.

There are no 404 errors that I can see. But when looking at the HTTP headers there are no requests for ImageViewer.js. Another thing is that I have a single data type grid on another document type in the same umbraco site that contains a Media Picker and I don't get the error there, plus the add / update forms don't appear either.

Thanks to Ove's help I've managed to find what I think is the source of the issue, although it's complicated, and beyond my level of Umbraco expertise.

I have two document types (one called home, another called landing). I have two data type grid controls (one called banner and one called activities) on each page, both controls have media picker columns.

Both document types have a javascript file called DependencyHandler.axd, but each has a different s parameter in the query string:

Home:

http://testsite.local/umbraco/DependencyHandler.axd?s=L3VtYnJhY29fY2xpZW50L3VpL2pxdWVyeS5qczsvdW1icmFjb19jbGllbnQvQXBwbGljYXRpb24vTmFtZXNwYWNlTWFuYWdlci5qczsvdW1icmFjb19jbGllbnQvQXBwbGljYXRpb24valF1ZXJ5L2pxdWVyeS5jb29raWUuanM7L3VtYnJhY29fY2xpZW50L3VpL2pxdWVyeXVpLmpzOy91bWJyYWNvX2NsaWVudC9BcHBsaWNhdGlvbi9VbWJyYWNvVXRpbHMuanM7L3VtYnJhY29fY2xpZW50L0FwcGxpY2F0aW9uL1VtYnJhY29BcHBsaWNhdGlvbkFjdGlvbnMuanM7L3VtYnJhY29fY2xpZW50L0FwcGxpY2F0aW9uL1VtYnJhY29DbGllbnRNYW5hZ2VyLmpzOy91bWJyYWNvX2NsaWVudC9BcHBsaWNhdGlvbi9qUXVlcnkvanF1ZXJ5LmhvdGtleXMuanM7L3VtYnJhY29fY2xpZW50L3VpL2RlZmF1bHQuanM7L3VtYnJhY29fY2xpZW50L21vZGFsL21vZGFsLmpzOy91bWJyYWNvX2NsaWVudC9EYXRlVGltZVBpY2tlci91bWJEYXRlVGltZVBpY2tlci5qczsvdW1icmFjb19jbGllbnQvdGFidmlldy9qYXZhc2NyaXB0LmpzOy91bWJyYWNvL2pzL3VtYnJhY29DaGVja0tleXMuanM7L3VtYnJhY29fY2xpZW50L3Njcm9sbGluZ21lbnUvamF2YXNjcmlwdC5qczsvdW1icmFjb19jbGllbnQvRGF0ZVRpbWVQaWNrZXIvdGltZXBpY2tlci5qczsvdW1icmFjb19jbGllbnQvTWFza2VkSW5wdXQvanF1ZXJ5Lm1hc2tlZGlucHV0LTEuMy5taW4uanM7&t=Javascript&cdv=1

Landing:

http://testsite.local/umbraco/DependencyHandler.axd?s=L3VtYnJhY29fY2xpZW50L3VpL2pxdWVyeS5qczsvdW1icmFjb19jbGllbnQvQXBwbGljYXRpb24vTmFtZXNwYWNlTWFuYWdlci5qczsvdW1icmFjb19jbGllbnQvQXBwbGljYXRpb24valF1ZXJ5L2pxdWVyeS5jb29raWUuanM7L3VtYnJhY29fY2xpZW50L3VpL2pxdWVyeXVpLmpzOy91bWJyYWNvX2NsaWVudC9BcHBsaWNhdGlvbi9VbWJyYWNvVXRpbHMuanM7L3VtYnJhY29fY2xpZW50L0FwcGxpY2F0aW9uL1VtYnJhY29BcHBsaWNhdGlvbkFjdGlvbnMuanM7L3VtYnJhY29fY2xpZW50L0FwcGxpY2F0aW9uL1VtYnJhY29DbGllbnRNYW5hZ2VyLmpzOy91bWJyYWNvX2NsaWVudC9BcHBsaWNhdGlvbi9qUXVlcnkvanF1ZXJ5LmhvdGtleXMuanM7L3VtYnJhY29fY2xpZW50L0FwcGxpY2F0aW9uL0pRdWVyeS9qcXVlcnkubWV0YWRhdGEubWluLmpzOy91bWJyYWNvX2NsaWVudC9tb2RhbC9tb2RhbC5qczsvdW1icmFjb19jbGllbnQvdWkvZGVmYXVsdC5qczsvdW1icmFjb19jbGllbnQvVHJlZS9qcXVlcnkudHJlZS5qczsvdW1icmFjb19jbGllbnQvVHJlZS9qcXVlcnkudHJlZS5jb250ZXh0bWVudS5qczsvdW1icmFjb19jbGllbnQvVHJlZS9Ob2RlRGVmaW5pdGlvbi5qczsvdW1icmFjb19jbGllbnQvVHJlZS9VbWJyYWNvQ29udGV4dC5qczsvdW1icmFjb19jbGllbnQvVHJlZS9qcXVlcnkudHJlZS5jaGVja2JveC5qczsvdW1icmFjb19jbGllbnQvVHJlZS9VbWJyYWNvVHJlZS5qczsvdW1icmFjb19jbGllbnQvRGF0ZVRpbWVQaWNrZXIvdW1iRGF0ZVRpbWVQaWNrZXIuanM7L3VtYnJhY28vanMvdW1icmFjb0NoZWNrS2V5cy5qczsvdW1icmFjb19jbGllbnQvdGFidmlldy9qYXZhc2NyaXB0LmpzOy91bWJyYWNvX2NsaWVudC9NYXNrZWRJbnB1dC9qcXVlcnkubWFza2VkaW5wdXQtMS4zLm1pbi5qczsvdW1icmFjby9jb250cm9scy9JbWFnZXMvSW1hZ2VWaWV3ZXIuanM7L3VtYnJhY29fY2xpZW50L3Njcm9sbGluZ21lbnUvamF2YXNjcmlwdC5qczsvdW1icmFjb19jbGllbnQvRGF0ZVRpbWVQaWNrZXIvdGltZXBpY2tlci5qczs%3d&t=Javascript&cdv=1

Landing has considerably more data in the s parameter.

When looking at the contents of each file, they are almost identical, except that the Landing version contains the following javascript UmbracoImageViewer function on line 1):

Umbraco.Sys.registerNamespace("Umbraco.Controls");(function($){$.fn.UmbracoImageViewer=function(opts){var conf=$.extend({style:false,linkTarget:"_blank",umbPath:""},opts);return this.each(function(){new Umbraco.Controls.ImageViewer().init($(this),conf);});}
$.fn.UmbracoImageViewerAPI=function(){if($(this).length!=1){throw"UmbracoImageViewerAPI selector requires that there be exactly one control selected";};return Umbraco.Controls.ImageViewer.inst[$(this).attr("id")]||null;};Umbraco.Controls.ImageViewer=function(){return{_cntr:++Umbraco.Controls.ImageViewer.cntr,_containerId:null,_context:null,_serviceUrl:"",_umbPath:"",_style:false,_linkTarget:"",init:function(jItem,opts){this._context=jItem.get(0).ownerDocument;Umbraco.Controls.ImageViewer.inst[this._cntr]=this;if(!jItem.attr("id"))jItem.attr("id","UmbImageViewer_"+this._cntr);Umbraco.Controls.ImageViewer.inst[jItem.attr("id")]=Umbraco.Controls.ImageViewer.inst[this._cntr];this._containerId=jItem.attr("id");this._umbPath=opts.umbPath;this._serviceUrl=this._umbPath+"/controls/Images/ImageViewerUpdater.asmx";this._style=opts.style;this._linkTarget=opts.linkTarget;},updateImage:function(mediaId,callback){this._showThrobber();var _this=this;$.ajax({type:"POST",url:_this._serviceUrl+"/UpdateImage",data:'{ "mediaId": '+parseInt(mediaId)+', "style": "'+_this._style+'", "linkTarget": "'+_this._linkTarget+'"}',contentType:"application/json; charset=utf-8",dataType:"json",success:function(msg){var rHtml=$("

").append(msg.d.html);_this._updateImageFromAjax(rHtml);if(typeof callback=="function"){var params={hasImage:_this._getContainer().find("img.noimage").length==0,mediaId:msg.d.mediaId,width:msg.d.width,height:msg.d.height,url:msg.d.url,alt:msg.d.alt};callback.call(_this,params);}}});},showImage:function(path){if(this._style!="ThumbnailPreview"){this._getContainer().find("img").attr("src",path);}
else{c=this._getContainer().find(".bgImage");c.css("background-image","url('"+path+"')");}},_getContainer:function(){return $("#"+this._containerId,this._context);},_updateImageFromAjax:function(rHtml){this._getContainer().html(rHtml.find(".imageViewer").html());},_showThrobber:function(){var c=null;if(this._style!="ThumbnailPreview"){c=this._getContainer().find("img");c.attr("src",this._umbPath+"/images/throbber.gif");c.css("margin-top",((c.height()-15)/2)+"px");c.css("margin-left",((c.width()-15)/2)+"px");}
else{c=this._getContainer().find(".bgImage");c.css("background-image","");c.html("");var img=c.find("img");img.attr("src",this._umbPath+"/images/throbber.gif");img.css("margin-top","45px");img.css("margin-left","45px");}}}}
Umbraco.Controls.ImageViewer.cntr=0;Umbraco.Controls.ImageViewer.inst={};})(jQuery);
;;;

Where the Home version has this (note the absense of the UmbracoImageViewer function declaration):

Umbraco.Sys.registerNamespace('Umbraco.Controls');Umbraco.Controls.TabView=(function(){var onChangeEvents=[];var obj={setActiveTab:function(tabviewid,tabid,tabs){for(var i=0;ivar activeTab=jQuery("#"+tabid).attr("class","tabOn");jQuery("#"+tabid+"layer").show();jQuery("#"+tabviewid+'_activetab').val(tabid);jQuery(".tinymceMenuBar").hide();jQuery(document).ready(function(){jQuery("#"+tabid+"layer .tinymceMenuBar:first").show();});for(var i=0;iif(!tvWidth){tvWidth=jQuery(window).width();if(document.location){tvWidth=tvWidth-10;}}
var tabviewHeight=tvHeight-12;jQuery("#"+TabViewName).width(tvWidth);jQuery("#"+TabViewName).height(tabviewHeight);for(i=0;inextTab="0"+nextTab;if(nextTab!="00"){if(jQuery("#"+preFix+'_tab'+nextTab)!=null){setActiveTab(preFix,preFix+'_tab'+nextTab,eval(preFix+'_tabs'));}}}};return obj;})();function setActiveTab(tabviewid,tabid,tabs){Umbraco.Controls.TabView.setActiveTab(tabviewid,tabid,tabs);}
function resizeTabView(TabPageArr,TabViewName){Umbraco.Controls.TabView.resizeTabViewTo(TabPageArr,TabViewName);}
function resizeTabViewTo(TabPageArr,TabViewName,tvHeight,tvWidth){Umbraco.Controls.TabView.resizeTabViewTo(TabPageArr,TabViewName,tvHeight,tvWidth);}
function tabSwitch(direction){Umbraco.Controls.TabView.tabSwitch(direction);}
;;;

I have searched the whole of the Home version of and the UmbracoImageViewer function declaration is nowhere to be seen.

So, I know it's probably a long shot, but are there any thoughts why the Home document type version of DependencyHandler.axd does not contain the UmbracoImageViewer function declaration? It appears to be the fact that this is missing that is causing the javascript on the page to fail, as it is called later on, in the page.

I have copies of the files should anyone want to see them.

Alternatively, does anyone have any suggestion on how I might get around this issue?

Thanks!

I think I have found the problem. Don't shoot me for not trying this from the outset as I could have saved a lot of hassle...

The additional Update form appears when the data type grid includes a Media Picker. Can someone please confirm if this is the case? As I said before, I'm running Umbraco 4.7.1.1, with uComponents 3.1.1

I don't know if it causes issues on any other versions. I've spent a huge amount of time on this. Hopefully a bugfix will be available, failing that a work around.

Also, I'm not certain what caused the Add form to appear in some circumstances, but it may be related.

Just to add. The additional forms disappear when you "Save & Publish". So the problem only appears to be on initial page load.

Hi

I tried setting it up editors like you in your screenshot, and I cannot seem to reproduce the issue.

The DependencyHandler file is used by the Umbraco backend as a whole, including uComponents. It packs all javascript and css resources together in one file, so you will not see individual 404's while it is activated.

Try setting <compilation debug="true" /> in your web.config and load the page again.

Hi Ove.

I did set <compilation debug="true" /> and can verify that ImageViewer.js was not loaded on the document type where the issue is occurring. The document type did not have a Media Picker property specified on it or a parent document type.

I then looked on the document type that was not exhibiting the issue, and it did have a Media Picker property specified. It also had the ImageViewer.js file loaded.

So I followed your workaround and added a Media Picker to the "Generic Properties" tab on the document type where the issue is occurring. Hey presto, the issue disappeared.

So, it appears that for some reason the ImageViewer.js file is not loaded when there is a uComponent Datatype Grid control that contains a Media Picker control, if the document type that the data type belongs to does not have a Media Picker on it or a parent document type.

I just wanted to say thanks for your time on this as I now have a workable solution. Although it would be nice to get the issue resolved properly at some point.

If I can I will mark your last post as the solution (I might not have enough KARMA yet...)

No problem.

It might still not be a bug with uComponents though. The test i did earlier has no standard media picker property on it or any parent document type.

Could you see if the same problem happens if you create a new document type with the same data (except the media picker workaround)?

OMG!! I have just had this problem ... and adding a media picker to the Generic tab worked ... not sure what the client is going to think of that though! :-(

I´ll try to find a way to force the loading of ImageViewer.js when there is a Media Picker in the grid.

We're experiencing the same problem with uComponents 5.4.0/5.4.2.1 - was this fixed in 5.5??

@SC Web Team Yes, this is fixed

is working on a reply...