Forum: Ruby on Rails Re: AJAX sub-list

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
Kevin Davis (Guest)
on 2006-02-22 06:28
(Received via mailing list)
Thanks so much for responding,

I wasn't planning on actually committing such information to the DB
before
the user had pressed submit on the larger form, but had rather planned
on it
fetching sections of form from the server. While it does seem a bit much
to
do a round trip just for a bit of form, if pieces of it depend on either
the
information entered thus far, or lists of things I'd rather not hardcode
in
some script somewhere.

For example, I'd like to add one or many phone numbers to a contact info
page. Pressing 'add another number' would head back to the server for a
rendered bit of a form with say a select containing possible types of
phone
numbers. What would be the best way to structure this using Javascript?
have
a seperate file for functions related to a given controller?

Thanks again for your help,

From: Gregory S. <removed_email_address@domain.invalid >
Subject: Re: [Rails] AJAX sub-list
To: removed_email_address@domain.invalid
Message-ID: < removed_email_address@domain.invalid>
Content-Type: text/plain; charset=us-ascii

On Tue, Feb 21, 2006 at 01:11:22AM -0500, Kevin Davis wrote:
} In the new / edit screen for an "item" I'd like to be able to
add/remove
} "sub-items"
}
} on pressing an add button below the "sub-items" a bit of a form shows
up
} with the html looking something like:
}
} <div id="uniqueid">
} <!-- label etc here -->
} <input type="text" id="sub_items[]" name="sub_items[]" size="20"/>
} <a href="#" onclick="new Ajax.Updater('uniqueid', '/items/hide',
} {asynchronous:true, evalScripts:true}); return false;" >delete</a>
} </div>

I recommend against using AJAX for this sort of thing. Yes, you want
JavaScript and DHTML, but not AJAX. The difference is that when adding
and
removing items, the user is likely to be more comfortable not having the
changes committed until s/he hits the Update (or Submit, or whatever)
button. If you use AJAX you are effectively committing every add and
remove
immediately.

} The problem: making unique ids for these form elements, generate a
random
} number and hope for no collisions? store it somewhere? (this led me to
all
} kinds of questions about sessions)

Use positive numbers for existing ids (probably already the case) and
negative numbers for newly created, and thus not yet committed, ids. I'm
assuming these subitems are a has_many relationship (though it would
work
just as well with habtm). In your controller, remove any missing
positive
ids and create subitems for any negative ids.

} Also: right now I've just got a action 'hide' that renders nothing
that I
} use to delete the form element.. is there a better practice?

Yes. Use JavaScript, not AJAX.

} Basically I'm wondering how they did the lists in Backpack ;-)

I have no idea. I'm talking about the right way to interact with a user.

} Thanks!
} Kevin
--Greg
Gregory S. (Guest)
on 2006-02-22 15:29
(Received via mailing list)
On Tue, Feb 21, 2006 at 11:24:00PM -0500, Kevin Davis wrote:
} Thanks so much for responding,
}
} I wasn't planning on actually committing such information to the DB
before
} the user had pressed submit on the larger form, but had rather planned
on it
} fetching sections of form from the server. While it does seem a bit
much to
} do a round trip just for a bit of form, if pieces of it depend on
either the
} information entered thus far, or lists of things I'd rather not
hardcode in
} some script somewhere.
}
} For example, I'd like to add one or many phone numbers to a contact
info
} page. Pressing 'add another number' would head back to the server for
a
} rendered bit of a form with say a select containing possible types of
phone
} numbers. What would be the best way to structure this using
Javascript? have
} a seperate file for functions related to a given controller?

Unless this is something that will be changing based on information the
client doesn't (and shouldn't) have and changes with each operation,
plain
JavaScript is a better choice than full AJAX. If you need to append a
particular scrap of HTML in place each time a button is clicked, but the
client has sufficient information to know what that scrap should be,
just
go ahead and create it in JavaScript. If the particulars of that scrap
need
to come from the server, but don't change from click to click, put the
JavaScript code (or a reference to a helper method that generates it) in
the view's .rhtml file.

Since I thought I pretty much explained that before, I'll include an
example to help with the clarity of this post. Actually, I'll use your
example. Suppose that you have a contact form that allows an arbitrarily
long list of phone numbers. Each number is identified with a tag, like
Work
or Personal, and that list of tags comes from the database. Note that I
am
using pseudocode here, and not encapsulating much because I want to show
it
all in the .rhtml file:

<html><head><title><%= @contact.name %>: contact info</title>
<script>
var phoneTypes = [
<% PhoneType.find_all.each { |t| %>
<%= "{ name : '#{t.name}', id : #{t.id} }," %>
<% } %>
null ];
function createPhoneSelect(newID) {
	var phoneTypeList = new Select("phoneType["+newID+"]");
	for (var i=0; i<phoneTypes.length; ++i)
		phoneTypeList.addOption(new Option(phoneTypes[i].id,
			phoneTypes[i].name));
	return phoneTypeList;
}
// ...
</script>
</head><body>
<!-- ... -->
</body></html>

So there you have some JavaScript that creates the HTML form control for
the phone type from the data that is stored in the database. There is no
need for AJAX to populate that select list. Note, by the way, that the
API
calls are probably wrong; I didn't look anything up and I don't have
either
the JavaScript or ActiveRecord APIs memorized.

} Thanks again for your help,
--Greg

} From: Gregory S. <removed_email_address@domain.invalid >
} Subject: Re: [Rails] AJAX sub-list
} To: removed_email_address@domain.invalid
} Message-ID: < removed_email_address@domain.invalid>
} Content-Type: text/plain; charset=us-ascii
}
} On Tue, Feb 21, 2006 at 01:11:22AM -0500, Kevin Davis wrote:
} } In the new / edit screen for an "item" I'd like to be able to
add/remove
} } "sub-items"
} }
} } on pressing an add button below the "sub-items" a bit of a form
shows up
} } with the html looking something like:
} }
} } <div id="uniqueid">
} } <!-- label etc here -->
} } <input type="text" id="sub_items[]" name="sub_items[]" size="20"/>
} } <a href="#" onclick="new Ajax.Updater('uniqueid', '/items/hide',
} } {asynchronous:true, evalScripts:true}); return false;" >delete</a>
} } </div>
}
} I recommend against using AJAX for this sort of thing. Yes, you want
} JavaScript and DHTML, but not AJAX. The difference is that when adding
and
} removing items, the user is likely to be more comfortable not having
the
} changes committed until s/he hits the Update (or Submit, or whatever)
} button. If you use AJAX you are effectively committing every add and
remove
} immediately.
}
} } The problem: making unique ids for these form elements, generate a
random
} } number and hope for no collisions? store it somewhere? (this led me
to all
} } kinds of questions about sessions)
}
} Use positive numbers for existing ids (probably already the case) and
} negative numbers for newly created, and thus not yet committed, ids.
I'm
} assuming these subitems are a has_many relationship (though it would
work
} just as well with habtm). In your controller, remove any missing
positive
} ids and create subitems for any negative ids.
}
} } Also: right now I've just got a action 'hide' that renders nothing
that I
} } use to delete the form element.. is there a better practice?
}
} Yes. Use JavaScript, not AJAX.
}
} } Basically I'm wondering how they did the lists in Backpack ;-)
}
} I have no idea. I'm talking about the right way to interact with a
user.
}
} } Thanks!
} } Kevin
} --Greg
}
} --
} Kevin
} http://kevin.is-a-geek.net

} _______________________________________________
} Rails mailing list
} removed_email_address@domain.invalid
} http://lists.rubyonrails.org/mailman/listinfo/rails
This topic is locked and can not be replied to.