#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    1
    Rep Power
    0

    Need Help in Logic- Javascript/Ajax


    Hi All,


    I a struggling with arriving at a logic for a simple Javascript -Ajax program.

    I have a HTML page as the main program. In the HTML, i have 2 buttons, on mouse over of those buttons, i should see either list of vegetables or fruits. So, on mouseover i have ajax code which will fetch the data from a text file in local machine. For buttons i have 2 images to display on screen.

    Here is what i am doing and where the issue is...

    I mouse over on Fruits button and i get list of fruits displayed in Div, then i mouseover on vebetables button i get a list of vegetables, then again when i mouse over on Fruits, i still see list of vegetables. On click event however is working. I need some direction to fix the mouseover event issue for Fruits. below is my code.


    Main Program:

    Code:
    <!DOCTYPE html>
    <html> 
      <head> 
    
        <title>An Ajax-enabled menu system</title> 
    
        <style>
        #menuDiv1 {
          color: #222222;
          background-color: #FFCCFF;
          font-weight: bold;
          font-family: arial;
          visibility: hidden;
          cursor: hand;
        }
    
        #menuDiv2 {
          color: #222222;
          background-color: #FFCCFF;
          font-weight: bold;
          font-family: arial;
          visibility: hidden;
          cursor: hand;
        }
    
        #targetDiv {
          color: #9900FF;
          font-size: 24pt;
          font-weight: bold;
          font-family: arial;
        }
    
        </style>
    
        <script language = "javascript">
          var arrayItems;
    
          function getData(menu) 
          { 
            var XMLHttpRequestObject = false; 
     
             if(typeof ActiveXObject != "undefined"){
    			if(!XMLHttpRequestObject)try{ XMLHttpRequestObject=new ActiveXObject("MSXML2.XMLHTTP"); }catch(e){XMLHttpRequestObject=false;}
    			if(!XMLHttpRequestObject)try{ XMLHttpRequestObject=new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){XMLHttpRequestObject=false;}
    		}
    
            var dataSource = (menu == 1) ? "items1.txt?f" : "items2.txt?g";
    		
            if(XMLHttpRequestObject) {
    		  
              XMLHttpRequestObject.open("GET", dataSource); 
              
              XMLHttpRequestObject.onreadystatechange = function() 
              { 
    		    
                if (XMLHttpRequestObject.readyState != 4) return; 
                  if(!XMLHttpRequestObject.status || XMLHttpRequestObject.status == 200){ 
    			     
    				show(menu, XMLHttpRequestObject.responseText);
                  }
              } 
    
              XMLHttpRequestObject.send(null); 
            }
          }
    
          function show(menu, items) 
          {
            var data = "<table width = '100%'>";
            var loopIndex;
    		arrayItems = items.split(", ");
            var target;
    
            if (arrayItems.length != 0) {
              for (var loopIndex = 0; loopIndex < arrayItems.length; 
                loopIndex++) {
                var text = "display(" + loopIndex + ")";
                data += "<tr><td " 
                  + "onclick='" + text + "'>" +
                  arrayItems[loopIndex] + 
                  "</td></tr>";
              }
            }
    
            data += "</table>";
    		
            if(menu == "1"){
    		 
              target = document.getElementById("menuDiv1");
    		  if(target.style.visibility == "visible"){
    		  
    			target.style.visibility = "hidden";
    		  }
    		  
            }
    
            if(menu == "2"){
    		  
              target = document.getElementById("menuDiv2");
    		 
            }
    		
    		
    		
    		
            if(target.style.visibility == "hidden"){
    		 
              target.innerHTML = data;
              target.style.visibility = "visible";
            }
    		
          }
    
          function hide() 
          {
            var menuDiv1 = document.getElementById("menuDiv1");
    
            if(menuDiv1.style.visibility == "visible"){
              menuDiv1.innerHTML = "<div></div>";
              menuDiv1.style.visibility = "hidden";
            }
    
            var menuDiv2 = document.getElementById("menuDiv2");
            if(menuDiv2.style.visibility == "visible"){
              menuDiv2.innerHTML = "<div></div>";
              menuDiv2.style.visibility = "hidden";
            }
          }
    
          function display(index) 
          {
            var targetDiv = document.getElementById("targetDiv");
    
            targetDiv.innerHTML = "You selected " 
              + arrayItems[index] + ".";
          }
    
          function checkMenu(evt) 
          {
            var e = new MouseEvent(evt);
            var target = null;
            var img;
    
            img = document.getElementById("image1");
    
            if(e.target == img){
    		   
    		   getData(1);
            }
    
            img = document.getElementById("image2");
     
            if(e.target == img){
    		 
              getData(2);
            }
    
            target = document.getElementById("menuDiv1");
            img = document.getElementById("image1");
    
            if (target.style.visibility == "visible"){
              if(e.x < parseInt(target.style.left) || e.y < 
                parseInt(img.style.top) || 
                e.x > (parseInt(img.style.left) + 
                parseInt(img.style.width)) 
                || e.y > (parseInt(target.style.top) + 
                parseInt(target.style.height))){
                hide();
              }
            }
    
            target = document.getElementById("menuDiv2");
            img = document.getElementById("image2");
    
            if (target.style.visibility == "visible"){
              if(e.x < parseInt(target.style.left) || e.y < 
              parseInt(img.style.top) || 
              e.x > (parseInt(img.style.left) + 
              parseInt(img.style.width)) 
              || e.y > (parseInt(target.style.top) + 
              parseInt(target.style.height))){
                hide();
              }
            }
          }
    
          function MouseEvent(e) 
          {
            if(e) {
              this.e = e; 
            } else {
              this.e = window.event; 
            }
    
            if(e.pageX) {
              this.x = e.pageX; 
            } else {
              this.x = e.clientX; 
            }
    
            if(e.pageY) {
              this.y = e.pageY; 
            } else {
              this.y = e.clientY; 
            }
    
            if(e.target) {
              this.target = e.target; 
            } else {
              this.target = e.srcElement;
            }
          }
        </script>
    
      </head> 
    
      <body onclick = "hide()" onmousemove = "checkMenu(event)">
    
        <H1>An Ajax-enabled menu system</H1>
    
          <img id = "image1" src="Image1.jpg" 
            style="left:30; top:50; width:200; height:40;">
          <div id = "menuDiv1" style="position: absolute; left:30; top:100; width:100; 
            height: 70; visibility:hidden;"><div></div></div>
          <img id = "image2"  style="left:270; top:50; width:200; 
            height:40;" src="Image2.jpg">
          <div id = "menuDiv2" style="position: absolute; left:270; top:100; width:100; 
            height: 70; visibility:hidden;"><div></div></div>
          <div id = "targetDiv"></div>
      </body> 
    
    </html>
    items1.txt
    ---------

    Apples, Bananas, Oranges


    items2.txt
    ----------

    Corn, Broccoli, Spinach
    Last edited by E-Oreo; July 23rd, 2013 at 07:01 PM.
  2. #2
  3. No Profile Picture
    Lost in code
    Devshed Supreme Being (6500+ posts)

    Join Date
    Dec 2004
    Posts
    8,316
    Rep Power
    7170
    Your checkMenu function is sort of an awkward way of handling a mouseover event. JavaScript has a literal mouseover event built in, if you bind to that it should make programming this easier.

    If you pull in jQuery then it becomes a lot more concise:
    Code:
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">
    	var arrayItems;
    
    	function get_data()
    	{
    		var dataSource = $(this).attr('data-file');
    		$.get(dataSource, show);
    	}
    
    	function show(items)
    	{
    		arrayItems = items.split(", ");
    		
    		var $table = $('#menu-table');
    		$table.find('li').remove();
    		
    		$.each(arrayItems, function(key, value) {
    			var $li = $('<li></li>');
    			$li.text(value);
    			$li.attr('data-index', key);
    			$table.append($li);
    		});
    	}
    
    	function display()
    	{
    		var key = $(this).attr('data-index');
    		var name = arrayItems[key];
    		$('#target-div').text("You selected " + name + ".");
    	}
    
    	$(function() {
    		$('#menu-table').on('click', 'li', display);
    		$('.menu-button').on('mouseover', get_data);
    	});
    </script>
    
    <img src='Image1.png' class='menu-button' data-file='items1.txt?f' />
    <img src='Image2.png' class='menu-button' data-file='items2.txt?g' />
    <ul id='menu-table'>
    	
    </ul>
    <div id='target-div'>
    
    </div>
    PHP FAQ

    Originally Posted by Spad
    Ah USB, the only rectangular connector where you have to make 3 attempts before you get it the right way around

IMN logo majestic logo threadwatch logo seochat tools logo