SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Finland
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript/AJAX function calls

    Full disclosure: I am crap at Javascript, but have still managed to promise someone in the office a "fancy on-the-fly updating boxes" (his words, not mine). That would be an AJAX thing then, fetching data from the db as you type.

    I found a working example on the web and managed to get it working for one textbox in the form, but when I wanted to make it more dynamic and send the element name as a parameter to the function instead of hard-coding it, I run into trouble. I know what the problem is (I can't pass the function with a parameter to the OnReadyStateChange method, but I'll be damned if i know how to get it working. Any help appreciated. Thanks!

    Code JavaScript:
    var searchReq = getXmlHttpRequestObject();
     
    function searchSuggest(Field, Table) {
     
    	if (searchReq.readyState == 4 || searchReq.readyState == 0) {
    		var str = escape(document.getElementById(Field).value);
    		searchReq.open("GET", 'searchSuggest.asp?search=' + str + '&field=' +Field+'&table='+Table, true);
    		searchReq.onreadystatechange = handleSearchSuggest(Field); 
    		searchReq.send(null);
    	}		
    }
     
    //Called when the AJAX response is returned.
    function handleSearchSuggest(FieldName) {
    	if (searchReq.readyState == 4) {
    		var ss = document.getElementById('search_suggest_'+FieldName)
    		ss.innerHTML = '';
    		var str = searchReq.responseText.split("\n");
    		for(i=0; i < str.length - 1; i++) {
    			var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
    			suggest += 'onmouseout="javascript:suggestOut(this);" ';
    			suggest += 'onclick="javascript:setSearch(this.innerHTML, FieldName);" ';
    			suggest += 'class="suggest_link">' + str[i] + '</div>';
    			ss.innerHTML += suggest;
    		}
    	}
    }
     
    //Mouse over function
    function suggestOver(div_value) {
    	div_value.className = 'suggest_link_over';
    }
    //Mouse out function
    function suggestOut(div_value) {
    	div_value.className = 'suggest_link';
    }
    //Click function
    function setSearch(value, FieldName) {
    	document.getElementById(FieldName).value = value;
    	document.getElementById('search_suggest_'+FieldName).innerHTML = '';
    }

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The onreadystatechange is for the data coming back from the server. Anything you are passing to the server needs to either go in the querystring on the URL when you are using GET or can be passed using POST. Either way it needs to be set before calling send and cannot be set when the server replies that it is ready to provide the answer.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Finland
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, but the OnReadyStageChange gets something from the handleSearchSuggest function, which I am trying to pass a parameter to. IE complains about "Not implemented" if I pass a parameter. If I do searchReq.onreadystatechange = handleSearchSuggest, that works fine.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Finland
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone? I still don't really know how to do this, maybe I'm just a bit thick?

  5. #5
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are using the request as a single instance for all controls/elements. If you continue with this method, you can simply define a global var which will be updated just before you call the ajax method.

    Ideally though, you should really create a new instance of the ajax request for each element.

    Hth



Bookmarks

Posting Permissions

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