js it's not running in laravel - javascript
I'm migrating my laravel project to ionos hosting, but js it's not working, I think I have it all ok.
in my localhost is working fine.
not working local files and CDN
I am stuck.
and I have these errors:
Could you help me, please?
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Sertek</title>
<!-- Favicon -->
<link href="{{ asset('argon') }}/img/brand/favicon.png" rel="icon" type="image/png">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
<!-- Icons -->
<link href="{{ asset('argon') }}/vendor/nucleo/css/nucleo.css" rel="stylesheet">
<link href="{{ asset('argon') }}/vendor/#fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
<!-- Argon CSS -->
<link type="text/css" href="{{ asset('argon') }}/css/argon.css?v=1.0.0" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/dataTables.semanticui.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css">
</head>
<body class="{{ $class ?? 'bg-default' }}">
<script src="{{ asset('argon') }}/vendor/jquery/dist/jquery.min.js"></script>
<script src="{{ asset('argon') }}/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/esm/popper.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<!-- Argon JS -->
<script src="{{ asset('argon') }}/js/argon.js?v=1.0.0"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.20/js/dataTables.uikit.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>
<script>
window.onload = function exampleFunction() {
console.log('The Script will load now.'); //this works
}
</script>
#stack('js')
</body>
</html>```
I solved, my local jquery not working fine. I changed
<script src="{{ asset('argon') }}/vendor/jquery/dist/jquery.min.js" defer></script>
to
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
Related
How to properly add app's scripts and styles in Vue-Laravel App?
I just started coding a Laravel and Vue.js based web application
I ran into a problem which is how to properly include styles and scripts in the application.
Currently my spa blade looks like this and I don't think it will be very clean when I go further:
<!doctype html>
<html class="loading dark-layout" lang="{{ str_replace('_', '-', app()->getLocale()) }}" data-layout="dark-layout"
data-textdirection="ltr">
<!-- BEGIN: Head-->
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,minimal-ui">
<meta name="description"
content="Vuexy admin is super flexible, powerful, clean & modern responsive bootstrap 4 admin template with unlimited possibilities.">
<meta name="keywords"
content="admin template, Vuexy admin template, dashboard template, flat admin template, responsive admin template, web app">
<meta name="author" content="PIXINVENT">
<title>{{ config('app.name', 'Laravel') }}</title>
<link rel="apple-touch-icon" href="{{ asset('assets/admin/images/ico/apple-icon-120.png') }}">
<link rel="shortcut icon" type="image/x-icon" href="{{ asset('/favicon.ico') }}">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,300;0,400;0,500;0,600;1,400;1,500;1,600"
rel="stylesheet">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- BEGIN: Vendor CSS-->
<link rel="stylesheet" type="text/css" href="{{ asset('assets/admin/vendors/css/vendors.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/admin/vendors/css/charts/apexcharts.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/admin/vendors/css/extensions/toastr.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/admin/vendors/css/animate/animate.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/admin/vendors/css/extensions/sweetalert2.min.css') }}">
<!-- END: Vendor CSS-->
<!-- BEGIN: Theme CSS-->
<link rel="stylesheet" type="text/css" href="{{ asset('assets/admin/css/bootstrap.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/admin/css/bootstrap-extended.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/admin/css/colors.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/admin/css/components.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/admin/css/themes/dark-layout.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/admin/css/themes/bordered-layout.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/admin/css/themes/semi-dark-layout.min.css') }}">
<!-- BEGIN: Page CSS-->
<link rel="stylesheet" type="text/css"
href="{{ asset('assets/admin/css/core/menu/menu-types/horizontal-menu.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/admin/css/plugins/forms/form-validation.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/admin/css/pages/page-auth.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/admin/css/pages/dashboard-ecommerce.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/admin/css/plugins/charts/chart-apex.min.css') }}">
<link rel="stylesheet" type="text/css"
href="{{ asset('assets/admin/css/plugins/extensions/ext-component-toastr.min.css') }}">
<link rel="stylesheet" type="text/css"
href="{{ asset('assets/admin/css/plugins/extensions/ext-component-sweet-alerts.min.css') }}">
<!-- END: Page CSS-->
<!-- BEGIN: Custom CSS-->
<link rel="stylesheet" type="text/css" href="{{ asset('assets/admin/css/style.css') }}">
<!-- END: Custom CSS-->
</head>
<!-- END: Head-->
<!-- BEGIN: Body-->
<body class="">
<div id="app"></div>
<!-- BEGIN: Vendor JS-->
<script src="{{ asset('assets/admin/vendors/js/vendors.min.js') }}"></script>
<!-- END: Vendor JS-->
<!-- BEGIN: Page Vendor JS-->
<script src="{{ asset('assets/admin/vendors/js/ui/jquery.sticky.js') }}"></script>
<script src="{{ asset('assets/admin/vendors/js/charts/apexcharts.min.js') }}"></script>
<script src="{{ asset('assets/admin/vendors/js/extensions/toastr.min.js') }}"></script>
<script src="{{ asset('assets/admin/vendors/js/extensions/sweetalert2.all.min.js') }}"></script>
<script src="{{ asset('assets/admin/vendors/js/extensions/polyfill.min.js') }}"></script>
<script src="{{ asset('assets/admin/vendors/js/forms/validation/jquery.validate.min.js') }}"></script>
<!-- END: Page Vendor JS-->
<!-- BEGIN: Theme JS-->
<script src="{{ asset('assets/admin/js/core/app-menu.min.js') }}"></script>
<script src="{{ asset('assets/admin/js/core/app.min.js') }}"></script>
<script src="{{ asset('assets/admin/js/scripts/customizer.min.js') }}"></script>
<!-- END: Theme JS-->
<!-- BEGIN: App JS-->
<script src="{{ mix('assets/admin/js/app.js') }}"></script>
<!-- END: App JS-->
<script>
$(window).on('load', function () {
if (feather) {
feather.replace({width: 14, height: 14});
}
})
</script>
</body>
<!-- END: Body-->
</html>
the problem is that each page of the template has different styles and scripts, and not all of them are always needed everywhere.
I appriciate any advice, thanks!
Yes, it's not clear. You must compile your assets into one, maybe two files using Laravel Mix.
For js, e.g. For css - read the docs
resources/js/bootstrap.js
window.$ = window.jQuery = require('jquery');
require('bootstrap');
//more requires
You can separate your assets for more files (public and admin, maybe), making more files and adding it to webpack.mix.js
Than, after run npm run dev - you will see compiled assets in public directory and can include this files into blade.
Tempus dominus from bootstrap4
I have the next problem:
I'm trying to install Tempus dominus of bootstrap but I have these bug when I try to put it, the modal body don't cover all the calendar, and in the footer, it would show a clock icon for additional time.
What do you believe could be the wrong whit it, I'm leaving my scripts
d meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="assets/img/brand/favicon.png" type="image/png">
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
<!-- Icons -->
<link rel="stylesheet" href="assets/vendor/nucleo/css/nucleo.css" type="text/css">
<link rel="stylesheet" href="assets/vendor/#fortawesome/fontawesome-free/css/all.min.css" type="text/css">
<!-- Page plugins -->
<!-- CSS -->
<link rel="stylesheet" href="assets/css/argon.css?v=1.2.0" type="text/css">
<!-- Full Callendar -->
<link href='fullcalendar/core/main.css' rel='stylesheet' />
<link href='fullcalendar/daygrid/main.css' rel='stylesheet' />
<link href='fullcalendar/timegrid/main.css' rel='stylesheet' />
<link rel="stylesheet" href="fullcalendar/list/main.css">
<script src='fullcalendar/core/main.js'></script>
<script src='fullcalendar/daygrid/main.js'></script>
<script src='fullcalendar/interaction/main.js'></script>
<script src='fullcalendar/timegrid/main.js'></script>
<script src="fullcalendar/list/main.js"></script>
<script src="js/theme-chooser.js"></script>
<script src="json/events.json"></script>
<!-- ELemeentos añadidos para el datepicker -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" />
These are the header scripts
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="assets/img/brand/favicon.png" type="image/png">
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
<!-- Icons -->
<link rel="stylesheet" href="assets/vendor/nucleo/css/nucleo.css" type="text/css">
<link rel="stylesheet" href="assets/vendor/#fortawesome/fontawesome-free/css/all.min.css" type="text/css">
<!-- Page plugins -->
<!-- CSS -->
<link rel="stylesheet" href="assets/css/argon.css?v=1.2.0" type="text/css">
<!-- Full Callendar -->
<link href='fullcalendar/core/main.css' rel='stylesheet' />
<link href='fullcalendar/daygrid/main.css' rel='stylesheet' />
<link href='fullcalendar/timegrid/main.css' rel='stylesheet' />
<link rel="stylesheet" href="fullcalendar/list/main.css">
<script src='fullcalendar/core/main.js'></script>
<script src='fullcalendar/daygrid/main.js'></script>
<script src='fullcalendar/interaction/main.js'></script>
<script src='fullcalendar/timegrid/main.js'></script>
<script src="fullcalendar/list/main.js"></script>
<script src="js/theme-chooser.js"></script>
<script src="json/events.json"></script>
<!-- ELemeentos añadidos para el datepicker -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" />
<!-- jquery JS -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- Bootstrap js -->
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
Now the body's scripts
<script>
$.fn.datetimepicker.Constructor.Default = $.extend({}, $.fn.datetimepicker.Constructor.Default, {
icons: {
time: 'far fa-clock',
date: 'far fa-calendar',
up: 'far fa-arrow-up',
down: 'far fa-arrow-down',
previous: 'far fa-chevron-left',
next: 'far fa-chevron-right',
today: 'far fa-calendar-check-o',
clear: 'far fa-trash',
close: 'far fa-times'
} });
</script>
<!-- dashboard Scripts -->
<!-- Core -->
<script src="assets/vendor/jquery/dist/jquery.min.js"></script>
<script src="assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/js-cookie/js.cookie.js"></script>
<script src="assets/vendor/jquery.scrollbar/jquery.scrollbar.min.js"></script>
<script src="assets/vendor/jquery-scroll-lock/dist/jquery-scrollLock.min.js"></script>
<!-- Optional JS -->
<script src="assets/vendor/chart.js/dist/Chart.min.js"></script>
<script src="assets/vendor/chart.js/dist/Chart.extension.js"></script>
<!-- dashboard JS -->
<script src="assets/js/argon.js?v=1.2.0"></script>
</body>
</html>
Unable to obtain all HTML content of webpage using BeautifulSoup,Selenium
I am trying to extract all the locations of Ports from this web page: https://directories.lloydslist.com/var/recordset/65237/pos/11
I started with basic code using BeautifulSoup:
url ='https://directories.lloydslist.com/var/recordset/65237/pos/11'
result = requests.get(url)
c = result.content
soup = BeautifulSoup(c)
print(soup)
OUTPUT:
<!DOCTYPE html>
<!-- CMS Strata (c)2003-2020 AMA DataSet Limited (www.ama.uk.com) [CONTENT MANAGEMENT SYSTEM 0.9.40-alpha-lloyds-cms11-lloyds_list_2002] start:0.150--><html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/><script type="text/javascript">(window.NREUM||(NREUM={})).loader_config={licenseKey:"154740f801",applicationID:"14826849"};window.NREUM||(NREUM={}),__nr_require=function(n,e,t){function r(t){if(!e[t]){var i=e[t]={exports:{}};n[t][0].call(i.exports,function(e){var i=n[t][1][e];return r(i||e)},i,i.exports)}return e[t].exports}if("function"==typeof __nr_require)return __nr_require;for(var i=0;i<t.length;i++)r(t[i]);return r}({1:[function(n,e,t){function r(){}function i(n,e,t){return function(){return o(n,[u.now()].concat(f(arguments)),e?null:this,t),e?void 0:this}}var o=n("handle"),a=n(4),f=n(5),c=n("ee").get("tracer"),u=n("loader"),s=NREUM;"undefined"==typeof window.newrelic&&(newrelic=s);var p=["setPageViewName","setCustomAttribute","setErrorHandler","finished","addToTrace","inlineHit","addRelease"],d="api-",l=d+"ixn-";a(p,function(n,e){s[e]=i(d+e,!0,"api")}),s.addPageAction=i(d+"addPageAction",!0),s.setCurrentRouteName=i(d+"routeName",!0),e.exports=newrelic,s.interaction=function(){return(new r).get()};var m=r.prototype={createTracer:function(n,e){var t={},r=this,i="function"==typeof e;return o(l+"tracer",[u.now(),n,t],r),function(){if(c.emit((i?"":"no-")+"fn-start",[u.now(),r,i],t),i)try{return e.apply(this,arguments)}catch(n){throw c.emit("fn-err",[arguments,this,n],t),n}finally{c.emit("fn-end",[u.now()],t)}}}};a("actionText,setName,setAttribute,save,ignore,onEnd,getContext,end,get".split(","),function(n,e){m[e]=i(l+e)}),newrelic.noticeError=function(n,e){"string"==typeof n&&(n=new Error(n)),o("err",[n,u.now(),!1,e])}},{}],2:[function(n,e,t){function r(n,e){var t=n.getEntries();t.forEach(function(n){"first-paint"===n.name?a("timing",["fp",Math.floor(n.startTime)]):"first-contentful-paint"===n.name&&a("timing",["fcp",Math.floor(n.startTime)])})}function i(n){if(n instanceof c&&!s){var e,t=Math.round(n.timeStamp);e=t>1e12?Date.now()-t:f.now()-t,s=!0,a("timing",["fi",t,{type:n.type,fid:e}])}}if(!("init"in NREUM&&"page_view_timing"in NREUM.init&&"enabled"in NREUM.init.page_view_timing&&NREUM.init.page_view_timing.enabled===!1)){var o,a=n("handle"),f=n("loader"),c=NREUM.o.EV;if("PerformanceObserver"in window&&"function"==typeof window.PerformanceObserver){o=new PerformanceObserver(r);try{o.observe({entryTypes:["paint"]})}catch(u){}}if("addEventListener"in document){var s=!1,p=["click","keydown","mousedown","pointerdown","touchstart"];p.forEach(function(n){document.addEventListener(n,i,!1)})}}},{}],3:[function(n,e,t){function r(n,e){if(!i)return!1;if(n!==i)return!1;if(!e)return!0;if(!o)return!1;for(var t=o.split("."),r=e.split("."),a=0;a<r.length;a++)if(r[a]!==t[a])return!1;return!0}var i=null,o=null,a=/Version\/(\S+)\s+Safari/;if(navigator.userAgent){var f=navigator.userAgent,c=f.match(a);c&&f.indexOf("Chrome")===-1&&f.indexOf("Chromium")===-1&&(i="Safari",o=c[1])}e.exports={agent:i,version:o,match:r}},{}],4:[function(n,e,t){function r(n,e){var t=[],r="",o=0;for(r in n)i.call(n,r)&&(t[o]=e(r,n[r]),o+=1);return t}var i=Object.prototype.hasOwnProperty;e.exports=r},{}],5:[function(n,e,t){function r(n,e,t){e||(e=0),"undefined"==typeof t&&(t=n?n.length:0);for(var r=-1,i=t-e||0,o=Array(i<0?0:i);++r<i;)o[r]=n[e+r];return o}e.exports=r},{}],6:[function(n,e,t){e.exports={exists:"undefined"!=typeof window.performance&&window.performance.timing&&"undefined"!=typeof window.performance.timing.navigationStart}},{}],ee:[function(n,e,t){function r(){}function i(n){function e(n){return n&&n instanceof r?n:n?c(n,f,o):o()}function t(t,r,i,o){if(!d.aborted||o){n&&n(t,r,i);for(var a=e(i),f=v(t),c=f.length,u=0;u<c;u++)f[u].apply(a,r);var p=s[y[t]];return p&&p.push([b,t,r,a]),a}}function l(n,e){h[n]=v(n).concat(e)}function m(n,e){var t=h[n];if(t)for(var r=0;r<t.length;r++)t[r]===e&&t.splice(r,1)}function v(n){return h[n]||[]}function g(n){return p[n]=p[n]||i(t)}function w(n,e){u(n,function(n,t){e=e||"feature",y[t]=e,e in s||(s[e]=[])})}var h={},y={},b={on:l,addEventListener:l,removeEventListener:m,emit:t,get:g,listeners:v,context:e,buffer:w,abort:a,aborted:!1};return b}function o(){return new r}function a(){(s.api||s.feature)&&(d.aborted=!0,s=d.backlog={})}var f="nr#context",c=n("gos"),u=n(4),s={},p={},d=e.exports=i();d.backlog=s},{}],gos:[function(n,e,t){function r(n,e,t){if(i.call(n,e))return n[e];var r=t();if(Object.defineProperty&&Object.keys)try{return Object.defineProperty(n,e,{value:r,writable:!0,enumerable:!1}),r}catch(o){}return n[e]=r,r}var i=Object.prototype.hasOwnProperty;e.exports=r},{}],handle:[function(n,e,t){function r(n,e,t,r){i.buffer([n],r),i.emit(n,e,t)}var i=n("ee").get("handle");e.exports=r,r.ee=i},{}],id:[function(n,e,t){function r(n){var e=typeof n;return!n||"object"!==e&&"function"!==e?-1:n===window?0:a(n,o,function(){return i++})}var i=1,o="nr#id",a=n("gos");e.exports=r},{}],loader:[function(n,e,t){function r(){if(!x++){var n=E.info=NREUM.info,e=l.getElementsByTagName("script")[0];if(setTimeout(s.abort,3e4),!(n&&n.licenseKey&&n.applicationID&&e))return s.abort();u(y,function(e,t){n[e]||(n[e]=t)}),c("mark",["onload",a()+E.offset],null,"api");var t=l.createElement("script");t.src="https://"+n.agent,e.parentNode.insertBefore(t,e)}}function i(){"complete"===l.readyState&&o()}function o(){c("mark",["domContent",a()+E.offset],null,"api")}function a(){return O.exists&&performance.now?Math.round(performance.now()):(f=Math.max((new Date).getTime(),f))-E.offset}var f=(new Date).getTime(),c=n("handle"),u=n(4),s=n("ee"),p=n(3),d=window,l=d.document,m="addEventListener",v="attachEvent",g=d.XMLHttpRequest,w=g&&g.prototype;NREUM.o={ST:setTimeout,SI:d.setImmediate,CT:clearTimeout,XHR:g,REQ:d.Request,EV:d.Event,PR:d.Promise,MO:d.MutationObserver};var h=""+location,y={beacon:"bam.nr-data.net",errorBeacon:"bam.nr-data.net",agent:"js-agent.newrelic.com/nr-1158.min.js"},b=g&&w&&w[m]&&!/CriOS/.test(navigator.userAgent),E=e.exports={offset:f,now:a,origin:h,features:{},xhrWrappable:b,userAgent:p};n(1),n(2),l[m]?(l[m]("DOMContentLoaded",o,!1),d[m]("load",r,!1)):(l[v]("onreadystatechange",i),d[v]("onload",r)),c("mark",["firstbyte",f],null,"api");var x=0,O=n(6)},{}],"wrap-function":[function(n,e,t){function r(n){return!(n&&n instanceof Function&&n.apply&&!n[a])}var i=n("ee"),o=n(5),a="nr#original",f=Object.prototype.hasOwnProperty,c=!1;e.exports=function(n,e){function t(n,e,t,i){function nrWrapper(){var r,a,f,c;try{a=this,r=o(arguments),f="function"==typeof t?t(r,a):t||{}}catch(u){d([u,"",[r,a,i],f])}s(e+"start",[r,a,i],f);try{return c=n.apply(a,r)}catch(p){throw s(e+"err",[r,a,p],f),p}finally{s(e+"end",[r,a,c],f)}}return r(n)?n:(e||(e=""),nrWrapper[a]=n,p(n,nrWrapper),nrWrapper)}function u(n,e,i,o){i||(i="");var a,f,c,u="-"===i.charAt(0);for(c=0;c<e.length;c++)f=e[c],a=n[f],r(a)||(n[f]=t(a,u?f+i:i,o,f))}function s(t,r,i){if(!c||e){var o=c;c=!0;try{n.emit(t,r,i,e)}catch(a){d([a,t,r,i])}c=o}}function p(n,e){if(Object.defineProperty&&Object.keys)try{var t=Object.keys(n);return t.forEach(function(t){Object.defineProperty(e,t,{get:function(){return n[t]},set:function(e){return n[t]=e,e}})}),e}catch(r){d([r])}for(var i in n)f.call(n,i)&&(e[i]=n[i]);return e}function d(e){try{n.emit("internal-error",e)}catch(t){}}return n||(n=i),t.inPlace=u,t.flag=a,t}},{}]},{},["loader"]);</script>
<meta content="blendTrans(Duration=0.1)" http-equiv="Page-Enter"/>
<meta content="blendTrans(Duration=0.1)" http-equiv="Page-Exit"/>
<meta content="support#ama.uk.com" http-equiv="Reply-to"/>
<meta content="CMS Strata - AMA DataSet Limited" name="generator"/>
<meta content="" name="description"/>
<meta content="" name="keywords"/>
<meta content="index, follow" name="robots"/>
<meta content="http://directories.lloydslist.com/var/recordset/65237/pos/11" property="og:url"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>Lloyd's List - Directories</title>
<link href="/ll/images/favicon.ico" rel="icon" type="image/vnd.microsoft.icon"/>
<link href="/ll/images/favicon.ico" rel="shortcut icon" type="image/x-icon"/>
<link href="/ll/images/favicon.ico" rel="apple-touch-icon"/>
<link href="/cms/css/bootstrap/3.3.5/bootstrap.min.css?1468311567" media="all" rel="stylesheet" type="text/css"/>
<link href="/cms/css/ama.strata.css?1488964337" media="all" rel="stylesheet" type="text/css"/>
<link href="/css/head_footer.css?1495717019" media="all" rel="stylesheet" type="text/css"/>
<link href="/css/fonts.css?1492593457" media="all" rel="stylesheet" type="text/css"/>
<link href="/dist/index-generated.css?1562066943" media="all" rel="stylesheet" type="text/css"/>
<link href="/css/directories.css?1562066740" media="all" rel="stylesheet" type="text/css"/>
<link href="/css/font-awesome/font-awesome.css?1421945712" media="all" rel="stylesheet" type="text/css"/>
<link href="/css/site.css?1495446562" media="all" rel="stylesheet" type="text/css"/>
<link href="/css/survey_responsive.css?1495718076" media="all" rel="stylesheet" type="text/css"/>
<script src="/cms/includes/js/jquery/jquery-1.9.1.js?1470319420" type="text/javascript"></script>
<script src="/cms/includes/js/bootstrap/bootstrap.min.js?1396702205" type="text/javascript"></script>
<script src="/js/jquery/jquery-migrate-1.2.1.min.js?1490174098" type="text/javascript"></script>
<script src="/js/ajax/jqueryui/1.9.1/googleapis.jquery-ui.min.js?1489506075" type="text/javascript"></script>
<script src="/scripts/jquery.ui.map.full.min.js?1489420109" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCMhyPGe9zmfvZQz876tu40kbbzEqBebJk&sensor=false?1490802358" type="text/javascript"></script>
<script src="/cms/includes/js/jquery.watermarkinput.js?1485525553" type="text/javascript"></script>
<script src="/cms/includes/js/jquery.autocomplete.js?1490112323" type="text/javascript"></script>
<script src="/cms/includes/js/ama.ajax.js?1468311510" type="text/javascript"></script>
<script src="/js/compare-ports.js?1491468859" type="text/javascript"></script>
<script src="/js/expand-section.js?1490182977" type="text/javascript"></script>
</head>
<body id="ama-page-">
<div class="ama-level-0" id="ama-layout-">
</div>
<!-- foot body -->
<!-- foot js -->
<script src="/dist/js/index.js?1497352833" type="text/javascript"></script>
<link href="/css/lloydslist.css?1562065235" media="all" rel="stylesheet" type="text/css"/>
<link href="/css/print.css?1492684720" media="print" rel="stylesheet" type="text/css"/>
<!-- BODY clode --> <script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","licenseKey":"154740f801","applicationID":"14826849,14828730,26854960","transactionName":"NldbbUJZV0tXAEFRXQ8dbEtZF1BWUgZNFloVX1U=","queueTime":0,"applicationTime":153,"atts":"GhBYGwpDREU=","errorBeacon":"bam.nr-data.net","agent":""}</script></body>
</html>
The output is not complete. It is missing the entirety of the HTML body and for some reason, the output is incorrectly naming the body ID and div class tags:
</head>
<body id="ama-page-">
<div class="ama-level-0" id="ama-layout-">
</div>
<!-- foot body -->
<!-- foot js -->
COMPARING this to the 'View Page Source' option on the browser (Chrome):
</head>
<body id='ama-page-21397'>
<div id='ama-layout-21687' class='xsite_container ama-level-0'>
<div id='ama-layout-21337' class='lloydslist-header ama-level-1'>
<div id='ama-section-14735' class='ama-section'>
<div id='ama-section-body-14735' class='sectionbody'>
<div id='ama-field-64687' class='ama-field-html-php'>
<script async src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'></script>
<script>
So you can see that the body id, and div class differ slightly:
e.g
<body id="ama-page-">
vs
<body id='ama-page-21397'>
So this may be where the problem lies, but I am new to web scraping and I am struggling to find a solution.
Here is the full 'View Page Source' Code which I want:
view-source:https://directories.lloydslist.com/var/recordset/65237/pos/11
Any help greatly appreciated!
NOTE: I've also tried using Selenium, but still no success:
url = "https://directories.lloydslist.com/var/recordset/65237/pos/11"
opts = Options()
opts.add_argument("user-agent=whatever you want")
driver = webdriver.Chrome(chrome_options=opts)
driver.get(url)
time.sleep(3)
print(driver.page_source)
Bootstrap Js file is not applying in Angular 8
I have bootstrap js file inside assets folder like> assets/js/bootstrap.min.js and I have added in my index.HTML page with scrip tag <script src="assets/js/bootstrap.min.js"></script> but is not applying in my component. What is wrong here or is there any way to use it. <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="96"> <meta property="og:image:height" content="96"> <meta content="width=2000" name="viewport"> <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> --> <meta charset="utf-8"> <title>HomeClueWebApp</title> <base href="/"> <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> --> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="assets/css/icofont.css"> <link rel="stylesheet" type="text/css" href="assets/css/stellarnav.min.css"> <link rel="stylesheet" type="text/css" href="assets/css/featherlight.min.css"> <link rel="stylesheet" type="text/css" href="assets/css/featherlight.gallery.min.css"> <link rel="stylesheet" type="text/css" href="assets/css/hover.css"> <link rel="stylesheet" type="text/css" href="assets/css/flexslider.css"> <link rel="stylesheet" type="text/css" href="assets/css/owl.carousel.min.css"> <link rel="stylesheet" type="text/css" href="assets/css/owl.theme.default.min.css"> <link rel="stylesheet" type="text/css" href="assets/css/slick.css"> <link rel="stylesheet" type="text/css" href="assets/css/slick-theme.css"> <link rel="stylesheet" type="text/css" href="assets/css/jquery-ui.css"> <link rel="stylesheet" type="text/css" href="assets/css/animations.css"> <link rel="stylesheet" type="text/css" href="assets/css/animate.min.css"> <link rel="stylesheet" type="text/css" href="assets/css/morphext.css"> <link rel="stylesheet" type="text/css" href="assets/css/owl.carousel.min.css"> <link rel="stylesheet" type="text/css" href="assets/css/owl.theme.default.css"> <link rel="stylesheet" type="text/css" href="assets/css/jquery.mb.YTPlayer.min.css"> <!-- Main stylesheet --> <link rel="stylesheet" type="text/css" href="assets/css/style.css"> <!-- Responsive stylesheet --> <link rel="stylesheet" type="text/css" href="assets/css/responsive.css"> <!-- Favicon --> <link href="assets/images/favicon.png" rel="shortcut icon" type="image/png"> <link href="assets/images/apple-icon.png" rel="icon" type="image/png"> <link href="assets/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <!-- jQuery --> <script src="assets/js/jquery.min.js"></script> <script src="assets/js/bootstrap.min.js"></script> <!-- Bootstrap Core JavaScript --> <script src="assets/js/popper.min.js"></script> <!-- all plugins and JavaScript --> <script type="text/javascript" src="assets/js/css3-animate-it.js"></script> <script type="text/javascript" src="assets/js/stellarnav.min.js"></script> <script type="text/javascript" src="assets/js/featherlight.min.js"></script> <script type="text/javascript" src="assets/js/featherlight.gallery.min.js"></script> <script type="text/javascript" src="assets/js/jquery.flexslider.js"></script> <script type="text/javascript" src="assets/js/owl.carousel.min.js"></script> <script type="text/javascript" src="assets/js/jarallax.js"></script> <script type="text/javascript" src="assets/js/slick.min.js"></script> <script type="text/javascript" src="assets/js/jquery-ui.js"></script> <script type="text/javascript" src="assets/js/jquery-scrolltofixed-min.js"></script> <script type="text/javascript" src="assets/js/morphext.min.js"></script> <script type="text/javascript" src="assets/js/dyscrollup.js"></script> <script type="text/javascript" src="assets/js/jquery.ripples.js"></script> <script type="text/javascript" src="assets/js/jquery.mb.YTPlayer.min.js"></script> <script type="text/javascript" src="assets/js/app.js"></script> <!-- Main Custom JS --> <script type="text/javascript" src="assets/js/main.js"></script> <app-root></app-root> </body> </html> file structure is here https://kuldeepkoranga-connekt.tinytake.com/tt/Mzk1NjkyMl8xMjE0NjIyMw https://kuldeepkoranga-connekt.tinytake.com/tt/Mzk1NjkyNF8xMjE0NjIyNQ Thanks for any response
you should add jquery and bootstrap scripts in angular.json scripts section.
As all the scripts and styles you are trying to load are inside some folders in assets so you need to tell angular to load and consider those folders as assets. You can do that in angular.json file as follows: "assets": [ "src/favicon.ico", "src/assets", "src/assets/*" // Add this line at end. ], With this line at end we are telling angular to build other folders inside assets folder to consider as assets. As already suggested by #Chirag Chaudhari This is normally not a good way to load scripts and styles as assets, instead load them with scripts and styles array present in angular.json file. Hope it helps.
Scripts doesn't work in angular2 app
I made a dashboard with Angular.
I included all my scripts in my index.html, but every time I click a link, only the html and css are executed.
The Javascripts' actions are not executed such as graphs that i implemented.
I have to reload the page for everything to work normally.
That is my index.html source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="assets/materialize/css/materialize.min.css" media="screen,projection" />
<!-- Bootstrap Styles-->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- FontAwesome Styles-->
<link href="assets/css/font-awesome.css" rel="stylesheet" />
<!-- Morris Chart Styles-->
<link href="assets/js/morris/morris-0.4.3.min.css" rel="stylesheet" />
<!-- Custom Styles-->
<link href="assets/css/custom-styles.css" rel="stylesheet" />
<!-- Google Fonts-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="assets/js/Lightweight-Chart/cssCharts.css">
</head>
<body>
<app-root></app-root>
<script src="assets/js/jquery-1.10.2.js"></script>
<!-- Bootstrap Js -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/materialize/js/materialize.min.js"></script>
<!-- Metis Menu Js -->
<script src="assets/js/jquery.metisMenu.js"></script>
<!-- Morris Chart Js -->
<script src="assets/js/morris/raphael-2.1.0.min.js"></script>
<script src="assets/js/morris/morris.js"></script>
<script src="assets/js/easypiechart.js"></script>
<script src="assets/js/easypiechart-data.js"></script>
<script src="assets/js/Lightweight-Chart/jquery.chart.js"></script>
<!-- Custom Js -->
<script src="assets/js/custom-scripts.js"></script>
<!-- Tabs -->
<!-- jQuery Js -->
<script src="assets/js/jquery-1.10.2.js"></script>
<!-- Bootstrap Js -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/materialize/js/materialize.min.js"></script>
<!-- Metis Menu Js -->
<script src="assets/js/jquery.metisMenu.js"></script>
<!-- Morris Chart Js -->
<script src="assets/js/morris/raphael-2.1.0.min.js"></script>
<script src="assets/js/morris/morris.js"></script>
<script src="assets/js/easypiechart.js"></script>
<script src="assets/js/easypiechart-data.js"></script>
<script src="assets/js/Lightweight-Chart/jquery.chart.js"></script>
<!-- DATA TABLE SCRIPTS -->
<script src="assets/js/dataTables/jquery.dataTables.js"></script>
<script src="assets/js/dataTables/dataTables.bootstrap.js"></script>
<script>
$(document).ready(function() {
$('#dataTables-example').dataTable();
});
</script>
<!--Pizza-->
<script src="assets/js/highcharts.js"></script>
<script src="assets/js/exporting.js"></script>
<script src="assets/js/pizza.js"></script>
</body>
</html>
Case angular-cli and latest version, copy path of your scripts in angular-cli.json. Ex.: "scripts": [ "assets/js/dataTables/jquery.dataTables.js" ],