How to fix a JavaScript plugin only working every other partial page ajax load
My problem is that the bootstrap toggle plugin only works every other time.
I'm using bootstrap-toggle to provide better styling to my checkboxes.
<link href="~/Content/bootstrap-toggle.min.css" rel="stylesheet">
<script src="~/Scripts/bootstrap-toggle.min.js"></script>
I'm using these in a partial view that is returned when an ajax call is made.
This is an example of my implementation:
@Html.EditorFor(model => model.Active, "", new { htmlAttributes = new { @id = "Active", data_toggle = "toggle", data_width = "100%", data_on = "Active", data_off = "Disabled" }})
On the first load of the view when I click on the toggle it switches to the other value. If I close the window that the view has loaded in without refreshing the page, reopen the window and click on the toggle, nothing happens.
Edit: I should also mention that if I close the window that the view has loaded in Again without refreshing the page, reopen the window and click on the toggle it works. The issue isn't that it only works on the initial load but that it is working 50% of the time.
javascript c# html model-view-controller
asked 2 days ago
Jack Tyler
9019
add a comment |
My problem is that the bootstrap toggle plugin only works every other time.
I'm using bootstrap-toggle to provide better styling to my checkboxes.
<link href="~/Content/bootstrap-toggle.min.css" rel="stylesheet">
<script src="~/Scripts/bootstrap-toggle.min.js"></script>
I'm using these in a partial view that is returned when an ajax call is made.
This is an example of my implementation:
@Html.EditorFor(model => model.Active, "", new { htmlAttributes = new { @id = "Active", data_toggle = "toggle", data_width = "100%", data_on = "Active", data_off = "Disabled" }})
On the first load of the view when I click on the toggle it switches to the other value. If I close the window that the view has loaded in without refreshing the page, reopen the window and click on the toggle, nothing happens.
Edit: I should also mention that if I close the window that the view has loaded in Again without refreshing the page, reopen the window and click on the toggle it works. The issue isn't that it only works on the initial load but that it is working 50% of the time.
javascript c# html model-view-controller
asked 2 days ago
Jack Tyler
9019
Because bootstrap will not know that you have refreshed page, you need to tell it to reinitialize
– Just code
2 days ago
Sorry, could you expand on this? I'm not quite sure what you mean.
– Jack Tyler
2 days ago
When you are calling ajax and reloading the div with your partial view at that time you need to reinitialize your check-boxes, to let bootstrap know there are new elements.
– Just code
2 days ago
add a comment |
My problem is that the bootstrap toggle plugin only works every other time.
I'm using bootstrap-toggle to provide better styling to my checkboxes.
<link href="~/Content/bootstrap-toggle.min.css" rel="stylesheet">
<script src="~/Scripts/bootstrap-toggle.min.js"></script>
I'm using these in a partial view that is returned when an ajax call is made.
This is an example of my implementation:
@Html.EditorFor(model => model.Active, "", new { htmlAttributes = new { @id = "Active", data_toggle = "toggle", data_width = "100%", data_on = "Active", data_off = "Disabled" }})
On the first load of the view when I click on the toggle it switches to the other value. If I close the window that the view has loaded in without refreshing the page, reopen the window and click on the toggle, nothing happens.
Edit: I should also mention that if I close the window that the view has loaded in Again without refreshing the page, reopen the window and click on the toggle it works. The issue isn't that it only works on the initial load but that it is working 50% of the time.
javascript c# html model-view-controller
asked 2 days ago
Jack Tyler
9019
My problem is that the bootstrap toggle plugin only works every other time.
I'm using bootstrap-toggle to provide better styling to my checkboxes.
<link href="~/Content/bootstrap-toggle.min.css" rel="stylesheet">
<script src="~/Scripts/bootstrap-toggle.min.js"></script>
I'm using these in a partial view that is returned when an ajax call is made.
This is an example of my implementation:
@Html.EditorFor(model => model.Active, "", new { htmlAttributes = new { @id = "Active", data_toggle = "toggle", data_width = "100%", data_on = "Active", data_off = "Disabled" }})
On the first load of the view when I click on the toggle it switches to the other value. If I close the window that the view has loaded in without refreshing the page, reopen the window and click on the toggle, nothing happens.
Edit: I should also mention that if I close the window that the view has loaded in Again without refreshing the page, reopen the window and click on the toggle it works. The issue isn't that it only works on the initial load but that it is working 50% of the time.
javascript c# html model-view-controller
javascript c# html model-view-controller
asked 2 days ago
Jack Tyler
9019
asked 2 days ago
Jack Tyler
9019
edited 2 days ago
asked 2 days ago
Jack Tyler
9019
asked 2 days ago
Jack Tyler
9019
asked 2 days ago
Jack Tyler
9019
9019
Because bootstrap will not know that you have refreshed page, you need to tell it to reinitialize
– Just code
2 days ago
Sorry, could you expand on this? I'm not quite sure what you mean.
– Jack Tyler
2 days ago
When you are calling ajax and reloading the div with your partial view at that time you need to reinitialize your check-boxes, to let bootstrap know there are new elements.
– Just code
2 days ago
add a comment |
Because bootstrap will not know that you have refreshed page, you need to tell it to reinitialize
– Just code
2 days ago
Sorry, could you expand on this? I'm not quite sure what you mean.
– Jack Tyler
2 days ago
When you are calling ajax and reloading the div with your partial view at that time you need to reinitialize your check-boxes, to let bootstrap know there are new elements.
– Just code
2 days ago
Because bootstrap will not know that you have refreshed page, you need to tell it to reinitialize
– Just code
2 days ago
Because bootstrap will not know that you have refreshed page, you need to tell it to reinitialize
– Just code
2 days ago
Sorry, could you expand on this? I'm not quite sure what you mean.
– Jack Tyler
2 days ago
Sorry, could you expand on this? I'm not quite sure what you mean.
– Jack Tyler
2 days ago
When you are calling ajax and reloading the div with your partial view at that time you need to reinitialize your check-boxes, to let bootstrap know there are new elements.
– Just code
2 days ago
When you are calling ajax and reloading the div with your partial view at that time you need to reinitialize your check-boxes, to let bootstrap know there are new elements.
– Just code
2 days ago
add a comment |
1 Answer
1
active
oldest
votes
This happens because the script setups itself on the elements of your web page only once, which happens right after the page is loaded. After that, whenever you load new DOM elements (such as what happens when you reload a partial view through AJAX), the script doesn't execute its setup routine in the newly loaded elements.
After you load new elements via AJAX, you should perform a JavaScript call to bootstrapToggle() (checkout Bootstrap Toggle's API) on the newly loaded elements, so that the Bootstrap Toggle plugin could be activated for the newly loaded elements.
You should call something like this right after the new AJAX elements get loaded on the page:
// Replace by a selector which selects the elements which have been created
$('#myNewLoadedCheckboxElement').bootstrapToggle();
answered 2 days ago
vinicius.ras
8891517
1
This is it! I added $('#Active').bootstrapToggle(); to the onSuccess of the Ajax call and now it works every time. Thanks!
– Jack Tyler
2 days ago
add a comment |
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%2f53945372%2fhow-to-fix-a-javascript-plugin-only-working-every-other-partial-page-ajax-load%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
This happens because the script setups itself on the elements of your web page only once, which happens right after the page is loaded. After that, whenever you load new DOM elements (such as what happens when you reload a partial view through AJAX), the script doesn't execute its setup routine in the newly loaded elements.
After you load new elements via AJAX, you should perform a JavaScript call to bootstrapToggle() (checkout Bootstrap Toggle's API) on the newly loaded elements, so that the Bootstrap Toggle plugin could be activated for the newly loaded elements.
You should call something like this right after the new AJAX elements get loaded on the page:
// Replace by a selector which selects the elements which have been created
$('#myNewLoadedCheckboxElement').bootstrapToggle();
answered 2 days ago
vinicius.ras
8891517
1
This is it! I added $('#Active').bootstrapToggle(); to the onSuccess of the Ajax call and now it works every time. Thanks!
– Jack Tyler
2 days ago
add a comment |
This happens because the script setups itself on the elements of your web page only once, which happens right after the page is loaded. After that, whenever you load new DOM elements (such as what happens when you reload a partial view through AJAX), the script doesn't execute its setup routine in the newly loaded elements.
After you load new elements via AJAX, you should perform a JavaScript call to bootstrapToggle() (checkout Bootstrap Toggle's API) on the newly loaded elements, so that the Bootstrap Toggle plugin could be activated for the newly loaded elements.
You should call something like this right after the new AJAX elements get loaded on the page:
// Replace by a selector which selects the elements which have been created
$('#myNewLoadedCheckboxElement').bootstrapToggle();
answered 2 days ago
vinicius.ras
8891517
1
This is it! I added $('#Active').bootstrapToggle(); to the onSuccess of the Ajax call and now it works every time. Thanks!
– Jack Tyler
2 days ago
add a comment |
This happens because the script setups itself on the elements of your web page only once, which happens right after the page is loaded. After that, whenever you load new DOM elements (such as what happens when you reload a partial view through AJAX), the script doesn't execute its setup routine in the newly loaded elements.
After you load new elements via AJAX, you should perform a JavaScript call to bootstrapToggle() (checkout Bootstrap Toggle's API) on the newly loaded elements, so that the Bootstrap Toggle plugin could be activated for the newly loaded elements.
You should call something like this right after the new AJAX elements get loaded on the page:
// Replace by a selector which selects the elements which have been created
$('#myNewLoadedCheckboxElement').bootstrapToggle();
answered 2 days ago
vinicius.ras
8891517
This happens because the script setups itself on the elements of your web page only once, which happens right after the page is loaded. After that, whenever you load new DOM elements (such as what happens when you reload a partial view through AJAX), the script doesn't execute its setup routine in the newly loaded elements.
After you load new elements via AJAX, you should perform a JavaScript call to bootstrapToggle() (checkout Bootstrap Toggle's API) on the newly loaded elements, so that the Bootstrap Toggle plugin could be activated for the newly loaded elements.
You should call something like this right after the new AJAX elements get loaded on the page:
// Replace by a selector which selects the elements which have been created
$('#myNewLoadedCheckboxElement').bootstrapToggle();
answered 2 days ago
vinicius.ras
8891517
answered 2 days ago
vinicius.ras
8891517
answered 2 days ago
vinicius.ras
8891517
answered 2 days ago
vinicius.ras
8891517
8891517
1
This is it! I added $('#Active').bootstrapToggle(); to the onSuccess of the Ajax call and now it works every time. Thanks!
– Jack Tyler
2 days ago
add a comment |
1
This is it! I added $('#Active').bootstrapToggle(); to the onSuccess of the Ajax call and now it works every time. Thanks!
– Jack Tyler
2 days ago
1
1
This is it! I added $('#Active').bootstrapToggle(); to the onSuccess of the Ajax call and now it works every time. Thanks!
– Jack Tyler
2 days ago
This is it! I added $('#Active').bootstrapToggle(); to the onSuccess of the Ajax call and now it works every time. Thanks!
– Jack Tyler
2 days ago
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53945372%2fhow-to-fix-a-javascript-plugin-only-working-every-other-partial-page-ajax-load%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
Because bootstrap will not know that you have refreshed page, you need to tell it to reinitialize
– Just code
2 days ago
Sorry, could you expand on this? I'm not quite sure what you mean.
– Jack Tyler
2 days ago
When you are calling ajax and reloading the div with your partial view at that time you need to reinitialize your check-boxes, to let bootstrap know there are new elements.
– Just code
2 days ago