i am using Laravel v8 Livewire.
I have a blade with
<select name="event_id" id="event_id" size="" class="form-control" onchange="ChangeDescription">
the layout file has
</head>
<body>
#yield('content')
#stack('scripts')
#livewireScripts
</body>
And the blade has
#extends('layouts.layout')
#section('content')
#push('head')
<!-- Scripts -->
<script src="{{ asset('../../resources/js/ChangeDescription.js')}}"></script>
#endpush
<div class="container">
...
For testing purposes the function has only one line:
function changeDescription() {alert('changeDescription');}
According to W3Schools, (https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onchange),
the event should fire when one of the values is clicked.
So, what do I have to do to get the event to fire off?
Related
I am developing a single page application (SPA) using Laravel and VueJs. Where the index.blade.php page looks like:
<html>
<head>
<link rel="stylesheet" href="/css/app.css" />
</body>
<body>
<div id="app">
<layout></layout>
</div>
<script src="/js/app.js"></script>
</body>
</html>
The layout.vue component looks like:
<template>
<div>
<input type="text" #keyup="search" />
<router-view></router-view>
</div>
</template>
<script>
import router from 'router'
export default {
data() {
return {
popover: false
}
},
methods: {
search: function (e) {/*Ajax code to search*/}
}
}
</script>
Everything is working fine except slower page loading at first. I see a white page until javascript works. So I've decided to put some html code in index.blade.php. I want to put the html from layout.vue page to index.blade.php so that I can see the html layout before javascript loads. How can I properly merge layout.vue with index.blade.php so that #keyup method works?
See if you can find an alternative to this. I have a #stack('header_scripts') and I want to render from there multiple scripts like <scripts></scripts> in my website.
For example, this is my master_page.blade.php:
<head>
#stack('header_scripts)
</head>
And this is my index.blade.php:
<div class="promotion">
-45% DISCOUNT!
#push('header_scripts')
<script>
//show promotion and send data to Google Anlytics from here
</script>
#endpush
</div>
<div class="container>
//some products list here
#push('header_scripts')
<script>
//show all the products and send data to Google Anlytics
</script>
#endpush
</div>
Etc, etc.
The problem is that the last push to the stack overwrites the first push code.
How can I do this?
<head>
#stack('css')
</head>
<body>
#stack('js')
</body>
#extends('layouts.admin.app')
#section('title','Tag')
#push('css')
<link href="{{ asset('admin/plugins/jquery-datatable/skin/bootstrap/css/dataTables.bootstrap.css') }}" rel="stylesheet">
#endpush
#section('content')
#endsection
#push('js')
<script src="{{ asset('admin/plugins/jquery-datatable/jquery.dataTables.js') }}"></script>
#endpush
So basically I have this code where I click on the image, it gets html file and should display it on the same page. It does display it but on another page, my guess is that it's not actually loading js file for some reason. Anyone can help?
View:
#extends('layouts.master')
#section('title', 'Best programmer ever')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="{{asset('/js/template.js')}}" rel="javascript" type="text/javascript"></script>
#section('content')
#endsection
#section('template')
<!-- #foreach ($templates as $template)
{{$template->image}}
{{$template->file}}
#endforeach
-->
<div class= "template_class">
<a class="content-link" href="templates/template1.html">
<img id = "image" src="{{ asset($template->image )}}"/>
</a>
</div>
#show
JavaScript:
$(function(){
$('.content-link').click(function(e){
e.preventDefault();
$('.content').load(this.href)
.fail(function()( alert('Oops...something went wrong')));
});
});
alert("hello");
It doesn't even show alert so that's why I think it is not loading it.
The <script> tags are out of the #section sections.
Try changing it like this:
#section('content')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="{{asset('/js/template.js')}}" rel="javascript" type="text/javascript"></script>
#endsection
If it doesn't work, check if the JS files are really included in your browser. (Open the Chrome Dev Tools and check the DOM)
I am trying to use Turbolinks with my Laravel 5.2 application, there are some js errors, considering that some pages need extra JS. I can't figure out how to load the page specific JS what to load first(in the head section or after the content section ???)
here's my current master layout:
<!DOCTYPE html>
<html>
<head>
<title>#yield('title')</title>
<!-- Load CSS -->
#include('assets.css')
<!-------------->
<!-- Load jQuery -->
<script src="{{ URL::asset('js/jquery-2.1.4.min.js')}}"></script>
<script src="{{URL::asset('js/jquery.turbolinks.min.js')}}"></script>
<script src="{{URL::asset('js/jquery.address.js')}}"></script>
#yield('head')
<script src="{{ URL::asset('js/turbolinks.js')}}"></script>
<!----------------->
</head>
<body>
<!-- Load Navbar -->
#include('elements.html.navbartop')
<!----------------->
<div class="pusher">
<div id="content" class="ui main container" style="margin: 85px 0 50px 0">
<!-- Load Content -->
#yield('content')
<!------------------>
</div>
</div>
<!-- Load Footer -->
#include('elements.html.footer')
<!----------------->
<!---->
<script src="{{ URL::asset('js/semantic.min.js')}}"></script>
<!--------------------->
<script>
#include('ajax.search') // searchbar ajax
</script>
</body>
</html>
now a different page:
#extends('layout.master')
#section('title', 'Dashboard')
#section('head')
<script>
$(document).ready(function () {
$('element').dowhatever;
});
</script>
#endsection
#section('content')
....
#endsection
Instead of using $(document).ready event, you should use the turbolinks load event like this:
document.addEventListener("turbolinks:load", function() {
$('element').dowhatever;
});
Also you need to understand the way that Turbolinks 5 works, because load and evaluate any script on the initial page load and then append to the current head element.
I do recommend and advise calling JS scripts at the bottom of your page, your file should look like that:
<html>
<head>
<title>#yield('title')</title>
<!-- Load CSS -->
#include('assets.css')
<!-------------->
</head>
<body>
<!-- Load Navbar -->
#include('elements.html.navbartop')
<!----------------->
<div class="pusher">
<div id="content" class="ui main container" style="margin: 85px 0 50px 0">
<!-- Load Content -->
#yield('content')
<!------------------>
</div>
</div>
<!-- Load Footer -->
#include('elements.html.footer')
<!----------------->
<!---->
<!-- Load jQuery -->
<script src="{{ URL::asset('js/jquery-2.1.4.min.js')}}"></script>
<script src="{{ URL::asset('js/semantic.min.js')}}"></script>
<script src="{{URL::asset('js/jquery.turbolinks.min.js')}}"></script>
<script src="{{URL::asset('js/jquery.address.js')}}"></script>
#yield('head')
<script src="{{ URL::asset('js/turbolinks.js')}}"></script>
<!----------------->
<!--------------------->
<script>
#include('ajax.search') // searchbar ajax
</script>
</body>
</html>
Also load Semantics before Turbolinks.
I've a master layout like this:
<head>
#yield('styles')
</head>
<body>
#include('header')
<div class="container-fluid">
#yield('content')
</div>
#yield('scripts')
</body>
Now I've following structure in page content:
#section('content')
<div class="page-content">
#include('sidebarandfooter')
</div>
#endsection
#section('copyright')
#include('copyrightv2')
#endsection
Sidebarandfooter.blade.php have following:
...[CODE for sidebar]...
#yield('copyright')
It's should be called inside <div class="container-fluid"></div> as I've different class of div container for different pages.
I'm not able to yield the copyright part. I've different copyright section for different pages. Is it wrong, how can we execute such kind?
Unfortunattely it's imposible in way you declare it because this section:
#section('copyright')
#include('copyrightv2')
#endsection
been loaded before you call this: #include('sidebarandfooter') with copyright section inside.
What you can do is to pass a key as a parameter to view to the included page content partial like this:
#section('content')
<div class="page-content">
#include('sidebarandfooter', ['copyrightsView' => 'copyrightv2'])
</div>
#endsection
and then just call inside Sidebarandfooter.blade.php in the include:
...[CODE for sidebar]...
#include($copyrightsView)
change your master layout like
<head>
#yield('styles')
</head>
<body>
#include('header')
<div class="container-fluid">
#yield('content')
</div>
#yield('copyright')
#yield('scripts')
</body>
since i am not seeing a section for copyright in your master layout