如何在Yii2的foreach循环中注册JS文件？

Question

I am trying to display QR code inside the ID card. Now I am trying to print 10 ID cards at single time, so I had put the ID card design inside a for-each loop but I cannot register the JavaScript code inside the for-each loop. Only one QR code is display. I mean JavaScript is registered just once inside a loop.

I have registered JavaScript inside for-each loop and name of .js file is qr.js . My Code for ID card design is:

<div id="printableContainer">

        <div class="aaa" style="width: 100%;font-size: 12px;padding: 5px 0px;">
            <?php
            foreach ($students as $stuKey => $student) {
                $patron = \app\models\Patrons::findOne(['patron_id' => $student->patron_id]);
                if ($patron) {
                    if ($patron->type == 1) {
                        $model = \app\models\std\Student::find()
                                ->joinWith([
                                    "fkStudent",

                                ])
                                ->where(["student.id" => $patron->patron_id])
                                ->one();

                        if ($model !== null) {
                            $patrons_details = $model;
                        }
    //                    $patrons_details = null;
                    }
                } else {
                    return "No Patron found by this name";
                }
                ?>


                <?php if ($i % 6 != 0) {
                    ?>        
                    <div id='data' sid="<?= $patrons_details['student']->id; ?>" >
                    </div>
                    <?php
                    $this->registerJs($this->render("qr.js"), 5);
                    ?>

                    <div class="  w3-margin-top" style="float: left;margin-left:5px;margin-right:5px;margin-top:5px;margin-bottom:25px;">
                        <div class="id-card-holder" style="border: 1px solid;">
                            <div class="id-card">
                                <div class="row row1">
                                    <div class="header">
                                        <div class="col-md-3 " style="float:left;padding: 0px;">
                                            <img  src="<?= Yii::getAlias('@web') . "/images/" . $college->logo ?>" style="width:50px; height: 42px;"/>

                                        </div>
                                        <div class="col-md-9" style="text-align: center;padding: 0px;line-height: 1">
                                            <!--<span style="font-size: 10px; color: red !important;font-weight: bold !important"><?= $college->affiliated_to ?></span><br>--> 
                                            <span style='font-size: 10px;color:black !important; font-weight: bold !important'><?= $college->college_name ?></span><br> 
                                            <span style="font-size: 9px; color: blue !important;font-weight: bold !important"><?= $college->address ?></span><br>
                                        </div>
                                    </div>
                                </div>

                                <div class="row row1" style="background-color:#e48b8b;margin-right: -4px !important;margin-left: -4px !important;margin-top:5px ">
                                    <h6 style="margin-top: 3px;margin-bottom: 3px;">Student ID Card</h6>

                                </div>
                                <div class="row row1">
                                    <div class="col-md-6 " style="float:left" >
                                        <div class="photo" >
                                            <img style="width:77px;height:77px;padding-top: 3px;border: 1px solid;" class="" src="<?= \yii\helpers\Url::to(["/image/index", 'name' => $patrons_details['fkStudent']->img, 'fc' => 'student', 'student' => $patrons_details['fkStudent']->id]) ?>" >
                                        </div>
                                    </div>

                                    <div class="col-md-6" >
                                        <div class="qrphoto" >
                                            <div id="qrcode"></div>

                                        </div>
                                    </div>
                                </div>  
                                <h5 style="margin-top:4px !important;
                                    margin-bottom:0px !important;"><b><?= $patrons_details['fkStudent']->first_name . ' ' . $patrons_details['fkStudent']->middle_name . ' ' . $patrons_details['fkStudent']->last_name ?></b></h5>
                                <div class="row row1">

                                    <div class="col-md-12" style="text-align: justify;padding: 0px;line-height: 0.74">

                                        <div class="" style="line-height: 1 !important;padding: 1px 0px 0px 3px !important;margin-top: 6px;">

                                            <?php if ($patron->renual_status == 0) { ?>
                                                <span style="font-size: 10px; color: #6d6969; font-weight: bold;">Card No. :-</span> <span style="font-size: 10px; color :#3e3b3b !important;font-weight: bold;"><?= $patron->patron_id ?></span><br>
                                            <?php } else { ?>
                                                <span style="font-size: 10px; color: #6d6969; font-weight: bold;">Card No. :-</span>  <span style="font-size: 10px;color :#3e3b3b !important; font-weight: bold;"><?= $patron->patron_id ?>-<?= $patron->renual_status ?></span><br>
                                                <?php
                                            }
                                            ?>
                                            <span style="font-size: 10px; color: #6d6969; font-weight: bold;"> Address :-</span><span style="font-size: 10px; color: #3e3b3b; font-weight: bold;"> <?= $patrons_details['fkStudent']->address1 ?></span><br/>
                                            <span style="font-size: 10px; color: #6d6969; font-weight: bold;"> Program :-</span><span style="font-size: 10px; color: #3e3b3b !important; font-weight: bold;"> <?= $patrons_details["fkProgram"]->code . ',' . $patrons_details["fkPeriod"]->code ?></span><br>
                                            <span style="font-size: 10px; color: #6d6969; font-weight: bold;"> Roll No :-</span><span style=" font-size: 10px; color:#3e3b3b !important; font-weight: bold;"> <?= $patrons_details->roll_no; ?> </span><br/>
                                            <span style="font-size: 10px; color: #6d6969; font-weight: bold;"> Phone no.:-</span><span style=" font-size: 10px; color:#3e3b3b  !important; font-weight: bold;"><?= $patrons_details['fkStudent']->phone; ?></span><br>
                                            <span style="font-size: 10px; color: #6d6969; font-weight: bold;"> Validity:-</span> <span style="font-size: 10px; color: #3e3b3b !important; font-weight: bold;"> <?= date('Y/m/d', $patron->valid_till); ?></span>

                                        </div>
                                    </div>                     
                                </div>

                                <hr style="margin-bottom:5px">
                                <div class="row row1">
                                    <div class="col-md-12">
                                        <p>If found please return to office | Tel: <?= $college->phone1 ?> <?php
                                            if (!empty($college->phone)) {
                                                echo ', ' . $college->phone2;
                                            }
                                            ?></p>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <?php
                } else {
                    echo '</div><div class="w3-padding-16" style="width: 100%;font-size: 12px;padding: 5px 0px;">';
                }
            }
            ?>
        </div>
    </div>
    <?php
    $this->registerJs($this->render("print.js"), 5);
    ?>

Now in qr.js file my js file is:

$(document).ready(function () {
    var qrcode = new QRCode("qrcode");
    var f = $('#data').attr('sid');
    qrcode.makeCode(f);
});

How can i solve this problem?

Answer 1

Change id="data" to class="data" and add qr.js only once

$(document).ready(function () {
    $(".data").each(function(i,e){
        var qrcode = new QRCode("qrcode");
        var f = $(e).attr('sid');
        qrcode.makeCode(f);
    })
});