CODEWITHSUNDEEP
javascriptjqueryhtmlruby-on-rails
grabury
grabury

Reputation: 5559

How to populate a text area from a dynamically created list

I have a list of addresses. Each address has 2 links which allow the user to click to add the address to the collection textarea or to the delivery textarea.

Here is the view

<p>Recent addresses</p>
<ul>
    <% @recent_addresses.each do |address| %>
        <li>
            <%= address %>
            <%= link_to 'Add to collection text area', '#', class: 'collection' %>
            <%= link_to 'Add to delivery text area', '#', class: 'delivery' %>
        </li>
    <% end %>
</ul>

And here is the equivalent html

<p>Recent addresses</p>
<ul>
    <li>
        14 Main road
        <a class="collection" href="#">Add to collection textarea</a>
        <a class="delivery" href="#">Add to delivery textarea</a>
    </li>
    <li>
        22 Main road
        <a class="collection" href="#">Add to collection textarea</a>
        <a class="delivery" href="#">Add to delivery textarea</a>
    </li>
</ul>

So far I have the following javascript/jquery code 

$(function(){
    $(".collection").click(function(e){
        e.preventDefault();
        $( "#collection_address" ).val($(this).text());
    });
});

$(function(){
    $(".delivery").click(function(e){
        e.preventDefault();
        $( "#delivery_address" ).val($(this).text());
    });
});

I cant figure out how to grab the correct address from the dynamically created list.

Upvotes: 0

Views: 506

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337570

Firstly, amend your HTML to wrap an element around the address text. This will make it easier to select:

<p>Recent addresses</p>
<ul>
    <li>
        <span class="address">14 Main road</span>
        <a class="collection" href="#">Add to collection textarea</a>
        <a class="delivery" href="#">Add to delivery textarea</a>
    </li>
    <li>
        <span class="address">22 Main road</span>
        <a class="collection" href="#">Add to collection textarea</a>
        <a class="delivery" href="#">Add to delivery textarea</a>
    </li>
</ul>

I used a span, but any element you need will work. The class is the important bit. You could go trawling through textNodes to find the value, but this would have issues if you change the markup for any reason. With this method, so long as the text is in the element with that class it can be placed anywhere within the li.

You then need to change your jQuery to retrieve this value:

$(function() {
    $(".collection").click(function(e){
        e.preventDefault();
        var addr = $(this).closest('li').find('.address').text();
        $("#collection_address" ).val(addr);
    });

    $(".delivery").click(function(e){
        e.preventDefault();
        var addr = $(this).closest('li').find('.address').text();
        $( "#delivery_address" ).val(addr);
    });
});

Example Fiddle

Note, you can place all jQuery code reliant on the DOM in a single DOMReady block - there is no need for each statement to be in it's own one.

Upvotes: 1

Related Questions