setting asp image src property from javascript

Question

I am trying to set asp image element src property from javascript but the url property is not being set.

function slideshow() {
  $.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: "/RollingScreen.aspx/GetNextImage",
    dataType: "json",
    data: "{}",
    success: function (data) {
      //this changes the image on the web page
      $('#imgSlideShow').attr("src","~/1.png");
      $("#txt1").val(data.d);
      //fires another sleep/image cycle
      setTimeout(slideshow,5000);
    },
    error: function (result) {
      alert(result.message);
    }
  });
}

$(document).ready(function () {
  //Kicks the slideshow
  slideshow();
});

My aspx image element is

<asp:Image ID="imgSlideShow" runat="server" Height="300px" Width="600px" ImageAlign="Middle" ImageUrl="~/1.png"/>....

Can anyone please help me...

The image ID is not imgSlideShow when rendered. View the source or inspect the element to see what the ID is, or use CssClass to give it a class name you can use to refer to it instead. Also, you can't use ~ in javascript - only in .Net — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Nov 12, 2012 at 9:17

Viktor S. · Accepted Answer · 2012-11-12 09:18:19Z

2

Your mistake is that you are trying to use ID which you have set in asp.net. But runat="server" elements are rendered with different IDs. Something like Content1_Content2_imgSlideShow. You can get it using imgSlideShow.ClientID on server side and than $('#' + jsVariableWithClientID). But I prefer to use some unique class (no problem with passing client ID to JS):

<asp:Image ID="imgSlideShow" CssClass="imgSlideShow" runat="server" Height="300px" Width="600px" ImageAlign="Middle" ImageUrl="~/1.png"/>

And than in JS, using class selector:

$('.imgSlideShow').attr("src","/1.png");

Another problem is that JS does not know about ~ - that is asp.net feature only. And you should specify image url for src like this: "/1.png" (assuming it is located in root directory)

answered Nov 12, 2012 at 9:18

Viktor S.

12.8k1 gold badge30 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JItendra Over a year ago

Thanks FAngel....The problem is solved....I used /1.png instead of ~/1.png...and it is working fine.....thanks a lot....u saved my time....

Collectives™ on Stack Overflow

setting asp image src property from javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related