I'm building an upload function (with laravel) to my webapp with dropzone. (dropzone.com).
But I don't see the upload square that should be there.
This is my main master.blade:
<html>
<head>
<title> #yield('title') </title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Include roboto.css to use the Roboto web font, material.css to include the theme and ripples.css to style the ripple effect -->
<link href="/css/roboto.min.css" rel="stylesheet">
<link href="/css/material.min.css" rel="stylesheet">
<link href="/css/ripples.min.css" rel="stylesheet">
<link href="/css/custom.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/dropzone.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
#include('standaard.navbar')
#yield('content')
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="/js/dropzone.js"></script>
<script src="/js/ripples.min.js"></script>
<script src="/js/material.min.js"></script>
<script>
$(document).ready(function() {
// This command is used to initialize some elements and make them work properly
$.material.init();
});
</script>
</body>
</html>
And this is my dropzone page:
#extends('standaard.master')
#section('name', 'Uploadcenter')
#section('content')
<div class="container col-md-6 col-md-offset-3">
<div class="jumbotron">
<h1>UploadCenter</h1>
<p>Hier kunt u eenvoudig en snel bestanden met ons delen. U hoeft het er alleen maar in te slepen!</p>
<p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
<div class="well well bs-component">
<div class="bs-component">
</div>
<form action="/{{ $user->id }}/files" method="post" class="dropzone" id="my-awesome-dropzone">
{!! csrf_field() !!}
</form>
</div>
</div>
#endsection
But I only see this:
What am I doing wrong?
Related
I'm trying to add a custom UI to my Laravel 9 app. So I'm adding extra CSS and JS files to my app.blade.php But looks like its not loading properly.
As you can see http://127.0.0.1:8000/css/tailwind.output.css and http://127.0.0.1:8000/js/init-alpine.js files not loaded. But when i check default http://127.0.0.1:8000/css/app.css file. Its working. But both of these files resides in the same location, which is resources/css/ and resources/js/ folders. Why those custom css and js files not loaded.
<!DOCTYPE html>
<html :class="{ 'theme-dark': dark }" x-data="data()" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="{{ asset('css/tailwind.output.css') }}">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.x.x/dist/alpine.min.js"defer></script>
<script src="{{ asset('js/init-alpine.js') }}" defer></script>
#livewireStyles
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body class="font-sans antialiased">
<x-jet-banner />
<div class="min-h-screen bg-gray-100">
#livewire('navigation-menu')
<!-- Page Heading -->
#if (isset($header))
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
#endif
<!-- Page Content -->
<main>
{{ $slot }}
</main>
</div>
#stack('modals')
#livewireScripts
</body>
</html>
I'm using tailwind CSS, livewire, jetstream and Laravel 9
Can not add OwlCarousel to laravel project properly and it doesn't work.
What should I do?
I copied owl.carousel.min.css and owl.theme.default.min.css and owl.carousel.min.js to owlcarousel folder that was placed in the same directory as view.blade.php file was.
My code is:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
</head>
<body>
<div class="owl-carousel">
<div> Your Content</div>
<div> Your Content</div>
<div> Your Content</div>
<div> Your Content</div>
<div> Your Content</div>
<div> Your Content</div>
<div> Your Content</div>
</div>
<script>
$(document).ready(function () {
$(".owl-carousel").owlCarousel();
});
</script>
<script src="owlcarousel/owl.carousel.min.js"></script>
</body>
</html>
The right way is this one:
<script type="text/javascript" src="{{ URL::asset('js/owl.min.js') }}"></script>
The function URL::asset() produces the necessary url for you. Same for the css:
<link rel="stylesheet" href="{{ URL::asset('css/owl.css') }}" />
You have to place owlcarousel folder in the laravel's app/public folder, not in views folder.
Hope this helps.
I am using laravel 5.4. Now I am using select2 plugin for displaying my select options at multi-level. Here my code is
#extends('layouts.app')
#section('content')
<html lang="">
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel-body">
<div class="form-group">
<label for="matching_star" class="col-md-4 control-label">Matching Star</label>
<div class="col-md-6">
<select name="matching_star" class="form-control select2" id="matching-star" multiple>
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="{{ URL::asset('https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js') }}"></script>
<link rel="stylesheet" href="{{ URL::asset('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css') }}" />
<script type="text/javascript" src="{{ URL::asset('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js') }}"></script>
<script type="text/javascript">
$('#matching-star').select2();
</script>
</html>
#endsection
My app.blade.php
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- Scripts -->
<script>
window.Laravel = {!! json_encode([
'csrfToken' => csrf_token(),
]) !!};
</script>
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
It is not working only the input is visible. It suggest nothing when I am click the input.
If I remove the first line #extends('layouts.app') then it works fine. I think the App.js from App layout override the select2 plugin. How can I implement the multiselect without removing the App layout?. Thanks in advance.
wrap your javascript in a document ready like this
<script>
$(document).ready(function() {
$('#matching-star').select2();
});
</script>
1) Please check your select jQuery OR jQuery.min is properly load or Not.
2) Other wise jQuery are twice on your page.
i am not sure but just check it. i hope it's helpful.
Remove following from view and check again:
<script type="text/javascript" src="{{ URL::asset('https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js') }}"></script>
As far as I know Laravel's default app.js includes jQuery by default.
im using laravel and blade for templates. I have a problem, i have a base template called (base.blade.php), where i include all js files (jQuery too).
The problem comes when im child template (myadpack.blade.php extends from base.blade.php). I want to use jQuery in child, but it seems to be impossible, i can do normal js calls, but not using jQuery (that is included in parent). I paste these files here:
base.blade.php
<!DOCTYPE HTML>
<html>
<head>
<title>Tonhits</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="{{ asset('css/font-awesome.min.css') }}" />
<link rel="stylesheet" href="{{ asset('css/bootstrap-theme.css') }}" />
<link rel="stylesheet" href="{{ asset('css/main.css') }}" />
<link rel="stylesheet" href="{{ asset('css/table.css') }}" />
<link rel="stylesheet" href="{{ asset('css/tablesaw.css') }}" />
<link rel="stylesheet" href="{{ asset('http://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css') }}" />
#section('css')
#show
</head>
<body class="no-sidebar">
<div id="page-wrapper">
<!-- Header Wrapper -->
<div id="header-wrapper">
<!-- Header -->
<div id="header" class="container">
<!-- Logo -->
<h1><a id="logo">Tonhits</a></h1>
<!-- Nav -->
#include('nav/nav_anon')
</div>
</div>
<!-- Main Wrapper -->
<div id="main-wrapper">
<!-- Main -->
<div id="page" class="container">
<!-- Main Heading -->
<div class="title-heading">
<h2>#yield('titleBig')</h2>
<p> #yield('titleSmall')</p>
</div>
<!-- Main Content -->
<div id="main">
<div class="row">
<div id="content" class="12u">
<!-- <header>
<h2>Nunc fringilla dis natoque amet gravida turpis</h2>
</header> -->
#section('content')
#show
</div>
</div>
</div>
<!-- Main Content -->
</div>
<!-- Main -->
</div>
<!-- Copyright -->
<div id="copyright">
Tonhits. All rights reserved
</div>
</div>
<!-- Scripts -->
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/jquery.dropotron.min.js') }}"></script>
<script src="{{ asset('js/skel.min.js') }}"></script>
<script src="{{ asset('js/util.js') }}"></script>
<script src="{{ asset('js/main.js') }}"></script>
<script src="{{ asset('js/tablesaw.js') }}"></script>
<script src="{{ asset('http://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js') }}"></script>
#yield('js')
</body>
</html>
myadpack.blade.php
#extends('base')
#section('titleBig', 'Me')
#section('titleSmall', 'My adpack overwiev')
</script>
#section('js')
<script type="text/javascript" >
$(document).on('ready', function(){
alert("a");
});
</script>
#endsection
#section('content')
Here you can see your purchased adpacks, so you can have a detailed tracing.
<table id="adpacks">
<tr>
<th>Test</th>
<th>Test</th>
</tr>
<tr>
<td>Data</td>
<td>Data 2</td>
</tr>
</table>
#endsection
In parent i tried with yield, section, and nothing.
What it could be?
Thank you for reading me.
base.blade.php
<!DOCTYPE HTML>
<html>
<head>
<title>Tonhits</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="{{ asset('css/font-awesome.min.css') }}" />
<link rel="stylesheet" href="{{ asset('css/bootstrap-theme.css') }}" />
<link rel="stylesheet" href="{{ asset('css/main.css') }}" />
<link rel="stylesheet" href="{{ asset('css/table.css') }}" />
<link rel="stylesheet" href="{{ asset('css/tablesaw.css') }}" />
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" />
#yield('css')
</head>
<body class="no-sidebar">
<div id="page-wrapper">
<!-- Header Wrapper -->
<div id="header-wrapper">
<!-- Header -->
<div id="header" class="container">
<!-- Logo -->
<h1><a id="logo">Tonhits</a></h1>
<!-- Nav -->
#include('nav/nav_anon')
</div>
</div>
<!-- Main Wrapper -->
<div id="main-wrapper">
<!-- Main -->
<div id="page" class="container">
<!-- Main Heading -->
<div class="title-heading">
<h2>#yield('titleBig')</h2>
<p> #yield('titleSmall')</p>
</div>
<!-- Main Content -->
<div id="main">
<div class="row">
<div id="content" class="12u">
<!-- <header>
<h2>Nunc fringilla dis natoque amet gravida turpis</h2>
</header> -->
#yield('content')
</div>
</div>
</div>
<!-- Main Content -->
</div>
<!-- Main -->
</div>
<!-- Copyright -->
<div id="copyright">
Tonhits. All rights reserved
</div>
</div>
<!-- Scripts -->
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/jquery.dropotron.min.js') }}"></script>
<script src="{{ asset('js/skel.min.js') }}"></script>
<script src="{{ asset('js/util.js') }}"></script>
<script src="{{ asset('js/main.js') }}"></script>
<script src="{{ asset('js/tablesaw.js') }}"></script>
<script src="http://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
#yield('js')
</body>
</html>
myadpack.blade.php
#extends('base')
#section('titleBig', 'Me')
#section('titleSmall', 'My adpack overwiev')
#section('content')
Here you can see your purchased adpacks, so you can have a detailed tracing.
<table id="adpacks">
<tr>
<th>Test</th>
<th>Test</th>
</tr>
<tr>
<td>Data</td>
<td>Data 2</td>
</tr>
</table>
#endsection
#section('js')
<script type="text/javascript">
$(document).on('ready', function() {
alert("a");
});
</script>
#endsection
So I have a script that writes several pages and at the end is a html confirmation, at the top of the page is the amount of bytes written and doesn't it look right.
How do I stop this information from being displayed?
<?php
$filename = "".$page.".html";
$file = #fopen($filename,"x");
if($file)
{
echo fwrite($file,'html content');
fclose($file)
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Thank You</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="css/plugins/metisMenu/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesnt work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="row">
<div class="col-lg-6">
<div class="panel-heading">
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
Thank you, site has been added successfully! <?php echo '<br>Click here to go to log page'; ?>
</div>
<div style="margin-bottom: 10px;"> <button class="btn btn-info" type="submit"><h3>Return to dashboard</h3></button></div>
</div>
</div>
<!-- /.col-lg-6 -->
</div>
<!-- /.row -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="js/plugins/metisMenu/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/sb-admin-2.js"></script>
<!-- Page-Level Demo Scripts - Notifications - Use for reference -->
<script>
// tooltip demo
$('.tooltip-demo').tooltip({
selector: "[data-toggle=tooltip]",
container: "body"
})
// popover demo
$("[data-toggle=popover]")
.popover()
</script>
</body>
</html>
Simple answer, this line echoes how many bytes were written on the call to fwrite:
echo fwrite($file,'html content');
The reason why, is fwrite returns this information, see the docs: http://php.net/manual/de/function.fwrite.php
It's enough to call fwrite, without the echo:
fwrite($file,'html content');
If you want to extend on that, you can save the number of bytes in a variable, to trigger action in case of an error:
$bytes = fwrite($file, $htmlContent);
if (!$bytes && count($htmlContent)) {
// Not written to file!
}