Solved

How to hide or display HTML elements using Javascript function

Posted on 2013-06-13
10
293 Views
Last Modified: 2013-07-02
I have javascript in an asp.net-mvc view that checks the id of four buttons and, based on the value of a property in the controller, set the style attribute to visible or hidden. The code is not working. The buttons always display. I am not sure if my code is incorrect of if the data.PairResolved element is not being picked up. Here is my javascript.

    <script type="text/javascript">
        function unlinkresolve() {
            if (document.getElementById("unlink")) or(document.getElementById("resolve"));
            {
                if (this.data.PairResolved) { return element.setAttribute('style', "visibility: visible"); }
                else { return element.setAttribute('style', "visibility: hidden"); }
            }
        }

        function unlinkunresolve() {
            if (document.getElementById("unresolve")) or(document.getElementById("unlinkunresolve"));
            {
                if (!this.data.PairResolved) { return element.setAttribute('style', "visibility: visible"); }
                else { return element.setAttribute('style', "visibility: hidden"); }
            }
        }
    </script>    
   
    <button type="button" id="unlink">UnLink</button>
    <button type="button" id="resolve">Resolve</button>
    <button type="button" id="unresolve">UnResolve</button>
    <button type="button" id="unlinkunresolve">UnLink/UnResolve</button>
