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)
Related
I have in my application a lot of generated reports with html tables, now I implemented with vuejs diagrams. But I can't get them rendered because they are in javacript.
$view = view('reports.single.print', ['stats' => $stats]);
$html = $view->render();
In normal browser mode everything is fine, but I need to get rendered html for print mode.
I tried with moving from bottom to <head>
<script type="text/javascript" src="{{ asset('assets/js/app.js') }}"></script>
but nothing changes.
My blade looks like:
<body>
#include('header')
HTML TABLE CONTENT
<diagram></diagram>
#include('footer')
<script type="text/javascript" src="{{ asset('assets/js/app.js') }}">
</body>
Can I render somehow also javascript with render() method?
I think you should try adding a closing tag (</script>).
Replace:
<script type="text/javascript" src="{{ asset('assets/js/app.js') }}">
with the following:
<script type="text/javascript" src="{{ asset('assets/js/app.js') }}"></script>
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
Im with some doubts about how to strucure the views folder on laravel. For example a blog site where we have this structure in the homepage:
Header (where we have a menu with: a link to homepage, search bar to search for posts, sign in and login buttons)
Then a section with the last 5 posts.
Then a section with the most viewed posts.
And then a footer.
How we can structure this homepage in terms of views? For example maybe we can something like this:
-views
- layouts
- header.blade.php
- footer.blade.php
- posts
- lastposts.blade.php
- mostviewed.blade.php
- single.blade.php
- layout.blade.php
Do you think its ok? Because Im testing this and it is not working. For example in the layout.blade.php I have:
<!DOCTYPE html>
<html lang="en">
<head>
....
<link href="css/app.css" rel="stylesheet">
</head>
<body>
#include('layouts.nav')
#yield('lastposts')
#yield('mostviewed')
#include(layouts.footer')
</body>
</html>
And I get the header and the footer when I access the page corretly, but the both #yields dont show nothing.
In the lastposts.blade.php to show the last 5 posts I have:
#extends('layout')
#section('lastposts')
<div>
<h4>Title</h4>
<p>Text</p>
</div>
</div>
<div>
<h4>Title</h4>
<p>Text</p>
</div>
</div>
<div>
<h4>Title</h4>
<p>Text</p>
</div>
</div>
<div>
<h4>Title</h4>
<p>Text</p>
</div>
</div>
<div>
<h4>Title</h4>
<p>Text</p>
</div>
</div>
#endsection
I have the same logic for the mostviewed.blade.php, but again, the #yield('mostviewed') dont show nothing.
Do you know what is not corret?
Routes file:
Route::get('/', function () {
return view('layout');
}
I have just this route because I just have the homepage for now.
You created the wrong view. The parent view is layout, it doesn't know about mostviewed and lastposts. That's why you wrote #extends('layout'), that way when you create your content view, it will know that it has to extend stuff from layout.
Route::get('/', function () {
return view('posts.mostviewed');
}
I have a maybe-noob question for those who know how works jQuery mobile in its core :)
I see on some websites an ajax-like navigation, but with an URL completely changed after load (I mean, no hash at the end).
For example : http://m.wengo.fr/accueil
=> click on any link, you'll see a loader, and after a little animation the new page is loaded ; but the URL has no hash, it's a real new URL.
Is the page really fully reloaded after a first ajax-load behind ?
I don't see how this magic is did on their framework...
Thanks ;)
--
Damien
This is a rather easy implementation.
Page changes should be handled programatically with changePage function (jQuery Mobile 1.4 and below) or pageContainer change (jQuery Mobile 1.4 and above).
Solution:
$.mobile.changePage("second.html", { transition: "slideup", changeHash: false });
What you need is changeHash set to false.
Example:
index.html
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script>
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#open-page', function(){
alert('sdfsd');
$.mobile.changePage("second.html", { transition: "slideup", changeHash: false });
});
});
</script>
</head>
<body>
<div data-role="page" id="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
<a class="ui-btn-right" id="open-page">Next</a>
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
second.html
<div data-role="page" id="second" data-theme="a" >
<div data-role="header">
<h3>
Second Page
</h3>
Back
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
Update:
Information you need has nothing to do with jQuery Mobile.
I showed you one solution which jQuery Mobile can actually do. But this solution will permanently show original HTML file name. This is because initial HTML page is loaded into the DOM and every other page is loaded into it. jQuery Mobile thus have full control over link name.
But this is not what mentioned page is using. It is using some kind of rewrite engine. By default, rewrite engine maps a URL to a filesystem path. However, it can also be used to redirect one URL to another URL (which is done here), or to invoke an internal proxy fetch. They are probably using Apache web server with mod_rewrite module turned on.
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.. :-)