« first day (6 days earlier)      last day (342 days later) » 

12:02 PM
Hi
 
 
4 hours later…
4:08 PM
Hi
 
Hello sir
How are you
 
fine and you
?
 
Good
lets first talk about the javascript
 
Sir did you remember you just make some changes in my javascript to work the search functionality
I think you added the thead
Remember ?
 
4:11 PM
yeh
 
Yeah after doing that. Now I have issue in that with checboxes. When i try to select all the checkboxes then it just shows the search fucntionaltiy and show me that no result which is the search functionality
Its not selecting all the checkboxes when i try to do that
Do you get my point
?
 
when you click to check all
it's not working
that it ?
 
yes
yeh
 
ok show me the js code
 
Ok
				//FOR LOADING STUDENTS
				$.ajaxSetup({
					headers: {
						'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
					}
				});

			$('select[name="class_id"]').on('change', function() {
				var classID = $(this).val();
				if (classID) {

					$.ajax({

						url: '/attendance/ajax/' + classID,
						type: "GET",
						dataType: "json",
						success: function (data) {

							var markup = '';
							markup = '<thead><tr class="filters"><th style="width: 2%" class="align-middle text-center"><input type="checkbox" id="options"></th><th style="width: 15%" class="text-center">S
Thats all i have
 
4:16 PM
I need just the relevant part
 
Checboxes or search ?
 
checkbox
 
// FOR CHECKBOXES
$('table[id="studentsData"]').on('click', '#options', function() {

if(this.checked) {
$('.checkBoxes').each(function() {
this.checked = true;
});
} else {
$('.checkBoxes').each(function() {
this.checked = false;
});
}

});
 
when we fix it we'll move to the other part
ok
 
4:17 PM
do you have a checkbox with that id #options
inside a table with the "studentsData" id
?
 
yes I have
But in the html markup in javscript i have also thead
 
does the other checkboxes has a class checkBoxes ?
 
Which have also the same checkboxes with that id
 
ok the id must be unique in the same document
 
yes
Ok so what can i do now ?
I have checboxes id also in the html markup
But its just changed its behaviour after you added that thead
Because of that the search start working
But checkboxes lost its funcitonality
 
4:21 PM
ok
try it like this
$('body').on('click', '#options', function() {
 
ok
same result
 
I can't understand why you've two checkboxes with the same id
could you show me a screenshot
 
Ok sir let me explain that why i did that
 
if we have the checkbox in the thead why we must have it in the markup too ?
ok
 
When the user did not select anything else in the dropdown then the screen was blank which was not looking good
So i decided to add a thhead up in the html
 
4:24 PM
ok
 
But its ok
I will remove it
 
this thead will be replaced after the ajax request ?
 
And lets see if its working then
Yes
exactly
what you will suggest now ?
 
If it will be replaced that mean you end up with one element using the "options" id
What must be valid and work fine
 
yes
yeh but then why its not working
 
4:27 PM
Try to remove the id from the default thead that you've added
 
then try it just like
$('body').on('click', '#options', function() {
alert("checkbox clicked");
});
 
same result after removing too
ok
yes alert is working
 
ok now
are you sure that the checkboxes has the class "checkBoxes"
with the same uppercase "B"
 
Sir in the thead it have that id
But in the tbody it does not have
 
4:33 PM
Class
Not the id
 
yes it has that class
 
ok
try it now like
$('body').on('click', '#options', function() {
alert($('.checkBoxes').length);
});
 
ok
yeh it shows the lenght
 
how much ?
 
4:37 PM
ok good
 
now ?
 
$('body').on('click', '#options', function() {
if( $(this).is(':checked') )
{
$('.checkBoxes').each(function() {
$(this).prop('checked', true);
});
} else {
$('.checkBoxes').each(function() {
$(this).prop('checked', false);
});
}
});
 
try this one
 
same result sir
 
4:41 PM
$('body').on('click', '#options', function() {
alert($(this).is(':checked')?'checked':'unchecked');

if( $(this).is(':checked') )
{
$('.checkBoxes').each(function() {
$(this).remove();
});
} else {
$('.checkBoxes').each(function() {
$(this).remove();
});
}
});
 
ok
it alerts checked and when i click ok then it shows again no result
 
What you expect by clicking as a result ?
 
I expect to check all the check boxes
When i try to check one by one then it works
But when i try to select all then it just do that
 
Ok show me the markup please
 
ok
var markup = '';
							markup = '<thead><tr class="filters"><th style="width: 2%" class="align-middle text-center"><input type="checkbox" id="options"></th><th style="width: 15%" class="text-center">Student ID<input type="text" class="form-control" disabled></th> <th style="width: 15%" class="text-center">Student Name<input type="text" class="form-control" disabled></th> <th style="width: 15%" class="text-center">Attendance<input type="text" class="form-control" disabled></th> <th style="width: 15%" class="text-center">Date<input type="text" class="form-control" disabled></th> <th style="w
 
4:44 PM
The last code I gives you must remove all the checkboxes when you click
 
yes it remove all the checkboxes after showing that alert
 
ok that what I have expected
now instead of removing them, we'll check them
 
make sure you don't have the JS code duplicated or called two times
since if it's the key
the event will be attached 2 times and when we click
one event will check and the second uncheck and we'll think that the event doesn't work
 
4:47 PM
since the checkboxes remain unchecked
 
I commented all the other code for the checboxes
 
$('body').on('click', '#options', function() {
if( $(this).is(':checked') )
{
$('.checkBoxes').each(function() {
$(this).prop('checked', true);
});
} else {
$('.checkBoxes').each(function() {
$(this).prop('checked', false);
});
}
});
this one must work
 
it removes again all the checkboxes
and showing no result
 
the last code doesn't remove
 
yeh but it removes here with me
 
4:50 PM
if it still remove that mean the js loaded from the cache
you need to perform ctrl+f5
to remove the cache
 
Yeah i did that and test it again but still the same result
 
What you mean by the same result
?
 
It has some connection with the search code because it shows me no result which is a message in the search code
I mean it still remove all the checkboxes and show me the no result message
 
our event must not touch the result in any way
show you no result mean another event trigger not the one we're working on
you must find it first
our event just check and uncheck
and has no connection with the result
 
yes
I also meant that
 
4:53 PM
it simple as you can see
ok then you need to remove the cache
and stops all the other JS codes
 
Can you take a look of the whole JS code. maybe i have something in the synatx
 
that may cause that
 
ok
let me do that
 
try to remove the last
});
and place if before the event
 
ok Sir. Its the thing i am telling you. It has some connection with search code because i commented the search code then its working fine
ok
 
4:55 PM
});
$('body').on('click', '#options', function() {
if( $(this).is(':checked') )
{
$('.checkBoxes').each(function() {
$(this).prop('checked', true);
});
} else {
$('.checkBoxes').each(function() {
$(this).prop('checked', false);
});
}
});
 
ok
After doing this. It again showing me the no result message and disappear all the checkboxes
 
if you remove all the code
 
It only wroks perfectly when i commented the search code
 
and add just
$('body').on('click', '#options', function() {
if( $(this).is(':checked') )
{
$('.checkBoxes').each(function() {
$(this).prop('checked', true);
});
} else {
$('.checkBoxes').each(function() {
$(this).prop('checked', false);
});
}
});
 
yeah after removing all the code of search then its working
 
4:59 PM
ok try to add the code again
 
but move our event to the top of the file
 
Again the same result sir :(
May I send you the html compiled code. So you can try that
?
 
5:27 PM
yes
send it and I'll check it later
 
ok
<div class="ml-4 mr-4 py-3">

		<h3 class="text-center display-4">Attendance Register</h3>

		<div class="my-3">
			<select name="class_id" class="form-control bg-dark text-white">

				<option value="">Select Class</option>


					<option value="1">10</option>


			</select>
		</div>

		<form method="post" action="/students/delete/attendance">

			<input type="hidden" name="_token" value="ykHqiY54PRIMHjwDmzl6KAnhSg9ZaJUxj7a1U0bc">

			<input type="hidden" name="_method" value="delete">


		<div class="filterable">
<script>

$(document).ready(function () {

//FOR LOADING STUDENTS
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});

$('select[name="class_id"]').on('change', function() {
var classID = $(this).val();
if (classID) {

$.ajax({

url: '/attendance/ajax/' + classID,
type: "GET",
dataType: "json",
success: function (data) {

var markup = '';
markup = '<thead><tr class="filters"><th style="width: 2%" class="align-middle text-center"><input type="checkbox" id="options"></th><th style="width: 15%" class="text-center">Student ID<input type="text" class="form
Tell me then if you want something more
 

« first day (6 days earlier)      last day (342 days later) »