1,105,225 Community Members

maskedinput not working with codeigniter

Member Avatar
cgull
Junior Poster
123 posts since Dec 2009
Reputation Points: 25 [?]
Q&As Helped to Solve: 5 [?]
Skill Endorsements: 2 [?]
 
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?

Member Avatar
urtrivedi
Posting Virtuoso
1,897 posts since Dec 2008
Reputation Points: 249 [?]
Q&As Helped to Solve: 408 [?]
Skill Endorsements: 27 [?]
 
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

Member Avatar
gon1387
Posting Whiz in Training
242 posts since Jan 2011
Reputation Points: 22 [?]
Q&As Helped to Solve: 38 [?]
Skill Endorsements: 4 [?]
 
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>
Member Avatar
urtrivedi
Posting Virtuoso
1,897 posts since Dec 2008
Reputation Points: 249 [?]
Q&As Helped to Solve: 408 [?]
Skill Endorsements: 27 [?]
 
0
 

in first 2 line / before javascript missing

Member Avatar
cgull
Junior Poster
123 posts since Dec 2009
Reputation Points: 25 [?]
Q&As Helped to Solve: 5 [?]
Skill Endorsements: 2 [?]
 
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.

Member Avatar
gon1387
Posting Whiz in Training
242 posts since Jan 2011
Reputation Points: 22 [?]
Q&As Helped to Solve: 38 [?]
Skill Endorsements: 4 [?]
 
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".

Member Avatar
cgull
Junior Poster
123 posts since Dec 2009
Reputation Points: 25 [?]
Q&As Helped to Solve: 5 [?]
Skill Endorsements: 2 [?]
 
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.

Member Avatar
cgull
Junior Poster
123 posts since Dec 2009
Reputation Points: 25 [?]
Q&As Helped to Solve: 5 [?]
Skill Endorsements: 2 [?]
 
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.

Member Avatar
gon1387
Posting Whiz in Training
242 posts since Jan 2011
Reputation Points: 22 [?]
Q&As Helped to Solve: 38 [?]
Skill Endorsements: 4 [?]
 
0
 

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>
Member Avatar
cgull
Junior Poster
123 posts since Dec 2009
Reputation Points: 25 [?]
Q&As Helped to Solve: 5 [?]
Skill Endorsements: 2 [?]
 
0
 

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

Member Avatar
cgull
Junior Poster
123 posts since Dec 2009
Reputation Points: 25 [?]
Q&As Helped to Solve: 5 [?]
Skill Endorsements: 2 [?]
 
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 !!!

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: