search

ssmkalyan / jquery-watermark

Automatically exported from code.google.com/p/jquery-watermark
0 stars 0 forks source link

No support for elements that already have a base class name #76

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago 
What steps will reproduce the problem?
1. Element has a base class like <input class='someClass'
2. using: .watermark('some text', {useNative: false, className: 
'someClassWhenWatermarked'})

What is the expected output? What do you see instead?

After watermark was hide, Element (input) has no class (class attribute was 
removed and original base class name was not restored)

What version of the product are you using? On what operating system?

3.1.3 latest

Please provide any additional information below.

I was FIXed this issue and make a comments so you can make a closer look on 
changes that I was made (search for 'TSX' tag). 
Fixed file in attachment.

Original issue reported on code.google.com by to...@tapeint.com on 7 Dec 2011 at 12:46

Attachments:

GoogleCodeExporter commented 9 years ago 
I think you're seeing problems with the class name on your elements because you 
are manipulating class using the attr() function, rather than the correct way, 
which is addClass()/removeClass()/etc.

attr() is only use in jQuery to modify the original HTML in a web page, not as 
a way to modify the dynamic DOM elements/attributes.  If you really want to 
manipulate the class names without using addClass()/removeClass()/etc. (which 
is definitely NOT recommended), then you would use prop(), not attr().

The plugin uses addClass()/removeClass() to add and remove the class names, 
which preserves any existing class names on the elements.

Original comment by t...@speednet.biz on 8 Dec 2011 at 3:03

GoogleCodeExporter commented 9 years ago 
It's not the case, I just make it FIXed by that .attr (but ok, thanks for 
advice using prop)

BUT

The problem is in your 3.1.3 version instead. When element has a class in html 
like
<input class="class1"

After the Focus leaves watermarked element, that class ('class1') is not 
restored by your code! You remove that originall class and element is unstyled!

Original comment by to...@tapeint.com on 9 Dec 2011 at 7:09

GoogleCodeExporter commented 9 years ago 
You should not be use either attr() nor prop() for classes.  In jQuery you're 
supposed to use addClass() and removeClass().

The Watermark plugin uses addClass() to add the watermark class, and 
removeClass() to remove the watermark class.  It does nothing to the class 
name(s) that existed on the element prior to, during, or after watermarking.

If you are experiencing problems with other class names being removed, then you 
are doing something that is conflicting with jQuery's addClass() and/or 
removeClass().

Original comment by t...@speednet.biz on 9 Dec 2011 at 11:35

GoogleCodeExporter commented 9 years ago 
You're wrong.

Your code modify the "class" if had an option parameter "className" (with: 
useNative = false).

Yoiu can try it here:

<input id="test" name="test" type="text" value="" class="classNormal" /> 
[class="" is important in that case!]

Then, run a JS:

$("#test").watermark("Watermark text", {useNative: false, className: 
"classWatermark"});

Did you see it now? this WILL modify the element "class" attribute!

It change the "class" to "classWatermark" when Watermark is Show,
but when Watermark is Hide, the "class" is removed! (you use "removeClass") but 
it should restore the "classNormal" class!

in your: _hide method you do:

className && $input.removeClass(className);

It can't be like that! removeClass removes class from a "class" attribute not 
your $input.data(watermarkClass)!

See documentation of jQuery: http://api.jquery.com/removeClass/
.removeClass( [className] )
className - One or more space-separated classes to be removed from the "class" 
attribute of each matched element.
If a class name is included as a parameter, then only that class will be 
removed from the set of matched elements. If no class names are specified in 
the parameter, all classes will be removed.

Do you see that? You're using wrong method!

It works for you when you don't have a "class" set in element (it's empty at 
beginning and it will be removed after so the state is like before watermarked 
and everything seems to be OK), BUT when you have an "class" attribute at 
beginning, it will be erased after watermark is hide!

Original comment by to...@tapeint.com on 9 Dec 2011 at 12:18

GoogleCodeExporter commented 9 years ago 
Oh my gosh, I don't you understand how removeClass() works.  It only removes 
the class name you specify, not all class names.

Original comment by t...@speednet.biz on 9 Dec 2011 at 12:25

GoogleCodeExporter commented 9 years ago 
Gosh! 

Did you see a different from "class" attribute or a 
$.data("your_attribute_class") ? Because I think you don't.

You create your own attributes/class using: $input.data(yourClassName, 
yourValue)

But "removeClass" - removes only from a "class" attribute! not from a name that 
you provide!

"class" attribute is for styling an element, it can take a few clases like 
class="a b c", and you can remove each using a "removeClass" method eg. 
removeClass("c"), so after calling it a "class" atribute will be a class="a b" 
- you see that?

So the only way to handle it, you should remember a original "class" attribute 
of that element (if exists). And after watermark is Hide (and the "class" 
attribute was removed), you should restore the origiinal!

Original comment by to...@tapeint.com on 9 Dec 2011 at 12:58