I am trying to define my page specific Javascript in my blade file by defining a separate section for it in the file. I can add the same jQuery code in the app.js file and it works without issue, but when I put it in the blade file I get an error of
Uncaught ReferenceError: $ is not defined
Layout file - app.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<script src="{{ asset('js/app.js') }}" defer></script>
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body class="fixed-nav sticky-footer bg-dark" id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<!-- Nav Stuff -->
</nav>
<!-- End Navigation -->
<!-- Body -->
<div class="content-wrapper">
<div class="container-fluid">
#yield('content')
</div>
<footer class="sticky-footer">
<!-- footer stuff -->
</footer>
</div>
#yield('script')
</body>
</html>
Content Page - page1.blade.php
#extends('layouts.app')
#section('content')
<div class="container">
<!-- Page Stuff -->
</div>
#endsection
#section('script')
<script>
$(document).ready(function()
{
alert('hello world');
});
</script>
#endsection
I would prefer not to put all of my Javascript in the single app.js file, I would like to be able to use this section fine. Straight Javascript works fine here, but the jQuery does not.
edit:
Here is the app.js file that includes the jQuery library.
require('jquery');
require('./bootstrap');
require('jquery-easing');
// Administration Controller - Add System Type -> This code works just fine.
var numSysDataRows = 5;
$('#add-customer-information').click(function()
{
$('#system-customer-information').append('<div class="form-group"><label for="col'+numSysDataRows+'">System Data:</label><input type="text" name="col[]" id="col'+numSysDataRows+'" class="form-control" /></div>');
numSysDataRows++;
});
If I look at the source code and check the app.js file from the web server, I do see that jQuery is loaded into the app.js file.
Laravel loads jQuery by default, so it will be there unless you removed it from your complied app.js (running an npm commands to compile from your assets). The issue is that you are deferring this script. jQuery is being loaded after the page JavaScript is run.
Try removing the defer command.
If that doesn't work, see if jQuery is in your app.js file. If not, use a cdn or copy it to your public folder.
You don't need to remove "defer" from <script src="{{ asset('js/app.js') }}" defer></script>.
Paste jquery script tags below app.js then,
install npm
remove vue template in resouces/js/app.js
type "npm run dev" and hit enter
repeat #3 2 times
Then no Uncaught ReferenceError: $ is not defined will appear
NPM
Yes, I added jquery script tags
Jquery script tags
Remember that in the case that you are using the jquery CDN, you can try to put it in your head tag, I had that same problem and I have been able to solve it this way
I don't see you add file bootstrap and jquery. Have you added jQuery and Bootstrap file yet?
If not you can see in here : jquery Bootstap
Related
I'm getting the error shown below from jquery when I try to used from a web page in a nested directory. How do I prevent this error.
This is what the directory structure looks like. (Using <script src="/fhir-to-omop/site_libs/jquery-1.11.3/jquery.min.js"></script> from the circled index page works)
I've tried referencing jquery using each of these from the circled StartHere.html page:
<script src="../../../../site_libs/jquery-1.11.3/jquery.min.js"></script>
OR
<script src="/fhir-to-omop/site_libs/jquery-1.11.3/jquery.min.js"></script>
This is the error I'm getting
jquery.min.js:5 GET https://nachc-cad.github.io/fhir-to-omop/pages/navbar/getting-started/start-here/site_libs/jquery-1.11.3/jquery.min.js?_=1646571234525 404
EDIT: Per the question in the comments: I am loading JQuery twice as shown below.
In the main file:
<html>
<head>
<!-- favicon link -->
<link rel="shortcut icon" type="image/x-icon" href="../../../../favicon.ico">
<!-- include lib code -->
<script src="../../../../site_libs/jquery-1.11.3/jquery.min.js"></script>
<div id="headerInclude"></div>
<script>$("#headerInclude").load("/fhir-to-omop/header.html");</script>
</head>
<body>
<div class="container-fluid main-container">
<!-- navbar -->
<div id="navbarInclude"></div>
<script>$("#navbarInclude").load("/fhir-to-omop/navbar.html");</script>
...
</div>
</body>
</html>
And then this exists at the top of the loaded navbar.html:
<!-- navbar -->
<head>
<!-- include lib code -->
<script src="site_libs/jquery-1.11.3/jquery.min.js"></script>
</head>
I did read a lot of the same questions and I did try all of them, but here is the problem. Be easy on please, I use PHP include on the index file to do it, but Plesk told me I will break the hosting server and I must use HTML index file.
I call the jQuery like this inside the head:
<!doctype html>
<html lang="en">
<!-- Head start -->
<head>
<title>Advertron ISP - Placeholder</title>
<!-- Custom stylesheets -->
<link href="https://fonts.googleapis.com/css?family=Ubuntu:400,700&display=swap" rel="stylesheet"/>
<!-- Advertron ISP CSS -->
<link rel="stylesheet" href="css/advertronisp.css"/>
<!-- Custom font kit -->
<script src="https://kit.fontawesome.com/f6b2049012.js" crossorigin="anonymous"></script>
<!-- jQuery for replacing content on main html page -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
$("#header").load("templates/header-top.html");
$("#main").load("main.html");
$("#footer").load("footer.html");
});
</script>
</head>
<!--/ Head ends -->
<body>
<!-- Body start here -->
<div class="grid-container">
<!-- Header start here -->
<div id="header"></div>
<!--/ Header ends -->
<!-- Main content -->
<div id="main"></div>
<!--/ Main content ends -->
<!-- Footer start here -->
<div id="footer"></div>
<!--/ Footer ends -->
</div>
<!--/ Body ends-->
</body>
</html>
This work and then only load the header-top.html file, but the moment I insert (templates/) where I call from the folder before (main.html) or (footer.html)
Then it doesn't load and stop by searching kit.fontawesomesome.
I'm using my localhost as testing server and I'm on Linux and Apache server is running.
Then, I also like to replaceWith() when someone clicks on a link or tab inside the main.html file an element div on the main.html must be replaced with other content.
I read that I can use XML or ajax or jQuery to do it, but all my trying to do it just doesn't work. After I can solve the first issue then maybe that will solve the second issue too.
Blessings
Christo
I found a solution in https://www.w3schools.com/howto/howto_html_include.asp to address the problem to load header, main, and footer HTML files from folder to index HTML file.
It's much faster and it works. So if anyone else looking to do it, use the solution in W3Schools.
Blessings
Christo
I have the following laravel layout template:
<html lang="en">
<head>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link href="{{ URL::asset('css/libs.css') }}" rel="stylesheet">
<link href="{{ URL::asset('css/app.css') }}" rel="stylesheet">
#yield('styles')
#yield('scripts.header')
</head>
<body>
<div id="app">
<div class="main-container">
<div class="ad ad-leaderboard hidden-xs">
<script>
function onSubmit(token) {
$("#register-form").submit();
}
</script>
</div>
#include('layouts.partials.header')
<div id="main">
#yield('content')
</div>
#include('layouts.partials.footer')
</div>
</div>
<!-- Jquery, Bootstrap, Moment, DatetimePicker, Sweetalert, Select2 -->
<script src="{{ URL::asset('js/libs.js')}}"></script>
<!-- Custom -->
<script src="{{ URL::asset('js/app.js')}}"></script>
#yield('scripts.footer')
</body>
</html>
In <script src="{{ URL::asset('js/app.js')}}"></script> I have the following to set up Vue:
const app = new Vue({
el: '#app'
});
Now I have some google add scripts I want to include within my content but I get
[Vue warn]: Error compiling template: error in console.
I only use Vue components on a few pages so should I move the vue declaration above out of app.js and move to the dedicated pages or is there a better alternative to organize this so that I can keep the declaration in the main layout page without having to keep repeating it on separate pages yet still have the ability to inline javascript?
This is because of the <script> tag inside your #app div.
<script>
function onSubmit(token) {
$("#register-form").submit();
}
</script>
You should move this to the end of the document with the other JS.
EDIT
Alternatively, you might look at something like this to allow you to add scripts to Vue components.
https://github.com/TheDynomike/vue-script-component
Then you could create a Vue component for each ad script, which you could drop into the page where you need it.
If I copy the code from W3Schools to my webserver then the "sticky" menu works as long as I am referencing the CDN path for the script and
stylesheet.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
If I change it to the location of the Bootstrap files that I have downloaded to the server then it doesn't work, although all other bootstrap
styles and javascript functions work when referencing the local files. I have tried downloading the latest from Bootstrap as well.
Sorry as I am probably missing something obvious, but is it possible to download the function and styles necessary for this to work?
i suggest try this: first you need set your static files in this case Bootstrap(css, js, etc):
static
....Bootstrap
......CSS
.........bootstrap.min.css
......JS
.........jquery-3.3.1.slim.min.js
.........popper.min.js
.........bootstrap.min.js
....etc
..etc
in this case we has the posible structure folder for static into this folder put the folder that content css an js files of bootstrap.
the next is set your links for css and js files in you template similar to this:
{% load staticfiles %}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{% static 'Bootstrap/css/bootstrap.min.css' %}">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="{% static 'Bootstrap/js/jquery-3.3.1.slim.min.js' %}"></script>
<script src="{% static 'Bootstrap/js/popper.min.js' %}"></script>
<script src="{% static 'Bootstrap/js/bootstrap.min.js' %}"></script>
</body>
</html>
now you need this on your settings.py:
..
..
..
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
'/static/',
]
...
..
that is all for load bootstrap or other static files in yout template, please try and good luck.
For download Bootstrap4 , 3..etc.. go to the official website:
Official site Bootstrap
I have the following Javascript/jQuery on my page:
<script>
$("#mymarkdown").load("./LPInfo.md");
var md = markdown.toHTML($("#mymarkdown").html());
$("#mymarkdown").html(md);
</script>
That page is here:
http://www.nickhodges.com/LeanTed/bootstrap/about.html
The page uses bootstrap. I've looked and see no errors in the console when rendering the code.
As you can see, it is not doing what I want, which is using markdown.js to render the contents of a file into HTML.
Here's the weird part, and the root of my question:
If I open the page as a local file, Chrome does nothing. IE9 will open and properly render the page, but only after I give permission to run the script.
Both browsers fail to render the page correctly using the above link. Firefox has the same result.
I confess to being pretty much of a n00b on all this, but I'm at a loss to explain the inconsistent behavior. I understand that the code is accessing a local file, but that shouldn't be a problem when accessed via the web server, right?
Anyway, and help will be appreciated.
UPDATE:
Here's the code for the page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>LeanTed Markdown Editor</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="../assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">LeanTed Markdown Editor</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Home</li>
<li class="active">About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<div id="mymarkdown"></div>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-alert.js"></script>
<script src="../assets/js/bootstrap-modal.js"></script>
<script src="../assets/js/bootstrap-dropdown.js"></script>
<script src="../assets/js/bootstrap-scrollspy.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/bootstrap-tooltip.js"></script>
<script src="../assets/js/bootstrap-popover.js"></script>
<script src="../assets/js/bootstrap-button.js"></script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-carousel.js"></script>
<script src="../assets/js/bootstrap-typeahead.js"></script>
<script src="markdown.js"></script>
<script>
$("#mymarkdown").load("./LPInfo.md");
var md = markdown.toHTML($("#mymarkdown").html());
$("#mymarkdown").html(md);
</script>
</body>
</html>
The problem is that you're trying to run markdown.toHTML on the contents of #mymarkdown before it has fully loaded into the DOM (load being asynchronous). Use the "complete" callback of load and it works:
$("#mymarkdown").load("./LPInfo.md", function() {
var md = markdown.toHTML($("#mymarkdown").html());
$("#mymarkdown").html(md);
});
(The reason it works locally is probably because lpinfo.md is loaded near-instantaneously, either because 1. an Ajax call to the localhost is extremely fast, or 2. your browser already has the file from localhost cached.)
Do it like so:
$(function () {
$.get( './LPInfo.md', function ( data ) {
$( '#mymarkdown' ).html( markdown.toHTML( data ) );
});
});
So, the code is inside a DOMContentLoaded handler to make sure that the DOM is ready (since you're injecting content into it). Also, $.get is the appropriate retrieval mechanism here. You're doing a .load() which doesn't make much sense in your situation.
What you're doing with .load():
getting the MD file via Ajax,
inserting its contents into the DOM,
retrieving that content from the DOM,
processing the content with Markdown,
inserting the resulting HTML source code into the DOM.
What my code is doing:
getting the MD file via Ajax,
processing its contents with Markdown,
inserting the resulting HTML source code into the DOM.
Have a look at this or that question on how to enable local file system access via XHR.
Your actual problem is that .load() does only start the asynchronous load of the file. But even before it is loaded, you get the HTML content (likely empty?) and render it as markdown. Soon after, the element will get overwritten from the ajax callback. Use the callback parameter!
And don't use load at all if you are not loading HTML. jQuery has a powerful ajax function on which you even could set up a Markdown2html converter which is automatically used when a markdown file is served and html is wanted:
$.ajaxSetup({
accepts: {
"markdown": "text/x-markdown" // MIME type
},
contents: {
"markdown": /markdown/ // MIME type matcher
},
converters: {
"markdown html": markdown.toHTML
}
});
But for your purpose, just use a simple .ajax call:
$.ajax("./LPInfo.md").done(function(md) {
$(function() {
$("#mymarkdown").html(markdown.toHTML(md));
});
});