Canvas Support

Data table css blocking JS?

10 replies · opened Sep 2, 2019

RrdetwilerSep 2, 2019

Hi Canvas,

I'm using the data table. I like it, but my "select all" button no longer works. At first I thought I broke it. But the same script framed in a different table works just fine.

Is the css blocking the JS?

Please let me know what you advise.

Thanks

`$content .="
<div class="table-responsive">

<table class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>NAME</th>
<th>Q TITLE</th>
<th>Q SCORE</th>
<th>DATE</th>
<th><input type="checkbox" name="CheckAll" onclick="SelectAll()" /> SELECT ALL</th>
</tr>
</thead>
<tbody>

";

Again, the select all box DID previously work. It's only when I frame it in this Canvas table that it doesn't work. I'm not sure how, or why or what is happening. Thank you for your help.

RrdetwilerSep 2, 2019

here's a screenshot..

There isn't a problem with the js or the placement of the js. It works when in other table.

SSemicolon WebSTAFFSep 3, 2019

Hello,

Apologies about the Inconveniences caused!

Can you please provide us with a Live URL so that we can check out the exact issue for this and provide you with more assistance. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

RrdetwilerSep 3, 2019

Hi Canvas,

Yes. Thank you for your help.

Click here and login with:
https://www.eslvideo.com/anew/login.php

email: canvas@canvas.com
password: canvas

Then click here:
https://www.eslvideo.com/anew/acc_scores1.php

There should be a green button in the last column/top row of the table that says "Select all." That button doesn't display.
You also see in the source code that the JS for this is at the bottom of the page above the </body> tag.

I'm attaching a picture of what this looks like on the live site -- I'm in the process of updating the live site with the canvas theme. You'll see the green button in the attached reference.

Please let me know if I can provide further details. Thank you again for your help.

SSemicolon WebSTAFFSep 4, 2019

Hello,

We have checked your Codes and the issue appears top be with the: https://www.eslvideo.com/css/oxford-dictionary.js and https://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5bcfd1e5d007fc42 Plugins that are throwing JS Errors on the Page which is preventing the JS Codes that are followed from executing correctly which is why the Button does not work as expected. Consider deleting the above plugins and check again, if this still does not work, let us know and we will surely check further. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

RrdetwilerSep 4, 2019

Hi Canvas,

I removed those js scripts as suggested and checked again, but it still does not work. Yes I would really appreciate it if you could check further and help solve this.

thank you very much

RrdetwilerSep 4, 2019

not yet resolved

RrdetwilerSep 4, 2019

Hi Canvas,

Will you be able to take a look at this today?

RrdetwilerSep 5, 2019

Hi Canvas,

Will you be able to take a look at this again today?

SSemicolon WebSTAFFSep 5, 2019

Hello,

It appears that thee is conflict with the .check Class. Consider changing the class to .check-button and then use the following JS Codes replacing your old codes: 

jQuery( document ).ready( function($){
	$( '.check-button' ).on( 'click', function(){
		if( $( this ).hasClass( 'all-checked' ) ) {
			$( 'input:checkbox' ).prop( 'checked', false );
			$( this ).removeClass('all-checked').val( 'Check All' );
		} else {
			$( 'input:checkbox' ).prop( 'checked', true );
			$( this ).addClass('all-checked').val( 'Uncheck All' );
		}

		return false;
	});
});

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

RrdetwilerSep 5, 2019

Thank you so much. Yes it worked. I would have never figured that out. Thank you very much for taking the time to investigate and solve the problem. You guys are fantastic.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard