I have this situation where I want to pass data to a Bootstrap 4 modal. I have a list of records with their own links to edit and delete. Since I want to load a modal confirmation to delete a specific record, I need to pass several parameters, such as the ID for the destroy route.
I have tried the solution of this Laracasts forum. However, first of all, the script does not work, since the console.log does not output anything.
Note: I am using the app.js, so probably it has to do with the issue, but I haven't found a hint to solve this.
Here is my accounts.blade.php:
#extends('layouts.app')
#section('title','Accounts list')
#section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col">
<div class="card">
<div class="card-header">
My accounts
</div>
<div class="card-body">
<h5 class="card-title">Accounts list</h5>
<h4>Create a new account</h4>
<hr>
<ul>
#forelse ($user->accounts as $account)
<li>
{{ $account->name }} || Edit |
<button type="button" class="btn btn-outline-danger delete-company"
data-toggle="modal"
data-target="#exampleModal"
data-id="{{$account->id}}"
data-url="{{ route('accounts.destroy',['id'=>$account->id]) }}"
data-name="{{$account->name}}"
>
Delete
</button>
{{--Delete </li>--}}
{{--read this reference: https://medium.freecodecamp.org/custom-confirm-box-with-bootstrap-4-377aa67723c2--}}
<hr>
</li>
#empty
<li class="card-text text-danger">You do not have an account yet.</li>
#endforelse
</ul>
</div>
</div>
</div>
</div>
</div>
{{--MODAL delete confirmation modal--}}
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Are you sure to delete the <span id="accountname"></span> account?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Everything will be removed.
</div>
<div class="modal-footer">
{{--https://stackoverflow.com/a/33688683/1883256--}}
<form id="deleteform" action="" method="POST">
#csrf
#method('DELETE')
{{--
{{ csrf_field() }}
{{ method_field('DELETE') }}
--}}
<button type="submit" class="btn btn-outline-danger btn-sm">Yes, delete</button>
</form>
<button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
#endsection
#section('js')
{{--Ver: https://laracasts.com/discuss/channels/laravel/how-to-pass-value-to-bootstrap-modal-window?page=1#reply=508543 --}}
<script>/*NOTHING HERE IS WORKING! WHY???*/
$(document).ready(function () {
console.log('testing'); // NOT WORKING!
// For A Delete Record Popup
$('.delete-company').click(function () {
console.log('clicked!'); //NOT WORKING!!!
var id = $(this).attr('data-id');
var name = $(this).attr('data-name');
var url = $(this).attr('data-url');
$("#accountname").append(name);
$("#deleteForm", 'input').val(id);
$("#deleteForm").attr("action", url);
});
});
</script>
#endsection
layouts/app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }} - #yield('title')</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
{{--Favicon--}}
<link rel="shortcut icon" href="{{ asset('img/favicon_io/favicon-16x16.png') }}">
</head>
<body>
<div id="app">
#include('layouts.partials._nav')
<div class="container">
<main class="py-3">
{{--Flash messages--}}
#include('layouts.partials.flashMessages._messages_x')
#include('layouts.partials.flashMessages._messages')
#yield('content')
</main>
</div>
</div>
</body>
</html>
As for the layouts app.blade.php
I have tried both <script src="{{ asset('js/app.js') }}" defer></script> and <script src="{{ asset('js/app.js') }}"></script> without the defer and it does not work.
Why isn't this script working at all??? Is the app.jscausing the trouble? How do I make it work?
If only I could see the console.log() working, that'd be nice!
Do one thing with proper way try this
layouts/app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }} - #yield('title')</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
{{--Favicon--}}
<link rel="shortcut icon" href="{{ asset('img/favicon_io/favicon-16x16.png') }}">
</head>
<body>
<div id="app">
#include('layouts.partials._nav')
<div class="container">
<main class="py-3">
{{--Flash messages--}}
#include('layouts.partials.flashMessages._messages_x')
#include('layouts.partials.flashMessages._messages')
#yield('content')
</main>
</div>
</div>
#stack('scripts')
</body>
</html>
accounts.blade.php
#extends('layouts.app')
#section('title','Accounts list')
#section('content')
//your content
#endsection
#push('scripts')
<script>
console.log('hello');
</script>
#endpush
You can read about Stack
Related
So, I am facing some problem on loading vuejs component on my blade engine. when I added vuejs component it either load the vuejs 'bootstrap' or load the public/js/app.js depending what is commented out. this is the app.blade.php code
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Global Shopping Mall</title>
<!-- Scripts -->
<!-- <script src="{{ mix('js/app.js') }}" ></script> -->
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha512-q3eWabyZPc1XTCmF+8/LuE1ozpg5xxn7iO89yfSOd5/oKvyqLngoNGsx8jq92Y8eXJ/IRxQbEC+FGSYxtk2oiw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<link href="/src/jquery.exzoom.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="/src/jquery.exzoom.js"></script>
<!-- Styles -->
<link href="{{ mix('css/app.css') }}" rel="stylesheet" defer >
<style>
body{
background-color: white;
}
.custom_navbar{
height: 100px;
}
</style>
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-sm navbar-light bg-white shadow-sm" style="height: 60px;">
<img src="{{asset('images/gsm.jpg')}}" alt="GSM Logo" class width="150px" height="65px">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="true" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
#guest
#if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('SignUp') }}</a>
</li>
#endif
#if (Route::has('login'))
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
#endif
#if (Route::has('login'))
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login as Guest') }}</a>
</li>
#endif
#else
<li class="nav-item">
<a class="nav-link" href="/home"><strong>Home<strong></a>
</li>
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{"Hi, "}}{{ Auth::user()->name }}
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/user_profile">
User Profile
</a>
<!-- <a class="dropdown-item" href="/product_details">
Product Details
</a> -->
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
#csrf
</form>
</div>
</li>
#endguest
</ul>
</div>
</div>
</nav>
#if(Auth::check())
#include('layouts.gsm_nav')
#endif
<main>
#yield('content')
</main>
#extends('layouts.footer')
</div>
<style>
.custom_nav{
padding-right: 50px
}
/* .v-application--wrap {
min-height: 0;
} */
</style>
<script defer src="{{ mix('js/app.js') }}" type="text/javascript"></script>
</body>
</html>
if I comment this line
script defer src="{{ mix('js/app.js') }}" type="text/javascript"></script>
then its load my blade style without vuejs element but if not then its load only vuejs not public script
heres my vuejs app.js code and bootstrap.js code
app.js
require('./bootstrap');
window.Vue = require('vue');
// Main Screens Components
Vue.component('user-list', require('./components/UserList.vue').default);
Vue.component('main-screen', require('./components/Main.vue').default);
// Streaming Components
Vue.component("broadcaster", require("./components/Broadcaster.vue").default);
Vue.component("viewer", require("./components/Viewer.vue").default);
// Vue.component('video-chat', require('./components/VideoChat.vue').default);
Vue.prototype.$userId = document.querySelector("meta[name='user-id']").getAttribute('content');
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify);
const app = new Vue({
el: '#app',
vuetify: new Vuetify(),
});
Echo.private('chat')
.listen('MessageSent', (e) => {
this.messages.push({
message: e.message.message
});
});
bootstrap.js
window._ = require('lodash');
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
wsHost: window.location.hostname,
wsPort: 6001,
forceTLS: false,
disableStats: true,
});
this is the element code
<div class="app">
<v-app>
<main-screen user-name="{{ Auth::user()->name }}"></main-screen>
<meta name="user-id" content="{{ Auth::user()->id }}">
<meta name="user-name" content="{{ Auth::user()->name }}">
<meta name="csrf-token" content="{{ csrf_token() }}">
<button class="open-button" type="button" onclick="openForm()"></button>
</v-app>
</div>
Want this style with vuejs element
Red mark is the element
i am stuck.
the issue I can see your code is you're putting your blade code inside <div id="app"> </div> but the thing is whenever you include <script defer src="{{ mix('js/app.js') }}" type="text/javascript"></script> it will remove your any html/blade code and put vue.js code inside that div.
So you've to do something like below:
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Global Shopping Mall</title>
<!-- Scripts -->
<!-- <script src="{{ mix('js/app.js') }}" ></script> -->
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha512-q3eWabyZPc1XTCmF+8/LuE1ozpg5xxn7iO89yfSOd5/oKvyqLngoNGsx8jq92Y8eXJ/IRxQbEC+FGSYxtk2oiw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<link href="/src/jquery.exzoom.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="/src/jquery.exzoom.js"></script>
<!-- Styles -->
<link href="{{ mix('css/app.css') }}" rel="stylesheet" defer >
<style>
body{
background-color: white;
}
.custom_navbar{
height: 100px;
}
</style>
</head>
<body>
<div>
<-- put your blade/html content here -->
<div id="app"></div>
<-- Create a div with id of app to render vue.js content, like above -->
</div>
<style>
.custom_nav{
padding-right: 50px
}
/* .v-application--wrap {
min-height: 0;
} */
</style>
<script defer src="{{ mix('js/app.js') }}" type="text/javascript"></script>
</body>
</html>
Do let me know if you need any other help in same scenario.
I am using EJS to render HTML. But the same HTML thing gets loaded for one route and when tried with another route chrome shows the status of CSS files as cancelled and js files with status code 404. I am unable to get what is going wrong. It works for the '/' route but does not work for the '/admin/students' route. Please help. In the table, I am printing the data sent through route.
In '/' route I am just sending a text as a data and everything else is the same as giving the code below.
app.get('/',(req,res)=>{
res.render('layout',{data:"IT is working"});
});
app.get('/admin/students',(req,res)=>{
Student.find({},function(err,result){
if(err)
console.log(err);
else
res.render('student',{st:result});
})
})
<!DOCTYPE HTML>
<html lang="zxx" class="no-js">
<head>
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Favicon -->
<link rel="shortcut icon" href="img/fav.png" />
<!-- Author Meta -->
<meta name="author" content="colorlib" />
<!-- Meta Description -->
<meta name="description" content="" />
<!-- Meta Keyword -->
<meta name="keywords" content="" />
<!-- meta character set -->
<meta charset="UTF-8" />
<!-- Site Title -->
<title>Blog Home</title>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:900|Roboto:400,400i,500,700"
rel="stylesheet" />
<!--
CSS
=============================================
-->
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/themify-icons/0.1.2/css/themify-icons.css" />
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<!-- ================ Start Header Area ================= -->
<header class="default-header">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand" href="index.html">
<img src="img/logo.png" alt="" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="lnr lnr-menu"></span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end align-items-center"
id="navbarSupportedContent">
<ul class="navbar-nav">
<li>Home</li>
<li>Admin</li>
<li>User</li>
</ul>
</div>
</div>
</nav>
</header>
<section class="banner-area" style="background: url('img/home.png')" >
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-lg-12 banner-right">
<h1 class="text-white">
Blog Home
</h1>
<p class="mx-auto text-white mt-20 mb-40">
In the history of modern astronomy, there is probably no one greater leap forward than the
building.
</p>
<div class="link-nav">
<span class="box">
Home
<i class="lnr lnr-arrow-right"></i>
Blog Home
</span>
</div>
</div>
</div>
</div>
</section>
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">Reg.No.</th>
<th scope="col">Name</th>
<th scope="col">Branch</th>
<th scope="col">Handle</th>
</tr>
</thead>
<body>
<% st.map(rec=>{ %>
<tr style="color:black">
<th scope="row"><%=rec._id%></th>
<td><%=rec.sname%></td>
<td><%=rec.branch%></td>
<td><form action="/students/<%=rec._id%>/edit}"></form></td>
</tr>
<% }) %>
</tbody>
</table>
<footer class="footer-area section-gap">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved |
This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by Colorlib
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
</footer>
<!-- ================ End footer Area ================= -->
<script src="js/vendor/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
crossorigin="anonymous"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyBhOdIF3Y9382fqJYt5I_sswSrEw5eihAA"></script>
<script src="js/jquery.ajaxchimp.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/parallax.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/hexagons.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/jquery.nice-select.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
You should use absolute paths of static files instead of relative ones. Example:
<script src="js/main.js"></script>
should be:
<script src="/js/main.js"></script>
Similarly, you should fix the paths for all static files (css, js, etc.) in your EJS files.
You can read more about absolute and relative paths here.
I'm working on a class project that required me to code a website that sells something. I'm trying to create the shopping cart so that when I click add to cart it should add the product. However, when I added in a bootstrap link my page becomes white. Is the bootstrap the problem or is it something wrong with my code?
My first time using this site so I'm not sure if this is all I need to post. If any other code is required (like the js) just ask. Thank you in advance.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>Printing Prime</title>
<link rel="icon" type="image/png" href="img/favi.png">
<link rel="stylesheet" type="text/css" href="css/home.css">
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/script.js"></script>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto+Condensed:100'>
<link rel="stylesheet" href="css\splitslick\style.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
(problem***)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<section id="" class="container-fluid cart">
<article id="" class="col">
<span class="open-modal">
<i id="carts" class="fa fa-shopping-cart" data-toggle="modal" data-target="#cart"></i>
</span>
</article>
</section>
<section id="" class="container-fluid">
<article id="" class="row">
<div id="mask"></div>
<div class="modal fade" id="cart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Cart</h5>
</div>
<div class="modal-body">
<table class="show-cart table">
</table>
<div>Total price: $<span class="total-cart"></span></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Order now</button>
</div>
</div>
</div>
</div>
</article>
</section>
<section id="" class="container-fluid">
<article id="" class="row">
<div id="" class="col col-md-12">
<nav class="navi">
<ul class="list">
<li>PRODUCTS</li>
<li>REVIEWS</li>
<li style="padding: 10px; margin: 10px;"><img src="img/ppppp.png" id="logo"></li>
<li>CONTACT</li>
<li>ABOUT US</li>
</ul>
</nav>
</div>
</article>
</section>
<section id="" class="container-fluid">
<article id="" class="row">
<div id="" class="col col-md-12">
<div class="split-slideshow">
<div class="slideshow">
<div class="slider">
<div class="item">
<img src="img/banner1.png" />
</div>
<div class="item">
<img src="img/banner2.png" />
</div>
<div class="item">
<img src="https://png.pngtree.com/thumb_back/fw800/background/20190222/ourmid/pngtree-blue-gradient-pattern-overlay-background-banner-image_50591.jpg" />
</div>
<div class="item">
<img src="img/banner4.jpeg" />
</div>
</div>
</div>
<div class="slideshow-text">
<div class="item">PRINTING PRIME</div>
<div class="item">PRODUCTS</div>
<div class="item">THREE</div>
<div class="item">ABOUT US</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js'></script>
<script src="js/splitslick/js/index.js"></script>
</div>
</article>
</section>
<!-- <section id="" class="container-fluid">
<article id="" class="row">
<div id="" class="col col-md-12">
<div class="col-md-6">
</div>
<div clas="col-md-6">
<div class="col-lg-12">
</div>
</article>
</section> -->
<section id="products" class="container-fluid">
<article id="" class="row">
<div id="" class="col col-md-12 product-grid">
<div class="col col-md-4 grid-item">
<div>
<div>
<div>
<img style="height: 30vh; width: 15vw;" src="img/hat1.png" alt="Avatar">
<h5 style="color:white;">Sad Face Cap</h5>
<h5 style="color:white;">$12.99</h5>
<div>
<input type="number" placeholder="# of items">
Add to cart
</div>
</div>
</div>
</div>
</div>
<div class="col col-md-4 grid-item">
<div>
<div>
<div>
<img style="height: 30vh; width: 15vw;" src="img/shirt1.png" alt="Avatar">
<h5 style="color:white;">Signature Tee</h5>
<div>
<input type="number" placeholder="# of items">
<input type="submit" value="Add To Cart" id="submit">
</div>
</div>
</div>
</div>
</div>
<div class=" col col-md-4 grid-item">
<div>
<div>
<div>
<img style="height: 30vh; width: 14vw;" src="img/hoodie1.png" alt="Avatar" >
<h5 style="color:white;">VHS Hoodie</h5>
<div>
<input type="number" placeholder="# of items" >
<input type="submit" value="Add To Cart" id="submit">
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
There appear to be a few problems with the files you link:
You appear to have four different jQuery versions included (3.4.1, 2.1.3, 3.1.0 and slim). You only need one reference to jQuery (making sure it is referenced before Bootstrap). Having multiple references will throw errors.
You also appear to reference Bootstrap twice (once from the CDN at the end of your <head>, and once at the start of your <head> with a local reference). Multiple Bootstrap references will also likely throw errors.
You also appear to be missing a reference to PopperJS, which is a required dependency of Bootstrap 4.
css\splitslick\style.css is referenced with backslashes; you'll want forrward slashes.
Your local script.js and style.css come before Bootstrap's JS and CSS, which means that Bootstrap will overwrite your own code; you'll want your code to be loaded last.
Removing these additional references, and making sure that Bootstrap
comes after jQuery, PopperJS and Tether should fix your problem. Shifting your own JavaScript and CSS to the bottom of each respective section should cause it to override any conflicting Bootstrap code.
Here's a modified <head> that should work. Take note of the following order:
Bootstrap 4 CSS -> Plugins -> Fonts -> Custom CSS
jQuery -> PopperJS -> Tether -> Bootstrap 4 JS -> Custom JS
<head>
<meta charset="utf-8">
<title>Printing Prime</title>
<link rel="icon" type="image/png" href="img/favi.png">
<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/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css'>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans&display=swap" rel="stylesheet">
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto+Condensed:100'>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/splitslick/style.css">
<link rel="stylesheet" type="text/css" href="css/home.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></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://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" 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 src="js/script.js"></script>
</head>
This question already has answers here:
how to select all class except the clicked element in JQuery?
(3 answers)
Closed 5 years ago.
This code removes the div that is selected, i was trying to when i click in the button that is in the div,all the other would disapear, and the one that i clicked stayed, but i only can remove the one that i click, sry for my english and sry for being a beginner at jquery.
I have here a video to youtube to show you better what is my problem https://www.youtube.com/watch?v=kiUECo33-d0
$('.product-removal button').click( function() {
removeItem(this);
});
function removeItem(removeButton)
{
var productRow = $(removeButton).parent().parent();
productRow.remove();
}
<html>
<head>
<title>Configurador</title>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/ResponsiveAccordianMenu.css" rel="stylesheet" type="text/css">
<link href="css/table.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<div class="twd_container">
<h1 style="margin:150px auto 30px auto; text-align:center">Configurar</h1>
<!--Processador-->
<div id="AL" class="expandContent">
<h3 class="header">
<div class="headerColumn1">Processador</div>
<div class="headerColumn2 expand"><img src="img/plus.png" /></div>
<div class="expandedContentClearFloat"></div>
</h3>
<div class="expandedContent">
<div class="container">
<ul id="orders">
{% for item in processador %}
<div class="product-removal">
<li>
<div class="row carousel-row" >
<div class="col-xs-8 col-xs-offset-2 slide-row" id="container">
<div id="carousel-1" class="carousel slide slide-carousel" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="iconcomp" src="{{ item.img|e }}" alt="Image">
</div>
</div>
</div>
<div class="slide-content">
<h4>{{ item.marca|e }}</h4>
<p>
{{ item.descr|e }}
</p>
</div>
<div class="slide-cima" id="{{ item.id|e }}">
<span class="pull-right buttons">
<button class="btn2" id='remove' value='{{ item.id|e }}' onclick="rmv(this)"><i class="fa fa-fw fa-undo"></i></button>
</span>
</div>
<div class="slide-footer" id="{{ item.id|e }}">
<span class="pull-right buttons">
<button name="" class="btn1" id='item' value='{{ item.id|e }}' ><i class="fa fa-fw fa-shopping-cart"></i></button>
</span>
<button class="remove-product">
Remove
</button>
</div>
</div>
</div>
</li>
</div>
{% endfor %}
</ul>
</div>
</div>
</div>
<div class="clearfloat"></div>
</div>
<!-- scripts-->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="js/ResponsiveAccordianMenu.js"></script>
</body>
</html>
use this this hides all div except one you click
$('div').click(function(){
$('div').not(this).hide();
});
provide selector as per your's
have a problem and I hope somebody helps me.
Have website 3gtrans.sk in bootstrap. It works fine but mobile navigation doesn't work on 2 pages
https://www.3gtrans.sk/nase-trasy
https://www.3gtrans.sk/galeria
As you can see on that pages are some photos (prettyPhoto). Can anybody show me what is bad please? Thank you so much.
i.e. galeria.php
<?php include "xxx.php"; ?>
<!DOCTYPE html>
<html lang="sk">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Galéria | 3G Trans Slovakia" />
<meta name="author" content="RoyalWEB.sk" />
<link rel="icon" href="favicon.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/style.css?<?php echo date('h:i:s'); ?>">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato%7CRaleway">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="assets/css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet"/>
<script src="assets/js/jquery.prettyPhoto.js" type="text/javascript"></script>
<title>Galéria | 3G Trans Slovakia</title>
<script type="text/javascript">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({
show_title: false,
social_tools: false
});
});
</script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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 class="collapse navbar-collapse mynavbar" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav ">
<li>o nás</li>
<li>naše trasy</li>
<li>referencie</li>
<li>objednať prepravu</li>
<li><a class="active" href="galeria">galéria</a></li>
<li>kontakt</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container wrapper">
<div class="row">
<div class="col-md-12">
<h1>Galéria</h1>
<p>
<img class="img-responsive" src="images/gallery/thumb_peugeot01.jpg" alt="Peugeot Travel" /> <a href="images/gallery/peugeot02.jpg" rel="prettyPhoto[pp_gal]"><img class="img-responsive" src="images/gallery/thumb_peugeot02.jpg" alt="Peugeot Travel" />
</p>
</div>
</div>
</div>
<footer>
<div class="container copyright">
<div class="row">
<div class="col-md-12">
Copyright © <?php echo date("Y"); ?> | 3G Trans Slovakia<br />Vytvorila firma RoyalWEB.sk
</div>
</div>
</div>
</footer>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-101095120-1', 'auto');
ga('send', 'pageview');
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/1.0.9/cookieconsent.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.cookieconsent_options = {"message":"Táto stránka využíva súbory cookies, ktoré pomáhajú k jeho správnemu fungovaniu. Využívaním našich služieb s ich používaním súhlasíte.","dismiss":"Rozumiem","learnMore":"Viac informácií","link":"https://sk.wikipedia.org/wiki/HTTP_cookie","theme":"light-bottom"};
</script>
</body>
</html>
fixed with replacing prettyphoto for another plugin.