Layewsscege
New Member
i am trying to build a vertical drop down menu (for countries and their Soccer leagues & cups) i build a menu with all countries and when you click on a country a dropdown menu show you the leagues & cups it works fine when i have a plain html index page but when i add javascript function to get the data from xml file it stops, my index page is:\[code\]<!doctype html><html lang="en-US"><head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <link rel="stylesheet" type="text/css" href="http://stackoverflow.com/questions/14599247/styles.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" language="javascript" charset="utf-8" src="http://stackoverflow.com/questions/14599247/nav.js"></script><!--[if lt IE 9]> <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--></head><script>function getCountries(){ var url ='http://localhost/scorefinal/include-xml/leagues.xml'; var xmlhttp,x,i,txt,xx,j; var cats = new Array(); var names = new Array(); if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { x=xmlhttp.responseXML.documentElement.getElementsByTagName("category"); txt="<ul id='nav'>"; for(i=0;i<x.length;i++) {//to get all country names & competions without country like(world cup,.....) from the xml file cats = x.getAttribute('maincat'); names = x.getAttribute('name'); txt=txt +"<li><a href='http://stackoverflow.com/questions/14599247/#'>"+cats+"</a>"; txt=txt +"<ul><li><a href='http://stackoverflow.com/questions/14599247/http:/www.google.com/search?q=design+cartoons+animation'>"+names+"</a></li></ul>"; txt=txt +"</li>"; } txt=txt +"</ul>"; document.getElementById("countries").innerHTML=txt; } }; xmlhttp.open("GET",url,true); xmlhttp.send();}</script><body><div id='countries'></div><script>getCountries();</script></body></html>\[/code\]and my nav.js is:\[code\]$(document).ready(function(){ $("#nav > li > a").on("click", function(e){ if($(this).parent().has("ul")) { e.preventDefault(); } if(!$(this).hasClass("open")) { // hide any open menus and remove all other classes $("#nav li ul").slideUp(350); $("#nav li a").removeClass("open"); // open our new menu and add the open class $(this).next("ul").slideDown(350); $(this).addClass("open"); } else if($(this).hasClass("open")) { $(this).removeClass("open"); $(this).next("ul").slideUp(350); } });});\[/code\]i want to know how to make that work is there anybody will help me ,please?