jquery display image

Question

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?

I know this doesn't directly answer your question, but have you considered setting a breakpoint in isValid() and stepping through the code? One way to do it: in Chrome, right-click on the page and choose "Inspect Element." Then use the Scripts tab and select your JavaScript code. This is generally incredibly helpful as you get a hang of JQuery/JS. — DPlusV
– DPlusV, Commented Sep 16, 2011 at 5:52

Reigel Gallarde · Accepted Answer · 2011-09-16 06:10:29Z

1

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" /> ');
        }
};

edited Sep 16, 2011 at 6:10

answered Sep 16, 2011 at 6:05

Reigel Gallarde

65.4k21 gold badges126 silver badges142 bronze badges

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

1 Comment

mu is too short Over a year ago

+1 for "doesn't make sense" but it should still be true and get you to the if (isCheck == true), jsfiddle.net/ambiguous/TrvPh

mu is too short · Accepted Answer · 2011-09-16 06:11:43Z

1

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

ShowStop(check);

answered Sep 16, 2011 at 6:11

mu is too short

436k71 gold badges863 silver badges822 bronze badges

1 Comment

Reigel Gallarde Over a year ago

+1 true! haha nice one... and also check my answer below... :D

Waqas · Accepted Answer · 2011-09-16 05:53:51Z

0

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") %>' />

answered Sep 16, 2011 at 5:53

Waqas

6,7903 gold badges36 silver badges53 bronze badges

4 Comments

user838359 Over a year ago

my image is directly in the project at root level

Waqas Over a year ago

then it should be: <img align="absmiddle" src="stop.gif" />

user838359 Over a year ago

tried that. not working, i dont think its the probelm with image. I think it is not going into the diplay image code

Reigel Gallarde Over a year ago

actually, if ($('#' + '<%= tbstreet1.ClientID %>').blur()) { line doesn't make any sense there... remove it and I think you're good to go...

Chad Levy · Accepted Answer · 2011-09-16 05:57:37Z

0

~/ 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") %>" /> ');

answered Sep 16, 2011 at 5:57

Chad Levy

10.1k8 gold badges44 silver badges69 bronze badges

2 Comments

user838359 Over a year ago

tried that. not working, i dont think its the probelm with image. I think it is not going into the diplay image code

Chad Levy Over a year ago

The server won't process ~/ unless it's within a server control.

Collectives™ on Stack Overflow

jquery display image

4 Answers 4

1 Comment

1 Comment

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related