• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 339
  • Last Modified:

Javascript in ASP.NET

I have an ImageButton and would like to toggle between three images.  For example, Red light, Yellow light and Green light status.  Each time the user clicks the image I would like it to display the next image.  User can cycle through as much as they want but the cycle order would remain the same.

I can accomplish this with an ImageButton and change the ImageURL property but each click Postsback the entire page and flashes for the user.  I then started playing with Javascript and I now have two problems.

The first is how to keep the client changes  during a postback to the server for other controls?  I decided to use ViewState and a HiddenField which brings my second problem.  For some reason my Javascript recognizes the change in the HiddenField value BUT it never switches away from the first image.  I'm guessing my Javascript it poorly formed because of my limited javascript knowledge.

I would like to figure out the Javascript issue at least for learning but I would also be open to a best practices way to accomplish what I want done.  I am using ASP.NET and Ajax with VB.

Thank you in advance!

Code is below....

        function SwapIt(ctrl) {
            var Question = 'Images/ROSQuestion.png';
            var Check = 'Images/ROSCheck.png';
            var Alerted = 'Images/ROSAlert.png';

            var Hide = document.getElementById("HiddenField1").value;

           if (Hide = 'Question') {
                ctrl.src = Check;
                document.getElementById("HiddenField1").value = 'Check';
            }
            else if (Hide = 'Check') {
                ctrl.src = Alerted;
                document.getElementById("HiddenField1").value = 'Alert';
            }
            else {
                ctrl.src = Question;
                document.getElementById("HiddenField1").value = 'Question';
            }
          return false;
        }

Open in new window

0
dbote
Asked:
dbote
1 Solution
 
Julian HansenCommented:
So as the button changes state you want the value of a hidden field to change state.

What does your button look like?

How are you calling SwapIt currently?
0
 
Robert SchuttSoftware EngineerCommented:
You made a classic javascript mistake, you have to use double equals sign for comparison expressions:
        function SwapIt(ctrl) {
            var Question = 'Images/ROSQuestion.png';
            var Check = 'Images/ROSCheck.png';
            var Alerted = 'Images/ROSAlert.png';

            var Hide = document.getElementById("HiddenField1").value;

           if (Hide == 'Question') {
                ctrl.src = Check;
                document.getElementById("HiddenField1").value = 'Check';
            }
            else if (Hide == 'Check') {
                ctrl.src = Alerted;
                document.getElementById("HiddenField1").value = 'Alert';
            }
            else {
                ctrl.src = Question;
                document.getElementById("HiddenField1").value = 'Question';
            }
          return false;
        }

Open in new window

EDIT: test page here: http://schutt.nl/ee/Q_28137369/
0
 
dboteAuthor Commented:
Excellent!  Thank you Robert.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now