Convert Mootools Javascript to JQuery

Hi there

I am looking to move over to using Jquery, I am very new to it and am learning some basics. I have various scripts written with mootools and ideally need to get them working with Jquery.

1. Firstly can anyone help with a quick fix in coverting this code to jquery.
2. Can anyone offer any advise for the possibilities of using JQuery & Mootools on the same page, does it cause issues??

Any feedback would be much appriciated.

Warmest Regards

--s--
// Clear Value on click if its default value
function clearme(obj,defaultVal)
{
	var curVal = $(obj).value.trim();
	if(curVal==defaultVal)
	{
		$(obj).value = "";
	}
	if($(obj).id=="passwd")
		$(obj).type="password"
}
 
// Check Value is not empty
function checkme(obj,defaultVal)
{
	var curVal = $(obj).value.trim();
	if(curVal=="" || curVal=="password")
	{
		if($(obj).id=="passwd")
			$(obj).type="text";
		$(obj).value = defaultVal;
	}
}
 
// Clear Value on click if its default value
function clearme_ta(obj,defaultVal)
{
	var curVal = $(obj).innerHTML.trim();
	if(curVal==defaultVal)
	{
		$(obj).innerHTML = "";
	}
}
 
// Check Value is not empty
function checkme_ta(obj,defaultVal)
{
	var curVal = $(obj).innerHTML.trim();
	if(curVal=="")
	{
		$(obj).innerHTML = defaultVal;
	}
}
 
 
// Update Password field type to text
window.addEvent('domready', function() {
	if($("passwd").value==="password")
	{
		$("passwd").type="text";
	}
});

Open in new window

LVL 1
socrossAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
prokvkConnect With a Mentor Commented:
So I edited the code a little bit, my comments:

1, works as you described
2, works as you described
3, this is not possible as I told you earlier, you CANT change the input type, try it yourself on Firefox with Firebug, you'll get an JS error! The input type password will never show you pure text, it's password field type!
4, This code works for textareas too

Here's the updated 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>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
var pwtext = '<input type="text" value="password" name="passwd" onfocus="clearme(this, \'password\');" onblur="checkme(this, \'password\');" />';
var pwpwd  = '<input type="password" value="password" name="passwd" onfocus="clearme(this, \'password\');" onblur="checkme(this, \'password\');" />';
 
$(document).ready(function () {
   if ($("#passwd").val() === "password") {
      $("#passwd").replaceWith(pwtext);
      
      $('input[name="passwd"]').attr('id','passwd');
   }
});
 
function clearme(obj, defaultVal) {
   if ($.trim($(obj).val()) == defaultVal) {
      $(obj).val("");
   }
   
   if ($(obj).attr("id") == "passwd") {
      if (!$(obj).is(':password'))
      {
          $("#passwd").replaceWith(pwpwd);
          
          $('input[name="passwd"]').attr('id','passwd');
          $("#passwd").focus();
      }
   }
};
 
function checkme(obj, defaultVal) {
   var curVal = $.trim($(obj).val());
   
   if ($.trim($(obj).val()) == '') {
      $(obj).val(defaultVal);
   }
   
   if ($(obj).is('#passwd'))
   {
       if ((curVal == '') || (curVal == 'password'))
       {
           $(obj).replaceWith(pwtext);
           
           $('input[name="passwd"]').attr('id','passwd');
       }
   }
};
 
 
 
 
 
function clearme_ta(obj, defaultVal) {
   if ($(obj).attr("id") == "passwd") {
      $(obj).attr("type", "password");
   }
}; 
 
</script>
 
 
</head>
<body>
                    
                    <form action="" method="post" >
                        <div class="error">
                            <input type="text" value="domain name" id="domain" name="domain" onfocus="clearme(this, 'domain name');" onblur="checkme(this, 'domain name');" />
                        </div>
                        <div >
                            <input type="password" value="password" id="passwd" name="passwd" onfocus="clearme(this, 'password');" onblur="checkme(this, 'password');" />
                        </div>
 
                        <div class="button">
                            <button title="Go" type="submit"><em>Go</em></button>
                        </div>
                    </form>
</body>
 
</html>

Open in new window

0
 
bugadaCommented:
Mootols and JQuery at the moment are incompatible. The Mootools team introduced some jquery reserved object (like $event) in their code that cause conflicts between the two libraries.

Unfortunately I'm not a Mootools fan, so I think you need to wait for another expert to convert your code,
but basicly what jquery and motools do the same thing, so it's unusefult having both on the same page.
0
 
