JavaScript doesn't see/won't use other JavaScript

Question

HTML:

<script     src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="../../assets/js/bootstrap.min.js"></script>
<script src="../../assets/js/autocomplete_tyres.js"></script>
<script src="../../assets/js/autocomplete_client.js"></script>
<!-- Turn on tooltips -->
<script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    })
</script>
<!-- /Turn on tooltips -->
</head>
<body>
<?php include_once('../../libs/navbar.php');
$page = __FILE__; ?>
<div class="container-fluid">
    <div class="row">
        <?php include_once('../../libs/sidebar.php'); ?>
        <div class="col-md-10 body-main"><!-- container body-main -->
            <form action="../../libs/orders/exec_add.php" method="POST" onsubmit="return confirm('Jesteś pewny, że podane dane są prawidłowe i chcesz wysłać zamówienie?');"><!-- form oder add -->
                <div class="row">
                    <div id="products" class="col-md-12 form-group">
                        <h4>Produkty</h4>
                        <div class="col-md-2 form-group">
                            <input onclick="select()" type="text" class="form-control" placeholder="Identyfikator opony" name="tyreID[]" id="tyreID">
                            <input onclick="select()" type="text" class="tyreSize form-control" placeholder="Rozmiar" name="tyreSize[]" id="tyreSize" required>
                            <input onclick="select()" type="text" class="tyreManufacturer form-control" placeholder="Producent" name="tyreManufacturer[]" id="tyreManufacturer" required>
                            <input onclick="select()" type="text" class="tyreTread form-control" placeholder="Bieżnik" name="tyreTread[]" id="tyreTread" required>
                            <input onclick="select()" type="text" class="form-control" placeholder="DOT" name="tyreDOT[]" id="tyreDOT">
                            <input onclick="select()" type="number" class="form-control" placeholder="Ilość sztuk" name="numberPieces[]" id="numberPieces" required>
                            <input onclick="select()" type="number" class="form-control" placeholder="Cena za sztukę" name="pricePiece[]" id="pricePiece" required>
                            <button type="button" id="btnAddProduct" class="btn btn-success" data-toggle="tooltip" data-placement="right" title="Dodaj inny rozmiar opony"><i class="fa fa-plus"></i> Dodaj</button>
                        </div>
                    </div>
                    <script src="../../assets/js/addproductbox.js"></script>
                </div>

addproductbox.js

$(document).ready(function() {
    var max_fields = 6; //maximum input boxes allowed
    var wrapper = $("#products"); //Fields wrapper
    var add_button = $("#btnAddProduct"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e) { //on add input button click
        e.preventDefault();
        if(x < max_fields) { //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div class="col-md-2 form-group">' +
                '<input onclick="select()" type="text" class="form-control" placeholder="Identyfikator opony" name="tyreID[]" id="tyreID">' +
                '<input onclick="select()" type="text" class="tyreSize form-control" placeholder="Rozmiar" name="tyreSize[]" id="tyreSize" required>' +
                '<input onclick="select()" type="text" class="tyreManufacturer form-control" placeholder="Producent" name="tyreManufacturer[]" id="tyreManufacturer" required>' +
                '<input onclick="select()" type="text" class="tyreTread form-control" placeholder="Bieżnik" name="tyreTread[]" id="tyreTread" required>' +
                '<input onclick="select()" type="text" class="form-control" placeholder="DOT" name="tyreDOT[]" id="tyreDOT">' +
                '<input onclick="select()" type="number" class="form-control" placeholder="Ilość sztuk" name="numberPieces[]" id="numberPieces" required>' +
                '<input onclick="select()" type="number" class="form-control" placeholder="Cena za sztukę" name="pricePiece[]" id="pricePiece" required>' +
                '<button href="#" class="btn btn-danger remove_field"><i class="fa fa-times"></i> Usuń</button>' +
                '</div>'); //add input box
        }
    });

    $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    })
});

autocomplete_tyres.js

$(function() {
    var tyreSizes = [
        "10.00 R15",
        "10.00-20",
        "10.5-20",
        "10R17.5",
        "10R20",
        "10R202",
        "10R22,5",
        "10R30",
        "10R40",
        "10R50",
        "10R60",
        "11 R 24,5",
        "11.00 R20",
        "11/70R22,5",
    ];
    $(".tyreSize").autocomplete({
        source: tyreSizes
    });
    var tyreManufacturers = [
        "Accelera",
        "Achilles",
        "Admiral",
        "Alpha",
        "Ambassador",
        "America",
        "Amtel",
        "Anli",
        "Antarktika",
        "Arctic",
        "Arktic",
        "Arrowspeed",
        "Aurora",
        "Autogrip",
        "Avon",
        "Axxium",
        "Bargum",
        "Bar-gum",
        "Barum",
        "Bd",
        "Beep",
        "Berliner",
        "BFGoodrich",
        "Black howk",
        "Bridgestone",
    ];
    $(".tyreManufacturer").autocomplete({
        source: tyreManufacturers
    });
    var tyreTreads = [
        "60",
        "65",
        "190",
        "202",
        "330",
        "350",
        "380",
        "620",
        "660",
        "2000",
        "3000",
        "4000",
        "42067",
        "...V71",
        "165/80R14",
        "185/60R14",
        "185/70R14",
        "190 DIREZIONALE",
        "190 SNOW SPORT WINTER",
        "190 V-CT22",
        "195/65R15",
        "2000 + T 70",
        "2000 SPORT",
        "2000 T 70",
        "2000 T 80",
        "2000 T65",
        "2000 T80",
        "2000DS165",
        "2001 PERFORMANCE",
        "200T80",
        "210 SNOW SPORT WINTER",
        "210SNOW SPORT",
    ];
    $(".tyreTread").autocomplete({
        source: tyreTreads
    });
});

So the code in HTML is just simple order to make. On start you get one div with few inputs and few have autocomplete helping my coworkers choose tyreSize, tyreManufacturer and tyreTread. First div which is added in HTML file have working autocomplete but the others added dynamicaly with jQuery shows up with autocomplete not working in it. Some1 is up for help?

SOLVED: Enabling jQuery Autocomplete on dynamically created input fields

You need to call autocomplete on each new textbox you add. AS it stands you're only adding it to boxes that exists when the page loads — SWa, Oct 08 '15 at 10:41
@Kyle How can i manage to do that? Inputs show up after I click add button, so where should I call autocomplete_tyres.js file. — Jarzebowsky, Oct 08 '15 at 10:58
@jpganz18 it is. Link i provided answers excatly what I was searching for. — Jarzebowsky, Oct 08 '15 at 14:26

score 0 · Accepted Answer · answered Oct 08 '15 at 14:45

0

SOLVED: Enabling jQuery Autocomplete on dynamically created input fields

answered Oct 08 '15 at 14:45

Jarzebowsky

19
5

JavaScript doesn't see/won't use other JavaScript

1 Answers1