AboutPricingCommunityTeamsStart Free TrialLog in
Avatar of RadhaKrishnaKiJaya
RadhaKrishnaKiJaya
 asked on

Getting TypeError: $ is not a function error

Hi Experts,
I am trying to do a Captcha implementation.  For some reason it is giving me the error "Uncaught TypeError: $ is not a function". Any help is greatly appreciated.

Thanks in advance.

@using CaptchaMvc.HtmlHelpers

<h1 class="spacer-20">@T("Reset your password")</h1>
@using (Html.BeginFormAntiForgeryPost("/Users/Account/LogOn/ForgotPassword", FormMethod.Post))
{
    @Html.Hidden("url_success", string.Empty)
    @Html.Hidden("url_fail", string.Empty)
    @Html.ValidationSummary()
<div class="login-page">
    <h3>@T("Your username")</h3>
    @Html.TextBox("username", string.Empty, new { maxlength = 50 })
   @Html.MathCaptcha()

    <div class="spacer-40">
        <input id="btnSubmit" class="critical button" type="submit" value="@T("Submit")" />
    </div>
    <div class="spacer-20"></div>
</div>
}

Open in new window


Giving error near the $ sign.

<script type="text/javascript">
$(function () {$('#b20b155dd1fb4b6d92d9a47ddf2550c4').show();})
function ______c0f11654da8c4103bc4724cc881fc967________() { $('#b20b155dd1fb4b6d92d9a47ddf2550c4').hide(); $.post("", { t: $('#CaptchaDeText').val(), __m__: "0" }, function(){$('#b20b155dd1fb4b6d92d9a47ddf2550c4').show();}); return false; }</script>

Open in new window

C#jQuery
Avatar of undefined
Last Comment
Julian Hansen
8/22/2022 - Mon
Shaun Vermaak
Post your layout file. Do you have JQuery references?
RadhaKrishnaKiJaya
ASKER
Hi,
Thank you for trying to help me.
Layout file means the file after I click view source?
Zakaria Acharki
I guess this error will be caused by one of the following two things :

  • You've no include for the jQuery library in your page.
  • You have a conflict between the jQuery library and another library.

So for the first one it could be fixed by adding the library using :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
//OR using 
@Scripts.Render("~/bundles/jquery")

Open in new window


For the second one you could wrap the dollar '$' sign in a jQuery ready function:

jQuery( document ).ready(function( $ ) {
    //You can now use $ as your jQuery object.
});

Open in new window

All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
Shaun Vermaak
The _layout.chtml file in the View/Shared folder
RadhaKrishnaKiJaya
ASKER
I don't see any _layout.cshtml file. It is a huge project and linked in so many ways.

Thanks,
RadhaKrishnaKiJaya
ASKER
Hi Zakaria Acharki,
I added the jQuery library. But still getting the error. Your second option, where should I add the code.  I have given my code. If you can tell me where should I add that code then I will add it.

Thanks.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Julian Hansen
Do a view source of your page and post the HTML here.

That is going to be the quickest way to see what is going on.
RadhaKrishnaKiJaya
ASKER
Here is the view source code.
<!DOCTYPE html> 
<html lang="en-US"><head><meta content="IE=edge" http-equiv="X-UA-Compatible" /><title>Lost Password</title> 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="robots" content="noindex,nofollow,noarchive" />
<meta name="bu" content="IPG" /> 
<meta name="lifecycle" content="presales.consideration" /> 
<meta name="segment" content="Commercial.Large" />
<meta name="target_country" content="us" /> 
<meta name="page_content" content="Products">
<meta name="web_section_id" content="R11826" /> 
<meta content="hfcaas.2" name="hp_inav_version" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta http-equiv="Content-Script-Type" content="text/javascript" /> 
<meta http-equiv="Content-Style-Type" content="text/css" /> 
<link href="/Modules/Draftfcb.Orchard.Common/Styles/dropdowns-and-facets.css" rel="stylesheet" type="text/css" />
<link href="/Themes/HpExperience/Styles/screen.css" rel="stylesheet" type="text/css" />
<link href="/Themes/HpExperience/Styles/quotes.min.css" rel="stylesheet" type="text/css" />
<link href="/Themes/HpExperience/Styles/PreLogin-09252014.css" rel="stylesheet" type="text/css" />
<link href="/Themes/HpExperience/Styles/purchasedge-09252014.css" rel="stylesheet" type="text/css" />
<script src="/Modules/Orchard.jQuery/scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="/Modules/Draftfcb.Orchard.Common/scripts/jquery-migrate-1.2.1.js" type="text/javascript"></script>
<script src="/Modules/Draftfcb.Orchard.Common/scripts/inheritance.js" type="text/javascript"></script>
<script src="/Modules/Draftfcb.Orchard.Common/scripts/drop-downs-and-facets-03052014.js" type="text/javascript"></script>
<meta content="Orchard" name="generator" />
<link href="https://ssl.www8.h.com/us/en/images/i/favicon.ico" rel="shortcut icon" type="image/x-icon" />

