My current structure has a layout with header, body and footer. Inside the body load a view using ajax to call for a action controller returning a Json and painting a tree view. When user click on the tree view the footer should load the detailed information. But isnt working, my guess is because the scripts section isnt render properly.
Right now the script are in the layout without bundles or anything and work ok on the Main body because I use Jquery and a Tree to load the Json data.
But in the partial View get an error. I could write a #section scripts area and copy all the script from the layout in the Partial View but why should I duplicate the code?
The worst part is only give me problem in the production enviroment ... on my devolpment enviroment works ok.
So the questions:
Why the main view can see the scripts define on the Layout but the Partial View Doesnt?
Why my development enviroment work ok, but productions doesnt?
What should I do to solve this?
EDIT: More testing.
This is a test View, this render in the Body. But I need include script section otherwise the dialog doesnt show, even when layout have the scripts too.
#{
ViewBag.Title = "TreeDetails";
}
<html>
<head>
<title>#ViewBag.Title</title>
</head>
<body>
<h2>TEST PAGE</h2>
<script>
// Your code goes here.
$(document).ready(function () {
console.log("before dialog");
$("#dialog").dialog();
console.log("after dialog");
})
</script>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
#section scripts {
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
}
It seems a run time error due to an unrecognized jquery function.. try to move your link reference to jquery from your view #section area in the layout header..
Related
I have a simple one page website with bootstrap 5 set up using spring boot with thymeleaf.
On this page I want e.g. to use the bootstrap tooltip. The problem is that the function to initialize the tooltip fires before the bootstrap script has finished loading so there will be an error and the page will not load correctly.
<head>
... // css and meta omitted for brevity
<script th:src="#{/js/bootstrap.bundle.min.js}" async="true"></script>
</head>
<body>
... // page content
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
</body>
I tried to place the bootstrap script
in the head section
with async attribute
with defer attribute
a combination of the attributes
in the body section directly before the tooltip init script
but nothing prevents the second script to fire before the first script has finished loading.
I have read the HTML spec here but in the end I'm not sure if the loading of the script is truly the problem.
Has someone an idea to definitly prevent this error?
Finally solved this problem.
I put all the javascript code in a seperate js-file.
Then I load this file after the bootstrap file at the end of the body and everything works fine.
<head>
... //css and meta
</head>
<body>
... // page content
<script th:src="#{/js/bootstrap.bundle.min.js}"></script>
<script th:src="#{/js/myfunction.js}"></script>
</body>
I'm trying to import header.html for avoiding file duplication. But in this situation, I can't use PHP.
This is the head section of index.html file,
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
The body section I have called my header.html as follows,
<body>
<!-- include Header -->
<div id="header"></div>
<!-- end include header -->
</body>
The header is including fine but after the header included the dropdown lists become unclickable.
When I go to inspect elements there are following errors,
One possible reason for your problem would be that if you already have <html><head><body> tags in all header.html, footer.html and your master page. When you import those sub pages in your master page all those tags will come along with contents. If its true delete those tags from your sub pages because your master page should only have one of specific tags
1) Remove the following tags from header.html and footer.html
<html>
<head>
</head>
<body>
</body>
</html>
2) Regarding Slick error please make sure you are not calling the init twice, best way would be
$('.selector').slick();
$(document).ready(function() {
$.get("header.html", function(response){
$('#header').html(response);
});
})
<?php include_once('header.html');?>
<div id="header"></div>
<?php include_once('footer.html');?>
I want to use bootstrap navbar in my website and so i have made the webpage header.html (link given below) and it works fine
http://upscfever.com/upsc-fever/header.html
However when i use the same code on my home page (link below). it doesnt close after we open it.
http://upscfever.com/upsc-fever/index.html
On my homepage - index.html i have written below code.
<script>
$(function () {
$("#header").load("http://upscfever.com/upsc-fever/header.html");
});
</script>
<body>
<div id="header"></div>
<!-- other things-->
</body>
I get the error:
jQuery.Deferred exception: $(...).dropdown is not a function
#http://upscfever.com/upsc-fever/index.html:1:15
g/https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:29946
g/https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:30262
you may want to put the load script just before the end of the body tag, so that the <div id="header"> gets added to the DOM before using it.
Also make sure you are not loading bootstrap js more than once in your index.html file.
Maybe try with
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
and see if it will work.
I have this code:
<body class='homepage'>
<div id='wrapper'>
<header id='header'></header>
<div id='main' role='main'>
...
Because there are many HTML pages, I decided to include the header in each page by putting the html inside header.html and using this jQuery:
<script src="assets/javascripts/jquery/jquery.min.js" type="text/javascript"></script>
<script src="assets/javascripts/jquery/jquery.mobile.custom.min.js" type="text/javascript"></script>
<script>
$(function(){
// Include header and footer
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
<script src="assets/javascripts/bootstrap/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/javascripts/plugins/modernizr/modernizr.custom.min.js" type="text/javascript"></script>
<script src="assets/javascripts/plugins/hover_dropdown/twitter-bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<script src="assets/javascripts/plugins/retina/retina.min.js" type="text/javascript"></script>
// etc... there are about a dozen js scripts
At a glance, it looks fine. However, the problem I am finding is that the effects I have in the header (for example hovering over a nav link SHOULD show the nav menu) don't work when I use this jQuery include approach. If I copy and paste the full header and put it back into #header then it works fine again.
So I think it must be a timing issue, perhaps the header is loading before the appropriate jQuery scripts are included perhaps (just a guess? I have tried moving the load() to under the other scripts but that did not work).
What should I do to fix this?
You are basically calling ready() function which means, put the header files when the DOM is ready. So most of the events were bound to non-existent elements.
If you have a backend code, you could render the imports beforehand in a template view file or something.
Or, you could also use event delegation for the events that you need.
I am working in an ASP.NET MVC project that uses a lot of #section scripts blocks. We also use a lot of partial views. Currently, I have our global JS (global.js) rendered in the <head> element, which blocks the rest of the page from loading until it has finished loading. I want to move this JS into the body, but because my partial views are reliant on the global.js, this becomes a problem. The rendered HTML turns out to be:
<html>
<head>
<title>Page</title>
<!-- Scripts/styles here -->
</head>
<body>
<!-- Partial A -->
<div id="PartialA">Partial A</div>
<script type="text/javascript">
$(function(){
Foo.bar();
});
</script>
<script type="text/javascript" src="global.js"></script>
</body>
</html>
And global.js:
var Foo = {};
Foo.bar = function(){
console.log("I did Foo.bar()!");
}
Is there anything I can do to place my global.js just before the </body tag while still allowing the JS that uses global.js to exist higher up in the body? Maybe some sort of custom "ready" event I can subscribe to?
why not in Partial A
window.initPartialA = function () {
Foo.bar();
}
and in Global
if (window.initPartialA) {
initPartialA();
}
This is really gross, I would figure out a way of how to organize your script tags in asp rather than doing this.