Solved

Javascript in ASP.NET

Posted on 2013-05-23
3
328 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 52

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
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…

895 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now