Uncaught ReferenceError: $ is not defined - Datepicker - Codeigniter 3

Uncaught ReferenceError: $ is not defined - Datepicker - Codeigniter 3 - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Using CodeIgniter (https://forum.codeigniter.com/forumdisplay.php?fid=5)
+--- Forum: Model-View-Controller (https://forum.codeigniter.com/forumdisplay.php?fid=10)
+--- Thread: Uncaught ReferenceError: $ is not defined - Datepicker - Codeigniter 3 (/showthread.php?tid=73380)

Uncaught ReferenceError: $ is not defined - Datepicker - Codeigniter 3 - Porto - 04-18-2019

Hello Guys, Greetings!

First of all, thank you so much for the help!

Scenario:

1° I use codeigniter

2° I added this very simple script in my VIEW FILE.
(https://jqueryui.com/datepicker/#default)

3° This is the error message that i receive in the browser:

Code:
Uncaught ReferenceError: $ is not defined at VM113 info:21

(anonymous) @ VM113 info:21

This my controller method:

Code:
public function info()

{

    $data['pagetitle'] = 'general use';

    $this->load->view('theme/header1');

    $this->load->view('multiform/register2',$data);

    $this->load->view('theme/footer');

}

This my Header VIEW file: header1

Code:
<!DOCTYPE html>

<html lang="en">

<head>  

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Teste</title>

<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/testelib/jquery-ui.min.css">   

<script type="text/javascript" defer src="<?php echo base_url(); ?>assets/testelib/jquery-3.3.1.min.js"></script>

<script type="text/javascript" defer src="<?php echo base_url(); ?>assets/testelib/jquery-ui.js"></script>

<script>

    $( "#datepicker" ).datepicker({

    inline: true

    });

</script>

This my VIEW file: register2

Code:
<p>Date: <input type="text" id="datepicker"></p>

PS: If i try this example with "all files in the same folder", the script works normally.

Just because the .js and .css Links of the Jquery Libraries are in separeted files, i got this conflict.

What should i do please?

Is that even possible to call the Jquery Script when the HTML-Attributenode is in another file??

Jquery Script - Header File

Code:
<script>

    $( "#datepicker" ).datepicker({

    inline: true

    });

</script>

HTML-Attributenode - VIEW File

Code:
<p>Date: <input type="text" id="datepicker"></p>

I would be MEGA Thanksful if someone can help me with it.

RE: Uncaught ReferenceError: $ is not defined - Datepicker - Codeigniter 3 - albertleao - 04-18-2019

This is a jquery issue and not a codeigniter issue.

Make sure you have loaded your jquery.

RE: Uncaught ReferenceError: $ is not defined - Datepicker - Codeigniter 3 - hc-innov - 04-18-2019

If jou want to use base_url() helper , you must load the helper in your controller:

PHP Code:
$this->load->helper('url'); 

and try (with the first slah before assets):

Code:
<script type="text/javascript" defer src="<?php echo base_url(); ?>/assets/testelib/jquery-ui.js"></script>

RE: Uncaught ReferenceError: $ is not defined - Datepicker - Codeigniter 3 - dave friend - 04-18-2019

One problem might be the use of the "defer" attribute with the <script> elements. This means that jQuery won't load until after all the other html loads.

But this bit of code will try run as soon as the view is loaded.

Code:
$( "#datepicker" ).datepicker({inline: true});

Of course, it fails - jQuery hasn't loaded yet so $ is not defined.

Remove the defer attr from the <script> tags and see if that helps.

You might get new errors that we can address later.

RE: Uncaught ReferenceError: $ is not defined - Datepicker - Codeigniter 3 - Porto - 04-23-2019

(04-18-2019, 10:23 AM)dave friend Wrote: One problem might be the use of the "defer" attribute with the <script> elements. This means that jQuery won't load until after all the other html loads.

But this bit of code will try run as soon as the view is loaded.

Code:
$( "#datepicker" ).datepicker({inline: true});
Of course, it fails - jQuery hasn't loaded yet so $ is not defined.

Remove the defer attr from the <script> tags and see if that helps.

You might get new errors that we can address later.

Hello Guys, Thank you so much for your tipps, help and attention.

I think, until today i have made this wrong even that i've already read the whole C.I documentation.

There is a compatibility between those links format:

Code:
<?php echo base_url(); ?>assets/lib/jquery-3.3.1.min.js"

And this link format:

Code:
<?php echo base_url("assets/lib/jquery-3.3.1.min.js"); ?>"

The documentation says openly so, use the base_url like this:

1° echo base_url("blog/post/123");

2° echo base_url("images/icons/edit.png");

https://www.codeigniter.com/user_guide/helpers/url_helper.html#base_url

base_url with controllername, method and parameter INSIDE the (parentheses) and NOT OUTSIDE.

But, definitivily i removed the "defer" attr from the <script> tags and it runs!.

Thank you so much everyone, in special @Dave_Friend Idea

It works without any error.