Start New Discussion within our Web Development Community

Hello,
I have downloaded the plugin maskedinput from: Click Here

Trying to use it on a site I am developing with codeigniter and foundation framework, the index.html file that comes with it works well on my site, I get this error: TypeError: $(...).mask is not a function

The jquery files are included, I checked.

My code is exactly like the example.

In my head tag:

<script src="<?php echo $templateAssets; ?>javascripts/jquery-1.9.0.min.js"></script>
<script src="<?php echo $templateAssets; ?>javascripts/jquery.maskedinput.min.js"></script>    
<script src="<?php echo $templateAssets;?>/javascripts/modernizr.foundation.js"></script>

I have an input with a phone id:

<?php
$phone = array('name'=>'phone', 'id'=>'phone', 'value'=>set_value('phone'));

echo form_label('Phone Number', 'phone');
?>
    <div class="row">
      <div class="six columns">
        <?php echo form_input($phone); ?>
      </div>
    </div>

And my jquery:
$('#phone').mask("(999) 999-9999");

Why do I get this error?

are u working on ur computer or script is somewhere on live server?
You need to check spellings of all js file u include, are they in /javascripts folder or not

Hi cgull,

It can't find the "mask" plugin. Have you checked if the plugin file's downloaded by your browser?

There's an inconsistency in your script, unlike the first two, the src attribute in your modernizr external script has a an additional forward slash before "javascript". Can be the cause of error.

<script src="<?php echo $templateAssets; ?>javascripts/jquery-1.9.0.min.js"></script>
<script src="<?php echo $templateAssets; ?>javascripts/jquery.maskedinput.min.js"></script>    
<script src="<?php echo $templateAssets;?>/javascripts/modernizr.foundation.js"></script>

Can you alert the type of $ & $.fn.mask before closing the body tag, and see if it outputs "function".

        ... SOME HTML CODE IN INSIDE THE BODY...

        <script type="text/javascript">
        alert(typeof $);
        alert(typeof $.fn.mask);
        </script>
    </body>
</html>

Both alert should output "function".

Ok, the first alert gives: function the second undefined.

When I go to the page source and click on the maskedinput js file, it goes to the file.

gon1387 tried your link, getting the same error. My page is calling the javascript files.

Ok, got it to work. With all my testings, I added this: $(function) { before my mask, now with gon's new file, and removing the function, it works.

Thank you all for all the help !!!

This article has been dead for over six months. Start a new discussion instead.