maskedinput not working with codeigniter

[cgull]

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("[phone]");

Why do I get this error?

[urtrivedi]

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

[gon1387]

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>

[urtrivedi]

in first 2 line / before javascript missing

[cgull]

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.

[gon1387]

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

[cgull]

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.

[cgull]

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]

Please change the source to this instead. I got it from jQuery Mask let me know if it worked. But first, make sure your browser can access the file 'jquery.maskedinput.min.js' on your part. Also, please indicate the type.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
<script src="http://digitalbush.com/wp-content/uploads/2013/01/jquery.maskedinput-1.3.1.min_.js" type="text/javascript"></script>

[cgull]

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

[cgull]

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