This question already has an answer here:
checked checkbox will remain through pagination
(1 answer)
Closed 8 years ago.
I have a problem here using .load() ajax/jquery when I use it in pagination. the status of my checkbox will not remain when I go to another page. For example I checked 2 items in page 1 then when I go to page 2 to select another item then when I go back to page 1 to test if my checked item remain checked. unfortunately it became unchecked maybe because of the .load(). Please help me if there is alternative to use aside .load() to remain my checkbox checked.
here is my code for .load() ajax:
<script type="text/javascript">
$(document).ready(function() {
$("#results").load("fetch_pages.php", {'page':0}, function() {$("#1-page").addClass('active');});
$(".paginate_click").click(function (e) {
var clicked_id = $(this).attr("id").split("-"); //ID of clicked element, split() to get page number.
var page_num = parseInt(clicked_id[0]);
$('.paginate_click').removeClass('active');
$("#results").load("fetch_pages.php", {'page':(page_num-1)}, function(){
});
$(this).addClass('active');
return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#results").load("fetch_pages.php", {'page':0}, function() {$("#1-page").addClass('active');}); //initial page number to load
$('body').on('click', '.paginate_click', function(e){
// Get all the checked boxes and store their ID in an array
var ticked = [];
$('.tick:checked').each(function(){
ticked.push($(this).attr("id"));
});
var clicked_id = $(this).attr("id").split("-"); //ID of clicked element, split() to get page number.
var page_num = parseInt(clicked_id[0]);
$('.paginate_click').removeClass('active');
$("#results").load("fetch_pages.php", {'page':(page_num-1)}, function(){
// Content has loaded but is still raw
// We loop through IDs and check'em
ticked.forEach(function(val, i){
$(val).prop('checked', true);
});
});
$(this).addClass('active');
return false;
});
});
</script>
hi #charleshaa it doesnt work this is what i did to my script
and here is my checkbox code
echo "<div id='a'><input type='checkbox' class='tick' name='items[$i]' id='$i' value='". $item['ItemID'] ."' >".$item['ItemName']."</div>";
What's wrong?? Im badly need help
You need to keep you checked boxes in a variable so you can recheck them after the load.
First add a class to your checkboxes class="tick".
Then you would :
$(".paginate_click").click(function (e) {
// Get all the checked boxes and store their ID in an array
var ticked = [];
$('.tick:checked').each(function(){
ticked.push($(this).attr("id"));
});
var clicked_id = $(this).attr("id").split("-"); //ID of clicked element, split() to get page number.
var page_num = parseInt(clicked_id[0]);
$('.paginate_click').removeClass('active');
$("#results").load("fetch_pages.php", {'page':(page_num-1)}, function(){
// Content has loaded but is still raw
// We loop through IDs and check'em
ticked.forEach(function(val, i){
$(val).prop('checked', true);
});
});
$(this).addClass('active');
return false;
});
EDIT:
Also, it is preferable not to use the .click() notation, instead, you should always use .on()
In this example, you would write it like this :
$('body').on('click', '.paginate_click', function(e){
//code
});
It is much better for performance as it only attaches one event listener to body, instead of attaching one to every .paginate_click.
Check my comment about the unique IDs and you should be good to go.
Related
I am trying to show the values based on Checkbox check and uncheck
I have got two checkboxes MNC and Worth (Only the Top Ones), i am trying to show or hide the values based on it (pesent under class pack-panel div)
This is my code
$(document).on('change', '.filtermnc', function() {
$(".pack-panel").each(function () {
var visible = $(this).find('.mnccheckbox').prop('checked')
$(this).toggle(visible);
});
});
$(document).on('change', '.filterworth', function() {
$(".pack-panel").each(function () {
var visible = $(this).find('.worthcheckbox').prop('checked')
$(this).toggle(visible);
});
});
When i tried with this code , it is not working and also it is checking all the correspondng checkboxes
Could you please let me know how to achieve this .
http://jsfiddle.net/F8Vk2/121/
I made for one, but it's just a mater of changing the other one likewise:
$(document).on('change', '.filterworth, .filtermnc', function() {
var $this = $(this),
isChecked = $this.is(':checked'),
$packPanel = $('.pack-panel');
isChecked ? $packPanel.show() : $packPanel.hide()
});
You could use this to get the target of the event and verify if it's checked by .is(':checked'). Also, you don't need to iterate over $('.pack-panel') in order to apply your changes. .toggle() will change the visibility by it's previous one, so I think you should hard code to hide or show the panels.
Change your js to
$(document).on('change', '.filtermnc', function() {
var visible = $(this).prop('checked')
if(visible)
$('.mnccheckbox').closest("li").show();
else
$('.mnccheckbox').closest("li").hide();
});
$(document).on('change', '.filterworth', function() {
var visible = $(this).prop('checked')
if(visible)
$('.worthcheckbox').closest("li").show();
else
$('.worthcheckbox').closest("li").hide();
});
http://jsfiddle.net/F8Vk2/123/
You could try ->
$(document).on('change', '.filtermnc', function() {
$('.mnccheckbox').
closest("li").
toggle($(this).prop('checked'));
});
This is basically finding all with .mccheckbox class, and then toggling based on the property of the checkbox you assigned the event too.
I'm trying to get the value of a dropdown's option (there is an id on the select markup), when opening the web page
Using
$(document).ready(function() {
$('#cat_list').ready(function(){
var category = $(this).val();
alert(category);
});
});
I get a blank alert.
But Using .change (when selecting something else inside the dropdown) the following code works perfectly with the same function
$(document).ready(function() {
$('#cat_list').change(function(){
var category = $(this).val();
alert(category);
});
});
Finally, this works using basic javascript and it gets successfully the values on open, refresh, on form submit fail, ... etc
$(document).ready(function() {
$('#cat_list').ready(function(){
var e = document.getElementById("cat_list");
var category = e.options[e.selectedIndex].value;
alert(category);
});
});
Thanks for any help on why the first version .ready + $(this).val(); fails
Correct code is:
$(document).ready(function () {
var category = $('#cat_list').val();
alert(category);
});
$(document).ready itself means the whole document (including #cat_list) is ready to be processed. why are you checking if an element is ready or not!!??
you can directly use the value of the element like
$('#cat_list').val();
The documentation says that .ready:
Specify a function to execute when the DOM is fully loaded.
And 3 possible usage cases are:
$(document).ready(handler)
$().ready(handler) (this is not recommended)
$(handler)
However you can actually assign .ready to any element and it will be triggered:
$('#cat_list').ready(function(){
});
This code is fired. BUT this inside .ready function always refers to document.
It will work this way:
$(document).ready(function() {
$('#cat_list').ready(function(){
var category = $('#cat_list').val();
alert(category);
});
});
But actually your code is overengineered:
$(document).ready(function() {
var category = $('#cat_list').val();
alert(category);
});
I have the scripts below one which checks all checkboxes in a group which works great, and another to pass the checkbox values over the pagination and all works fine the only problem is that when I click the check all box it checks all the pages on page 1 but when I click page 2 only the check all box is checked although the query is working fine. If I click all the checkboxes individually then they pass through the pagination fine, so I don't know why the check all button doesn't. I would like it so that when you click check all, all the boxes stay checked through the pagination as well.
here is my script that checks all checkboxes
<script type="text/javascript">
window.addEvent('domready', function() {
$$('li.head input[type=checkbox]').addEvent('click', function() {
this.getParent('ul').getElements('input[type=checkbox]').setProperty('checked', this.checked);
});
});
</script>
here is the script that remembers the checkboxes
var aa_checkbox;
function init_checkbox(){
//setup blank cb cookie
if(!Cookie.read('cb')){
Cookie.write('cb', JSON.encode({}));
}
//setup "associative array" to match what is currently in the cookie
aa_checkbox = JSON.decode(Cookie.read('cb'));
//set up each checkbox with class="remember_cb"
$$('input.remember_cb').each(function(el){
//mark checked if it is in the cookie
if(aa_checkbox[el.name]){
el.checked = 'checked'
}
//setup onclick event to put checkbox status in the
el.addEvent('click', function(){
if(el.checked){
aa_checkbox[el.name] = 1;
}else{
delete(aa_checkbox[el.name]);
}
})
})
//save aa_checkbox back into cookie upon leaving a page
window.onbeforeunload = function(){Cookie.write('cb', JSON.encode(aa_checkbox));};
setup_form();
return true;
}
function setup_form(){
//set up form so that it adds the inputs upon submit.
$$('form.remember_cb_form').each(function(form){
form.addEvent('submit', function(ev){
//clean up previously inserted inputs
var aa_hidden_insert = $$('input.hidden_insert');
$each(aa_hidden_insert, function(el){
el.parentNode.removeChild(el);
})
var el_form = this;
//insert hidden elements representing the values stored in aa_checkbox
$each(aa_checkbox, function(i_value, s_name){
if(i_value){
var el_input = document.createElement('input');
el_input.type = 'hidden';
el_input.value = i_value;
el_input.name = s_name;
el_input.setAttribute('class', 'hidden_insert');
el_form.appendChild(el_input);
}
});
});
});
}
window.addEvent('domready', init_checkbox);
If anyone can help me I would be very greatful, Thanks
It has to do with how your code works. I recommend that the check/un-check should affect the in-memory copy of the backing data. EG if you have an array representing the check boxes, set the check/uncheck in the array then render the array to check/uncheck the corresponding check box. That way, when you check all, all the array cells are set to checked! When you change from page to page, simply read the status of the corresponding array cell.
I define a tag picker which will generate checkbox inputs based on "group". If I select the tags I want and press done button, it should return a string to set the value of a text input.
Here are the related codes. The problem is it only works well at the first time. For example, for the first time, if I checked 'jquery','javascript' in the tags,
console.log('output is:' + tags);
print out 'output is: jquery,javascript'. Works!
Then I use it again and select 'jquery','javascript','bootstrap',
it will return
output is: jquery,javascript,bootstrap
output is:
One more time for 'jquery','javascript','bootstrap', it returns
output is: jquery,javascript,bootstrap
output is:
output is:
Seems the done button pressed, the function is called repeatedly. Being stuck with it for several hours but can't figure out. Really appreciate for your answer! Thanks
(function(){
$.fn.tagPicker = function(source,options){
var settings = $.extend({
perRow : 3
},options);
$.fn.attachRow = function(row,col){
//codes here
...
}
$.fn.attachPicker = function(){
//codes here
// generate html for checkbox inputs
...
};
var $input = this;
if($('.tag-picker').length == 0){
$input.attachPicker();
$('body').on('click','.tag-picker .close-picker',function(){
$('.tag-picker').remove();
})
$('.tag-picker .close-picker').off();
$('body').on('click','.tag-picker #btn-done', function(){
var tags = getTags();
$('.tag-picker').remove();
console.log('output is:' + tags);
$input.val(tags);
});
}
function getTags(){
var t = [];
$('.tag-picker input').each(function(){
if($(this).is(':checked')) t.push($(this).attr('id'));
})
return t.join(',');
}
}
})(jQuery);
$('body').on('click','input.participant',function(){
$(this).val('');
$(this).tagPicker(group);
})
You are initialising the plugin every time the elements are clicked. You should initialise it once, on DOM ready.
OR if you want to do this anyway; you could use .one() for the event to run only once and remove itself. Use .off() to detach an event, attached with .on().
Here an example of my checkbox list http://jsfiddle.net/YnM2f/
Let's say I check on G then A,B,C,D,E,F also automatic checked. How can i achieve my goals with jQuery?
First you need to get all the checkboxes based on which one is clicked. for this you need to get the parent nodes, siblings that are before it. Here is some code that will help you get there, but you'll need to work on it to make it work for you.
http://jsfiddle.net/urau8/
$("input:checkbox").on("click",function(){
if(this.checked)
$(this).parent().prevAll().each(function(){
$("input:checkbox",this).attr("checked",true);
});
});
This will check all checkboxes above a checkboxe that gets checked and uncheck all checkboxes above a checkbox that gets unchecked, given the checkbox layout that you've provided.
$('input:checkbox').click(function () {
var state = $(this).prop('checked');
var elements;
if (state) {
elements = $(this).parent().prevAll();
} else {
elements = $(this).parent().nextAll();
}
elements.each(function () {
$('input:checkbox', this).prop('checked',state);
});
});
$('input:checkbox').change(function(){
var $allParents = $(this).parent();
$allParents.prevAll().find('input').attr('checked', 'checked');
$allParents.nextAll().find('input').removeAttr('checked');
});
Try this
Well it's already been done five times, but this is what I did: http://jsfiddle.net/YnM2f/27/
$('input').click(function(){
if( $(this).is(':checked') ){
$(this).parent('p').prevAll().children('input').attr('checked',true)
}
})
Try something like this: http://jsfiddle.net/YnM2f/16/
It's a very specific solution (as in it will only work with "G"), but it should give you an idea for how to customize this code to meet your needs.
$('input:checkbox').filter(function(){
return (/ G/).test($(this).parent().text())
}).on('change', function() {
var gBox = $(this);
$('input:checkbox').prop('checked', $(gBox).prop('checked'));
});