bugadaCommented:
Since your code is quite simple to understand I tried to convert it to jquery, but I can't test it.
Try it, may be bugged.


$(document).ready(function () {
   if ($("passwd").val() === "password") {
      $("passwd").attr("type", "text");
   }
});
 
function clearme(obj, defaultVal) {
   if ($(obj).val().trim() == defaultVal) {
      $(obj).val("");
   }
   
   if ($($obj).attr("id") == "passwd") {
      $($obj).attr("type", "password");
   }
};
 
function clearme_ta(obj, defaultVal) {
   if ($(obj).text().trim() == defaultVal) {
      $(obj).text("");
   }
};
 
 
function checkme(obj, defaultVal) {
   var curVal = $(obj).val().trim();
   if (curVal == "" || curVal == "password") {
      if ($(obj).attr("id"") == "passwd") {
         $(obj).attr("type", "text");
         $(obj).val(defaultVal);
      }
   }
};

Open in new window

0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
bugadaCommented:
Well I found several bug while posting :-)
Substitute lines from 18 to 20 with the following snippet and remove the unnecessary double quotes on line 27.

   if ($(obj).attr("id") == "passwd") {
      $(obj).attr("type", "password");
   }

Open in new window

0
 
socrossAuthor Commented:
Many thanks for you help bugada

Unfortunately I cant get it to work.

I have attached the supporting html, maybe you might be able to debug it, I have been reading up but am very new to the syntax!

Any help you can offer would be greatly appriciated.

--s--


<!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>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="login-jq.js"></script>
 
 
</head>
<body>
                    
                    <form action="" method="post" >
                        <div class="error">
                            <input type="text" value="domain name" id="domain" name="domain" onfocus="clearme(this, 'domain name');" onblur="checkme(this, 'domain name');"/>
                        </div>
                        <div >
                            <input type="password" value="password" id="passwd" name="passwd" onfocus="clearme(this, 'password');" onblur="checkme(this, 'password');"/>
                        </div>
 
                        <div class="button">
                            <button title="Go" type="submit"><em>Go</em></button>
                      	</div>
                    </form>
</body>
 
</html>

Open in new window

0
 
prokvkCommented:
Hi there, can you paste all of the code in one piece pls ?? I can have a look at it. I mean the version with pure jquery that doesn't work
0
 
socrossAuthor Commented:
Thanks prokvk

Attached is the example.

Many thanks
<!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>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
   if ($("passwd").val() === "password") {
      $("passwd").attr("type", "text");
   }
});
 
function clearme(obj, defaultVal) {
   if ($(obj).val().trim() == defaultVal) {
      $(obj).val("");
   }
   
   if ($($obj).attr("id") == "passwd") {
      $($obj).attr("type", "password");
   }
};
 
function clearme_ta(obj, defaultVal) {
   if ($(obj).attr("id") == "passwd") {
      $(obj).attr("type", "password");
   }
};
 
 
function checkme(obj, defaultVal) {
   var curVal = $(obj).val().trim();
   if (curVal == "" || curVal == "password") {
      if ($(obj).attr("id") == "passwd") {
         $(obj).attr("type", "text");
         $(obj).val(defaultVal);
      }
   }
};
 
 
 
 
</script>
 
 
</head>
<body>
                    
                    <form action="" method="post" >
                        <div class="error">
                            <input type="text" value="domain name" id="domain" name="domain" onfocus="clearme(this, 'domain name');" onblur="checkme(this, 'domain name');"/>
                        </div>
                        <div >
                            <input type="password" value="password" id="passwd" name="passwd" onfocus="clearme(this, 'password');" onblur="checkme(this, 'password');"/>
                        </div>
 
                        <div class="button">
                            <button title="Go" type="submit"><em>Go</em></button>
                        </div>
                    </form>
</body>
 
</html>

Open in new window

0
 
hb69Commented:
I used mootools for a year and a half.  I had a great time with that JS framework.  But as a .net developer I had to read the writing on the wall.  Instead of converting my old stuff,  I scrapped every bit of it and just started over from scratch in JQuery and re-learned stuff piece by piece.  Best of luck to ya.
0
 
prokvkCommented:
This should work (edit the path to your jQuery):



