Topic: Accessing Field values for link_to_remote

Hello, I'm trying to pass the product.id, the size of the product, and the color of the product in a  link_to_remote.  I'm having some difficulty accessing the values that are selected for color and size.  If I try to add to cart right now, I pass the product.id okay, but I get a value of $F('color') for color and $F('size') for size.

Here is my display_product.rhtml

<div class="product" id="product_<%= @product.id %>">
	<h2>
	  <%= @product.name %> -  <span class="money"><%= number_to_currency(@product.price) %></span>
	</h2>

	<%
		if @image then
			image_url = url_for_file_column('image', 'path', 'small')
			if image_url then
	%>
			<%= image_tag(image_url, :id => "product_image_#{@product.id}", :align => 'left', :class => 'productImage') %>
	<%
			end
		end
	%>

	<%= get_markdown_snippet(@product.description) %>
	
			<select name="size" id="size">
				<% @product.sizes.each do |size| -%>
				    <option value="<%= size.id %>" >
				      <%= size.name %>
				    </option>
				<% end %>
			</select>		
	
			<select name="color" id="color">
				<% @product.colors.each do |color| -%>
				    <option value="<%= color.id %>" >
				      <%= color.name %>
				    </option>
				<% end %>
			</select>

	<div style="float:right;">
		<%= link_to_remote 'Add To Cart',
				{
	  	  	:url => {
		        :controller => 'store',
		        :action => 'add_to_cart_ajax',
		        :id => @product.id,
			:color_id => "$F('color')",
			:size_id => "$F('size')"},
	                :loading => "Element.show('indicator')",
			:complete => "Element.hide('indicator');new Effect.Highlight('cart');",
			:update => 'items'
			           },
			{ }
		   %>
	</div>
	<div class="clear">&nbsp;</div>
</div>

Any suggestions you have will be appreciated.

Zack

Last edited by zreed20 (2007-01-11 06:50:13)

But they that wait upon the Lord shall renew their strength

Re: Accessing Field values for link_to_remote

I assume you're trying to pass the current value from the form field into the link. Unfortunately, $('field_id') is a javascript variable that Ruby won't understand. What I've done to get around this is to use a bit of javascript to generate the URL. Here's an example of how I used a pop-up window to search Google with the value of a form field:

<% content_for "javascripts" do %>
# You can also put this in your application.js file
function link_to_google(){
  url = "http://www.google.com/search?q=" + escape($('product_name').value);
  window.open(url,'Google');
}
<% end %>

In the view:

  <%= link_to_function("Search Google", "link_to_google()") %>

You could apply this same concept to link_to_remote by having the javascript generate and return the whole URL.

Ryan Heneise  |  Art of Mission  |  Now with extra-strong Donor Tools mojo

Re: Accessing Field values for link_to_remote

Ryenski, I think I understand what you're doing here, but I can't seem to get something like this working, without Getting an display_product.rhtml:67: parse error, unexpected ',', expecting ')' message.

I have added this to my application.js

function product_customization(){
  url = "/store/add_to_cart_ajax?id= + escape($('product_id').value) + size= + escape($('size').value) + color= + escape($('color').value)";
  }

And in my view, I'm trying this...

		<%= link_to_remote 'Add To Cart', "product_customization()"
				{
		                :loading => "Element.show('indicator')",
				:complete => "Element.hide('indicator');new Effect.Highlight('cart');",
				:update => 'items'
				},
				{ }
		%>

I'm certainly not very capable at Javascript, so I'm not sure of how to implement this.  Also, I would assume that I could move the :loading, :complete, and :update into my Javascript, but I tried to do this with onComplete: Element.hide('indicator');new Effect.Highlight('cart');  And got another mysterious error.

Is there any more help you can give to a inept Javascript person?

Thanks,
Zack

Last edited by zreed20 (2007-01-11 10:51:58)

But they that wait upon the Lord shall renew their strength

Re: Accessing Field values for link_to_remote

It can be tricky to construct strings in Javascript:

function product_customization(){
  return "/store/add_to_cart_ajax?id=" + escape($('product_id').value) + "&size=" + escape($('size').value) + "&color=" + escape($('color').value);
  }

Note that we're adding several strings together. There's a string in quotes, a plus sign, then the value of the product_id field, then another string, etc. Each string needs to be enclosed in quotes, and each value that's getting evaluated by JS (the escape($('whatever') part) needs to be outside of quotes. You simply string these together with plus signs.
 

<%= link_to_remote("Add To Cart", 
      :loading => "Element.show('indicator')",
      :complete => "Element.hide('indicator');new Effect.Highlight('cart');",
      :update => "items",
      :url => "javascript:product_customization();") %>

(Note: I haven't tested this)

Ryan Heneise  |  Art of Mission  |  Now with extra-strong Donor Tools mojo

Re: Accessing Field values for link_to_remote

Thank you, I can now understand the Javascript string, and the link_to_remote makes sense, but when I click the link_to_remote doesn't do anything, looking at the development log, a request isn't even being submitted. 

By doing it this way, the javascript should still submit it's request to the add_to_cart_ajax method, correct?

EDIT: If I change it to link_to_function, and use Firebug in Firefox, I get an error that says, product_customization is missing a  before statement (Probably because it is just returning the url, with no conditions?).  If I use link_to_remote, it's still not doing anything.

Thanks,
Zack

Last edited by zreed20 (2007-01-12 05:00:00)

But they that wait upon the Lord shall renew their strength

Re: Accessing Field values for link_to_remote

I worked on this more last night, and I don't get an error with product_customization ( I forgot a parenthesis ), but it still doesn't fire if I click on the link.  If I  change the from

 
:url => "javascript:product_customization();

to this...

:url => "product_customization();

It will fire, but it just creates a url like this...

/store/product_customization

It's like the javascript isn't even being processed in either case.

Zack

Last edited by zreed20 (2007-01-12 05:04:11)

But they that wait upon the Lord shall renew their strength

Re: Accessing Field values for link_to_remote

What if I didn't try to do this by reading the field name, but instead, the user could choose to "customize" their item, and have an ajax onclick div, that opens, revealing customization options, the user picks their options, clicks submit, that would pass the parameters back to the add_to_cart_ajax action, and not require me to try to pick out this value with Javascript? 

I ask only because I have a rough idea of how to accomplish this, but could use some ideas.

EDIT: I solved this by using a link_to_remote action, to open the form, and another link_to_remote action to capture the selections and submit to the cart.  This creates a seamless purchase for the buyer, and doesn't require any fancy Javascript, other than the link_to_remotes.

Thank you for your help ryenski

Last edited by zreed20 (2007-01-15 11:40:07)

But they that wait upon the Lord shall renew their strength