<!--[if lt IE 9]>
<script type="text/javascript" src="//ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<link rel="stylesheet" href="/Themes/HpExperience/Styles/ie.css" media="all">
<![endif]-->
<!--[if lte IE 7]>
	<link rel="stylesheet" href="/Themes/HpExperience/Styles/ie7-08282014.css" media="all">
	<script type="text/javascript" src="/Themes/HpExperience/scripts/ie7json.js"></script>
	<script type="text/javascript" src="/Themes/HpExperience/scripts/json2.js"></script>
<![endif]-->
<script type="text/javascript" language="javascript" src="https://ssl.www8.hp.com/ww/en/system/include/privacy_cookie.JS"></script>
<script type="text/javascript" language="javascript">
var hpmmd = window.hpmmd || { type: 'Cleansheet Wash', page: {}, product: {}, user: {}, promo: {}, legacy: {} };
hpmmd.account = 'hpcspurchasedge';
hpmmd.page['name'] = 'Lost Password';
hpmmd.page['section'] = 'PE';
hpmmd.page['conv73'] = '';
hpmmd.page['conv74'] = '';
hpmmd.page['conv75'] = '';
</script>
</head> 
<body>



<div id="page-wrapper">
<div class="screen-reader noprint">[<a href="#content" title="Skip to main content." accesskey="2">Skip to main content.</a>]</div>
	<div id="pageheader">
	<div class="zone zone-header">
<article class="widget-internal-sign-in widget-header widget-html-widget widget">
    <form action="/Users/Account/LogOn/SignIn" method="post"><input name="FailRedirect" value="" type="hidden" />
<table border="0" cellpadding="0" cellspacing="0" id="sign-in-form">
<tbody>
<tr>
<td><label class="label-required" for="username">Username <span>*</span></label></td>
<td><label class="label-required" for="password">Password <span>*</span></label></td>
<td></td>
</tr>
<tr>
<td><input name="username" id="username" type="text" /></td>
<td><input name="password" id="password" type="password" /></td>
<td><input value="Sign in" class="button critical" type="submit" id="sign-in-button" /></td>
</tr>
</tbody>
</table>
<div><span>Forgot your <a href="/Users/Account/LogOn/LostUsername">username</a> or <a href="/Users/Account/LogOn/LostPassword">password</a>?</span></div>
</form>
</article>
<article class="widget-header widget-html-widget widget">
    <div id="HeaderLogoAndText"><img id="PELogo" src="/Themes/HExperience/Content/Images/hp.png" alt="TP" />
<h2 id="PEHeaderText">Welcome to PE</h2>
</div>
</article></div>
		<div class="navigation" id="navigation"><div class="zone zone-navigation">
<article class="widget-navigation widget-menu-widget widget">
    
<nav>
    <ul class="menu menu-pre-login-menu-channel-neutral">
        
        
    </ul>
</nav>
</article></div></div>
	</div>




		<div id="pe-page-content" class="with-right-rail">
		<div class="zone zone-content"><h1 class="spacer-20">Reset your password</h1>

<p>Type your username and click Submit to receive an email with instructions on how to reset your HP PurchasEdge password. If you continue to have problems signing in, contact the PurchasEdge Support Center at 1-888-264-6599.</p>


<form action="/Users/Account/LogOn/ForgotPassword" method="post"><input id="url_success" name="url_success" type="hidden" value="" /><input id="url_fail" name="url_fail" type="hidden" value="" /><div class="validation-summary-valid" data-valmsg-summary="true"><ul><li style="display:none"></li>
</ul></div><div class="login-page">
    <h3>Your username</h3>
    <input id="username" maxlength="50" name="username" type="text" value="" />
    
    
<script type="text/javascript">
$(function () {$('#e6e6dd7971494e5fab28764ddceda29d').show();})
function ______c9e50326ca8a482cbef3dff2d14e2838________() { $('#e6e6dd7971494e5fab28764ddceda29d').hide(); $.post("", { t: $('#CaptchaDeText').val(), __m__: "0" }, function(){$('#e6e6dd7971494e5fab28764ddceda29d').show();}); return false; }</script> 
<br/>
<img id="CaptchaImage" src=""/><input id="CaptchaDeText" name="CaptchaDeText" type="hidden" value="496a1c9f2678452db0a82c7080fd3eb8" /> <br/><a href="#CaptchaImage" id="e6e6dd7971494e5fab28764ddceda29d" onclick="______c9e50326ca8a482cbef3dff2d14e2838________()" style="display:none;">Refresh</a><br/>The answer is<br/><input autocomplete="off" autocorrect="off" id="CaptchaInputText" name="CaptchaInputText" type="text" value="" /><br/>
   
    <div class="spacer-40">
        <input id="btnSubmit" class="critical button" type="submit" value="Submit" />
    </div>
    <div class="spacer-20"></div>
</div>
<input name="__RequestVerificationToken" type="hidden" value="xSYwEn6YB1CegZfzC9M8sgkZAu9lqq_23s3PfMOxz4LWhbpi1mMIdQDP2kt86wK2O_JXv0B5EooQUux025S5aq0HyaaISWJAYsSF5I-PWwJTbWhFEixzK8mwGopv5_oJ4xwl2R78tRw6j8-jjCREAYMl11P86vQNn5lq_7_Hm2I1" /></form>

</div></div>

<div id="right-rail"><div class="zone zone-right-rail">
<article class="widget-right-rail widget-html-widget widget">
    <div><select id="exportType" class="special-dropdown reverse secondary dropdown-links" name="exportType" title="Contact us" onchange="window.location.href = this.value;">
<option id="defaultOption" class="hiddenOption" value=""></option>
<option class="telephone" value="tel:+1-888-264-6599">1-888-264-6599</option>
<option class="fax" value="fax:+1-888-264-6598">Fax: 1-888-264-6598</option>
<option class="email" value="mailto:support@purchasedge.com">support@purchasedge.com</option>
</select></div>
</article></div></div>


<div class="footer-wrapper">
<div class="footer-and-legal">
<a href="http://www8.hp.com/us/en/privacy/privacy.html">Privacy Commitment</a>
<span class="pipe">|</span>
Using this site means you accept its <a href="http://www8.hp.com/us/en/privacy/terms-of-use.html">terms</a>.
<div>&copy; Copyright 2018 TP Development Company, LP. The information contained herein is subject to change without notice.</div>
</div>
</div>
</div>



<script src="/Modules/Draftfcb.Orchard.Common/scripts/jquery.placeholder.js" type="text/javascript"></script>
<script src="/Modules/Draftfcb.Orchard.Common/scripts/jquery.customInput-05162013.js" type="text/javascript"></script>
<script src="/Modules/Draftfcb.Orchard.Common/scripts/PurchasEdgeInputInitializer-08302013.js" type="text/javascript"></script>
<script src="//www.hp.com/cma/ng/lib/bootstrap/metrics.js" type="text/javascript"></script>
	<script type="text/javascript">
	    jQuery(document).ready(function () {
	        jQuery('input[type=text],input[type=password]').each(function (index, value) {
				var elem = jQuery(this);
				elem.bind("keyup input paste", function(event){
					if (elem.val().length > 0) {
						elem.addClass("text-entered");
					} else {
						elem.removeClass("text-entered");
					}
				});
			});
		});
	</script>



</body>
</html>

Open in new window

Julian Hansen
Can you confirm if this file exists?
<script src="/Modules/Orchard.jQuery/scripts/jquery-1.9.1.js" type="text/javascript"></script>

Open in new window


Have you checked your console (F12) for any errors?

