KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines

Jquery $ is not defined #1165

Open Jason opened this topic on on Nov 18, 2019 - 10 comments

Jason commented on Nov 18, 2019

Why is it any time i try to do something like this... I get the error $ is not defined. I try using \koolreport\clients\Bootstrap;, or \koolreport\clients\jquery and neither one works. I inspect my rendered html and i see in the head section where it references jquery.min.js but acts like its not there when i try to perform something in jquery.

	<script type="text/javascript" >
		  $( function() {
			$( "#stockReportList" ).draggable();
		  } );

	</script>
KoolReport commented on Nov 18, 2019

May I see your page online. Please share to support@koolreport.com if you want to keep private.

Jason commented on Nov 18, 2019

It is not live on the web currently for IP and other reasons, i can paste snippets of code if that would help resolve the issue however.

Jason commented on Nov 18, 2019

Just let me know what you need

KoolReport commented on Nov 19, 2019

Yes, may you post some code for us to understand the situation.

Jason commented on Nov 19, 2019

In my report.view.php file, the beginning looks like this, and i have also tried jQuery vs Bootstrap to no avail.

If i try to implement any basic jquery reference($) i get a console error saying:

Uncaught ReferenceError: $ is not defined
at (index):8

HERE is the section in question in my Report.view.php file.

<?php 
    use \koolreport\clients\Bootstrap;
    use \koolreport\widgets\koolphp\Card;    
?>
<html>
	<head>
		<script type="text/javascript" >
				$("#cards20").draggable();
		</script>
	</head>
	<link rel="stylesheet" type="text/css" href="/reports/reports.css">
	<body style="margin:0.1in 0.1in 0.1in 0.1in">
	</body>
</html>

HERE is my Report.php file.

<?php

require_once  $_SERVER['DOCUMENT_ROOT']."/koolreport/core/autoload.php";
require_once  $_SERVER['DOCUMENT_ROOT']."/reports/connect.php";
require_once  $_SERVER['DOCUMENT_ROOT']."/reports/tagAddresses.php";

GLOBAL $config;

class Report extends \koolreport\KoolReport
{
	use \koolreport\amazing\Theme;
    use \koolreport\clients\Bootstrap;
	

     public function settings()
    {
		GLOBAL $config;
        return array(
            "dataSources"=>array(
                "accutrack"=>array(
                    "connectionString"=>"mysql:host=".$config["dbhost"].";dbname=".$config["dbname"],
                    "username"=>$config["dbuser"],
                    "password"=>$config["dbpw"],
                    "charset"=>$config["charset"]
                )
            )
        );
    } 

}
?>
Jason commented on Nov 19, 2019

Do you implement jQuery UI default as part of the jQuery include?

I see the jquery-ui.min.js file in the core/src/clients/jquery directory, but do not see it in the header section of the rendered code?

KoolReport commented on Nov 19, 2019

I understand the issue now. could you please add jQuery to the class file, not the view.

Jason commented on Nov 19, 2019

In response, If i do this, i get the same error.

Report.view.php file.

<?php 
    use \koolreport\widgets\koolphp\Card;    
?>
<html>
	<head>
		<script type="text/javascript" >
				$("#cards20").draggable();
		</script>
	</head>
	<link rel="stylesheet" type="text/css" href="/reports/reports.css">
	<body style="margin:0.1in 0.1in 0.1in 0.1in">
	</body>
</html>

HERE is my Report.php file.

<?php

require_once  $_SERVER['DOCUMENT_ROOT']."/koolreport/core/autoload.php";
require_once  $_SERVER['DOCUMENT_ROOT']."/reports/connect.php";
require_once  $_SERVER['DOCUMENT_ROOT']."/reports/tagAddresses.php";

GLOBAL $config;

class Report extends \koolreport\KoolReport
{
	use \koolreport\amazing\Theme;
        use \koolreport\clients\jQuery;
	

     public function settings()
    {
		GLOBAL $config;
        return array(
            "dataSources"=>array(
                "accutrack"=>array(
                    "connectionString"=>"mysql:host=".$config["dbhost"].";dbname=".$config["dbname"],
                    "username"=>$config["dbuser"],
                    "password"=>$config["dbpw"],
                    "charset"=>$config["charset"]
                )
            )
        );
    } 

}
?>
Jason commented on Nov 19, 2019

If i remove the kool report use \koolreport\clients\jQuery from each file, and reference the files manually in the view...

<script src="/koolreport/core/src/clients/jquery/jquery.min.js"></script> <script src="/koolreport/core/src/clients/jquery/jquery-ui.min.js"></script>

It works, but not when using the

\koolreport\clients\jQuery

referencing.

hlipperjohn commented on Sep 1, 2020

Basically $ is an alias of jQuery() so when you try to call/access it before declaring the function, it will endup throwing this $ is not defined error . This usually indicates that jQuery is not loaded and JavaScript does not recognize the $. Even with $(document).ready , $ is still going to be undefined because jquery hasn't loaded yet.

To solve this error:

Load the jQuery library at the beginning of all your javascript files/scripts which uses $ or jQuery, so that $ can be identified in scripts .

Build Your Excellent Data Report

Let KoolReport help you to make great reports. It's free & open-source released under MIT license.

Download KoolReport View demo
bug

None