Question

Morning all.

I have the following javascript in my code in front

     <script  type="text/javascript" src="~/VDSReporting/jquery.js"></script> <script type="text/javascript">

    function ShowImage() {
        document.getElementById('tbxProdAC') 
      .style.backgroundImage = 'url(/images/vds/progress.gif)';

        document.getElementById('tbxProdAC')
                    .style.backgroundRepeat = 'no-repeat';

        document.getElementById('tbxProdAC')
                    .style.backgroundPosition = 'right';
    }

    function HideImage() {
        document.getElementById('tbxProdAC')
                      .style.backgroundImage = 'none';
    } 

</script>

How do I go about ‘converting’ this and only having it present in c# code behind?

Please excuse my ignorance, I’m completely out of my depth here!

Answer 1

If this is a progress image you are showing (seems so from the image name), then why would you want to do that server side? That will kind of defeat the whole purpose of a progress image. This seem like it belong on the client side, so keep it there.

Update

You don’t need to use the code behind to render the script just to get the client id’s. You can do something like this:

function ShowImage() {
    document.getElementById('<%=tbxProdAC.ClientID%>') 
  .style.backgroundImage = 'url(/images/vds/progress.gif)';

    document.getElementById('<%=tbxProdAC.ClientID%>')
                .style.backgroundRepeat = 'no-repeat';

    document.getElementById('<%=tbxProdAC.ClientID%>')
                .style.backgroundPosition = 'right';
}

function HideImage() {
    document.getElementById('<%=tbxProdAC.ClientID%>')
                  .style.backgroundImage = 'none';
} 

Here I use <%=tbxProdAC.ClientID%> to get the id of the control. This is a lot more readable then using the code behind to render the script.