Yesterday I was working with one functionality of MooTools.One issue happened with me so I am sharing that issue and solution with you.
I was using a MooTools and had an issue in one of the Element Method removeClass() of MooTools and the surprise part is, there was no error in the Error console. The part of the code where I used addclass() element was working fine but only the removeclass() method was not working within my code.As I have tried by replacing removeClass() method with another method and it was working fine.
removeclass() element method removes the class from the Element.
SYNTAX:
1 2 3 | myElement.removeClass(className); |
className: a class name you want to remove from an element.
Let’s see my code as follows:
Mootools Script:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | $('distri_type').addEvent('change', function() { $displayVal = $('distri_type').get('value'); if($displayVal == 'Username') { document.id('divusername').setStyle('display','block'); document.id('divemail').setStyle('display','none'); document.id('email').removeClass("validate['required']"); } else if($displayVal == 'Email') { document.id('divemail').setStyle('display','block'); document.id('divusername').setStyle('display','none'); document.id('email').addClass("validate['required']"); document.id('username').removeClass("validate['required']"); } else { document.id('divemail').setStyle('display','none'); document.id('divusername').setStyle('display','none'); } }); }); |
HTML Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | Choose Value for Email or UserName <select id="distri_type" name="distri_type"> <option selected="selected" value="">SELECT</option> <option value="Username">UserName</option> <option value="Email">Email</option> </select> <div id="divusername" style="display: none;"> UserName : <input id="username" type="text" name="username" value="" /> </div> <div id="divemail" style="display: none;"> E-mail : <input id="email" type="text" name="email" value="" /> </div> |
In Above Mootools Script only “removeClass()” method was not worked and, first of all, I was not getting what was the issue and I tried a lot with this issue and then have made a quick search and found the answer for the same.
Finally, I got that the removeClass() method is working fine with simple class value like “class field” but it’s not working with class value validate[‘required’] which contain square bracket because the MooTools removeClass() method bottlenecks the class name into the middle of a regex and its create problem to escape embedded regex metacharacters within a class.
However, The solution for the above issue is to apply \ with remove class value like validate\[‘required’\] and the problem was resolved, the remove class method was working fine after that.That’s it.
Here, See Mootools script which was working fine after adding value like “validate\[‘required’\]”.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | window.addEvent('domready', function(){ $('distri_type').addEvent('change', function() { $displayVal = $('distri_type').get('value'); if($displayVal == 'Username') { document.id('divusername').setStyle('display','block'); document.id('divemail').setStyle('display','none'); document.id('username').addClass("validate['required']"); document.id('email').removeClass("validate\['required'\]"); } else if($displayVal == 'Email') { document.id('divemail').setStyle('display','block'); document.id('divusername').setStyle('display','none'); document.id('email').addClass("validate['required']"); document.id('username').removeClass("validate\['required'\]"); } else { document.id('divemail').setStyle('display','none'); document.id('divusername').setStyle('display','none'); } }); }); |
Also Read:
Lazy Load Plugin for jQuery Explained
To Call Remote URL in $.ajax method in jQuery
jQuery Shake Effect Explained
Don’t forget to subscribe to our free Email updates :). Do you have any question in above explanation or have you ever faced such issue, let me know via comment.
