Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Javascript labeling a disabled button incorrectly...

Posted on 2010-09-16
31
Medium Priority
?
312 Views
Last Modified: 2012-05-10
There is a piece of javascript that causes a button to be "disabled" if the user hasn't picked an option yet. The problem is that when I check the rendered code, the attribute for that button says disabled=" "... What I need it is to say disabled="disabled" in order to style it's disabled state in CSS.

Here is the javascript code:
setCheckBtn = function(){
                var isFlashCard = '';
                
                $( ".q-check-btn", currQuiz ).unbind();
                if( settings.showAns ){
                    //replaceWith forces the toggle() to reset on check-btn.
                    $( ".q-check-btn", currQuiz ).replaceWith( 
                        $( ".q-check-btn", _jQuizMeLayOut ).clone(true)
                    );
                    $( ".q-check-btn", currQuiz ).attr( "disabled", settings.blockCheck ).toggle(
                        function( e ){ 
                            $( e.target ).attr( "value", lang.btn.next[0] );
                            isFlashCard = $( currQuiz ).find( ".userInputArea" ).triggerHandler( "getUserAns" );
                            displayAnsResult( isFlashCard ); 
                            e.preventDefault();
                        },
                        function( e ){
                            $( e.target ).attr( { "disabled": settings.blockCheck, "value": lang.btn.check[0] });
                            nextMove();
                            e.preventDefault();
                        }
                    );                    
                }
                else{
                    $( ".q-check-btn", currQuiz ).attr( {"disabled": settings.blockCheck, "value": lang.btn.next[0] } )
                        .click( function( e ){
                            $( e.target ).attr( "disabled", settings.blockCheck );
                            isFlashCard = $( currQuiz ).find( ".userInputArea" ).triggerHandler( "getUserAns" );
                            displayAnsResult( isFlashCard );
                            nextMove();
                            e.preventDefault();
                        }
                    );                
                }
            },

Open in new window


Basically the output is rendering the following HTML for the button:
<input type="button" class="q-check-btn" value="Check" title="Check your answer" disabled="">

Open in new window


What I need it to do is render the "disabled" attribute like this:
<input type="button" class="q-check-btn" value="Check" title="Check your answer" disabled="disabled">

Open in new window


