?
Solved

include html file with javascript

Posted on 2014-04-25
16
Medium Priority
?
1,408 Views
Last Modified: 2014-04-30
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.html');
 });
<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"></script>

The menu is loading but the javascript required to open submenu doesn't load

Any clue to fix that?

Thanks
0
Comment
Question by:lenamtl
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
  • 2
  • +1
16 Comments
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 40023640
The menu is loading but the javascript required to open submenu doesn't load
Where is the code that drives the menu located?

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
$('#mymenu li').click(function() {
   ...
});

Open in new window

Becomes
$('#mymenu').on('click','li', function() {
   ...
});

Open in new window

0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 40023903
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.html');

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
0
 
LVL 26

Author Comment

by:lenamtl
ID: 40025188
I will  get back to you monday, thanks
0
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
LVL 26

Author Comment

by:lenamtl
ID: 40027506
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
0
 
LVL 34

Expert Comment

by:Slick812
ID: 40028501
greetings, , can you show us the content (html & code) of your - _nav.html  - page?
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 40028737
Here is a simple example code.

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>

Open in new window


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">&nbsp;</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>

Open in new window

0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 40028878
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.
0
 
LVL 26

Author Comment

by:lenamtl
ID: 40029984
@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
0
 
LVL 34

Expert Comment

by:Slick812
ID: 40030133
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.html');
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>

Open in new window

, , 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(function() {  ), 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"> )
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 40030281
n my question I have posted the link to download the template I'm using
you will find the javascript app.js in the package
Yes - but you are referring to customisations you have made to the template.

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?
0
 
LVL 26

Author Comment

by:lenamtl
ID: 40030379
@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>
<script>
$(document).ready(function() {
 $('#mymenu').load('_nav.html');
 });
<script>

Open in new window


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>

Open in new window

0
 
LVL 26

Author Comment

by:lenamtl
ID: 40030417
@ 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
0
 
LVL 58

Accepted Solution

by:
Julian Hansen earned 1600 total points
ID: 40030623
No, I was looking for where you incorporated the <div id="mymenu">.

Here is what I understand you want to do

1.  Remove code on line 284 (inside the following)
            <aside class="left-side sidebar-offcanvas">

Open in new window

   and place this in a separate file (call it nav.html)

2. Have the menu work as expected.

I moved the code out of the <aside> and gave the aside an id of my menu
<aside class="left-side sidebar-offcanvas" id="mymenu">

Open in new window


I placed the removed code in a separate file called nav.html

I then added the following just before the <body> statement.
<script type="text/javascript">
$(function(){
  $('#mymenu').load('nav.html', function() {
    $(".sidebar .treeview").tree();
  });

});
</script>

Open in new window

Because the menu (tree) is statically bound, by reissuing the .tree() method on the sidebar after the completion of the .load() - the menu items loaded dynamically should now bind to the relevant events.
0
 
LVL 26

Author Closing Comment

by:lenamtl
ID: 40031902
Thanks a lot it's working perfectly!
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 40031985
You are welcome - thanks for the points.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
This article discusses how to implement server side field validation and display customized error messages to the client.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question