0

For reasons I won't go into, I need to insert data into a Grid field using a Channel form. However, I cannot use the 'default' Grid field and instead need to use separate, custom select dropdowns.

I've managed to get this working except for one thing.

The Grid field in question has 3 simple text columns. Two of these are populated by select dropdowns.

The second select seems to work OK and the data from the select is inserted correctly. But the first select field of the first row is always gets the very first option inserted. All other columns/rows appear to be OK.

The different rows are generated with jQuery and the second select of each row is dynamically generated from an Ajax lookup but I can't see this being the issue as everything else seems to work OK.

The HTML I'm using is thus (ignore the data attributes, they are from a previous iteration and I've not yet removed them);

<div id="product-selections">

    <div id="product-selection-1" class="product-selection">

        <select class="product-purchased" name="customer-invoice-purchases[rows][new_row_1][col_id_1]">
            <option value="">--Choose a product--</option>
            <option data-product="554" value="Product 1">Product 1</option>
            <option data-product="553" value="Product 2">Product 2</option>
            <option data-product="551" value="Product 3">Product 3</option>
            <option data-product="550" value="Product 4">Product 4</option>
            <option data-product="549" value="Product 5">Product 5</option>
            <option data-product="548" value="Product 6">Product 6</option>
        </select>

        <select id="" class="product-variant" name="customer-invoice-purchases[rows][new_row_1][col_id_2]">
            <option data-product="553" data-points="20">2 port</option> 
            <option data-product="553" data-points="30">3 port</option> 
            <option data-product="553" data-points="40">4 port</option>     
            <option data-product="553" data-points="50">5 port</option>
            <option data-product="553" data-points="60">6 port</option>
            <option data-product="553" data-points="70">7 port</option>
            <option data-product="553" data-points="80">8 port</option>
            <option data-product="553" data-points="90">9 port</option>
            <option data-product="553" data-points="100">10 port</option>
            <option data-product="553" data-points="110">11 port</option>
            <option data-product="553" data-points="120">12 port</option>
        </select>

        <a class="remove button pink small" href="#" title="Remove this item">×</a>
    </div>


    <div id="product-selection-2" class="product-selection">

        <select class="product-purchased" name="customer-invoice-purchases[rows][new_row_2][col_id_1]">
            <option value="">--Choose a product--</option>
            <option data-product="554" value="Product 1">Product 1</option>
            <option data-product="553" value="Product 2">Product 2</option>
            <option data-product="551" value="Product 3">Product 3</option>
            <option data-product="550" value="Product 4">Product 4</option>
            <option data-product="549" value="Product 5">Product 5</option>
            <option data-product="548" value="Product 6">Product 6</option>
        </select>

        <select id="" class="product-variant" name="customer-invoice-purchases[rows][new_row_2][col_id_2]">
            <option data-product="551" data-points="60">2 port</option>
            <option data-product="551" data-points="70">3 port</option>
            <option data-product="551" data-points="80">4 port</option>
            <option data-product="551" data-points="90">5 port</option>
            <option data-product="551" data-points="100">6 port</option>
            <option data-product="551" data-points="110">7 port</option>
            <option data-product="551" data-points="120">8 port</option>
            <option data-product="551" data-points="130">9 port</option>
            <option data-product="551" data-points="140">10 port</option>
            <option data-product="551" data-points="150">11 port</option>
            <option data-product="551" data-points="160">12 port</option>
            <option data-product="551" data-points="170">13 port</option>
            <option data-product="551" data-points="180">14 port</option>
            <option data-product="551" data-points="190">15 port</option>
            <option data-product="551" data-points="200">16 port</option>
            <option data-product="551" data-points="210">17 port</option>
            <option data-product="551" data-points="220">18 port</option>
            <option data-product="551" data-points="230">19 port</option>
            <option data-product="551" data-points="240">20 port</option>
        </select>

        <a class="remove button pink small" href="#" title="Remove this item">×</a>
    </div>
</div>

This is what gets inserted (ignore the quantity column for the moment).

enter image description here

Does anyone have an idea as to why the first field of the first row might always get the first option inserted regardless of what has been selected?

  • 1
    I can't answer (or can I, hmm) but just thinking about it made the front of my head hurt. :P – Nathan Pitman Sep 25 '14 at 10:41
  • You win the internet! – foamcow Sep 25 '14 at 10:42
  • Also, think how I feel! – foamcow Sep 25 '14 at 10:42
  • 1
    Seriously though... does it still exhibit this behaviour when you remove all JS from the template? – Nathan Pitman Sep 25 '14 at 10:43
  • I haven't tried it since the JS is creating the dropdowns. That HTML snippet is what is generated and I can't see a problem with it :/ I'll give it a whirl but feel it's highly unlikely to be the problem. No matter which products or how many rows the very first field gets the very first selectable option. – foamcow Sep 25 '14 at 10:55
0

This was actually a problem with how I was creating the field rows.

I had a 'template' field set within the page (only containing the initial first select) which was cloned as needed (the second select then being inserted via Ajax as required).

This had the effect of overriding whatever was in the first 'real' row.

| improve this answer | |
  • Glad you got it sussed, a problem shared is a problem cut in half with a chainsaw or something... – Nathan Pitman Sep 25 '14 at 13:17
  • In a way I'm sad that the issue was far less interesting than it first appeared :) – foamcow Sep 25 '14 at 13:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.