Solved

Javascript in ASP.NET

Posted on 2013-05-23
3
330 Views
Last Modified: 2013-05-24
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
Comment
Question by:dbote
3 Comments
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 39193407
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
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
ID: 39193420
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
 
LVL 1

Author Closing Comment

by:dbote
ID: 39194815
Excellent!  Thank you Robert.
0

Featured Post

Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question