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?
Related
here is my code for that
<template>
<div>
<h1><b>Add Employee</b></h1>
<h2><b>Add Employee</b></h2>
<h3><b>Add Employee</b></h3>
<h4><b>Add Employee</b></h4>
<h5><b>Add Employee</b></h5>
</div>
</template>
<script type="text/javascript">
export default {
}
</script>
<style scoped type="text/css">
</style>
this is the result
how to fix this? some explain why its happen
So I have tried to fix this in multiple different ways and I know Vuetify is updated because I have reinstalled it in NPM before I used it.
I have some screenshots of the current problem but the weird part is its working in another project I am using and its running the same libraries.
https://i.imgur.com/UXK9DiB.png
https://i.imgur.com/ZoRl7e8.png
Code for uncolored component
<html>
<head>
<title>XRPLife Interfaces</title>
<link rel="stylesheet" href="libraries/vuetify/dist/vuetify.min.css">
</head>
<body>
<v-app>
<div id="test">
<v-text-field label="Testing" v-model="test"></v-text-field>
</div>
</v-app>
<script src="libraries/vue/dist/vue.min.js"></script>
<script src="libraries/vuetify/dist/vuetify.min.js"></script>
<script>
var app = new Vue({
el: "#test",
data: {
test: "",
},
methods: {
}
})
</script>
</body>
How it works with the SAME library but just a different project
https://i.imgur.com/86TNKfO.png
You have an incorrect nesting of HTML tags for the application. Try this:
<div id="test">
<v-app>
<v-content>
<v-container>
<v-text-field label="Testing" v-model="test"></v-text-field>
</v-container>
</v-content>
</v-app>
</div>
[ https://jsfiddle.net/ga8kpzp0/ ]
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 need fadeout a div in my page using prototype. How can I fadeout following jquery code in prototype?
$('.exercise-main .content .loading-failure').fadeOut(function(){
//my code
}
I think you will need to use script.aculo.us (which is an excellent add-on to the fantastic prototype.js) so as to achieve the Fade effect.
Basic Syntax
new Effect.Fade('id_of_element', [options]);
OR
new Effect.Fade(element, [options]);
Complete Code.
<html>
<head>
<title>script.aculo.us examples</title>
<script type="text/javascript"
src="/javascript/prototype.js"></script>
<script type="text/javascript"
src="/javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript">
function FadeEffect(element){
new Effect.Fade(element,
{ duration:1});
}
function ShowEffect(element){
new Effect.Appear(element,
{duration:1, from:1.0, to:1.0});
}
</script>
</head>
<body>
<div onclick="FadeEffect('hideshow')">
Click me to fade out the image
</div>
<br />
<div onclick="ShowEffect('hideshow')">
Click me to display the image once again
</div>
<br />
<div id="hideshow">
<img src="/images/scriptaculous.gif" alt="script.aculo.us" />
</div>
</body>
</html>
Tutorial link - http://www.tutorialspoint.com/script.aculo.us/scriptaculous_fade_effect.htm
I myself have used prototype.js and this add-on very heavily so just in case you face any issue, feel free to comment.. :-)