<!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>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
var pwtext = '<input type="text" value="password" name="passwd" onfocus="clearme(this, \'password\');" onblur="checkme(this, \'password\');"/>';
var pwpwd  = '<input type="password" value="password" name="passwd" onfocus="clearme(this, \'password\');" onblur="checkme(this, \'password\');"/>';
 
$(document).ready(function () {
   if ($("#passwd").val() === "password") {
      $("#passwd").replaceWith(pwtext);
      
      $('input[name="passwd"]').attr('id','passwd');
   }
});
 
function clearme(obj, defaultVal) {
   if ($.trim($(obj).val()) == defaultVal) {
      $(obj).val("");
   }
   
   if ($(obj).attr("id") == "passwd") {
      if (!$(obj).is(':password'))
      {
          $("#passwd").replaceWith(pwpwd);
          
          $('input[name="passwd"]').attr('id','passwd');
          $("#passwd").focus();
      }
   }
};
 
function checkme(obj, defaultVal) {
   var curVal = $.trim($(obj).val());
   
   if ((curVal == '') || (curVal == 'password'))
   {
       $(obj).replaceWith(pwtext);
       
       $('input[name="passwd"]').attr('id','passwd');
   }
};
 
 
 
 
 
function clearme_ta(obj, defaultVal) {
   if ($(obj).attr("id") == "passwd") {
      $(obj).attr("type", "password");
   }
}; 
 
</script>
 
 
</head>
<body>
                    
                    <form action="" method="post" >
                        <div class="error">
                            <input type="text" value="domain name" id="domain" name="domain" onfocus="clearme(this, 'domain name');"/>
                        </div>
                        <div >
                            <input type="password" value="password" id="passwd" name="passwd" onfocus="clearme(this, 'password');" onblur="checkme(this, 'password');"/>
                        </div>
 
                        <div class="button">
                            <button title="Go" type="submit"><em>Go</em></button>
                        </div>
                    </form>
</body>
 
</html>

Open in new window

0
 
socrossAuthor Commented:
Thanks

We are very nearly there.

The only issue is with standard text fields, if they are clicked they clear ok but then if no text is entered they revert to a password field rather than reverting to the input text default!

Any ideas?

Also - I need to code to be as reusable as possible, is there no way with jquery to just change the input field type like I did with the mootools code, rather than replacing the whole element as above?

Many thanks

--s--
0
 
prokvkCommented:
You cant change the input type, you have to replace it ... and the other thing, I'll take a look at it
0
 
prokvkCommented:
Hmm .. You want the password field to by text type ??? I dun get it, from your code there was password field used when it was cleared (empty). If you want the password field to be text type then what's the point of messing with the password fields ??
0
 
socrossAuthor Commented:
Ok

I will run though the requirments + what the mootools code achived.

1. Input Fields: Text
If Value = Default value, field cleared on focus.
Default value added if still empty on blur.

2. Input Fields: Pass
If Value = Default value field cleared on focus.
Default value added if still empty on blur.

3. Input Field: Pass
Special feature that allows text value to be displayed if empty or default value.
If Js On, check if Value = Default & change type to text and then changed back to password if value not empty or = default.

4. Textarea
Modified version of 1 to work with textareas

I hope this is clear, of not just let me know!

Thanks

--s--



3.Text Areas
Default value cleared on focus.
Default value added if still empty on blur.
0
 
socrossAuthor Commented:
Great Thanks.

Will Try it out.

3. I understand that you cannot expect a password input field to display text, but you can write code to get the functionality i require as the mootools code does it.

I will try and explain it again, if it is a limitation of jquery thats fine, I may just have to use mootools on my login pages.

1. Page loads standard input where type = password with a default value 'password'. At this point it will display the password dots rather than characters.
2. If Javascript is enabled, on page load we change any input fields with type = password to type = text where default value = password or = ''
3. On Focus the now type = text password input field is changed back to type = password so password can be entered securely and submitted.
4. Function needs to change the password field back to text type is it is empty or default value onBlur

Many thanks

--s--

2.
0
 
prokvkCommented:
It's not a limitation of jQuery, it's just that jQuery can apply JavaScript on DOM. It's DOM "limitation". Why the slashes ?? Because it's not even logical to convert one object to another, you can't do that with DOM objects. As I told you, you can try it yourself with pure JavaScript, I'm sure you'll get an error. I'm not experienced with MooTools, but if they do such thing it's probably just replacement like I did. So if you want "change" the input type I guess you'll have to stick with MooTools (if they do that ^^).

Good luck :)
0
All Courses

From novice to tech pro — start learning today.