Solved

Javascript in ASP.NET

Posted on 2013-05-23
3
334 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 57

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

Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

Question has a verified solution.

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

Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
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…

729 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