I am using laravel 5.5. When i am using jquery in external js file it works but when i write jquery inside the blade view it gives an error: $ not defined or found. I also checked by writing jquery in the layout file after loading the app.js file, it works. Jquery is only not working inside the blade. Jquery works inside the blade when i load a jquery. But then how is it working in external js and layout even after not loading jquery. So my concern is if jquery is loaded by default in laravel why it is not working inside blade ?
Here is my blade content:
#extends('layouts.app')
#section('content')
<div class="container">
</div>
#endsection
<script type="text/javascript">
$(document).ready(function() {
alert('lol');
})
</script>
Your javascript code is outside any section, so it will not be rendered. A nice approach to rendering inline javascript in blade is to use #stack in your layout and then #push from any view extending the layout:
app.blade.php:
<html>
<head></head>
<body>
[...]
#yield('content')
[...]
<script src="jquery.js"></script>
#stack('scripts')
</body>
</html>
Your view (template.blade.php):
#extends('layouts.app')
#section('content')
<div class="container">
</div>
#endsection
#push('scripts')
<script type="text/javascript">
$(document).ready(function() {
alert('lol');
})
</script>
#endpush
Please, do understand:
This does work:
<html>
<header>
<script src="jquery.js"></script>
</header>
<body>
<script>
/* your js inline code here */
</script>
</body>
</html>
But a better solution is:
<html>
<header>
</header>
<body>
<script src="jquery.js"></script>
<script>
/* your js inline code here */
</script>
</body>
</html>
This will not work:
<html>
<header>
</header>
<body>
<script>
/* your js inline code here */
</script>
<script src="jquery.js"></script>
</body>
</html>
Related
I have laravel layout
<html> //layout.blade.php
<head>
<script src="/js/jquery.js"></script>
<script src="/js/jquery-ui.js"></script>
</head>
<body>
#yield("content")
</body>
</html>
And my view
#extends("layout")
#section("content")
<ul class="test">
<li>1</li>
<li>2</li>
</ul>
<script>
$(function() {
$(".test").selectable();
});
</script>
#endsection
My browser console always show me $(...).selectable is not a function
But if i make same without layout or without anonymous function this works
I think location is changed, because of route.
So you'd better to specify the correct url of "public" folder.
Please change like this.
<html> //layout.blade.php
<head>
<script src="{{URL::Asset('/js/jquery.js')}}"></script>
<script src="{{URL::Asset('/js/jquery-ui.js')}}"></script>
</head>
<body>
#yield("content")
</body>
</html>
As mentioned in the above question this kind of problem usually arises when you try to pass an argument or route variable. So it would be wise to use asset() or secure_asset() while using your resources in the page.
<html> //layout.blade.php
<head>
<script src="{{ asset('js/jquery.js') }}"></script>
<script src="{{ asset('js/jquery-ui.js') }}"></script>
</head>
<body>
#yield("content")
</body>
</html>
Also please check the network section of your browser to make sure your resources are loading perfectly.
I am trying to use share buttons from http://www.shareaholic.com, but I having issues with loading the buttons on elements loading asynchronously.
First of all, the following code works on a static page.
<html>
<head>
<script type='text/javascript'
src='//dsms0mj1bbhn4.cloudfront.net/assets/pub/shareaholic.js'
data-shr-siteid='000000000000000000000000000000000'
data-cfasync='false'
async='async'>
</script>
</head>
<body>
<! -- this loads fine -->
<div class='shareaholic-canvas' data-app='share_buttons' data-app-id='99999999'></div>
</body>
</html>
But if there is an element that loads asynchronously, it doesn't load the share buttons.
##### index.html ######
<html>
<head>
<script type='text/javascript'
src='//dsms0mj1bbhn4.cloudfront.net/assets/pub/shareaholic.js'
data-shr-siteid='000000000000000000000000000000000'
data-cfasync='false'
async='async'>
</script>
</head>
<body>
<!-- this section gets loaded after index.html loaded -->
<blog-content></blog-content>
</body>
</html>
##### blog-content.html #####
<template>
<!-- some blog content here -->
<div class='shareaholic-canvas' data-app='share_buttons' data-app-id='99999999'></div>
</template>
I am guessing that is because section gets executed before section finish loading, but I am not sure what would be the best way to handle this situation. I am using Aurelia.js as a framework.
The script tag that loads shareaholic.js has the async attribute so it will execute asynchronously and won't block the rest of the page load.
While shareaholic.js is loading aurelia has the opportunity to start up and replace the content of the <body> element with the aurelia app.
By the time shareaholic.js has loaded the "shareaholic-canvas" div no longer exists in the dom.
You might try creating a shareaholic custom element like this:
shareaholic.html
<template>
<script type='text/javascript'
src='//dsms0mj1bbhn4.cloudfront.net/assets/pub/shareaholic.js'
data-shr-siteid='000000000000000000000000000000000'
data-cfasync='false'
async='async'>
</script>
<div class='shareaholic-canvas' data-app='share_buttons' data-app-id='99999999'></div>
</template>
And then using the custom attribute like this:
app.html
<template>
<require from="shareaholic.html"></require>
<shareaholic></shareaholic>
</template>
<html>
<head>
<script type='text/javascript'
src='//dsms0mj1bbhn4.cloudfront.net/assets/pub/shareaholic.js'
data-shr-siteid='000000000000000000000000000000000'
data-cfasync='false'
async='async'>
</script>
</head>
<body>
<! -- this loads fine -->
<div class='shareaholic-canvas' data-app='share_buttons' data-app-id='99999999'></div>
</body>
</html>
I am trying to load a header and footer file into jQuery, so I wrote the following code:
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
$("#header").load("testheader.html");
$("#footer").load("testfooter.html");
});
</script>
</head>
<body>
<div id="header"></div>
<p> Hello World! </p>
<div id="footer"></div>
</body>
</html>
However, nothing loads from header and footer. I searched around StackOverflow and they talked about how if you import the wrong library you wouldn't get the load function properly. I tried to import different sources of jquery but nothing works. Please helpp!! Thanks!
I know by include <script type="text/javascript" src="scripts/jquery-1.10.2.js"></script> in HTML file, I can write in jQuery in this file directly. However, I am not working on a single file, thus, too much js code in the html doesn't look good. Can there be some method to use jQuery in js file? So I can put some common function in a standalone js file.
You can put your code in your own js file :
$(function() {
// your own code using the DOM
});
and then include this file just after the jQuery one :
<script src="scripts/jquery-1.10.2.js"></script>
<script src="myownfile.js"></script>
create a folder with the name js and inside put your js file for example main.js
your js file should start like : main.js
$(document).ready(function(){
//code here
});
note that you can use $(document).load(function() too
In your index.html put this in the footer like this : index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Your Website</title>
</head>
<body>
<!--============MAIN-CONTAINER============ -->
<section>
</section>
<!--============SIDEBAR=================== -->
<aside>
</aside>
<!--============FOOTER==================== -->
<footer>
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script src="js/main.js"></script>
</footer>
</body>
</html>
for the best performance.
alfernative
if you want to use it as
<script src="scripts/jquery-2.0.0.min.js"></script>
download this:
http://code.jquery.com/jquery-2.0.0.min.js
and put it into a new folder with the name scripts and replace
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
with
<script src="scripts/jquery-2.0.0.min.js"></script>
in your footer like this:
<footer>
<script src="scripts/jquery-2.0.0.min.js"></script>
<script src="js/main.js"></script>
</footer>
Of course you can use an external .js file, just add the required scripts files and their references onto your page plus add the external .js reference along with them.
//references in mail file
<script src="../Scripts/jquery-1.7.js" type="text/javascript"></script>
<script src="../Scripts/jquery-1.7.min.js" type="text/javascript"></script>
<script src="../Scripts/text.js" type="text/javascript"></script>
//External test.js file
$(document).ready(function () {
//your functions here
}); // Document Ready Closed
Just keep that tag for jquery and go ahead and make your own JS file with jquery code in it and include that too in the html page, It will work
I want to get the data which is in <script></script> tags on hello.html to index.html. How can i do that?
index.html:
<head>
<script>
// some codes
</script>
</head>
<body>
<div>
<!-- result will be come here -->
</div>
</body>
</html>
hello.html:
<html>
<head>
</head>
<body>
<script>
document.writeln("hello world");
</script>
</body>
</html>
edit: i want the "document.writeln("hello world");" part, it must be string.
save the script separately as myScript.js and then you can use it in both html files with the script include tag! <script src="myScript.js"></script>
Move the script into a new file, such as script.js, then add this to both files:
<script src="script.js"></script>