Solved

Convert Mootools Javascript to JQuery

Posted on 2009-05-06
15
872 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
  • 6
  • 5
  • 3
  • +1
15 Comments
 
LVL 10

Expert Comment

by:bugada
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 1

Author Comment

by:socross
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 5

Expert Comment

by:prokvk
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article discusses how to create an extensible mechanism for linked drop downs.
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…

763 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now