Problem with webspeed and external javascript functions

CaRloxz · Nov 20, 2009

I am new to webspeed and are trying to pickup some knowledge about ajax and webspeed. I ran in to a problem i don't seem to figure out:
When using external javascript file, firebug reports that function callServer() is not defined. The webspeed file and the .js file is located in the same directory.

ajax06.r looks like this:

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" lang="en"> 
	<head>
    	<script language="javascript" type="text/javascript" src="ajax.js">
        </script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Making Progress with Ajax</title>
        
    </head>
    <body>
    	<h2>Ajax &lt;--&gt; Progress</h2>
        <form action="">
        	<table>
            	<tr>
                	<td align="right">Kundenr:</td>
                    <td><input type="text" id="custNum" /></td>
                    <td><input type="button" value="Vis kunde" 
                    
                    	onclick="callServer('cgi-bin/wspd_cgi.sh/are/findxmlcustomer.r',
                        		'<custNum>' + document.getElementById('custNum').value + '</custNum>');
                                document.getElementById('myContainer').innerHTML = 
                                gRequest.responseXML.firstChild.firstChild.nodeValue;" /></td>
                </tr>
                <tr>
                   <td colspan="3"><div id="myContainer" /></td>
                </tr>
            </table>
         </form>
    </body>
</html>

ajax.js looks like this:

Code:

var gRequest;

function createRequest() {
	var xmlhttp;
	if (window.XMLHttpRequest)
		{
			// Kode for IE7 +, Firefox, Chrome, Opera, Safari
			return xmlhttp=new XMLHttpRequest();
		}
	else if (windows.ActiveXObject)
		{
			// Kode for IE6, IE5
			return xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
	else 
		{
			alert("Din nettleser støtter ikke XMLHTTP!");
		}
}	// create request.
		
function callServer(url, data) {
	gRequest = createRequest();
		
	gRequest.open("POST", url, false);
	gRequest.setRequestHeader("Content-Type", "text/xml");
	gRequest.send(data);
}	// callserver

Using Firebug in Firefox I get these errors
------------------------------------------------------------------
unexpected end of XML source
[Break on this error] \ ajax.js (line 4)
------------------------------------------------------------------
<BR>Unable to find web object file 'are/ajax.js'<BR>


------------------------------------------------------------------

when trying to run function callServer:

callServer is not defined
function onclick(event) { callServer("cgi-bin/wspd_cgi.sh/are/findxmlcustomer.r", "<custNum>" + document.getElementById("custNum").value + "</custNum>"); document.getElementById("myContainer").innerHTML = gRequest.responseXML.firstChild.firstChild.nodeValue; }(click clientX=260, clientY=87)

I have placed ajax06 as plain html file on another webserver (not webspeed) and placing ajax.js in the same directory. The javascript functions is access correctly then...

Could anybody help me figure out what I am doing wrong? :blush1:

the webspeed server is running on unix, and the testfiles reside in the directory: /cgi-bin/wspd_cgi.sh/are/

Casper · Nov 20, 2009

I guess you have to put ajax.js in the docroot of your webserver.
If it is in a directory called are then that also has to reflect in the way you declare the javascript function: e.g. are/ajax.js.

If you run it as a static html page then the path of the js is relative to directory where the html page is started from. If you start it from webspeed then the javascript file path in the file is relative to docroot.

Casper.

webguy · Dec 10, 2009

I would highly recommend using the jquery library to utilize ajax and dom manipulation in your webspeed applications.

Its really simple to learn, its widely used (Both Google and MS utilize jquery now) and it makes working with ajax, ajah, xml, json much easier. Plus there is vast support for it now. I'd even go so far as to say its the most popular javascript library.

Below is your example but using jquery. All you have to do to use jquery is add the main library call to the head of your document. The whole library is very lightweight. Minified its 19k. You can download the latest version at http://jquery.com. In the example below, I'm just using the Google hosted CDN of jquery. So for testing purposes you don’t even need to download jquery.

Since I don’t know what the xml format output would be for your program findxmlcustomer.r my example assumes it outputs the xml in the following format:

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
  <customers>
    <customer>
     <name>Widgets Inc.</name>
     <acct>5555</acct>
    </customer>
</customers>

And using jquery to call your program, parse the xml via ajax and return the results in the container.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
<head>
<title>Webspeed and Jquery</title>
<script type="text/javascript" src="[URL]http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script[/URL]>
<script type="text/javascript">
 $(document).ready(function(){
  // since we are using a button and not a submit we intitiate the 
  // ajax call when the button with the id 'xsubmit' is clicked.
  $("#xsubmit").click(function () {
     var inputval = $("#custNum").val();
     alert("This is the serialized data of our form:" +$("#myform").serialize());
     alert("You entered customer number " +inputval);
     ajaxrequest();
     return false;
  });
  // now lets do our ajax request
  function ajaxrequest() {
   var qstr = $("#myform").serialize();
   $.ajax({
      url: "cgi-bin/wspd_cgi.sh/are/findxmlcustomer.r",
      data: qstr,          // I set data to the serialize string.
      cache: false,        // lets not cache. You can have cache issues with ajax
      type: "GET",         // post method GET or POST
      dataType: "xml",     // can be xml, json, html, text, jsonp, script
      error: function(e) { // even lets us do error handling for ajax calls
        alert("An error occured during your request.");
      },
      success: function(xml){
        // success now lets parse the xml data we want and output
        // the results to my container div
        var name = "";
        var acct = "";
        $(xml).find("customer").each(function(){
           name = $(this).find("name").text();
           acct = $(this).find("acct").text();
        });
        $("#myContainer").text("");
        $("#myContainer").append("<strong>"+acct+":</strong> "+name);
      }
   });
  }
});
</script>
</head>
<body>
 <h2>Ajax &lt;--&gt; Progress</h2>
    <form id="myform" action="#">
     <table border=1>
           <tr>
               <td align="right">Kundenr:</td>
                <td><input type="text" name="custNum" id="custNum" value="" /></td>
                <td><input type="button" name="xsubmit" id="xsubmit" value="Vis kunde" /></td>
            </tr>
            <tr>
                <td colspan=3><div id="myContainer"></div></td>
            </tr>
        </table>
     </form>
</body>
</html>

I also attached a sample file that you can open in a browser and test locally. You''ll have to use firefox since IE will return an error if you try running an ajax request locally. and heres a site explaining in more detail. Personally I thinks its better to use json format for web applications instead of xml. json is more lightweight, even easier to deal with within javascript and less error prone.

http://knol.google.com/k/xml-parsing-using-jquery

Hope this helps.

CaRloxz · Dec 17, 2009

Thank you for an excellent example webguy. I have just started to wrap my head around jquery and its function, and so far I'm loving it!

webguy · Dec 19, 2009

CaRloxz said:
Thank you for an excellent example webguy. I have just started to wrap my head around jquery and its function, and so far I'm loving it!

Glad you found it helpful. The more you get into it, the more you will get hooked. Plus the support and user base of information is as robust as the PHP community. I'd recommend to any webspeed developer, if you are looking to use a good js library, look at jquery or mootools. I personally prefer jquery.

Problem with webspeed and external javascript functions

CaRloxz

New Member

Casper

ProgressTalk.com Moderator

webguy

Member

Attachments

CaRloxz

New Member

webguy

Member

Similar threads