lenamtl
asked on
include html file with javascript
Hi,
I'm using a AdminLTE Bootstrap template
https://github.com/almasaeed2010/AdminLTE
For a specific project I can't use PHP or ASP include to include file.
As this project having several HTML pages I want to include the menu file,
so I can edit the menu only at one place.
Here is the code I'm using
Place in the <head>
<script>
$(document).ready(function () {
$('#mymenu').load('_nav.ht ml');
});
<script>
Placed in the <body>
<div id="mymenu"></div>
Placed at the end before the </body>
<script src="js/help/app.js" type="text/javascript"></s cript>
The menu is loading but the javascript required to open submenu doesn't load
Any clue to fix that?
Thanks
I'm using a AdminLTE Bootstrap template
https://github.com/almasaeed2010/AdminLTE
For a specific project I can't use PHP or ASP include to include file.
As this project having several HTML pages I want to include the menu file,
so I can edit the menu only at one place.
Here is the code I'm using
Place in the <head>
<script>
$(document).ready(function
$('#mymenu').load('_nav.ht
});
<script>
Placed in the <body>
<div id="mymenu"></div>
Placed at the end before the </body>
<script src="js/help/app.js" type="text/javascript"></s
The menu is loading but the javascript required to open submenu doesn't load
Any clue to fix that?
Thanks
I am assuming, you have included JQuery in head and custom file (app.js) in the main page.
If you using static bind, after you load the menu via
$('#mymenu').load('_nav.ht ml');
You need run the appropriate custom code to bind the events to menu options.
Do you use Chrome Browser. Use the inspect element and look at menu item for events binding
If you using static bind, after you load the menu via
$('#mymenu').load('_nav.ht
You need run the appropriate custom code to bind the events to menu options.
Do you use Chrome Browser. Use the inspect element and look at menu item for events binding
ASKER
I will get back to you monday, thanks
ASKER
julianH : your solution doesn't work.
pravinasar :
I think (not sure) that the event listener is readystatechange
could you tell me how to bind it
pravinasar :
I think (not sure) that the event listener is readystatechange
could you tell me how to bind it
greetings, , can you show us the content (html & code) of your - _nav.html - page?
Here is a simple example code.
menu.html file
myindex.html
menu.html file
<ul style="vertical-align: top;">
<li><a href="index.html">Home</a></li>
<li>
<a class="product" href="#">Products</a>
<ul>
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 1 Product 1</a></li>
<li><a href="#">Category 1 Product 2</a></li>
<li><a href="#">Category 1 Product 3</a></li>
<li>
<a href="">Category 1 SubCategory 1</a>
<ul>
<li><a href="#">Cat1 SubCat1 Product1</a></li>
<li><a href="#">Cat1 SubCat1 Product2</a></li>
<li><a href="#">Cat1 SubCat1 Product3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
myindex.html
<!DOCTYPE html>
<html>
<head>
<title>Load AJAX Menu</title>
<script type="text/javascript" src="jquery/jquery-1.11.0.min.js"></script>
</head>
<body>
<nav id="nav"> </nav>
<script type="text/javascript">
// On document ready
$(document).ready (function ()
{
//
// Load Menu and do actions based on success
//
$("#nav").load("menu.html", function( response, status, xhr ) {
if ( status == "error" ) {
var msg = "Sorry but there was an error: ";
$( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
}
if ( status == "success" ) {
//alert ($("#nav ul li a").length);
var objs = $("#nav ul li a");
$.each(objs, function(index, value) {
//
// Action Not Assigned via href attribute value
//
if ($(objs[index]).attr("href").match("#")) {
//
// Assigning alert action for each menu click
//
$(objs[index]).click (function () {
alert ("You clicked on " + objs[index].innerHTML);
});
}
});
}
});
});
</script>
</body>
</html>
julianH : your solution doesn't work.That is a bit vague - we have not seen your code and we have not seen how you attempted to fix the code. Please provide more information (code listing) so we can help you without wasting time guessing.
ASKER
@JulianH
In my question I have posted the link to download the template I'm using
you will find the javascript app.js in the package
https://github.com/almasaeed2010/AdminLTE
@pravinasar
I will test your example today
@Slick812
The code in the _nav is the part between <aside> </aside>
You can download the template to get the complete code
https://github.com/almasaeed2010/AdminLTE
Thanks
In my question I have posted the link to download the template I'm using
you will find the javascript app.js in the package
https://github.com/almasaeed2010/AdminLTE
@pravinasar
I will test your example today
@Slick812
The code in the _nav is the part between <aside> </aside>
You can download the template to get the complete code
https://github.com/almasaeed2010/AdminLTE
Thanks
OK, I went to the -
https://github.com/almasaeed2010/AdminLTE
the same link you posted in your opening here, and on that page I did not see any
<aside> </aside> in that page display.
so I will give up on my request for code.
I did look look at the code in the app.js, and it has this line -
$(function() {
which does the same thing as your line in the JS head -
$(document).ready(function () {
I would think that you have a "timing" problem, since the Ajax call -
$('#mymenu').load('_nav.ht ml');
is DELAYED until AFTER all of the page code is loaded,
And I would think from other code I have used, this Ajax is also After the code in the app.js has been run, so your -
<div id="mymenu"></div>
is still empty when the app.js code is used, and no sub menus.
what I would try is to MOVE your ajax OUT of the <head> and move it to below the
<div id="mymenu"></div>
maybe like () { ), ajax is better used as an Update due to some user action or timer, not to fill in a page with elements that shoud have been loaded on the server side ( like your <div id="mymenu"> )
https://github.com/almasaeed2010/AdminLTE
the same link you posted in your opening here, and on that page I did not see any
<aside> </aside> in that page display.
so I will give up on my request for code.
I did look look at the code in the app.js, and it has this line -
$(function() {
which does the same thing as your line in the JS head -
$(document).ready(function
I would think that you have a "timing" problem, since the Ajax call -
$('#mymenu').load('_nav.ht
is DELAYED until AFTER all of the page code is loaded,
And I would think from other code I have used, this Ajax is also After the code in the app.js has been run, so your -
<div id="mymenu"></div>
is still empty when the app.js code is used, and no sub menus.
what I would try is to MOVE your ajax OUT of the <head> and move it to below the
<div id="mymenu"></div>
maybe like
<div id="mymenu"></div>
<script>$('#mymenu').load('_nav.html');</script>
, , I will have to say that I have had inconsistant results when using an Ajax on a brand new page (as in the $(document).ready(functionn my question I have posted the link to download the template I'm usingYes - but you are referring to customisations you have made to the template.
you will find the javascript app.js in the package
MyMenu is not an element in that is present in the template.
So to understand what you are trying to do - could you post the modifications you have made to give us some idea of what we are aiming at?
ASKER
@julianH
yes and gave the the code I have added, I forgot to put the code in code tags maybe this is why you didn't see it
I have Placed in the
<head>
I forgot to mention in my first message:
I took the menu code that is in <aside class="left-side sidebar-offcanvas"> </aside> and put in a file named _nav.html
Placed the include code in the <body> where <aside class="left-side sidebar-offcanvas"> </aside> was
yes and gave the the code I have added, I forgot to put the code in code tags maybe this is why you didn't see it
I have Placed in the
<head>
<script>
$(document).ready(function() {
$('#mymenu').load('_nav.html');
});
<script>
I forgot to mention in my first message:
I took the menu code that is in <aside class="left-side sidebar-offcanvas"> </aside> and put in a file named _nav.html
Placed the include code in the <body> where <aside class="left-side sidebar-offcanvas"> </aside> was
<div id="mymenu"></div>
ASKER
@ Slick812
In fact this is <aside class="left-side sidebar-offcanvas">
the menu part is starting at <ul class="sidebar-menu">
What you said make sense but unfortunately it doesn't work
In fact this is <aside class="left-side sidebar-offcanvas">
the menu part is starting at <ul class="sidebar-menu">
What you said make sense but unfortunately it doesn't work
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks a lot it's working perfectly!
You are welcome - thanks for the points.
Sounds like you are using static binding when you should be using dynamic.
When you load html dynamically - any event handlers you have created for won't respond to events triggered in the dynamically loaded code unless you bind the events dynamically. You need to look at using .on() instead of binding directly to the event.
In other words
Open in new window
BecomesOpen in new window