I am new to Laravel5.6 . I added the JS files in Layout page like this
with jquery CDN
<script src="{{ asset('js/app.js') }}"></script>
#yield('script');
and in Child View added like this
#extends('layouts.client')
#section('content')
*Some HTML CODE Here*
#endsection
#section('script')
<script src="{{ asset('js/jquery.easing.js') }}" />
<script src="{{ asset('js/jqueryFileTree.js') }}" />
<script type="text/javascript">
$(document).ready( function() {
alert('hi');
});
</script>
#endsection
and when i look the source using F12 then i found
enter image description here
jqueryFileTree.js file is not showing in JS folder with other js in Network tab but in source, showing with black color(behave like simple text) unlike blue color link, shown in red circle.
Also doument.ready function not working. If i remove the both external js then ready function work well.
What going wrong ?, i am fail to catch.
Thank's in advance...
Related
I'm creating an app with Laravel 7 and I want to have common js files imported in the main layout and specific js file imported in each view, or use the script tag directly. My Code looks like this:
Layout body
<body>
<main>
#yield('content')
</main>
<script src="{{ asset('js/common.js') }}"></script>
#stack('script')
</body>
And one of the files looks like this:
#section('content')
<div class="game-version-list">
<ul>
#foreach ($list as $element)
<li>
{{ $element['text'] }}
<div>
<span class="info-btn" data-key="{{ $element['key'] }}">?</span>
<div class="game-info"></div>
</div>
</li>
#endforeach
</ul>
</div>
#endsection
#push('script')
{{-- <script src="{{ asset('js/common.js') }}"></script> --}}
<script>
const btns = document.querySelectorAll('span');
btns.forEach(element => {
element.addEventListener('click', getGameInfoMobile);
});
</script>
#endpush
When I load the page it tells me that the function getGameInfoMobile is not defined (the function is in the common.js file).
I've tried also to import the common file in the stack but there's no difference, it only works if I put evereything in the common.js file.
I don't what to import the all script file in the app.js and I really need this approach because there are a lot of function that I need to use multiple times. Anyone knows what I'm missing?
I've tried a few solutions on here already, but I just can't seem to make them work.
I have a Flask app that uses HTML combined with JavaScript to display a handful of web pages.
Right now, I still have some inline code (which also prevents me from setting a proper CSP-Header), namely <... onClick="function()">.
Right now my HTML looks like this:
<html>
<head>
<...other stuff...>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script type="text/javascript" src="{{ url_for('static', filename = 'admin.js') }}"></script>
</head>
<body>
<div class="topnav">
<b>Logout</b>
AdminView
Show TAN
</div>
<...other stuff...>
</body>
</html>
JavaScript like this:
bunchOfFunctions
function logout() {
window.location.replace(URL_SLO)
}
function adminView() {
window.location.replace(URL_ADMIN_BASE)
}
function tanView() {
window.location.replace(URL_TAN)
}
I have attempted to import the Script at the bottom of the HTML file and then add Eventlisteners like so:
document.getElementById("logout").addEventListener("click", logout)
But all that does is do nothing when I click on the buttons again, not even an error.
On a related note, it'd be cool if I could download the Axios script and use it locally, since, y'know, security. But when I merely copy the content of the link and try to integrate it that way, the imports don't work.
Edit: Copied the working version of the snippet, not the broken one.
It now only works in one script, the other one doesn't.
tan.html:
<html lang="en">
<head>
<... other stuff ...>
</head>
<body>
<div class="topnav">
<b>Logout</b>
{% if isAdmin %}
<b>AdminView</b>
{% endif %}
</div>
<... other stuff ...>
<script type="text/javascript" src="{{ url_for('static', filename = 'tan.js') }}"></script>
</html>
and the corresponding JS file:
function logout() {
window.location.replace(URL_SLO)
}
function adminView() {
const URL_ADMIN_BASE = URL_BASE + "api/adminsans/";
window.location.replace(URL_ADMIN_BASE)
}
function mount() {
...other stuff
document.getElementById('logoutButtonTAN').addEventListener('click', logout);
document.getElementById('adminViewButtonTAN').addEventListener('click', adminView);
}
window.onload = mount
other stuff...
onclick
The onclick attribute fires on a mouse click on the element.
getElementById
Get the element with the specified ID
You must use ID
document.getElementById('logout').addEventListener('click', function(e) {
e.preventDefault();
alert('logout');
});
<div class="topnav">
<b>Logout</b>
AdminView
Show TAN
</div>
I'm on making a websites that uses Laravel 5.5 and blade templating engine for the view.
It's working on most of the browsers both desktop and mobile. But when I do a testing on an old Android mobile, I am getting error. I have checked anywhere on Google but could't find any answer.
It seems that the blade view that extends this layout, cannot read the function from the template layout. It shows the error "function undefined", and even for variable that I declared on the layout template, all unreadable on the view that extends this layout, even js file.
layout.blade.php:
<script src="{{ asset('js/main.js') }}"></script>
<script type="text/javascript">
var main_url = "https://test.com";
function checkout(){
alert(0);
}
</script>
#yield('scripts')
page.blade.php:
#extends('layout')
#section('scripts')
<script type="text/javascript">
function buttonClick(){
checkout();
}
</script>
#endsection
main.js:
alert(main_url);
So, there's only one problem here, seems like the scripts that I have declared on the layout, are not rendered or something if we open it from old Android mobile browser.
The checkout function that I call on the buttonClick inside the page.blade.php is showing error undefined, and also the alert(main_url) that I call on the main.js file is shown undefined too.
Is there any suggestion for my problems?
#yield is for load content, So you should use stack and push for load js and css.
layout.blade.php:
<script type="text/javascript">
var main_url = "https://test.com";
function checkout(){
alert(0);
}
</script>
#stack('scripts')
page.blade.php:
#push('scripts')
<script type="text/javascript">
function buttonClick(){
checkout();
}
</script>
#endpush
Check more info push stack
May this can help you:
page.blade.php
#extends('layout')
#section('scripts')
#push
<script type="text/javascript">
function buttonClick(){
checkout();
}
</script>
#endsection
That's how javascript (and others too) works. Browser reads code from top to bottom.
Since you placed <script src="{{ asset('js/main.js') }}"></script> before var main_url = "https://test.com";, of course main_url in js/main.js is undefined.
You just need to aware with orders.
<script type="text/javascript">
var main_url = "https://test.com";
function checkout(){
alert(0);
}
</script>
<script src="{{ asset('js/main.js') }}"></script>
About buttonClick shows undefined, we don't have a clue, since you don't post your code, where you call it.
I have a folder 'test' in the root of my hosting. I downloaded a sorter plugin from http://tablesorter.com and uploaded 'jquery' folder in the 'test' folder i created. Then I made an html table in the index.html file in the 'test' folder.
I entered the below within the head tag
<script type="text/javascript" src="jquery/jquery-latest.js"></script>
<script type="text/javascript" src="jquery/jquery.tablesorter.js"></script>
Then I entered the following script within the head tag
<script>
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
</script>
In the table I entered
<table id="myTable" class="tablesorter" border="1" width="100%">
Still the sorter is not working... As far as I know, I followed proper instructions. What did i do something wrong?
MY path is public_html/mydomain.com/test
The the files under test folder is
jquery
index.html
The files under jquery folder is
jquery-latest.js
jquery.metadata.js
jquery.tablesorter.js
jquery.tablesorter.min.js
After playing with the code for a while i found the problem. I downloaded a bootstrap template and added a table to it and at the bottom, just before /body tag there are 3 paths
<script src="./js/jquery-1.10.0.min.js"></script>
<script src="./js/bootstrap/js/bootstrap.min.js"></script>
<script src="./js/script.js"></script>
If I remove this, the sorter works but then the website stops working. Any ideas???
I did a lot of juggling with the paths and I did not understand the logic but it worked.
This is what I did
I kept the following in head tag
<script type="text/javascript" src="jquery/jquery-latest.js"></script>
<script type="text/javascript" src="jquery/jquery.tablesorter.js"></script>
I kept one more instance of the following in before /body end tag
<script type="text/javascript" src="./js/jquery-latest.js"></script>
<script type="text/javascript" src="./js/jquery.tablesorter.js"></script>
and placed both the files in both the folders /jquery and the default /js folder included in the website template
Phew!
I'm trying to figure out if there is a way (using JavaScript, or jQuery) to go through an entire HTML file replacing all references to external files and replace all the references to files in other directories with the same named file, but without directory information.
For instance, in the HTML text:
scripts/script.js gets replaced with script.js
images/big.jpg gets replaced with big.jpg
css/style.css gets replaced with style.css
etc.
I guess the references in the CSS files need changing too.
The code below is very messy, it would be neat, but I hope you resolve what you need.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script language="JavaScript">
$(function(){
$("*", $("#container")).each(function()
{
try
{
//src
if ($(this).attr("src"))
if ($(this).attr("src").lastIndexOf("/")!=-1)
$(this).attr("src", $(this).attr("src").substr($(this).attr("src").lastIndexOf("/")+1) );
//href
if ($(this).attr("href"))
if ($(this).attr("rel"))
if ($(this).attr("rel")=="stylesheet")
if ($(this).attr("href").lastIndexOf("/")!=-1)
$(this).attr("href", $(this).attr("href").substr($(this).attr("href").lastIndexOf("/")+1) );
}
catch(ex)
{
$("#lstError").append("<div>"+ex.description+"</div>");
}
});
});
</script>
</head>
<body>
<div id="lstError"></div>
<div id="container">
<!-- your html -->
<link rel="stylesheet" href="pepe/all.css">
<img src="lele/bl.png" />
<img src="lele/b.png" />
</div>
</body>
</html>
What about your browser's Save Page as...?