Display qrcode in an alert

Asked

Viewed 78 times

-1

I have this code:

$("#exemplo1").click(function(){
  $('#codigoQrCode').qrcode(JSON.stringify('teste'));

    //se vcs clicarem aqui, aparecerá o qrcode(canvas)
 });
 
 $("#exemplo2").click(function(){
  alert($('#codigoQrCode').qrcode(JSON.stringify('teste')));

    //aqui eu gostaria de exibi-lo no alert, como vcs podem ver ele me retorna o objeto 
 });
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

<div id="codigoQrCode"></div>
<button id="exemplo1">Clique 1</button>
<button id="exemplo2">Clique 2</button>

Have any way to display this qrcode/canvas in an alert?

javascript jquery canvas qrcode

  • I don’t think it’s possible. As far as I know, the javascript’s Alert function only accepts text (string). Maybe the way out for you is to use Modal (or Dialog). At this link: https://jqueryui.com/dialog/ has the example of Modal using Jqueryui. And also if you google you will find several other types

  • In the job documentation alert() in W3schools you can observe that this function waits as a parameter string. If an object is passed, it is converted to string also, which is what happens to you in your example.

  • It’s worth taking a look at that lib: Sweet Alert. You can replace your project’s Alerts with these custom modes. It’s easy to install, easy to use, and there are several message templates. Actually Alert is kind of falling into disuse in the UX view, it would be more interesting for you to spend time trying to migrate to some lib or make your own modals.

1 answer

1

You can simulate an Alert, I used the jquery ui to create a modal to present the Qr Code, but you can also create a custom according to your preference, see the example below:

$("#exemplo1").click(function(){
  $('#codigoQrCode').qrcode(JSON.stringify('teste'));
  $( "#dialog" ).dialog();
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<button id="exemplo1">Clique 1</button>

<div id="dialog" title="Basic dialog">
  <div id="codigoQrCode"></div>
</div>

Browser other questions tagged javascript jquery canvas qrcode

You are not signed in. Login or sign up in order to post.