Utilisation de JQuery pour mettre à jour les valeurs du tableau au moment de l'exécution


Johnny

J'essaie de trouver une solution pour cette table que je clone avec JQuery. Je peux cloner la table et mettre à jour les propriétés ID et NAME pour éviter les conflits html. J'ai réussi à le faire fonctionner lors de mon test initial . Cependant, mon objectif est de proposer des choix qui peuvent ensuite être dupliqués par un utilisateur lors de la commande à partir d'une liste de produits. Je devrai ensuite importer ces éléments pour cet utilisateur dans une base de données. J'ai lu que la meilleure façon d'obtenir ces identifiants similaires dans une base de données est d'utiliser un tableau, comme ProductCode[0], etc... J'ai essayé d'appliquer ce concept à mon application, mais une fois que j'ai ajouté le tableau, le JQuery ne met plus à jour les champs restants lorsqu'ils sont sélectionnés. Existe-t-il un meilleur moyen d'utiliser des tableaux qui peuvent ensuite être clonés au moment de l'exécution, qui peuvent ensuite être importés dans une base de données avec C# pour le traitement ?

Le formulaire HTML que j'utilise pour demander une sélection :

        <table>
            <tr>
                <td style="width:20%;">
                    <div class="input-group date">
                        <div class="input-group-addon">
                            <span class="glyphicon glyphicon-duplicate addsection"></span>
                        </div>
                        <select class="form-control" id="ProductCode[0]" name="ProductCode[0]" style="border-bottom-color:black!important;border-color:white;">
                            <option selected>Select Product</option>
                            <option value='292' data-description='APRIL Afternoon At the Greenhouse TICKET' data-price='35.00'>AAATG</option>
                            <option value='285' data-description='APRIL AFTERNOON AT THE GREENHOUSE Ticket EARLYBIRD SPECIAL' data-price='30.00'>AAATGearlybird</option>
                            <option value='30' data-description='Organic Adzuki Beans 1/2 Lb' data-price='4.25'>AB12LB</option>
                            <option value='31' data-description='Organic Adzuki Beans 1/4 Lb' data-price='2.25'>AB14LB</option>
                            <option value='29' data-description='Organic Adzuki Beans 1 Lb' data-price='8.00'>AB1LB</option>
                            <option value='47' data-description='Organic Adzuki Seeds 1 Lb' data-price='5.00'>ABS1LB</option>
                            <option value='145' data-description='Alberto&#x27;s Lemon/Garlic Salad Dressing 16 Oz.' data-price='11.00'>Alberto&#x27;s Dressing</option>
                            <option value='241' data-description='Organic Fenugreek Sprouted Beans 4 oz.' data-price='2.00'>APRIL</option>
                            <option value='310' data-description='Organic Fenugreek Sprouted Beans 16 oz' data-price='7.75'>April16oz</option>
                            <option value='309' data-description='Organic Fenugreek Sprouted Beans 8 oz' data-price='4.00'>April8oz</option>
                            <option value='284' data-description='SeaVeggieSpecialAUGUST1Kelp/1Dulse/1TripleBlendPACKAGE of 3' data-price='11.50'>AUGUST</option>
                            <option value='271' data-description='DM Organic Tomato Basil Sauce CASE' data-price='36.00'>BB BasilS case</option>
                            <option value='273' data-description='DM Organic Tomato Chili Sauce CASE' data-price='36.00'>BB ChiliS case</option>
                            <option value='276' data-description='DM Organic Linguine Pasta CASE' data-price='36.00'>BB Lpasta case</option>
                            <option value='277' data-description='DM Organic Extra Virgin Olive Oil 500ML CASE' data-price='84.00'>BB OO 500ML</option>
                            <option value='278' data-description='DM Organic Extra Virgin Olive Oil 750ML CASE' data-price='132.00'>BB OO 750ML</option>
                            <option value='275' data-description='DM Organic Spaghetti Pasta CASE' data-price='36.00'>BB Spasta case</option>
                            <option value='274' data-description='DM Organic Tagliatelle Pasta CASE' data-price='36.00'>BB Tpasta case</option>
                            <option value='272' data-description='DM Organic Tomato Vegetable Sauce CASE' data-price='36.00'>BB VegS case</option>
                            <option value='117' data-description='Organic Mixed Beans 1 Lb' data-price='8.00'>BEEMB</option>
                        </select>
                    </div>
                <td style="width:70%;"><input id="ProductDesc[0]" class="form-control" style="width: 100%; border-bottom-color: black!important; border-color: white;" name="ProductDesc[0]" type="text" value="" /></td>
                <td><input id="quantity[0]" class="form-control" style="width: 50px; border-bottom-color: black!important; border-color: white; text-align: center;" name="quantity[0]" type="text" value="0" placeholder="1" /></td>
                <td>
                    <input id="ProductPrice[0]" class="form-control cost" style="width: 95px; text-align: center; border-bottom-color: black!important; border-color: white;" name="ProductPrice[0]" type="text" value="" placeholder="$0.00" />
                </td>
                <td>
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-eject remove"></span>
                    </div>
                </td>
            </tr>
        </table>

Le script que j'utilise pour mettre à jour les champs restants lorsque le champ Product ID est sélectionné :

$(document).ready(function () {

    $(document).on('change', '#ProductCode[0]', function () {
        var data = "";
        data = $("#ProductCode[0] option:selected").data();
        $("#ProductDesc[0]").val(data.description);
        $("#quantity[0]").val(data.quant);
        $("#ProductPrice[0]").val(data.price);
        $("#DefaultUnitPrice[0]").val(data.price);
    });

});

$(document).ready(function () {
    $(document).on('change', '#quantity[0]', function () {
        var quant = "";
        var data = "";
        data = $("#ProductCode[0] option:selected").data();
        quant = Number($("#quantity[0]").val());
        $("#ProductPrice[0]").val((data.price * quant).toFixed(2));
    });

});
Joseph Marikle

Tout d'abord, [ et ] ne sont pas valides pour un attribut ID, qui se compose de lettres, de chiffres ([0-9]), de tirets ("-"), de traits de soulignement ("_"), de deux points (":"), et périodes . Deuxièmement, vous pouvez utiliser des sélecteurs d'attributs pour rendre vos écouteurs d'événement plus génériques (par exemple $(document).on('change', '[id^=quantity]', function () { ...)( ^=est un sélecteur d'attributs commençant par ). Enfin, vous pouvez utiliser un deuxième paramètre pour les objets jquery comme moyen de donner un contexte de sélecteur. Cela réduira le nombre de fois que jQuery doit rechercher le document. Tout cela se résume au code suivant :

$(document).ready(function () {

    $(document).on('change', '[id^=ProductCode]', function () {
        var data = "";
        var curTable = $(this).closest('table');
        data = $("option:selected", curTable).data();
        $(this).val(data.description);
        $("[id^=quantity]", curTable).val(data.quant);
        $("[id^=ProductPrice]", curTable).val(data.price);
        $("[id^=DefaultUnitPrice]", curTable).val(data.price);
    });

});

$(document).ready(function () {
    $(document).on('change', '[id^=quantity]', function () {
        var quant = "";
        var data = "";
        var curTable = $(this).closest('table');
        data = $("option:selected", curTable).data();
        quant = Number($(this).val());
        $("[id^=ProductPrice]", curTable).val((data.price * quant).toFixed(2));
    });

});

Cependant, au final, il vaudrait peut-être mieux utiliser des classes plutôt que des identifiants

Articles connexes