Welcome Guest, Not a member yet? Register   Sign In
Uncaught ReferenceError: $ is not defined - Datepicker - Codeigniter 3
#1

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.
Reply
#2

This is a jquery issue and not a codeigniter issue.

Make sure you have loaded your jquery.
Codeigniter is simply one of the tools you need to learn to be a successful developer. Always add more tools to your coding arsenal!
Reply
#3

(This post was last modified: 04-18-2019, 08:41 AM by hc-innov.)

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>
Reply
#4

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.
Reply
#5
Thumbs Up 

(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/h...l#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.
Reply




Theme © iAndrew 2016 - Forum software by © MyBB