AJAX without the Ax - Page 2 - HTML Forums

ngaisteve1 · 08-01-2008, 02:36 AM

Quote:

Originally Posted by ¥åßßå

It's been a long time since I last used asp, lets have another go

Code:

response.write( "reverseMeReply( '"+reply+"');")

*crosses fingers

¥

Still syntax error.

¥åßßå · 08-01-2008, 02:55 AM

Third time lucky?

Code:

response.write( "reverseMeReply( '"&reply&"');")

¥

ngaisteve1 · 08-01-2008, 03:30 AM

Quote:

Originally Posted by ¥åßßå

Third time lucky?

Code:

response.write( "reverseMeReply( '"&reply&"');")

¥

This time round ... Bingo!

¥åßßå · 08-01-2008, 03:40 AM

Yay

Now you can post the full ( working ) asp version

¥

ngaisteve1 · 08-01-2008, 04:23 AM

Quote:

Originally Posted by ¥åßßå

Now you can post the full ( working ) asp version

¥

Alrite. I changed my code back to follow your code (the original) and just translate it (as literally as possible) to classic ASP.

HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-UK" lang="en-UK">
<head>
<title>test</title>
</head>
<body>
<label for="theText">Type in the text to be reversed : <input type="text" name="theText" id="theText" /></label> 
<button onclick="reverseMe();">Reverse</button>
<script type="text/javascript">

function reverseMe()
{
	var theText = document.getElementById( 'theText' ).value; // grab the text
	var the_call = document.createElement( 'script' ); // create script element
	the_call.src = 'nonAjax.asp?theString='+theText; // set the url
	the_call.type = 'text/javascript'; // to be sure to be sure
	document.body.appendChild( the_call ); // add script to body and let browser do the rest
}

function serversReply( theAnswer )
{
	window.alert( 'The server said : '+theAnswer ); // stun the crowd with a reply from the server
}
</script>
</body>
</html>

ASP (nonAjax.asp)

Code:

<%
Response.ContentType = "text/javascript" ' set the correct mime type 

theText = request.querystring("theString") ' grab the text to be reversed

If theText = "" then
	theAnswer = "Gimme summat to do!" ' inform the user we're bored 
else ' we have some text, reverse it 
	theAnswer = strReverse(theText) ' reverse the text 
end if

theAnswer = replace(theAnswer,"'","") ' single quotes would break the reply 	

response.write("serversReply('" & theAnswer & "');") 'trigger the function on the calling page 
%>

(actually what tag shouid I use to wrap asp code?)

JoeyDaly · 08-07-2008, 06:20 AM

Mmm I'll do this in cf if u want when I get to work and have some time

¥åßßå · 08-07-2008, 10:37 AM

The more sample code the better

¥

Toady · 08-29-2008, 03:00 PM

Cool concept indeed. Here is a quick and dirty example of this concept with Google suggestion.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style type="text/css">
        .FormContainer{
            position:relative;
            left:250px;
        }
        input.QueryInput{
            width:400px; 
            margin-bottom: 0px;
        }
        div.DropDown{
             border: 1px solid black; 
             background-color:white; 
             width: 400px; 
             z-index:1; 
             display:none;
             position:absolute;
        }
        div.DropdownItem{
            color:black;
            cursor:default;
            text-indent:2px;
            display:block;
            position:relative;
            font-style:arial;
        }
        div.DropdownItem:hover span{
            color:white;
        }
        div.DropdownItem:hover{
            background-color:#3366CC;
        }
        span.numresults{
            position:absolute;
            right:2px;
            color:green;
            font-size:8pt;;
            bottom:2px;
        }
        span.results{
            font-size:11pt;
        }
        </style>
        <script type="text/javascript">
        
           var suggestions = false;
           var response;
           
           function onChangeEvent(obj,dropdownID){
                var div = document.getElementById(dropdownID);
                if (obj.value == ""){div.style.display='none'; return;}
                response = document.createElement("script");
                var path = "http://suggestqueries.google.com/complete/search?json=true&jsonp=ParseAndPresent&qu="+encodeURI(obj.value);
                response.src = path;
                response.type = "text/javascript";
                document.getElementsByTagName('head')[0].appendChild(response); 
           }
           
           function ParseAndPresent(obj){
                var div = document.getElementById('DropDown');
                suggestions = eval(obj);
                var showVal = "";
                for (var i = 0; i < suggestions[1].length; i++){
                    showVal += "<div class=DropdownItem onclick=changeInput(" + i + ")><span class=results>" + formatLength(suggestions[1][i],30) + "</span><span class=numresults>" +  formatLength(suggestions[2][i],25) + "</span></div>";
                }
                div.innerHTML = showVal;
                div.style.display = (suggestions[1][0]) ? 'block' : 'none';
           }    
           
           function formatLength(aString,maxLength){
                if (aString.length > maxLength){
                    aString = aString.substr(0,maxLength) + "...";
                }
                return aString;
           }
           
            function changeInput(index){
                var myIn = document.getElementById('myInput');
                document.getElementById('DropDown').style.display = 'none';
                myIn.value = suggestions[1][index];
                myIn.focus();
            }
        </script>
    </head>
    <body>
        <form action="http://www.google.com/search">
            <div class="FormContainer">
               <br />
               <input name=hl type=hidden value=en>
               <input type=text id="myInput" autocomplete="off" maxlength=2048 name=q title="Google Search" class="QueryInput" onkeyup="onChangeEvent(this,'DropDown')"/><br />
               <div align="left" id="DropDown" class="DropDown"></div>
               <input name=btnG type=submit value="Search" /><input name=btnI type=submit value="I'm feeling lucky!" />
           </div>
        </form>
    </body>
</html>

If i'm violating some laws by posting this, please delete.

¥åßßå · 08-29-2008, 03:43 PM

You aren't violating this post ... and even if you were, I don't have the power to delete you .... so you're safe

I'm glad that this inspired you to expand it's use, but ( there's always a but ) ... in keeping with the "lets play with the dom" you might like to replace all your innerHTML ( ++ the string that's built before hand ) with document.createElement('div') ... etc (urm.. hunts for link ... found it dom stuff )

Appreciate your work though

¥