Snippet won't update DOM on mobile

Highlighted
New Member
3 0 0

Hi there

I've hit a roadblock with snippets that has me feeling like I must be misunderstanding something very basic, so all help is very welcome!

I have a snippet file `delivery-date.liquid` which contains an empty <select> element, and a script to populate it. (This isn't actually what my code is, I've just simplified the problem I'm facing to make it easier to read ☺️)

delivery-date.liquid:

<select id="deliveryDate" type="text" name="attributes[date]" value="{{ cart.attributes.date }}"></select>
<script>
(function() {
    document.getElementById("deliveryDate").innerHTML = "<option value=test>Test</option>";
})();
</script>

This snippet is then included in my cart page.

framework--cart.liquid:

{% render 'delivery-date' %}

On a desktop, this works just as I would expect it to, with a select box being presented with the option "Test".

However, when I test this on any mobile device, the select box is not populated!

I've spent a long time debugging this and have got nowhere Any and all help would be hugely appreciated!

Many thanks in advance!

0 Likes
Highlighted
Astronaut
1088 180 214

Hey,


Can you send a link to your online store so I can debug it?

Thanks.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
New Member
3 0 0

Hey thanks for getting back to me @diego_ezfy 

The only problem is that the site is currently live, and so as an interim solution I'm updating this element manually twice a week.

Would it work if I sent you the repository the theme code is stored on?

Cheers, Theo

0 Likes
Highlighted
New Member
3 0 0

@diego_ezfy Bumping this in case you have any ideas

0 Likes
Highlighted
Astronaut
1088 180 214

Hey,

You can't use innerHTML to dynamically set new options for a select element.

Try something like this:

 

 let select= document.getElementById('deliveryDate');
 select.options[select.options.length] = new Option('Test 1', 'Value1');

 

 

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes