CODEWITHSUNDEEP
javascriptjquery
Rakyir
Rakyir

Reputation: 69

TypeError: $(...). is not a function

I'm trying to track down an error TypeError: $(...).clientSideCaptcha is not a function at RegisterCapcha (http://localhost:4382/xxx/index.html:98:31)

, am working in angularJS project. simple issue but i can't got out from it.

i have implemented a captcha using j query and successfully working in a view when on on-click but thing is i have try to load that same captcha in other view in on-load but captcha function is not loading.

in view1 captcha working fine code below

view1.html

<a onclick="RegisterCapcha(); ReverseContentDisplay('job-apply'); return true;"
       href="javascript:ReverseContentDisplay('job-apply')">


<form  id="careersForm" > 
      <table class="apply-form">
       <tr>
        <td>First Name  </td>
        <td><input type="text" name="First_Name" class="applytext" required id="First_Name"></td>
       </tr>
<tr>
              <td colspan="2" class="applytable" >
                    <div class="editor-field">
                        <p>
                            <label>
                                Enter the text shown below:
                                <input type="text" id="captchaText" onkeyup="javascript:EnableApply();" /></label></p>
                        <p id="captcha">
                        </p>
                    </div>
                </td>
            </tr>
       <tr>
 <input type="submit" id="careerbtn" name="button" disabled="disabled" class="send-resume" value="SEND" style="margin-left:24%;">

script declared in index.html

<script src="js/captcha/jquery.clientsidecaptcha.js" type="text/javascript"></script>
<script type="text/javascript">

    function EnableApply() {

        var OriginalCaptcha = $('#careersForm').data('captchaText');
        var userCapcha = $('#captchaText').val();
        if (OriginalCaptcha == userCapcha) {
            $('#careerbtn').removeAttr('disabled');
        }
        else {
            $('#careerbtn').attr('disabled', 'disabled');
        }
    }

    function RegisterCapcha() {
        $("#captcha").html(''); //reset the generated captcha first
        $("#captchaText").val('');
        $("#careersForm").clientSideCaptcha({
            input: "#captchaText",
            display: "#captcha",
        });            
    }
</script>

view2: same form with same RegisterCapcha(); script in onload but calling in view2

<script type="text/javascript">

    $(document).ready(function () { RegisterCapcha(); });
</script>


<form  id="careersForm" > 
          <table class="apply-form">
           <tr>
            <td>First Name  </td>
            <td><input type="text" name="First_Name" class="applytext" required id="First_Name"></td>
           </tr>
    <tr>
                  <td colspan="2" class="applytable" >
                        <div class="editor-field">
                            <p>
                                <label>
                                    Enter the text shown below:
                                    <input type="text" id="captchaText" onkeyup="javascript:EnableApply();" /></label></p>
                            <p id="captcha">
                            </p>
                        </div>
                    </td>
                </tr>
           <tr>
     <input type="submit" id="careerbtn" name="button" disabled="disabled" class="send-resume" value="SEND" style="margin-left:24%;">

please help me to solve it thanks in advance :)

Upvotes: 6

Views: 75917

Answers (4)

Ivijan Stefan Stipić
Ivijan Stefan Stipić

Reputation: 6678

Include jQuery before all your scripts:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/captcha/jquery.clientsidecaptcha.js" type="text/javascript"></script>

After that define $ variable for jQuery function like this:

<script type="text/javascript">
(function($){
    function EnableApply() {

        var OriginalCaptcha = $('#careersForm').data('captchaText');
        var userCapcha = $('#captchaText').val();
        if (OriginalCaptcha == userCapcha) {
            $('#careerbtn').removeAttr('disabled');
        }
        else {
            $('#careerbtn').attr('disabled', 'disabled');
        }
    }

    function RegisterCapcha() {
        $("#captcha").html(''); //reset the generated captcha first
        $("#captchaText").val('');
        $("#careersForm").clientSideCaptcha({
            input: "#captchaText",
            display: "#captcha",
        });            
    }
}(jQuery || window.jQuery));
</script>

Upvotes: 9

Ann
Ann

Reputation: 319

After loading jQuery

<script src='jquery.js'></script>    
if (typeof $ == 'undefined') {
   var $ = jQuery;
}

Reference：

https://v123.tw/fix-jquery-typeerror-not-function/

Upvotes: 4

Alexis
Alexis

Reputation: 5831

For use Jquery plug-in (library) you need to import Jquery first.

The better way is import all scripts at the end of your HTML.

Take care of the order (Jquery first).

Example of Jquery import (online version).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

For some reason you don't want import script at the end, don't forget :

$(document).ready(function(){//code});

Some plug-in need HTML to be loaded before use them. So the script begins to end.

Upvotes: 1

Kuldeep Kumawat
Kuldeep Kumawat

Reputation: 56

please include latest jquery before all the script tags. find latest jquery at https://code.jquery.com/ or use cdn

<script   src="https://code.jquery.com/jquery-1.12.4.min.js"   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="   crossorigin="anonymous"></script>

Upvotes: 1

Related Questions