Javascript not working to load message

[GhostElite_89]

So i have the following code in a main page and it works perfectly:

	<script src="assets/js/demo.js"></script>

	<script type="text/javascript">
    	$(document).ready(function(){

        	demo.initChartist();
				var username = "<?php echo $user; ?>";
        	$.notify({
            	icon: 'pe-7s-gift',
				
				
				
            	message: "Welcome to VendorBase Pro, <b>" + username + "</b>! New updates will be coming soon!"				
            },{
                type: 'info',
                timer: 4000
            });

    	});
	</script>

and I moved it and modified it to another page where, on click (php), it loads a database and executes. I've tested it with just firing off an alert message and it works flawlessly. I'm lost at where my error is.

	<script src="assets/js/demo.js"></script>
	<script type="text/javascript">
    	 function added(){

				demo.initChartist();
					var username = "test";
				$.notify({
					icon: 'pe-7s-gift',
					
					
					
					message: "Welcome to VendorBase Pro, <b>" + username + "</b>! New updates will be coming soon!"				
				},{
					type: 'info',
					timer: 4000
				});

    	});
	</script>

This code is placed at the top of a PHP page and here's the command

echo '<script type="text/javascript">added();</script>';

 

[requinix]

I see you changed the beginning of the code to be a named function. Did you change the end of the code to match?

[GhostElite_89]

3 hours ago, requinix said:

I see you changed the beginning of the code to be a named function. Did you change the end of the code to match?

I'm not sure I understand?

[requinix]

$(document).ready(function(){

became

function added(){

Right? You modified that line at the beginning of the code to turn it into a function. Did you also take a look at the end of the code to see if that needed anything modified too?

[GhostElite_89]

I fixed that mistake, but also changed my code to use Toastr. Now it does make it to the function (tested it with a generic alert("hello"); and it loaded but using the following does not work. Where did I go wrong?

 

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	 <script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.2/js/toastr.min.js">
	 
  <script type="text/javascript" src="assets/js/popper.min.js"></script>
  
  <script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
	<!--  Charts Plugin -->
	<script src="assets/js/chartist.min.js"></script>

    <!--  Notifications Plugin    -->
    <script src="assets/js/bootstrap-notify.js"></script>

    <!-- Light Bootstrap Table Core javascript and methods for Demo purpose -->
	<script src="assets/js/light-bootstrap-dashboard.js?v=1.4.0"></script>

	<!-- Light Bootstrap Table DEMO methods, don't include it in your project! -->
	<script src="assets/js/demo.js"></script>
	



  <!-- MDB core JavaScript -->
  <script type="text/javascript" src="assets/js/mdb.min.js"></script>
<script type="text/javascript">

		 $(function () {
			$('#add').click(function () {
					toastr.info("Folder 2 has been clicked!" );

					});
});
	</script>

 

[requinix]

Take a look at the syntax highlighting of the code you posted. In the first few lines, some of the highlighting is wrong. Can you see why?

[GhostElite_89]

I fixed the </script> missing but it's still not working.

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	 <script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.2/js/toastr.min.js"></script>
	 
  <script type="text/javascript" src="assets/js/popper.min.js"></script>
  
  <script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
	<!--  Charts Plugin -->
	<script src="assets/js/chartist.min.js"></script>

    <!--  Notifications Plugin    -->
    <script src="assets/js/bootstrap-notify.js"></script>

    <!-- Light Bootstrap Table Core javascript and methods for Demo purpose -->
	<script src="assets/js/light-bootstrap-dashboard.js?v=1.4.0"></script>

	<!-- Light Bootstrap Table DEMO methods, don't include it in your project! -->
	<script src="assets/js/demo.js"></script>
	



  <!-- MDB core JavaScript -->
  <script type="text/javascript" src="assets/js/mdb.min.js"></script>
<script type="text/javascript">

		 $(function () {
			$('#add').click(function () {
					toastr.info("Folder 2 has been clicked!", "Folder 2", );

					});
});
	</script>

 

[GhostElite_89]

EDIT: I got it working and wasn't loading the right CSS...