Website freezes when adding qrcodes in for loop
I am using a QRcode-generator plugin which somehow freezes the browser when creating QRcodes in a for loop. This is weird because I followed the documentation/tutorial on the git repo (link further down).
HTML:
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
<div id="qrcode" style="display: none;"></div>
After AJAX success:
overall_result is following json:
{"error": false,"error_msg":"","result":["item1","item2","item3"]}
var overall_result = JSON.parse(response);
var result = overall_result.result;
for(var f = 0; f < result.length; f++){
jQuery('#qrcode').qrcode("this plugin is great");
}
If I loop through an already created array it works:
var array = ["test", "test1", "test2", "test3", "test", "test1", "test2", "test3", "test", "test1", "test2", "test3", "test", "test1", "test2", "test3", "test", "test1", "test2", "test3", "test", "test1", "test2", "test3"]
for(var f = 0; f < array.length; f++){
jQuery('#qrcode').qrcode("this plugin is great");
}
I have come to sort of a conclusion. Everytime when i create a QRcode inside a function it seems to not work, not even with onclick. It works if the script is just in the plain html script-tag.
Note: The AJAX request executes after onclick.
Plugin i use:
jquery.qrcode.min.js
javascript html ajax
asked Nov 14 '18 at 21:45
Elias KnudsenElias Knudsen
83
|
show 3 more comments
I am using a QRcode-generator plugin which somehow freezes the browser when creating QRcodes in a for loop. This is weird because I followed the documentation/tutorial on the git repo (link further down).
HTML:
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
<div id="qrcode" style="display: none;"></div>
After AJAX success:
overall_result is following json:
{"error": false,"error_msg":"","result":["item1","item2","item3"]}
var overall_result = JSON.parse(response);
var result = overall_result.result;
for(var f = 0; f < result.length; f++){
jQuery('#qrcode').qrcode("this plugin is great");
}
If I loop through an already created array it works:
var array = ["test", "test1", "test2", "test3", "test", "test1", "test2", "test3", "test", "test1", "test2", "test3", "test", "test1", "test2", "test3", "test", "test1", "test2", "test3", "test", "test1", "test2", "test3"]
for(var f = 0; f < array.length; f++){
jQuery('#qrcode').qrcode("this plugin is great");
}
I have come to sort of a conclusion. Everytime when i create a QRcode inside a function it seems to not work, not even with onclick. It works if the script is just in the plain html script-tag.
Note: The AJAX request executes after onclick.
Plugin i use:
jquery.qrcode.min.js
javascript html ajax
asked Nov 14 '18 at 21:45
Elias KnudsenElias Knudsen
83
1
If you do just one without the loop, does it work? It sounds like you're simply trying to do too many at once.
– Tyler Roper
Nov 14 '18 at 21:48
@TylerRoper The problem is not the loop, I will edit and show you why.
– Elias Knudsen
Nov 14 '18 at 21:50
What happens if you dojQuery('#qrcode').html('')before you create a new qrcode?
– Alon Eitan
Nov 14 '18 at 21:52
1
@charlietfl It looks like that plugin adds a QR code to the element. So by repeatedly calling it on the same item, it would add multiple QR codes to one single container namedqrcode. Hard to say though, I'm just going by this "Then you add the qrcode in this container byjquery('#qrcode').qrcode("this plugin is great");"
– Tyler Roper
Nov 14 '18 at 21:54
1
@TylerRoper never would have expected it but you are right, it keeps appending plnkr.co/edit/tGdef7AxYDQuOz61eBo3?p=preview
– charlietfl
Nov 14 '18 at 22:08
|
show 3 more comments
I am using a QRcode-generator plugin which somehow freezes the browser when creating QRcodes in a for loop. This is weird because I followed the documentation/tutorial on the git repo (link further down).
HTML:
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
<div id="qrcode" style="display: none;"></div>
After AJAX success:
overall_result is following json:
{"error": false,"error_msg":"","result":["item1","item2","item3"]}
var overall_result = JSON.parse(response);
var result = overall_result.result;
for(var f = 0; f < result.length; f++){
jQuery('#qrcode').qrcode("this plugin is great");
}
If I loop through an already created array it works:
var array = ["test", "test1", "test2", "test3", "test", "test1", "test2", "test3", "test", "test1", "test2", "test3", "test", "test1", "test2", "test3", "test", "test1", "test2", "test3", "test", "test1", "test2", "test3"]
for(var f = 0; f < array.length; f++){
jQuery('#qrcode').qrcode("this plugin is great");
}
I have come to sort of a conclusion. Everytime when i create a QRcode inside a function it seems to not work, not even with onclick. It works if the script is just in the plain html script-tag.
Note: The AJAX request executes after onclick.
Plugin i use:
jquery.qrcode.min.js
javascript html ajax
asked Nov 14 '18 at 21:45
Elias KnudsenElias Knudsen
83
I am using a QRcode-generator plugin which somehow freezes the browser when creating QRcodes in a for loop. This is weird because I followed the documentation/tutorial on the git repo (link further down).
HTML:
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
<div id="qrcode" style="display: none;"></div>
After AJAX success:
overall_result is following json:
{"error": false,"error_msg":"","result":["item1","item2","item3"]}
var overall_result = JSON.parse(response);
var result = overall_result.result;
for(var f = 0; f < result.length; f++){
jQuery('#qrcode').qrcode("this plugin is great");
}
If I loop through an already created array it works:
var array = ["test", "test1", "test2", "test3", "test", "test1", "test2", "test3", "test", "test1", "test2", "test3", "test", "test1", "test2", "test3", "test", "test1", "test2", "test3", "test", "test1", "test2", "test3"]
for(var f = 0; f < array.length; f++){
jQuery('#qrcode').qrcode("this plugin is great");
}
I have come to sort of a conclusion. Everytime when i create a QRcode inside a function it seems to not work, not even with onclick. It works if the script is just in the plain html script-tag.
Note: The AJAX request executes after onclick.
Plugin i use:
jquery.qrcode.min.js
javascript html ajax
javascript html ajax
asked Nov 14 '18 at 21:45
Elias KnudsenElias Knudsen
83
asked Nov 14 '18 at 21:45
Elias KnudsenElias Knudsen
83
edited Nov 14 '18 at 22:16
Elias Knudsen
asked Nov 14 '18 at 21:45
Elias KnudsenElias Knudsen
83
asked Nov 14 '18 at 21:45
Elias KnudsenElias Knudsen
83
asked Nov 14 '18 at 21:45
Elias KnudsenElias Knudsen
83
83
1
If you do just one without the loop, does it work? It sounds like you're simply trying to do too many at once.
– Tyler Roper
Nov 14 '18 at 21:48
@TylerRoper The problem is not the loop, I will edit and show you why.
– Elias Knudsen
Nov 14 '18 at 21:50
What happens if you dojQuery('#qrcode').html('')before you create a new qrcode?
– Alon Eitan
Nov 14 '18 at 21:52
1
@charlietfl It looks like that plugin adds a QR code to the element. So by repeatedly calling it on the same item, it would add multiple QR codes to one single container namedqrcode. Hard to say though, I'm just going by this "Then you add the qrcode in this container byjquery('#qrcode').qrcode("this plugin is great");"
– Tyler Roper
Nov 14 '18 at 21:54
1
@TylerRoper never would have expected it but you are right, it keeps appending plnkr.co/edit/tGdef7AxYDQuOz61eBo3?p=preview
– charlietfl
Nov 14 '18 at 22:08
|
show 3 more comments
1
If you do just one without the loop, does it work? It sounds like you're simply trying to do too many at once.
– Tyler Roper
Nov 14 '18 at 21:48
@TylerRoper The problem is not the loop, I will edit and show you why.
– Elias Knudsen
Nov 14 '18 at 21:50
What happens if you dojQuery('#qrcode').html('')before you create a new qrcode?
– Alon Eitan
Nov 14 '18 at 21:52
1
@charlietfl It looks like that plugin adds a QR code to the element. So by repeatedly calling it on the same item, it would add multiple QR codes to one single container namedqrcode. Hard to say though, I'm just going by this "Then you add the qrcode in this container byjquery('#qrcode').qrcode("this plugin is great");"
– Tyler Roper
Nov 14 '18 at 21:54
1
@TylerRoper never would have expected it but you are right, it keeps appending plnkr.co/edit/tGdef7AxYDQuOz61eBo3?p=preview
– charlietfl
Nov 14 '18 at 22:08
1
1
If you do just one without the loop, does it work? It sounds like you're simply trying to do too many at once.
– Tyler Roper
Nov 14 '18 at 21:48
If you do just one without the loop, does it work? It sounds like you're simply trying to do too many at once.
– Tyler Roper
Nov 14 '18 at 21:48
@TylerRoper The problem is not the loop, I will edit and show you why.
– Elias Knudsen
Nov 14 '18 at 21:50
@TylerRoper The problem is not the loop, I will edit and show you why.
– Elias Knudsen
Nov 14 '18 at 21:50
What happens if you do
jQuery('#qrcode').html('') before you create a new qrcode?– Alon Eitan
Nov 14 '18 at 21:52
What happens if you do
jQuery('#qrcode').html('') before you create a new qrcode?– Alon Eitan
Nov 14 '18 at 21:52
1
1
@charlietfl It looks like that plugin adds a QR code to the element. So by repeatedly calling it on the same item, it would add multiple QR codes to one single container named
qrcode. Hard to say though, I'm just going by this "Then you add the qrcode in this container by jquery('#qrcode').qrcode("this plugin is great");"– Tyler Roper
Nov 14 '18 at 21:54
@charlietfl It looks like that plugin adds a QR code to the element. So by repeatedly calling it on the same item, it would add multiple QR codes to one single container named
qrcode. Hard to say though, I'm just going by this "Then you add the qrcode in this container by jquery('#qrcode').qrcode("this plugin is great");"– Tyler Roper
Nov 14 '18 at 21:54
1
1
@TylerRoper never would have expected it but you are right, it keeps appending plnkr.co/edit/tGdef7AxYDQuOz61eBo3?p=preview
– charlietfl
Nov 14 '18 at 22:08
@TylerRoper never would have expected it but you are right, it keeps appending plnkr.co/edit/tGdef7AxYDQuOz61eBo3?p=preview
– charlietfl
Nov 14 '18 at 22:08
|
show 3 more comments
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53309195%2fwebsite-freezes-when-adding-qrcodes-in-for-loop%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53309195%2fwebsite-freezes-when-adding-qrcodes-in-for-loop%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
If you do just one without the loop, does it work? It sounds like you're simply trying to do too many at once.
– Tyler Roper
Nov 14 '18 at 21:48
@TylerRoper The problem is not the loop, I will edit and show you why.
– Elias Knudsen
Nov 14 '18 at 21:50
What happens if you do
jQuery('#qrcode').html('')before you create a new qrcode?– Alon Eitan
Nov 14 '18 at 21:52
1
@charlietfl It looks like that plugin adds a QR code to the element. So by repeatedly calling it on the same item, it would add multiple QR codes to one single container named
qrcode. Hard to say though, I'm just going by this "Then you add the qrcode in this container byjquery('#qrcode').qrcode("this plugin is great");"– Tyler Roper
Nov 14 '18 at 21:54
1
@TylerRoper never would have expected it but you are right, it keeps appending plnkr.co/edit/tGdef7AxYDQuOz61eBo3?p=preview
– charlietfl
Nov 14 '18 at 22:08