JQuery Ui Laravel is not a function - javascript

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.

Related

jquery works in external js file but not in view blade

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>

Application.instanceInitializer is not a function

<!DOCTYPE html>
<html>
<head>
<title>Ember.js Application example</title>
<!-- CDN's -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
<script src="http://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/release/ember.debug.js"></script>
<script src="http://builds.emberjs.com/beta/ember-data.js"></script>
</head>
<body>
<!-- Your JavaScript -->
<script type="text/x-handlebars">
<!-- this is default application template -->
<h1>{{App.name}}</h1>
{{outlet}}
</script>
<script type="text/javascript">
//App is the object of the Ember.Application
//create() is the constructor of the Ember.Application
App = Ember.Application.create();
//App.name is the variable that holds the string values
App.name= "Hello... Welcome to TutorialsPoint";
</script>
</body>
</html>
I ran this.But Application.instanceInitializer is not a function in ember-initializer.js how solve this error?
You are including a version of Ember Data that is incompatible with the version of Ember you are using.
Quick fix:
Swap this:
<script src="http://builds.emberjs.com/beta/ember-data.js"></script>
For this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.15/ember-data.js"></script>
And the error will disappear and the app will do what it should.
What might be better is to find a more up-to-date tutorial and follow that.

Can't figure out how to directly insert HTML fragments into an HTML document using jQuery

I've checked as many questions as I can and the answer I keep getting is to use javascript or jQuery to do it. So I have my main html file:
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
<!-- I want to insert a paragraph here -->
<div id="a"></div>
<script>$( "#a" ).load( "insertme.html" );</script>
</body>
</html>
insertme.html
<p>Inserted into another doc!</p>
I found this method here, and as far as I can tell I've implemented it the same way.
So what am I doing wrong here? Why is my code not being inserted?
Firstly, you are missing jQuery. Add this line to your <head></head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
Do you have a DOM readiness issue?
Try this:
$(document).ready(function(){
$( "#a" ).load( "insertme.html" );
});
Also, make sure that insertme.html is in the same folder as your index.html file.

How do I call individual methods from a Javascript file

In the javascript assets file I have a jstester.js file like this:
function hehe()
{
alert("wedsdsd");
}
document.write("fdygsdfysdgf");
Then in the public index.html file I have this:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="/assets/jstester.js">
hehe();
</script>
</body>
</html>
So I thought that is how I can call a method from my Javascript file but looks like it is not working, no message box shows up... So what is the correct way of doing this?
If a <script> has a src then the text content of the element will be ignored.
so you can't do:
<script type="text/javascript" src="assets/jstester.js">
hehe();
</script>
but:
<script type="text/javascript" src="assets/jstester.js"></script>
<script>hehe();</script>
This is what you looking for:
<body>
<script src="/assets/jstester.js"></script>
<script type="text/javascript">hehe();</script>
</body>

Getting data from another file

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>

Categories