0
Comment
Question by:rawilken
[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
  • 5
  • 4
10 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39245351
You 'if' statements aren't working because the elements are always there whether they are visible or not.  This is a simple one that I use.  The 'parts' variable is a counter that is used to track the last state.  cpart() increments parts and checks to see if it is even or odd and calls either part0() or part1() as a result.
<script type="text/javascript">

var parts = 0;
function cpart() {
	parts++;
	if(parts % 2) part0();
	else part1();
	return
	}

function part0() {
	document.getElementById('pa').style.visibility = 'hidden';
	}

function part1() {
	document.getElementById('pa').style.visibility = 'visible';
	}
</script>

Open in new window

0
 

Author Comment

by:rawilken
ID: 39245866
You headed me in a new direction...here is what I came up with.

    <script type="text/javascript">
        function displaybuttons() {
            if (this.data.PairResolved) {
                document.getElementById('unlink').style.visibility = 'visible';
                document.getElementById('resolve').style.visibility = 'visible';
                document.getElementById('unresolve').style.visibility = 'hidden';
                document.getElementById('unlinkunresolve').style.visibility = 'hidden';
            }
            else {
                document.getElementById('unlink').style.visibility = 'hidden';
                document.getElementById('resolve').style.visibility = 'hidden';
                document.getElementById('unresolve').style.visibility = 'visible';
                document.getElementById('unlinkunresolve').style.visibility = 'visible';
            }
        }
    </script>
    <div onload="displaybuttons()" >   
        <button type="button" id="unlink">UnLink</button>
        <button type="button" id="resolve">Resolve</button>
        <button type="button" id="unresolve">UnResolve</button>
        <button type="button" id="unlinkunresolve">UnLink/UnResolve</button>
    </div>
0
 

Author Comment

by:rawilken
ID: 39245929
But it does not work!
0
Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39246053
This...  "if (this.data.PairResolved)" doesn't mean anything.  In addition, whatever gets done, Only gets done 'onload', when the page is loaded.  For the 'buttons' to do anything, each of them has to have an 'onclick' event in their attributes.
0
 
LVL 19

Expert Comment

by:Albert Van Halen
ID: 39247498
You cannot use onload event on a div.
Use it on the body.
0
 

Author Comment

by:rawilken
ID: 39247590
I know the buttons need an onclick event. I have not started that part of the coding. I am trying to get the buttons to only appear based on a specific value of PairResolved.

I believe the problem now is that the javascript requires an event to load. I would want to place it in the onload event for the page, but this is asp.net-MVC and I do not know if and how to place that in the controller.

Here is the latest iteration. Unfortunately I have not resolved how to call the script. So if you have ideas on how to code this to be called in the controller it would be greatly appreciated. I will look into doing onclick events after this is resolved.

    <div>    
        <button type="button" id="unlink">UnLink</button>
        <button type="button" id="resolve">Resolve</button>
        <button type="button" id="unresolve">UnResolve</button>
        <button type="button" id="unlinkunresolve">UnLink &amp; UnResolve</button>
    </div>
    <script type="text/javascript">
        function displaybuttons() {
            if (data.PairResolved) {
                document.getElementById('unlink').style.visibility = 'visible';
                document.getElementById('resolve').style.visibility = 'visible';
                document.getElementById('unresolve').style.visibility = 'hidden';
                document.getElementById('unlinkunresolve').style.visibility = 'hidden';
            }
            else {
                document.getElementById('unlink').style.visibility = 'hidden';
                document.getElementById('resolve').style.visibility = 'hidden';
                document.getElementById('unresolve').style.visibility = 'visible';
                document.getElementById('unlinkunresolve').style.visibility = 'visible';
            }
        }
    </script>
0
 

Author Comment

by:rawilken
ID: 39247644
I learned that the body tag has an onload event.

<body onload="displaybuttons()">
        <h2>@Model.SummaryText</h2>

        <div>    
            <button type="button" id="unlink">UnLink</button>
            <button type="button" id="resolve">Resolve</button>
            <button type="button" id="unresolve">UnResolve</button>
            <button type="button" id="unlinkunresolve">UnLink &amp; UnResolve</button>
        </div>
        <script type="text/javascript">
            function displaybuttons() {
                if (data.PairResolved) {
                    document.getElementById('unlink').style.visibility = 'visible';
                    document.getElementById('resolve').style.visibility = 'visible';
                    document.getElementById('unresolve').style.visibility = 'hidden';
                    document.getElementById('unlinkunresolve').style.visibility = 'hidden';
                }
                else {
                    document.getElementById('unlink').style.visibility = 'hidden';
                    document.getElementById('resolve').style.visibility = 'hidden';
                    document.getElementById('unresolve').style.visibility = 'visible';
                    document.getElementById('unlinkunresolve').style.visibility = 'visible';
                }
            }
        </script>
    </body>
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39248387
'data.PairResolved' is still not a valid variable or object in the code you have posted.  At this point, it will merely cause an error.
0
 

Author Comment

by:rawilken
ID: 39248593
The data.PairResolved is supposed to check the bool value of a property in the controller for PairResolved. This property returns a bool value if the flag for these records is set to true. How else would I access this value?
0
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 100 total points
ID: 39248858
The question is where is 'data.PairResolved' defined because it is clearly not in the code you posted.  If that is an ASP variable, then you need to copy it into a javascript variable.  ASP runs on the server and javascript runs in the browser.  They do not communicate unless you make it happen.  Something like this.
<script type="text/javascript">
            PairResolved = <%= data.PairResolved %>;
            function displaybuttons() {
                if (PairResolved) {
                    document.getElementById('unlink').style.visibility = 'visible';
                    document.getElementById('resolve').style.visibility = 'visible';
                    document.getElementById('unresolve').style.visibility = 'hidden';
                    document.getElementById('unlinkunresolve').style.visibility = 'hidden';
                }
                else {
                    document.getElementById('unlink').style.visibility = 'hidden';
                    document.getElementById('resolve').style.visibility = 'hidden';
                    document.getElementById('unresolve').style.visibility = 'visible';
                    document.getElementById('unlinkunresolve').style.visibility = 'visible';
                }
            }
        </script>

Open in new window


http://msdn.microsoft.com/en-us/library/vstudio/6dwsdcf5%28v=vs.100%29.aspx
0

Featured Post

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

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…
Sometimes in DotNetNuke module development you want to swap controls within the same module definition.  In doing this DNN (somewhat annoyingly) swaps the Skin and Container definitions to the default admin selections.  To get around this you need t…
With Secure Portal Encryption, the recipient is sent a link to their email address directing them to the email laundry delivery page. From there, the recipient will be required to enter a user name and password to enter the page. Once the recipient …
I've attached the XLSM Excel spreadsheet I used in the video and also text files containing the macros used below. https://filedb.experts-exchange.com/incoming/2017/03_w12/1151775/Permutations.txt https://filedb.experts-exchange.com/incoming/201…

751 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