Image url encoding is changed on mouse over/ hover

2 posts, 0 answers
  1. Geoff
    Geoff avatar
    27 posts
    Member since:
    May 2012

    Posted 20 Jan 2015 Link to this post

    We had recently updated from 2012 - Q2 to 2013 - Q3 . We have come across an issue where url encodes with %20 (aka a space in the name of the image) causes a RadButton with an image to change the url on mouse over / hover and make the image disappear / lose it's original URL because the encoding is changing.

    For example, the original url for an image will load and display as:

    http://8f2270e13c3e0703baa2-6c2aaf386ecfc7423d48bccd1a997322.r2.cf1.rackcdn.com/Public-Personal/Who%20We%20Are/Our%20Mission/plumpy-updated.jpg

    When hovered, it is changed to:

    http://8f2270e13c3e0703baa2-6c2aaf386ecfc7423d48bccd1a997322.r2.cf1.rackcdn.com/Public-Personal/Who%2520We%2520Are/Our%2520Mission/plumpy-updated.jpg

    The url returned back that then does not display is encoding my %20 (a space) now to a %2520 (%25 is a %) and the added 20 goes no where causing a dead link. 

    Is there a simple solution to prevent the automatic encoding from happening? I would prefer to not go through a 4 year old project and change every image that could potentially have this happening. 

    We have typically tried to keep spacing out of our url's as a best practice, but it does not always happen that way.

    Thanks
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 21 Jan 2015 Link to this post

    Hi Geoff,

    The observed behavior is expected because the URL set of the button is encoded through the encodeURI() method. What actually happens is that the "%" sign is encoded. In order to handle that it would be better if you can replace this character with another one that is not affected by this method. You can for example make a global find-replace operation. You can also find below a workaround that removes this encoding from the RadButton code:
    ASPX:
    <telerik:RadButton ID="RadButton1" runat="server" Width="500px" Height="200px" Image-ImageUrl="http://8f2270e13c3e0703baa2-6c2aaf386ecfc7423d48bccd1a997322.r2.cf1.rackcdn.com/Public-Personal/Who%20We%20Are/Our%20Mission/plumpy-updated.jpg" />
    <script>
        Telerik.Web.UI.Button.AbstractUI.prototype._setBackground = function (elem, imgUrl) {
            if(elem && imgUrl) {
                //Original:
                //elem.style.backgroundImage = "url(" + encodeURI(imgUrl) + ")";
                //Modified:
                elem.style.backgroundImage = "url(" + imgUrl + ")";
            }
        }
    </script>

    The workaround must be placed below the button's declaration and is related to latest Telerik UI version.

    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top