I have index.html file where I have html head body tags and I have constant.js file from which I want to use a constant. how to define that constant in constant.js and how to use it in index.html and where to place the import statement.
When I include with this in the head section of HTML
<script type="module" src="../home/constants.js"></script>
constants.js file contains only this
const surl = "http://localhost:8000/"
I got this error in browser
Loading module from “http://localhost:8000/constants.js” was blocked because of a disallowed MIME type (“text/html”)
Also I am not able to use the the sdata_url
Uncaught ReferenceError: sdata_url is not defined
here is my html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title >CandleCharts</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/stocktools/gui.css">
<link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/annotations/popup.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
<!-- my modules -->
<script type="module" src="../home/constants.js"></script>
</head>
<body>
<div id="top_bar">
</div>
<div id="container" style="height: 700px; min-width: 310px" class="chart"></div>
<script type="text/javascript">
console.log(sdata_url)
</script>
</body>
</html>
<script type="module" >
import {sdata_url} from "../js/constants.js";
console.log(sdata_url);
</script>
In the above way I was able to use the sdata_url
Related
I'm struggling my head for 5 hrs to get out of this issue, I've put some <script> tags in the index.html file that resides in the public folder.
I want them to execute after the Browser has rendered the HTML completely, I know this is very basic question, but the problem is, I'm converting an HTML template to React, and it heavily uses animations, which I can't afford to write in react again from start. Here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Galaxy App</title>
<!--CSS-->
<link href="asset/css/icofont.min.css" rel="stylesheet" />
<link href="asset/css/linearicons.min.css" rel="stylesheet" />
<link href="asset/css/magnific-popup.min.css" rel="stylesheet" />
<link href="asset/css/animsition.min.css" rel="stylesheet" />
<link href="asset/css/bootstrap.min.css" rel="stylesheet" />
<link href="asset/css/swiper.min.css" rel="stylesheet" />
<link href="asset/css/styles.css" rel="stylesheet" />
<link href="asset/css/main.css" rel="stylesheet" />
<link href="asset/css/homepage.css" rel="stylesheet" />
<!--Theme CSS-->
<link href="asset/css/theme.css" rel="stylesheet" />
<link href="asset/css/responsive.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script src="asset/js/polyfill.min.js"></script>
<script src="asset/js/jquery.min.js"></script>
<script src="asset/js/jquery.viewport.min.js"></script>
<script src="asset/js/jQuerySimpleCounter.min.js"></script>
<script src="asset/js/jquery.magnific-popup.min.js"></script>
<script src="asset/js/animsition.min.js"></script>
<script src="asset/js/isotope.pkgd.min.js"></script>
<script src="asset/js/bootstrap.bundle.min.js"></script>
<script src="asset/js/rellax.min.js"></script>
<script src="asset/js/swiper.min.js"></script>
<script src="asset/js/smoothscroll.js"></script>
<script src="asset/js/svg4everybody.legacy.min.js"></script>
<script src="asset/js/TweenMax.min.js"></script>
<script src="asset/js/TimelineLite.min.js"></script>
<script src="asset/js/typed.min.js"></script>
<script src="asset/js/vivus.min.js"></script>
<script src="asset/js/main.js"></script>
<!-- Theme JS -->
<script src="asset/js/theme.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script src="asset/js/cutsom.js"></script>
</body>
</html>
I manually checked by logging the document.getElementById() in the last script, and it returns undefined/null because at that time the HTML is not rendered completely, even though I've put the scripts at the end of file.
it works if I add setTimeout in my script, and it captures the elements perfectly.
So what should I do to only load all the scripts when my HTML has been rendered completely.
One way to accomplish this is to emit an Event from React.
Add this to your main react component:
useEffect(() => {
const event = new Event('rendered')
document.dispatchEvent(event)
}, [])
Listen for the event on the page:
<script>
document.addEventListener('rendered', function() {
// start animation
}, false)
</script>
This question already has answers here:
TypeError: $(...).modal is not a function with bootstrap Modal
(14 answers)
Closed 1 year ago.
Possibly I did wrong script order,I am trying make a dynamic pop up modal, which will fetch data on click. my scripts are :
<head>
<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.css"
rel="stylesheet">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Font Awesome Intigration -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"/>
<link rel="stylesheet" type="text/css" href="{{asset('css/style.css')}}">
<link rel="stylesheet" href="{{asset('css/responsive.css')}}">
<link rel="stylesheet" href="{{asset('css/fundraisers.css')}}">
<!-- <link rel="stylesheet" href="{{asset('css/support.css')}}"> -->
#yield('head-script')
<!-- must include -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
{{-- for sweetalert2 --}}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#10"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"
integrity="sha512-
AA1Bzp5Q0K1KanKKmvN/4d3IRKVlv9PYgwFPvm32nPO6QS8yH1HO7LbgB1pgiOxPtfeg5zEn2ba64MUcqJx6CA=="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
<script type="text/javascript" src="{{asset('js/languageChange.js')}}"></script>
<script src="{{ asset('js/share.js') }}"></script>
<script src="{{ asset('js/main.js') }}"></script>
<title>Mortfund</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-
iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous"
/>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap"
rel="stylesheet">
Laravel Body tag goes here ------
<script src="{{ url('js/authentication.js') }}"></script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js">
</script>
<script src="{{asset('js/script.js')}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js">
</script>
<script src="{{asset('js/jquery.countup.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.js"></script>
<script>
I excluded html and body tags to reduce the amount of code, which is not good for a posting in stack overflow. If you have any question please ask me.
Because you loaded JQuery thrice :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
You need to load JQuery once in a page, If you loaded JQuery more than once then you will face error, Why do I need to load jquery twice
I created a small nav to switch between different stylesheets using jquery, however once I moved my scripts out from the page and into a separate file they no longer respond.
$(document).ready(function() {
// teal stylsheet
$("#cssTeal").click(function() {
$("link[rel=stylesheet]").attr({href : "stylesheetteal.css"});
});
// pink stylesheet
$("#cssPink").click(function() {
$("link[rel=stylesheet]").attr({href : "stylesheetpink.css"});
});
// yellow stylesheet
$("#cssYellow").click(function() {
$("link[rel=stylesheet]").attr({href : "stylesheetyellow.css"});
});
});
<html>
<head>
<meta charset="UTF-8"/>
<title>Mission Statement</title>
<link href="stylesheetteal.css" rel="stylesheet" type="text/css" media="all" id="teal"/>
<link href="stylesheeetpink.css" rel="alternate stylesheet" type="text/css" media="all" id="pink"/>
<link href="stylesheetyellow.css" rel="alternate stylesheet" type="text/css" media="all" id="yellow"/>
<link href="scripts.js" rel="external" type="text/javascript"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui/jquery-ui.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="themes">
<div class="indiv"><a id="cssTeal" href="#teal"><img src="assets/tealcircle.png"></a></div>
<div class="indiv"><a id="cssPink" href="#pink"><img src="assets/pinkcircle.png"></a></div>
<div class="indiv"><a id="cssYellow" href="#yellow"><img src="assets/yellowcircle.png"></a></div>
</div>
The problem is the order of the loaded scripts and the tag you are using to load your custom scripts. You are using a link tag instead of a script tag.
Try this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui/jquery-ui.min.js"></script>
<script src="scripts.js"></script>
Also add all the script tags just before the closing </body> tag. Scripts block content from loading, so you should add them last so they don’t block the rest of the content from being loaded.
I want to create a slider in a html file with this bootstrap api, but it keeps showing `jquery-3.1.1.slim.min.js:2 jQuery.Deferred exception: $(...).Slider is not a function TypeError:
$(...).Slider is not a function
at HTMLDocument.<anonymous> (file:///Users/apple/Desktop/pjt/index.html:35:18)
at j (https://code.jquery.com/jquery-3.1.1.slim.min.js:2:30164)
at k (https://code.jquery.com/jquery-3.1.1.slim.min.js:2:30478) undefined
r.Deferred.exceptionHook # jquery-3.1.1.slim.min.js:2
k # jquery-3.1.1.slim.min.js:2
jquery-3.1.1.slim.min.js:2 Uncaught TypeError: $(...).Slider is not a function
at HTMLDocument.<anonymous> (index.html:35)
at j (jquery-3.1.1.slim.min.js:2)
at k (jquery-3.1.1.slim.min.js:2)`
I downloaded both js and css files from here.
this is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/bootstrap-slider.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header class="nav-header">
</header>
<div class="container">
<div class="row">
<div class="left_section">
<input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/>
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>
</div>
<div class="middle_section">
</div>
<div class="right_section">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<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="assets/js/bootstrap-slider.js"></script>
<script>
$(document).ready(function() {
$("#ex6").Slider(); // I also tried .slider()
$("#ex6").on("slide", function(slideEvt) {
$("#ex6SliderVal").text(slideEvt.value);
});
})
</script>
</body>
</html>
I also tried to use CDN to replace the local js and css but nothing changes
Like a slider documentation -- You have 2 ways to use it
var mySlider = new Slider('#ex6');
OR
$('#ex6').slider();
Working example using .slider
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/css/bootstrap-slider.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header class="nav-header">
</header>
<div class="container">
<div class="row">
<div class="left_section">
<input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/>
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>
</div>
<div class="middle_section">
</div>
<div class="right_section">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<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://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/bootstrap-slider.js"></script>
<script>
$(document).ready(function() {
$('#ex6').slider();
$("#ex6").on("slide", function(slideEvt) {
$("#ex6SliderVal").text(slideEvt.value);
});
})
</script>
</body>
</html>
working example using var myslider = new Slider('#ex6')
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/css/bootstrap-slider.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header class="nav-header">
</header>
<div class="container">
<div class="row">
<div class="left_section">
<input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/>
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>
</div>
<div class="middle_section">
</div>
<div class="right_section">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<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://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/bootstrap-slider.js"></script>
<script>
$(document).ready(function() {
var mySlider = new Slider('#ex6');
$("#ex6").on("slide", function(slideEvt) {
$("#ex6SliderVal").text(slideEvt.value);
});
})
</script>
</body>
</html>
Note: On my examples I used slider CDN so if your code
not working with your css , js paths you can use CDN instead or check
your paths
Alright, I apologize for not writing my question clearly, so the issue is not from the html file, but from the framework that I am working on.
Since I was using electron, if you just load the html code, the application can not recognize the js files in the html unless you add the following code before and after your scripts.
<!-- Insert this line above script imports -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<!-- normal script imports etc -->
<script src="scripts/jquery.min.js"></script>
<script src="scripts/vendor.js"></script>
<!-- Insert this line after script imports -->
<script>if (window.module) module = window.module;</script>
Here's the source of the solution on this issue
Write slider instead of Slider
$("#ex6").slider();
And make sure the bootstrap-slider.js file is placed in assets/js/ folder
I have tried to add the fullCalendar jquery to a view in my MVC 4 project. When I try to laod the page there are no errors but the calendar does not appear on the page. I am not sure why it isn't appearing and I have looked at the documentation and it looks like I got everything covered.
Here is my HTML:
#{
ViewBag.Title = "Calendar";
}
<h2>Calendar</h2>
<html>
<head>
<title>Calendar</title>
<link href="#Url.Content("~/Content/fullcalendar.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/fullcalendar.print.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="#Url.Content("/Scripts/moment.min.js")"></script>
<script type="text/javascript" src="#Url.Content("/Scripts/jquery.min.js")"></script>
<script type="text/javascript" src="#Url.Content("/Scripts/jquery-ui.custom.min.js")"></script>
<script type="text/javascript" src="#Url.Content("/Scripts/fullcalendar.min.js")"></script>
<script type="text/javascript">
$("#calendar").fullCalendar({
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
HERE IS MY CSS:
#calendar {
width: 900px;
margin: 40px auto;
}
Add refs to the libs you want to use;
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='fullcalendar/lib/jquery.min.js'></script>
<script src='fullcalendar/lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
<script type='text/javascript'>