双层帆布二维码

时间:2018-07-02 13:38:59

标签: javascript jquery html

我有一种情况,我在模式A中使用2个模态来显示2个QR码,模态A和模态B,我成功在容器模态中显示了QR码。但是,模态B预览QR中的问题不在中心,我在检查元素画布上看到模态B中已创建了两倍,因此QR移到顶部具有空白的buttom,如下所示: QR Modal B

此处javascript中的代码在模式B中显示QR,其中在datatable href链接中显示模式:

$(function QR() {
  $.ajax({
    url: "servgenqr",
    dataType: "json",
    method: "GET",
    success: function(response) {
      $('.QRTable').dataTable({
        data: response,
        retrieve: true,
        paging: true,
        searching: true,
        destroy: false,
        language: {
          searchPlaceholder: "Search records"
        },
        columns: [{
            'data': 'amount'
          },
          {
            'data': 'date'
          },
          {
            "data": "codeQR",
            "render": function(data, type, row, meta) {
              if (type === 'display') {
                var showqrcode = new QRCode(document.getElementById("qcodeQR"), {
                  width: 200,
                  height: 200
                });
                $("#qrlink").click(function() {

                  showqrcode.makeCode(data);
                });
                column = '<a id="qrlink" href="#showQR" class="fa fa-qrcode" data-toggle="modal" data-target="#showQR" style="font-size: 1.6em;"></a>';
              }
              return column;
            }
          }
        ]
      });
      $(".dataTables_filter input").addClass("form-control");
      $(".dataTables_length select").addClass("form-control");
    },
    error: function(jqXHR, textStatus, errorThrown) {}
  });
  //setTimeout(startRefresh,1000);
});

此处的代码javascript显示模式A,其中从按钮显示模式:

var qrcode = new QRCode(document.getElementById("qrcode"), {
  width: 200,
  height: 200
});

function makeCode() {
  qrcode.makeCode(makeQR());
}

$("#submit").click(
  function() {
    var amount = $("#amountField").val();
    var qrcode = makeQR();

    if (amount == '' || amount == null || amount == 0) {
      $('#amountField').focus();
      $('.error-message').show();
    } else {
      $('.error-message').hide();
      $.ajax({
        type: "POST",
        data: {
          Email: amount,
          Pass: qrcode
        },
        url: "Transaction",
        success: function(resp) {
          makeCode();
          $('#newQR').modal('show');
          $("#success-alert").show();
          setTimeout(function() {
            $("#success-alert").slideUp(500);
          }, 2000);
        },
        error: function(resp) {
          makeCode();
          $('#newQR').modal('show');
          $("#success-alert").show();
          $("#failed-alert").show();
          setTimeout(function() {
            $("#failed-alert").slideUp(500);
          }, 2000);
        }
      });
    }
  });

如何删除双画布,或解决此问题的线索,谢谢。

0 个答案:

没有答案