So I'm making a simple website which has 3 buttons on the landing page.
I want to use ajax to change the content when you click on these buttons.
My problem is that when I click the logo on the navbar, it is supposed to return to the landing page, but the landing page @extends the view with the navbar and all of that, so it duplicates one inside another.
If I remove the @extends I can not create the views
https://gyazo.com/6979d018cabdfaba7f5ee60257ccbb69
Also, after a while it starts doing weird things: https://gyazo.com/6d634faa54c46512ac353c8d6d2c48b5
This is my master layout, all the other views extend this one:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<nav class="navbar sticky-top navbar-light bg-light">
<div class="navbar-brand mx-auto">
<img id="brand" src="images/imp_logo.png" width="125" height="100" class="d-inline-block align-top" alt="">
</div>
</nav>
<div class="blur">
<div class="background-image"></div>
</div>
<title></title>
</head>
<body>
<div id="app">
<div class="container">
@yield('content')
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
This is my main view, the one which has the buttons (they are divs but I just call them buttons):
@extends('master')
@section('content')
<br><br><br>
<div class="row">
<div class="holder mx-auto">
<div class="col-12" style="">
<div id="button1" class="square-box">
<img class="icon" src="https://i.ibb.co/hDZ6SBF/image-icon.png" width="65px" height="50px"><br><br>
<span class="square-text">Trabajos</span>
</div>
<div id="button2" class="square-box">
<img class="icon" src="https://i.ibb.co/25105xy/5a4525b2546ddca7e1fcbc82.png" alt="5a4525b2546ddca7e1fcbc82" width="55px" height="50px"><br><br>
<span class="square-text">Contacto</span>
</div>
<div id="button3" class="square-box">
<img class="icon" src="https://i.ibb.co/sj5cBdh/img-466165.png" width="65px" height="50px"><br><br>
<span class="square-text">Empresa</span>
</div>
</div>
</div>
</div>
</div>
@endsection
This is my js file:
$(document).ready(function(){
$(document).on('click', '#button1', function() {
$.ajax({url:'/trabajos',success:function(result) {
$("#app").html(result).fadeIn('slow');
}});
});
$(document).on('click', '#button2', function() {
$.ajax({url:'/contacto',success:function(result) {
$("#app").html(result).fadeIn('slow');
}});
});
$(document).on('click', '#button3', function() {
$.ajax({url:'/empresa',success:function(result) {
$("#app").html(result).fadeIn('slow');
}});
});
$(document).on('click', '#brand', function() {
$.ajax({url:'/',success:function(result) {
$("#app").html(result).fadeIn('slow');
}});
});
});
