CODEWITHSUNDEEP
jqueryasp.net
user838359
user838359

Reputation: 173

jquery display image

I'm trying to learn jquery. So, first I thought of validating a textbox and check if its length is less than 4 display a stop image adjacent to it.Otherwise, if it is greater than 4 display tick image. SO, i did this

   $(document).ready(function () {
      $('#' + '<%= tbstreet1.ClientID %>').keyup(isValid);
       function isValid() {
          var street1Length = $('#' + '<%= tbstreet1.ClientID %>').val().length;

          if (street1Length > 4) {
              ShowStop(check);
          }
      };
      function ShowStop(isCheck) {
          if ($('#' + '<%= tbstreet1.ClientID %>').blur()) {
              if (isCheck == true) {
                  $('#' + '<%= status.ClientID %>').html('<img align="absmiddle" 
                 src="~/tick.gif" /> ');
              }
              else
                  $('#' + '<%= status.ClientID %>').html('<img align="absmiddle" 
                  src="~/stop.gif" /> ');
          }
      };
      function ActivateSave() {
          $("#MainContent_btn_save").removeAttr("disabled");
          $("#MainContent_btn_save").attr("enabled", "");
      };
  });

This is my aspx code

   <asp:Label runat="server" ID="street1" Text="Street1" ></asp:Label> 
   <asp:TextBox ID="tbstreet1" runat="server"  ></asp:TextBox>  
   <div id="status" runat="server"></div>

However, when i run it i dont get the image. Can u please let me know the mistake i've been doing?

Upvotes: 0

Views: 1056

Answers (4)

mu is too short
mu is too short

Reputation: 434635

You haven't declared check anywhere so you will get a JavaScript error right here:

ShowStop(check);

Upvotes: 1

Reigel Gallarde
Reigel Gallarde

Reputation: 65264

function ShowStop(isCheck) {
    if ($('#' + '<%= tbstreet1.ClientID %>').blur()) { // <-- doesn't make any sense, might work if remove...
        if (isCheck == true) {
              $('#' + '<%= status.ClientID %>').html('<img align="absmiddle" 
             src="~/tick.gif" /> ');
        }
          else
              $('#' + '<%= status.ClientID %>').html('<img align="absmiddle" 
              src="~/stop.gif" /> ');
        }
};

should be,

function ShowStop(isCheck) {
        if (isCheck == true) {

              $('#' + '<%= status.ClientID %>').html('<img align="absmiddle" 
              src="~/tick.gif" /> ');

        } else {

              $('#' + '<%= status.ClientID %>').html('<img align="absmiddle" 
              src="~/stop.gif" /> ');
        }
};

Upvotes: 1

Chad Levy
Chad Levy

Reputation: 10140

~/ path notation does not work in Javascript:

Instead of 

$('#' + '<%= status.ClientID %>').html('<img align="absmiddle" src="~/tick.gif" /> ');

Use

$('#' + '<%= status.ClientID %>').html('<img align="absmiddle" src="<%=ResolveUrl("~/tick.gif") %>" /> ');

Upvotes: 0

Waqas
Waqas

Reputation: 6802

Probably because it's not resolving the path to image, so either provide the complete path like this

<img align="absmiddle" src="images/stop.gif" />

or use Page.ResolveUrl to get an absolute path liek this

<img align="absmiddle" src='<%=ResolveUrl("~/stop.gif") %>' />

Upvotes: 0

Related Questions