John Davidson

Message:

I use https://makitweb.com/dynamically-load-content-in-bootstrap-modal-with-ajax/ in my project.

I'm trying to use Autonumeric 4.6 in input type text in Ajax generate bootstrap modal.

I added AutoNumeric script in general html file, php file and nothing.
Script working but not AJAX generate modal.

Please Help

My code:

HTML

<!-- Modal -->

<div class="modal fade" id="empModal" role="dialog" data-backdrop="static" data-keyboard="false">

    <div class="modal-dialog modal-xl">



        <!-- Modal content-->

        <div class="modal-content">

            <div class="modal-header">

                <h4 class="modal-title">Current Money</h4>

                <button type="button" class="close" data-dismiss="modal">&times;</button>



            </div>

            <div class="modal-body">



            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>

            </div>

        </div>



    </div>

</div>

AJAX

$(document).ready(function(){



        $('.CurrentMoney').click(function(){



            var CurrentMoney= $(this).data('id');



            $.ajax({

                url: '../Server-Side/CurrentMoney.php',

                type: 'post',

                data: {CurrentMoney: CurrentMoney},

                success: function(response){

                    // Add response in Modal body

                    $('.modal-body').html(response);

                    // Display Modal

                    $('#empModal').modal('show');

                }

            });

        });

    });

CurrentMoney.php

<?php



if(isset($_POST['CurrentMoney']))

{



$response = '<input type="text" class="AutoNumeric">';

        echo $response;

    



}

else {

    $response = 'Error';

    echo $response;



}



exit;



?>

AutoNumeric library

<!-- autonumeric4 -->

<script src="../plugins/autoNumeric/src/autonumeric4.6.js"></script>



<script>



    const autoNumericOptionsEuro = {

        digitGroupSeparator        : ' ',

        allowDecimalPadding: false

    };



    new AutoNumeric('.AutoNumeric', autoNumericOptionsEuro);



</script>

JSFiddle - Code
https://jsfiddle.net/Fox21/ht1kyuvw/3/

---

My Answer:
In your code, you are trying to initialize AutoNumeric on the input field with the class "AutoNumeric" before the modal is shown. Since the input field is dynamically generated after the modal is shown, AutoNumeric is not able to find the input field with the class "AutoNumeric" and initialize it.

To fix this issue, you can initialize AutoNumeric after the modal is shown. You can do this by using the `shown.bs.modal` event of Bootstrap modal. Here's how you can modify your code:

javascript
$(document).ready(function(){

$('.CurrentMoney').click(function(){

var CurrentMoney= $(this).data('id');

$.ajax({
url: '../Server-Side/CurrentMoney.php',
type: 'post',
data: {CurrentMoney: CurrentMoney},
success: function(response){
// Add response in Modal body
$('.modal-body').html(response);
// Display Modal
$('#empModal').modal('show');
}
});
});

$('#empModal').on('shown.bs.modal', function () {
const autoNumericOptionsEuro = {
digitGroupSeparator: ' ',
allowDecimalPadding: false
};

new AutoNumeric('.AutoNumeric', autoNumericOptionsEuro);
});

});


With this modification, AutoNumeric will be initialized on the dynamically generated input field with the class "AutoNumeric" after the modal is shown.

I hope this helps! Let me know if you have any further questions.