This will allow me to style CSS of the "disabled" state of the button properly in IE.
0
Comment
Question by:modmedia
[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
  • 18
  • 13
31 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 33695434
what about :

$(".q-check-btn").attr("disabled","disabled");

or in

$(".q-check-btn").each(function() {
        $(this).attr("disabled","disabled");
0
 

Author Comment

by:modmedia
ID: 33695458
I am actually not very fluent in javascript... how would I implement the above code in the scenario I posted?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33695498
I don't know what you're trying to do and the context and how...

The only line I see here is line 27 :

$( e.target ).attr( "disabled", settings.blockCheck );

So try to replace it with :

$( e.target ).attr("disabled","disabled");
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:modmedia
ID: 33695530
The "blockCheck" attribute is a toggle earlier in the code that makes the "check" button disabled until the user selects an answer. Here is a reference to the application in action:

http://clients.themodmedia.com/blueriver
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33695577
What about line 3 :

$( ".q-check-btn", currQuiz ).attr("disabled","disabled");
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33695581
or after line 4
0
 

Author Comment

by:modmedia
ID: 33695929
none of those seemed to work. The logic is like this:

I can toggle the application to either allow the "check" button to be always active, or only become active after a user selects an answer from the list. That is what the blockCheck attribute is referring to. So in my HTML file, I can set blockCheck= true, or blockCheck=false to toggle that functionality.

I want the button to be disabled (blockCheck= true) but it the final HTML of the button just isn't rendering correctly as stated above.

All I am trying to do is style the "disabled" state of the button so it doesn't look like it does in IE. By not having the "disabled" attribute stated correctly, IE is ignoring any styles related to "disabled"

If you go to http://clients.themodmedia.com/blueriver, you can see what I am referring to in context.
pastedGraphic.tiff
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33696058
>I want the button to be disabled (blockCheck= true) but it the final HTML of the button just isn't rendering correctly as stated above.

Where do you do it?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33696084
Try this :


setCheckBtn = function(){
                var isFlashCard = '';
                
                $( ".q-check-btn", currQuiz ).unbind();
                if( settings.showAns ){
                    //replaceWith forces the toggle() to reset on check-btn.
                    $( ".q-check-btn", currQuiz ).replaceWith( 
                        $( ".q-check-btn", _jQuizMeLayOut ).clone(true)
                    );
                    $( ".q-check-btn", currQuiz ).attr( "disabled", settings.blockCheck ).toggle(
                        function( e ){ 
                            $( e.target ).attr( "value", lang.btn.next[0] );
                            isFlashCard = $( currQuiz ).find( ".userInputArea" ).triggerHandler( "getUserAns" );
                            displayAnsResult( isFlashCard ); 
                            e.preventDefault();
                        },
                        function( e ){
                            $( e.target ).attr( { "disabled": settings.blockCheck, "value": lang.btn.check[0] });
                            nextMove();
                            e.preventDefault();
                        }
                    );                    
                }
                else{
                    $( ".q-check-btn", currQuiz ).attr( {"disabled": settings.blockCheck, "value": lang.btn.next[0] } )
                        .click( function( e ){
                            $( e.target ).attr( "disabled", settings.blockCheck );
                            isFlashCard = $( currQuiz ).find( ".userInputArea" ).triggerHandler( "getUserAns" );
                            displayAnsResult( isFlashCard );
                            nextMove();
                            e.preventDefault();
                        }
                    );                
                }
                if(  $(".q-check-btn", currQuiz ).attr("disabled") == "" ) $(".q-check-btn", currQuiz ).attr("disabled", "disabled");
            },

Open in new window

0
 

Author Comment

by:modmedia
ID: 33696088
If you look at http://clients.themodmedia.com/blueriver/js/jQuizMe-uncompressed.js , line 153, you can see the toggle option.
0
 

Author Comment

by:modmedia
ID: 33696104
That didn't work... the HTML still renders the button like this:

<input type="button" class="q-check-btn" value="Check" title="Check your answer" disabled="">
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33696126
I'm not sure the problem is how the html is rendering...
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33696135
better : << how you see the html rendered >>
0
 

Author Comment

by:modmedia
ID: 33696156
well, right... I'm sure it's the block of javascript that is rendering it that way. I just don't know why it still renders it blank (disabled="") instead of like it should (disabled="disabled")
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 2000 total points
ID: 33696226
Sound stupid but replace :

if(  $(".q-check-btn", currQuiz ).attr("disabled") == "" ) $(".q-check-btn", currQuiz ).attr("disabled", "disabled");

by :

if(  $(".q-check-btn", currQuiz ).attr("disabled") ) $(".q-check-btn", currQuiz ).attr("disabled", "disabled");
0
 

Author Comment

by:modmedia
ID: 33696291
no dice...
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33696351
of topic(?) replace :
<div id="quizArea"/>

by :

<div id="quizArea"></div>

Open in new window

0
 

Author Comment

by:modmedia
ID: 33696369
done... still nothing
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33696975
Initially (in the html code) could you confirm the state of the button ?

disabled="" ?
0
 

Author Comment

by:modmedia
ID: 33697568
Yes that is correct. I'm not sure if you're familiar with Firebug, but using it will show you how it's rendering
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33697585
>Yes that is correct.

Initally set it like this : disabled="disabled"

Use firebug and check this :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<input type="button" value="I'm disabled" disabled="disabled" /><br />
<input type="button" value="I'm disabled" disabled="" /><br />
</body>
</html>

Open in new window

0
 

Author Comment

by:modmedia
ID: 33697614
Right... now try this:

[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<style>

input[disabled="disabled"], input.disabled {
}

</style>

<body>
<input type="button" value="I'm disabled" disabled="disabled" /><br />
<input type="button" value="I'm disabled" disabled="" /><br />
</body>
</html>
[/code]

And see how the style works on one, but not the other.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33697618
that's why I said use : << Initally set it like this : disabled="disabled" >>
0
 

Author Comment

by:modmedia
ID: 33697638
Both methods functionally make the button disabled, which is fine. What I am trying to do is get the CSS styles to cooperate with the disabled state. Since the button is rendering disabled="", the CSS style input[disabled="disabled"] doesn't work.

I cannot go in manually and set the button to disabled="disabled" because it is the javascript that is generating the button dynamically.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33697793
Check this :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>

input[disabled="disabled"], input[disabled=""] {
	color:#F36
}

</style>
</head>
<body>
<input type="button" value="I'm disabled" disabled="disabled" /><br />
<input type="button" value="I'm disabled" disabled="" /><br />
</body>
</html>

Open in new window

0
 

Accepted Solution

by:
modmedia earned 0 total points
ID: 33697810
Hmm... after experimenting like this, I am starting to think the issue lies within IE. In the code you posted, the text changes to red on BOTH buttons when tested in Firefox. However in IE, it's stuck on that greyed out/white offset. Is there any specific IE CSS style that can override that?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33697861
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33697884
Check this (at the end for disabled button) : http://www.webreference.com/programming/css_stylish/
0
 

Author Comment

by:modmedia
ID: 33698011
It seems like the "readonly" makes the button not work completely (even after a user selects an answer).

I think at this point I am just going to disable the blockCheck toggle, and keep the "check" button enabled the whole time.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33699906
you may use the onclick attribute of the button to check the blockCheck value and decide to "return false" or not
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33764020
Thanks for the points!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
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)

610 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