Could you explain how to deal with jQuery autonumeric function when using Bootstrap?

Maybe i am wrong because in mobiles code snippets are very small but it looks like in your Bootstrap form the inpit has no class 'auto', only 'form-control'. Am I totally blind? ;)

Now I see but it is in.. Separated attribute: you have 2 attributes class.. Add 'auto' to the attribute where you have 'form-control' and drop the other which is just ignored.

Hi

So I changed to maintain just one class:  auto

 <input id="valor_inicial" name="valor_inicial" placeholder="Valor Inicial" type="text" value="<?php echo set_value('valor_inicial'); ?>" class="auto" data-a-sep="." data-a-dec="," data-v-min="0.01" data-v-max="9999999999.99" />

Select allOpen in new window

But the thownsand point "." (no decimal as I said before)  still isn't automatic.

Do you see anything in your browser console?

I couldn't see nothing....

Could you have a look?

http://www.espiriplug.com.br/_0ajshajsdhFWeb/pesq_lanc_val

Eduardo, I toke a look at the page: in your javascript embedded in plesq_lanc_val the code to initialize the plugin is commented...

Ops.... sorry, I realize it just now....

It's ok!

And this is what I see in my console:

TypeError: $(...).autoNumeric is not a function
$('.auto').autoNumeric('init');
	

Select allOpen in new window

That's means jQuery doesn't recognize the function: where is the script tag whcih embed the plugin into the page? I don't see it...

Also, I see you're including 2 different versions of jQuery and this can cause unpredictable issues:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js">

Sorry....

I tried to repurpose an old code and after better seeing autonumeric.js is not in jQuery core, it's in a separeted .js file.

 It perfectly runs in the old code (pure PHP).

So I used the same jQuery versions that already run in the old code in the new code.

But if including this file it doesn't work adequatelly and the error appear, I don't know if Codeigniter is preventing it to charge.


The browser's console error:

(If you could suggest an jQuery inner function to format numbers maybe I could change the strategy by using it)

Just rename the file to autoNumeric.js as it is originally. See the console: you are linking autoNumeric.js but the file is entirely in lower case.

Even correcting this it doesn't run.
Maybe I have to look for a jQuery native formating function.

If it worked without Bootstrap there is no reason it don't work with it.

I tried to access the page but I get somrthing different. Anyway in the console there are even another error relted to the script Funcoes.js which you are including as funcoes.js (not capitalized). Fix even this-
If you want to go on to fix the error, èlease give me access to the page: this is that kind of issue that make me spend hours to fix because it dosn't make any sense that Bootstrap markup prevent the plugin from working fine.

Hi Marco

Here it is:

http://www.espiriplug.com.br/_0ajshajsdhFWeb/pesq_lanc_val

The js are not reacheable:

Here is the old php page that correctly runs (filling Valor (R$) is possible to see (This page uses Bootstrap / CSS - it deosn't  using  Codeigniter))
http://www.espiriplug.com.br/0000_prj/Finesp_PRD/Teste_Kool_Date_Picker01_03.php

This part are identical to the 02 pages:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="autoNumeric.js"></script>
<script type="text/javascript" src="funcoes.js"></script>
<script type="text/javascript">
jQuery(function($) {
    $('.auto').autoNumeric('init');
});
</script>
...

Select allOpen in new window

I configured Codeigniter to permit loads js/ css/ ... by using this:
$this->load->helper('url');

If you would like I could send you the entire code of this page.

Sorry Eduardo! I did not realized it was CodeIgniter!!! In CI you have to link files differently:

<script type="text/javascript" src='<?php echo base_url("autoNumeric.js");? >'></script>

Select allOpen in new window

Ok...

So I did

    <script type="text/javascript" src='<?php echo base_url("autoNumeric.js");?>'></script>
    <script type="text/javascript" src='<?php echo base_url("Funcoes.js");?>'></script>

Select allOpen in new window

Unfortunatelly, still not loaded...

First, I see another error:

SyntaxError: expected expression, got '<'
<HTML>                                                     funcoes.js (line 3)

Select allOpen in new window

But it works now! In http://www.espiriplug.com.br/0000_prj/Finesp_PRD/Teste_Kool_Date_Picker01_03.php when I type number both thousands and decimal puctuation magically appears:

Hi  Marco

Sorry to disapoint you...

Accordingly to my 1st post:

If using a form WITHOUT Bootstrap everything runs ok, the decimal point automatically appears

(The correct was to write "out of Codeigniter"  instead of "WITHOUT Bootstrap" -  Bootstrap doesn't interfere)

So, this works just from the start....If I don't use Codeigniter.

LOL, I looked at the wrong page: apologize...

No problems!

But still it says (looking at the right page ;)) that it can't find the file http://www.espiriplug.com.br/_0ajshajsdhFWeb/autoNumeric.js
Maybe a slash be missing between _0ajshajsdhF and Web? What is base_url?

This is what I see in Firebug:

In Codeigniter's  config.php

$config['base_url']	= 'http://www.espiriplug.com.br/_0ajshajsdhFWeb/';

Select allOpen in new window

What you have is coherent to base_url.

Perfectly right!
It must be done to make the .js visible!
Now the error disapear.

But... the number still isn't formated.

Want it the war?
Ok,  I still see errors in console:

1: SyntaxError: expected expression, got '<'
                  <script type="text/javascript">                Funcoes.js (line 1)
2: Error: The value (0) from the 'set' method falls outside of the vMin / vMax range
                                                                                        jquery.min.js (line 4, col 4112)

Can you try to comment out the including line for Funcao.js? So we can see if the second error depends on it. We need to have the console with no error at all because any error, even unrelated can prevent javascript from being executed.

Oh, yes...

Eliminated the error.

Now is running!

Just an error correlated to the way the function is called

    <script type="text/javascript">
    jQuery(function($) {
        $('.auto').autoNumeric('init');
    });
    </script>

Is preventing the other jQuery functions in the page runs, So I'm going to open another question to solve this.

Select allOpen in new window

As often it happens, we solve an error and another raises immediately.

But it works in valor-inicial and not in valor-final... and still I see an error

SyntaxError: expected expression, got '<'
      <!DOCTYPE html>                       pesq_lanc_val (line 1)

which usually means there is some typo or some other error in some javascript....

Which functions are not working now?

The problem arised because in the tests I take out this:

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Select allOpen in new window

So the calendar doesn't work... Amazing, even having a newer jQuery

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

Select allOpen in new window

I simply adjusted the function to

    $(function() {
        $('.auto').autoNumeric('init');
    });

Select allOpen in new window

and transfered it to Funcoes.js  - everything goes fine.

The second numeric textbox wasn't adjusted yet.... now it's fine.

It can't use  -  class="form-control"  in conjunction with class="auto" (only for stetic)

Marco

Thank you for your outstanding dedication on this question.

I learn a lot!

It can't use  -  class="form-control"  in conjunction with class="auto" (only for stetic)

Not sure if this was a question, but in case: you can, for sure! To use more than one class jeu add them in the same attribure:

<input type="text" class="form-control auto" />

Select allOpen in new window

You can use as many class as your brain can invent :)

Really. I just tested it!

Thank you for this bonus information!

:)