Results 1 to 5 of 5

Thread: Need some help with JavaScript...

  1. #1
    Senior Member
    Join Date
    Mar 2005
    Posts
    175

    Question Need some help with JavaScript...

    Hi all, I recently heard about the AJAX web technology. I always wondered how gmail is able to give desktop like environment on a web page and now I've learned a good part - how it works. I decided to implement very basic AJAX on my webpage. I am not very good at JavaScript and I need your help. I googled a lot but in vein. So here is the code

    Code:
    <html><head><title>Ajax Example</title>
    <script language="Javascript">
    function xmlhttpPost(strURL) {
        var xmlHttpReq = false; 
        var self = this;
        if (window.XMLHttpRequest) {
            self.xmlHttpReq = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) {
            self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
        }
        self.xmlHttpReq.open('POST', strURL, true);
        self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        self.xmlHttpReq.onreadystatechange = function() {
            if (self.xmlHttpReq.readyState == 4) {
                updatepage(self.xmlHttpReq.responseText);
            }
        }
        self.xmlHttpReq.send(getquerystring());
    }
    
    function getquerystring() {
    		var word = value(here);
    		qstr = 'w=' + escape(word);
     		return qstr;
    }
    function updatepage(str){
        document.getElementById("result").innerHTML = str;
    }
    </script>
    </head><body>
    
    <a href="#" onmouseover="JavaScript:xmlhttpPost('ajax.asp');return escape('<div id=result></div>'); return value('1')">Text1</a>
    
    <a href="#" onmouseover="JavaScript:xmlhttpPost('ajax.asp');return escape('<div id=result></div>'); return value('2')">Text2</a>
    
    <a href="#" onmouseover="JavaScript:xmlhttpPost('ajax.asp');return escape('<div id=result></div>'); return value('3')">Text3</a>
    
    <script language="javascript" src="wz_tooltip.js">
    </body></html>
    What I want is when ever onmouseover is called on Text1,Text2,Text3 it returns some value to a variable 'word' in this case repectively. I hope you understand my problem and val is reading this thread . If you need more info please post.

    Any help is much appreciated.

    - :S:
    \"And life is what we make it. Always has been, always will be.\"

  2. #2
    where's your wz_tooltip.js ?
    When you have eliminated the impossible, whatever remains, however improbable, must be the truth. - Sherlock Holmes

    i am NOT a hacker :Þ

  3. #3
    heh thanks - but you caught me on way out of work, will have a look at it tonight tho. Seems fairly simple....basically you want to do something like :

    1. User rollsover text
    2. XMLHttpRequest is sent to asp page with correct query string
    3. Response received from asp page
    4. Response displayed in a div

    that about right?

    btw if you're doing this to learn more about AJAX cool - its an amazing tool! But if it is for an actual site development I wouldn't use AJAX for soemthing like this (could actually increase server strain) rather I would use XHTML/CSS on its own - and it has the added advantage of not needing a JS enabled browser

    will post up an example tomorrow when I get back into work

    ta

    v_Ln

  4. #4
    Senior Member
    Join Date
    Mar 2005
    Posts
    175
    1. User rollsover text
    2. XMLHttpRequest is sent to asp page with correct query string
    3. Response received from asp page
    4. Response displayed in a div
    exactly. Right on the spot.

    Nevermind "<script language="javascript" src="wz_tooltip.js">". Thats just to display the resultant Div as a ToolTip.

    I would use XHTML/CSS on its own - and it has the added advantage of not needing a JS enabled browser
    Can you please elaborate XHTML/CSS as replacement for JavaScript. That would keep me busy.

    Thanks

    - :S:
    \"And life is what we make it. Always has been, always will be.\"

  5. #5
    ok here goes - think this is the kinda thing you're after.....

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>AJAX Rollovers</title>
        
    <script type="text/javascript">
    var xmlHttp;
    
    /*
    2 Different ways of starting the request depending upon browser
    1 for IE and 1 for everyone else - now aint that a big shock! 
    */
    function createXMLHttpRequest() {
        if (window.ActiveXObject) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        } 
        else if (window.XMLHttpRequest) {
            xmlHttp = new XMLHttpRequest();
        }
    }
    
    /*
    Handles most of the work 
     - Creates the request
     - Calls the function which handles what happens when we have a response change
     - creates the URL
    */
    function startRequest(element) {
        createXMLHttpRequest();
        xmlHttp.onreadystatechange = handleStateChange;
    	var url = "sample.php?id=" + escape(element.id);
        xmlHttp.open("GET", url, true);
        xmlHttp.send(null);
    }
    
    /*
    Tells the script what to do when it gets a response
    readyState 4 means loaded
    */
    function handleStateChange() {
        if(xmlHttp.readyState == 4) {
            if(xmlHttp.status == 200) {
    			document.getElementById("show").innerHTML = xmlHttp.responseText;
            }
        }
    }
    </script>
    
    <!-- Some CSS stuff to make it pretty -->
    <style type="text/css">
    <!--
    .container {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #999999;
    	background-color: #333333;
    	padding: 10px;
    	width: 300px;
    	height: 120px;
    	border: thin solid #FFFFFF;
    	margin: auto;
    }
    body {
    	background-color: #666666;
    }
    a:link {
    	color: #999999;
    	text-decoration: none;
    }
    a:visited {
    	text-decoration: none;
    	color: #999999;
    }
    a:hover {
    	text-decoration: none;
    	color: #999999;
    }
    a:active {
    	text-decoration: none;
    	color: #999999;
    }
    .side {
    	float: left;
    	width: 100px;
    	border-right-width: thin;
    	border-right-style: dotted;
    	border-right-color: #FFFFFF;
    }
    #show {
    	margin-left: 140px;
    	font-family: "Courier New", Courier, mono;
    	font-size: 120px;
    	font-weight: bold;
    	color: #990000;
    }
    -->
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
    
    <body>
    	<div class="container">
    	
    		<!-- The link 'id' is sent via GET to the backend script -->
    		<div class="side">
    		   <a id="1" href="#" onMouseover="startRequest(this);">Link Number 1</a><br />
    		   <a id="2" href="#" onMouseover="startRequest(this);">Link Number 2</a><br />
    		   <a id="3" href="#" onMouseover="startRequest(this);">Link Number 3</a><br />
    		   <a id="4" href="#" onMouseover="startRequest(this);">Link Number 4</a><br />
    		   <a id="5" href="#" onMouseover="startRequest(this);">Link Number 5</a><br />
    		   <a id="6" href="#" onMouseover="startRequest(this);">Link Number 6</a><br />
    		   <a id="7" href="#" onMouseover="startRequest(this);">Link Number 7</a><br />
    		   <a id="8" href="#" onMouseover="startRequest(this);">Link Number 8</a><br />
    		   <a id="9" href="#" onMouseover="startRequest(this);">Link Number 9</a><br />
    		</div>
    		
    		<!-- The DIV which displays the rollover text -->
    		<div id="show"></div>
    		
    	</div>
       
       
    </body>
    </html>
    the php file it is calling is very simple just as an example

    Code:
    <?php
    
    $id = $_GET['id'];
    
    if(!$id)
    	{
    	echo "!";
    	}
    else
    	{
    	if(!is_numeric($id))
    		{
    		echo "!";
    		}
    	else
    		{
    		switch ($id) {
    			case 1:
    			   echo "#1";
    			   break;
    			case 2:
    			   echo "#2";
    			   break;
    			case 3:
    			   echo "#3";
    			   break;
    			case 4:
    			   echo "#4";
    			   break;
    			case 5:
    			   echo "#5";
    			   break;
    			case 6:
    			   echo "#6";
    			   break;
    			case 7:
    			   echo "#7";
    			   break;
    			case 8:
    			   echo "#8";
    			   break;
    			case 9:
    			   echo "#9";
    			   break;
    			default:
    			   echo "!";
    			}
    		}
    	}
    ?>
    As for the XHTML/CSS I dont mean you can use them as a complete substitute for JS just that you could create the rollovers using CSS and have the text displayed that way. Rather than fetching it from the server each time.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •