Question 176102 in Javascript Question posted in
A very good W3school tutorial can be found here.

Can I render dynamic QR codes in a slider using Django data with Javascript?

Help, please
I need to render in slider dynamic qr-codes.
I receive data from admin model (Django). It work for text, but link for qrs are the same.

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">


 <div class="carousel-inner">
    {% for a in advertising %} 
      <div class="carousel-item carousel-item1 {% if forloop.first %}active{% endif %}" data-bs-interval="2000">
        
        <h3 class="install-app">{{a.advertising_text}}</h3>
        <div class="qr-wrapper"></div>
    </div>
     {% endfor %}

    </div>
  </div>

And script
qrCodeMaker();

function qrCodeMaker(qr) {
 
   const qrs = document.querySelectorAll(".qr-wrapper");
   console.log('qrs', qrs)
    qrs.forEach(function (qr) {


        q = new QRCode(qr, {
        // {% for a in advertising %}
         text: "{{a.URL}}",
        //    {% endfor %} 
         colorDark: "#002F43",
         colorLight: "#F5F7F7"
    } )
    
})
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    so, i have a Carousel with dynamic changing text and qr. Link for qr i add by admin in django. Text changes ok, but qrs render all at ones


  2. 0

    I see that you are accessing a.URL outside of the for loop, which means that a is not defined. If this is the source of the problem, the following code should fix it:

    HTML

    <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">


 <div class="carousel-inner">
    {% for a in advertising %} 
      <div class="carousel-item carousel-item1 {% if forloop.first %}active{% endif %}" data-bs-interval="2000">
        
        <h3 class="install-app">{{a.advertising_text}}</h3>
        <div class="qr-wrapper" id="{{a.URL}}"></div>
    </div>
     {% endfor %}

    </div>
</div>

    Javascript

    function qrCodeMaker(qr) {
   const qrs = document.querySelectorAll(".qr-wrapper");
   console.log('qrs', qrs)
   qrs.forEach(function (qr) {
        q = new QRCode(qr, {
         text: qr.id,
         colorDark: "#002F43",
         colorLight: "#F5F7F7"
        } )
   })
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search