?
Solved

Convert Mootools Javascript to JQuery

Posted on 2009-05-06
15
Medium Priority
?
887 Views
Last Modified: 2013-11-11
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

0
Comment
Question by:socross
[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
  • 6
  • 5
  • 3
  • +1
15 Comments
 
LVL 10

Expert Comment

by:bugada
ID: 24313266
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
 
LVL 10

Expert Comment

by:bugada
ID: 24313404
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
 
LVL 10

Expert Comment

by:bugada
ID: 24313436
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
Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

 
LVL 1

Author Comment

by:socross
ID: 24323708
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
 
LVL 5

Expert Comment

by:prokvk
ID: 24337761
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
 
LVL 1

Author Comment

by:socross
ID: 24337985
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
 
LVL 1

Expert Comment

by:hb69
ID: 24338615
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
 
LVL 5

Expert Comment

by:prokvk
ID: 24338701
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
 
LVL 1

Author Comment

by:socross
ID: 24346240
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
 
LVL 5

Expert Comment

by:prokvk
ID: 24348322
You cant change the input type, you have to replace it ... and the other thing, I'll take a look at it
0
 
LVL 5

Expert Comment

by:prokvk
ID: 24348367
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
 
LVL 1

Author Comment

by:socross
ID: 24348625
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
 
LVL 5

Accepted Solution

by:
prokvk earned 2000 total points
ID: 24348687
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
 
LVL 1

Author Comment

by:socross
ID: 24349051
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
 
LVL 5

Expert Comment

by:prokvk
ID: 24349231
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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses

762 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