Open the console then do a SHIFT + Refresh of the page - look for any warnings / errors.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
RadhaKrishnaKiJaya
ASKER
Hi Julian,
Yes there is an error. I have attached it. When I call @Html.MathCaptcha(), it generate some jquery script. and the $ sign is coming as undefined. If  someway I can make it JQuery I know it will work. But I don'y know how to do it.

Thank you!
Error1.png
Julian Hansen
That is related to your Captcha - the jQuery is using the standard $ - whereas the rest of your jQuery code is using jQuery()

You need to look at your captcha code - is that a third party piece of code? I am assuming so?

Check if it has an option to use a no-conflict jQuery implementation.
RadhaKrishnaKiJaya
ASKER
If you look at my original post , I have posted the Captcha code. Actually I have added the dll and trying to use the method. ( @Html.MathCaptcha())

Thanks,
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Zakaria Acharki
You're welcome brother,

Here is what I meant :

jQuery( document ).ready(function( $ ) {
   $('#e6e6dd7971494e5fab28764ddceda29d').show();

   ...
});

Open in new window

Julian Hansen
If you look at my original post , I have posted the Captcha code
Yes - but I was trying to establish if there were other errors besides the one you reported - errors that might indicate a failed load for script. When I asked you came back with what you have shown us already - which I assumed meant no other errors.

If there are no load errors then we can assume that jQuery is loading - so the problem must lie in the specific implementation of your JavaScript.

My question from my last post was
Is this code
<script type="text/javascript">
$(function () {$('#b20b155dd1fb4b6d92d9a47ddf2550c4').show();})
function ______c0f11654da8c4103bc4724cc881fc967________() { $('#b20b155dd1fb4b6d92d9a47ddf2550c4').hide(); $.post("", { t: $('#CaptchaDeText').val(), __m__: "0" }, function(){$('#b20b155dd1fb4b6d92d9a47ddf2550c4').show();}); return false; }</script>

Open in new window

Being generated
Or
Are you entering it manually.
If manually then just change to
jQuery(function($) ... // rest stays the same

Open in new window

If it is being generated by a third party then we would have to deal with that differently.
RadhaKrishnaKiJaya
ASKER
Generated by this line    @Html.MathCaptcha().

Thanks.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
RadhaKrishnaKiJaya
ASKER
Hi Zakaria Acharki,

$('#e6e6dd7971494e5fab28764ddceda29d').show(); this code is getting generated by     @Html.MathCaptcha(). How would I put that inside a jQuery( document ).ready(function( $ ) ?

Thank you.
Julian Hansen
Is this a custom DLL or did you download it from somewhere?
RadhaKrishnaKiJaya
ASKER
I downloaded it from Manage NuGet Packages -> CaptchaMVC.Mvc4

Thank you very much for trying to help me!
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Julian Hansen
I had a brief look at the source code and the $( appears to be hard coded into the application.

Just to confirm - do you have a jQuery .noConflict() call anywhere in your source files?
RadhaKrishnaKiJaya
ASKER
I did a search, but could not find it.
Thanks.
Julian Hansen
add this to your document before the error line BUT after the inclusion of the jQuery library.

<script>
$(function() {
  $('body').html('test');
});
</script>

Open in new window

And then if that fails try this
<script>
jQuery(function($) {
  $('body').html('test');
});
</script>

Open in new window


Let us know what happens.
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
RadhaKrishnaKiJaya
ASKER
First one gave me error. Second one didn't.
Thanks.
ASKER CERTIFIED SOLUTION
Julian Hansen
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
RadhaKrishnaKiJaya
ASKER
I think I can try to download the dll and change the jQuery. Right now I just added it in the reference. How to download it and change? I need help with that.
RadhaKrishnaKiJaya
ASKER
Hi Julian,
I added $ = jQuery.noConflict(true); and it worked. It is not giving me the error anymore!
Thank you so much for your wonderful help!!
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
RadhaKrishnaKiJaya
ASKER
Thank you very much!
Julian Hansen
You are welcome.
Plans and Pricing
Resources
Product
Podcasts
Careers
Contact Us
Teams
Certified Expert Program
Credly Partnership
Udemy Partnership
Privacy Policy
Terms of Use

© 1996-2023 Experts Exchange, LLC. All rights reserved. Covered by US Patent