How Do I Get This Piece Of Code Working?

Question

2.00/5 (1 vote)

See more:

Dear All.
I have a login and singup application where it works not using JQuery + Java script to change form look and feel (UI). I have downloaded a JQuery form and i just added it to my application but when i press the login button nothing happens. Here is my code.

C#

@model SimpleLogInSystem.Models.UserModel
@{
    ViewBag.Title = "LogIn";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Animated Form Switching with jQuery</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Expand, contract, animate forms with jQuery wihtout leaving the page" />
        <meta name="keywords" content="expand, form, css3, jquery, animate, width, height, adapt, unobtrusive javascript"/>
		<link rel="shortcut icon" href="../../Images/bg.gif" type="image/x-icon"/>
        <link rel="stylesheet" type="text/css" href="../../Content/style.css" />
		<script src="../../Scripts/cufon-yui.js" type="text/javascript"></script>
		<script src="../../Scripts/ChunkFive_400.font.js" type="text/javascript"></script>
		<script type="text/javascript">
		    Cufon.replace('h1', { textShadow: '1px 1px #fff' });
		    Cufon.replace('h2', { textShadow: '1px 1px #fff' });
		    Cufon.replace('h3', { textShadow: '1px 1px #000' });
		    Cufon.replace('.back');
		</script>
    </head>
    <body>
		<div class="wrapper">
			<h1>Animated Form Switching</h1>
			<h2>Demo: click the <span>orange links</span> to see the form animating and switching</h2>
			<div class="content">
				<div id="form_wrapper" class="form_wrapper">
					
					<form id="myForm" class="login active">
						<h3>Login</h3>
                        @using (Html.BeginForm())
                        { 
                             @Html.ValidationSummary(true, "Login Failed, Check your login details.") 
                            
                               <div>
                              @Html.LabelFor(u => u.Email)</div>
                             <div>@Html.TextBoxFor(u => u.Email)
                              @Html.ValidationMessageFor(u => u.Email)</div>
                     
                            <div>@Html.LabelFor(u => u.Password)</div>
                            <div>@Html.PasswordFor(u => u.Password)
                            @Html.ValidationMessageFor(u => u.Password)</div>
                             <input type="submit" id="Login" value="Log In" />

						     <div class="bottom">
							<div class="remember"><input type="checkbox" /><span>Keep me logged in</span></div>
							<div class="clear"></div>
						    </div>
                        }
						 
					</form>
					
				</div>
				<div class="clear"></div>
             </div>
             </div>

JavaScript

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
         <script type="text/javascript" src="http://cdn.jsdelivr.net/json2/0.1/json2.js"></script>
		<script type="text/javascript">
		    $(function () {
		        //the form wrapper (includes all forms)
		        var $form_wrapper = $('#form_wrapper'),
		        //the current form is the one with class active
					$currentForm = $form_wrapper.children('form.active'),
		        //the change form links
					$linkform = $form_wrapper.find('.linkform');

		        //get width and height of each form and store them for later						
		        $form_wrapper.children('form').each(function (i) {
		            var $theForm = $(this);
		            //solve the inline display none problem when using fadeIn fadeOut
		            if (!$theForm.hasClass('active'))
		                $theForm.hide();
		            $theForm.data({
		                width: $theForm.width(),
		                height: $theForm.height()
		            });
		        });

		        //set width and height of wrapper (same of current form)
		        setWrapperWidth();

		        /*
		        clicking a link (change form event) in the form
		        makes the current form hide.
		        The wrapper animates its width and height to the 
		        width and height of the new current form.
		        After the animation, the new form is shown
		        */
		        $linkform.bind('click', function (e) {
		            var $link = $(this);
		            var target = $link.attr('rel');
		            $currentForm.fadeOut(400, function () {
		                //remove class active from current form
		                $currentForm.removeClass('active');
		                //new current form
		                $currentForm = $form_wrapper.children('form.' + target);
		                //animate the wrapper
		                $form_wrapper.stop()
									 .animate({
									     width: $currentForm.data('width') + 'px',
									     height: $currentForm.data('height') + 'px'
									 }, 500, function () {
									     //new form gets class active
									     $currentForm.addClass('active');
									     //show the new form
									     $currentForm.fadeIn(400);
									 });
		            });
		            e.preventDefault();
		        });

		        function setWrapperWidth() {
		            $form_wrapper.css({
		                width: $currentForm.data('width') + 'px',
		                height: $currentForm.data('height') + 'px'
		            });
		        }


		        /*
		        for the demo we disabled the submit buttons
		        if you submit the form, you need to check the 
		        which form was submited, and give the class active 
		        to the form you want to show
		        */

		    });
        </script>

Posted 4-Jul-14 8:52am

Barcelonista Naser

Add a Solution

Comments

CHill60 6-Jul-14 19:49pm

Have you tried going back to wherever you "downloaded" the code from?

Barcelonista Naser 8-Jul-14 1:26am

Yes but they do not have more information about it.

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)