Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 337
  • 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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

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