SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Populating more input fields with prototype/Autocomplete

    I'm struggling to make a function which will populate a number of form input fields with values from a db upon the users selection of an Autocompleter-created option. So:
    1. User types into field, Autocomplete generates suggestions popup
    2. User selects an entry from the popup, Autocomplete adds the entry in the field
    3. An Ajax.Request issues a request to the DB based on an invisibly passed value of an id field and retrieves values
    4. These values are used to update the values of a number of other form input fields

    It is step 4. I can't manage, of course due to my newbie status with regards to prototype and javascript.

    Here is what I have so far. Don't get confused by the .lasso extension and Lasso-related coding, I'm a Lasso-friend, not a PHP-friend ):

    HTML (fieldset and label & other stuff left out):
    Code:
    <input id="cid" name="id" type="hidden" value="" />
    <input type="text" name="contacts_name_first" id="contacts_name_first" />'
    <div id="studentchoices" class="autocomplete"></div>
    <script type="text/javascript">
    	new Ajax.Autocompleter("contacts_name_first", "studentchoices", "student_retrieve.lasso", {paramName: "nme", minChars: 2, frequency: 0.5, afterUpdateElement: function(){getContact('contacts_name_first', 'cid');}})
    </script>
    My afterUpdateElement function looks like this:
    Code:
    function getContact(inp1, inp2) {
    	var str = document.getElementById(inp1).value; // get string returned by ajax call
    	var strSplit = str.split("#"); // split it using custom character #
    	for (var i = 0; i < strSplit.length; i++) {
    		var val = strSplit[i];
    		if (val) {
    			var val0 = strSplit[0]; // set var for autocomplete field
    			var val1 = strSplit[1]; // set var for id
    		}
    	}
    	document.getElementById(inp1).value = val0; // update doc with those values
    	document.getElementById(inp2).value = val1;
    
    	new Ajax.Request('student_get.lasso?', {asynchronous: true, evalScripts: true, parameters: 'id=' + val1});
    }
    The Lasso-file 'student_get.lasso' looks like this (SQL not shown):
    Code:
    [inline($setdbi, -sql=$t)]
    	
    	<script type="text/javascript" language="javascript">
    	
    		$('contacts_name_first').value='[field('contacts_name_first')]';
    		$('contacts_name_last').value='[field('contacts_name_last')]';
    		$('address_1').value='[field('address_1')]';
    		$('address_2').value='[field('address_2')]';
    		etc...
    
    	</script>
    	
    [/inline]
    Please notice that the sharp paranthesis [] here invokes Lasso processing, have nothing to do with javascript arrays. And no, this is not why it doesn't work, just think of this as another flavour of PHP.
    If I run 'student_get.lasso' directly I can see it populates the values neatly. But they are not parsed to the DOM.

    Thanks for any thoughts on this...

    /nikolaj
    Music&Media
    Web Solutions for Cultural Businesses

  2. #2
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Autocomplete and Ajax-populator - semi-solved

    The question I posted previously is half-way solved in that I have a solution which works in FF on Mac/Win but not in IE and Safari. The problem seems to lay in the last JavaScript which is returned to the main page via an Ajax.Updater but isn't allowed to (or can't) run in the main page.

    In Safari's JavaScript console I get this error concerning the function which should update the DOM populating the form fields:

    Object (result of expression updateValues) does not allow calls.
    http://www.myserver.com/_admin/js/testscript.js

    Can anybody shed some light on what it means "Object does not allow calls" and maybe some pointers as to where to search for a solution?

    Thanks, Nikolaj

    updateValues looks like this (I use prototype):
    Code:
    updateValues = function() {
    	$('lnme').value='<here value from DB-lookup>'; 
    	$('adr1').value='<here value from DB-lookup>'; 
    	$('adr2').value='<here value from DB-lookup>'; 
    	etc...
    }
    Music&Media
    Web Solutions for Cultural Businesses

  3. #3
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Autocomplete and Ajax-populator

    Now, there hasn't been much response to this thread except for my own ones
    Never mind, I got it soughted out (well, almost, a small Safari-problem remains...).

    Its all online here for whom it may interest:

    www.musicmedia.dk/lasso/ajax_populate.html

    /nikolaj
    Music&Media
    Web Solutions for Cultural Businesses

  4. #4
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How did you fix the "Object does not allow calls" error? I've been searching for hours and this is the only reference on Google that seems to refer to the same problem I am having.

  5. #5
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Hmm, this is really silly, but I don't recall anymore

    One thing I vaguely remember is that the javascript tag surrounding the call must have the right attributes in it:

    <script type="text/javascript" language="javascript">.

    How is your code, is it similar to what I have on my website and it still doesn't work, or is your solution essentially different with only a few similarities? I'm asking because what I put online does work, and you could maybe work it out from there...

    I'm really sorry for being so lame, please keep posting, I will keep digging to see if some crumbles should have survived in a corner of my memory-box...

    /nikolaj
    Music&Media
    Web Solutions for Cultural Businesses

  6. #6
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, here is some more: if you have build your solution in such way that the Ajax.Updater returns the results to be inserted in the form fields in a var declared as a function, then you get this error!
    I had done this, because I found it mentioned as necessary in order to get things to work in the article by Sergio Perreira:
    http://www.sergiopereira.com/article...l#Ajax.Updater

    But he's either wrong or my (our) type of solution is different. I actually tried to contact him about it, but he answered in such a manner that I didn't at all feel like going further down that lane...

    The result of Ajax.Updater, that is, the data to insert into the form fields, should be returned as a plain javascript, as I show on my website. To be sure this script will be evaluated and the DOM updated when sent to the "mother"-page, you must have "evalScripts: true" as one of the AJAX-parameters - see my online documentation.

    Hope this helps!

    /nikolaj
    Music&Media
    Web Solutions for Cultural Businesses


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
  •