0

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?

3
Contributors
10
Replies
13
Views
4 Years
Discussion Span
Last Post by cgull
0

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

Edited by urtrivedi

0

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>
0

I am working on my local computer.

The javascript files are included, I checked.
The / does not need to be there, it was actually wrong to have it there.
I am also calling jquery like this now:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

And other jquery scripts on the page work fine. It just the mask that does not work.

0

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".

Edited by gon1387

0

I am working on my local computer.

The javascript files are included, I checked.
The / does not need to be there, it was actually wrong to have it there.
I am also calling jquery like this now:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

And other jquery scripts on the page work fine. It just the mask that does not work.

0

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.

0

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

0

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.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.