Save state of dynamic checkboxes after AJAX call
I have a calendar. Based on the chosen date I am loading some checkboxes to display some time slots. The time slots are loaded from the database using PHP.
I am using this to load it dynamically:
$(".date-picker-2").datepicker({
minDate: 0,
onSelect: function(dateText) {
$.ajax({
method : "POST",
url : "process.php",
data : 'date='+ dateText,
success : function(result){
$("#slotplace").html(result)
}
});
}
});
The process.php loads something like:
<input type="checkbox" name="M" class="days" value="22/11 9am">9am<br>
<input type="checkbox" name="M" class="days" value="22/11 10am">10am<br>
<input type="checkbox" name="M" class="days" value="22/11 11am">11am<br>
<input type="checkbox" name="M" class="days" value="22/11 12pm">12pm<br>
If another date is clicked on the calendar then another set of slots are loaded from the database via AJAX.
With this $("#slotplace").html(result) I think it is being overwritten each time.
How can I save the state of those checkboxes that are checked, say on the 22nd, if the user navigates to another day by selecting another date, then clicks back on to the 22nd? Currently it is just replacing I think. I could pass this data to PHP on another click() function but was hoping to find something using JQuery to save multiple calls to the server and also to make it more efficient.
javascript php jquery
edited Nov 21 at 1:59
abhishek_naik
1,05721322
asked Nov 20 at 22:14
Abu Nooh
441524
add a comment |
I have a calendar. Based on the chosen date I am loading some checkboxes to display some time slots. The time slots are loaded from the database using PHP.
I am using this to load it dynamically:
$(".date-picker-2").datepicker({
minDate: 0,
onSelect: function(dateText) {
$.ajax({
method : "POST",
url : "process.php",
data : 'date='+ dateText,
success : function(result){
$("#slotplace").html(result)
}
});
}
});
The process.php loads something like:
<input type="checkbox" name="M" class="days" value="22/11 9am">9am<br>
<input type="checkbox" name="M" class="days" value="22/11 10am">10am<br>
<input type="checkbox" name="M" class="days" value="22/11 11am">11am<br>
<input type="checkbox" name="M" class="days" value="22/11 12pm">12pm<br>
If another date is clicked on the calendar then another set of slots are loaded from the database via AJAX.
With this $("#slotplace").html(result) I think it is being overwritten each time.
How can I save the state of those checkboxes that are checked, say on the 22nd, if the user navigates to another day by selecting another date, then clicks back on to the 22nd? Currently it is just replacing I think. I could pass this data to PHP on another click() function but was hoping to find something using JQuery to save multiple calls to the server and also to make it more efficient.
javascript php jquery
edited Nov 21 at 1:59
abhishek_naik
1,05721322
asked Nov 20 at 22:14
Abu Nooh
441524
store the information client side using web storage developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API, or just create a variable and check the new elements when they're added to the DOM
– zfrisch
Nov 20 at 22:21
Do you need them to persist when the page reloads or just while on the current page? Do you need to ever know the values they clicked? A solution here can range anywhere from using localstorage, to server side session variables, to getting/setting values in a database. it really depends on how you intend to use the checked values
– billynoah
Nov 21 at 2:19
Not on page refresh just whilst the dates are switching. Prefer a JavaScript solution without local storage.
– Abu Nooh
Nov 21 at 8:28
add a comment |
I have a calendar. Based on the chosen date I am loading some checkboxes to display some time slots. The time slots are loaded from the database using PHP.
I am using this to load it dynamically:
$(".date-picker-2").datepicker({
minDate: 0,
onSelect: function(dateText) {
$.ajax({
method : "POST",
url : "process.php",
data : 'date='+ dateText,
success : function(result){
$("#slotplace").html(result)
}
});
}
});
The process.php loads something like:
<input type="checkbox" name="M" class="days" value="22/11 9am">9am<br>
<input type="checkbox" name="M" class="days" value="22/11 10am">10am<br>
<input type="checkbox" name="M" class="days" value="22/11 11am">11am<br>
<input type="checkbox" name="M" class="days" value="22/11 12pm">12pm<br>
If another date is clicked on the calendar then another set of slots are loaded from the database via AJAX.
With this $("#slotplace").html(result) I think it is being overwritten each time.
How can I save the state of those checkboxes that are checked, say on the 22nd, if the user navigates to another day by selecting another date, then clicks back on to the 22nd? Currently it is just replacing I think. I could pass this data to PHP on another click() function but was hoping to find something using JQuery to save multiple calls to the server and also to make it more efficient.
javascript php jquery
edited Nov 21 at 1:59
abhishek_naik
1,05721322
asked Nov 20 at 22:14
Abu Nooh
441524
I have a calendar. Based on the chosen date I am loading some checkboxes to display some time slots. The time slots are loaded from the database using PHP.
I am using this to load it dynamically:
$(".date-picker-2").datepicker({
minDate: 0,
onSelect: function(dateText) {
$.ajax({
method : "POST",
url : "process.php",
data : 'date='+ dateText,
success : function(result){
$("#slotplace").html(result)
}
});
}
});
The process.php loads something like:
<input type="checkbox" name="M" class="days" value="22/11 9am">9am<br>
<input type="checkbox" name="M" class="days" value="22/11 10am">10am<br>
<input type="checkbox" name="M" class="days" value="22/11 11am">11am<br>
<input type="checkbox" name="M" class="days" value="22/11 12pm">12pm<br>
If another date is clicked on the calendar then another set of slots are loaded from the database via AJAX.
With this $("#slotplace").html(result) I think it is being overwritten each time.
How can I save the state of those checkboxes that are checked, say on the 22nd, if the user navigates to another day by selecting another date, then clicks back on to the 22nd? Currently it is just replacing I think. I could pass this data to PHP on another click() function but was hoping to find something using JQuery to save multiple calls to the server and also to make it more efficient.
javascript php jquery
javascript php jquery
edited Nov 21 at 1:59
abhishek_naik
1,05721322
asked Nov 20 at 22:14
Abu Nooh
441524
edited Nov 21 at 1:59
abhishek_naik
1,05721322
asked Nov 20 at 22:14
Abu Nooh
441524
edited Nov 21 at 1:59
abhishek_naik
1,05721322
edited Nov 21 at 1:59
abhishek_naik
1,05721322
edited Nov 21 at 1:59
abhishek_naik
1,05721322
1,05721322
asked Nov 20 at 22:14
Abu Nooh
441524
asked Nov 20 at 22:14
Abu Nooh
441524
asked Nov 20 at 22:14
Abu Nooh
441524
441524
store the information client side using web storage developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API, or just create a variable and check the new elements when they're added to the DOM
– zfrisch
Nov 20 at 22:21
Do you need them to persist when the page reloads or just while on the current page? Do you need to ever know the values they clicked? A solution here can range anywhere from using localstorage, to server side session variables, to getting/setting values in a database. it really depends on how you intend to use the checked values
– billynoah
Nov 21 at 2:19
Not on page refresh just whilst the dates are switching. Prefer a JavaScript solution without local storage.
– Abu Nooh
Nov 21 at 8:28
add a comment |
store the information client side using web storage developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API, or just create a variable and check the new elements when they're added to the DOM
– zfrisch
Nov 20 at 22:21
Do you need them to persist when the page reloads or just while on the current page? Do you need to ever know the values they clicked? A solution here can range anywhere from using localstorage, to server side session variables, to getting/setting values in a database. it really depends on how you intend to use the checked values
– billynoah
Nov 21 at 2:19
Not on page refresh just whilst the dates are switching. Prefer a JavaScript solution without local storage.
– Abu Nooh
Nov 21 at 8:28
store the information client side using web storage developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API, or just create a variable and check the new elements when they're added to the DOM
– zfrisch
Nov 20 at 22:21
store the information client side using web storage developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API, or just create a variable and check the new elements when they're added to the DOM
– zfrisch
Nov 20 at 22:21
Do you need them to persist when the page reloads or just while on the current page? Do you need to ever know the values they clicked? A solution here can range anywhere from using localstorage, to server side session variables, to getting/setting values in a database. it really depends on how you intend to use the checked values
– billynoah
Nov 21 at 2:19
Do you need them to persist when the page reloads or just while on the current page? Do you need to ever know the values they clicked? A solution here can range anywhere from using localstorage, to server side session variables, to getting/setting values in a database. it really depends on how you intend to use the checked values
– billynoah
Nov 21 at 2:19
Not on page refresh just whilst the dates are switching. Prefer a JavaScript solution without local storage.
– Abu Nooh
Nov 21 at 8:28
Not on page refresh just whilst the dates are switching. Prefer a JavaScript solution without local storage.
– Abu Nooh
Nov 21 at 8:28
add a comment |
1 Answer
1
active
oldest
votes
- In
var selected =, get the values of all of the checkboxes checked - Send the Ajax call
- Recheck the checkboxes with the values.
answered Nov 21 at 2:14
Chris Happy
4,5231833
Would you mind giving example code using jQuery?
– Abu Nooh
Nov 21 at 8:29
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%2f53402409%2fsave-state-of-dynamic-checkboxes-after-ajax-call%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
- In
var selected =, get the values of all of the checkboxes checked - Send the Ajax call
- Recheck the checkboxes with the values.
answered Nov 21 at 2:14
Chris Happy
4,5231833
Would you mind giving example code using jQuery?
– Abu Nooh
Nov 21 at 8:29
add a comment |
- In
var selected =, get the values of all of the checkboxes checked - Send the Ajax call
- Recheck the checkboxes with the values.
answered Nov 21 at 2:14
Chris Happy
4,5231833
Would you mind giving example code using jQuery?
– Abu Nooh
Nov 21 at 8:29
add a comment |
- In
var selected =, get the values of all of the checkboxes checked - Send the Ajax call
- Recheck the checkboxes with the values.
answered Nov 21 at 2:14
Chris Happy
4,5231833
- In
var selected =, get the values of all of the checkboxes checked - Send the Ajax call
- Recheck the checkboxes with the values.
answered Nov 21 at 2:14
Chris Happy
4,5231833
answered Nov 21 at 2:14
Chris Happy
4,5231833
answered Nov 21 at 2:14
Chris Happy
4,5231833
answered Nov 21 at 2:14
Chris Happy
4,5231833
4,5231833
Would you mind giving example code using jQuery?
– Abu Nooh
Nov 21 at 8:29
add a comment |
Would you mind giving example code using jQuery?
– Abu Nooh
Nov 21 at 8:29
Would you mind giving example code using jQuery?
– Abu Nooh
Nov 21 at 8:29
Would you mind giving example code using jQuery?
– Abu Nooh
Nov 21 at 8:29
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%2f53402409%2fsave-state-of-dynamic-checkboxes-after-ajax-call%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
store the information client side using web storage developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API, or just create a variable and check the new elements when they're added to the DOM
– zfrisch
Nov 20 at 22:21
Do you need them to persist when the page reloads or just while on the current page? Do you need to ever know the values they clicked? A solution here can range anywhere from using localstorage, to server side session variables, to getting/setting values in a database. it really depends on how you intend to use the checked values
– billynoah
Nov 21 at 2:19
Not on page refresh just whilst the dates are switching. Prefer a JavaScript solution without local storage.
– Abu Nooh
Nov 21 at 8:28