0

I'm trying to switch src attribute when changing the selector item. It works in different web browsers but when switching to my phone, it won't work. I tried with both latest version of Safari and Chrome on iOS 16.1.2 and I'm using jQuery 3.6.3

The code is so simple:

$('#selector').change(function() {
    model.setAttribute('src', path + $(this).val().trim()+'.glb');
});

Option 1 selected (the item should be bigger)

Option 2 selected (item should be smaller)

Also, when debugging, I got no errors and nothing out of normal.

------

Update: It seemed to be a jQuery problem, I recreated the code with vanilla JS and it worked as expected, so I left it like that.

alesv
  • 1
  • 2
  • I would start by investigating if it is the `.change()` function or the assigning a new value to the src attribute of the model. My guess, is that it is the latter, as stated in the first answer below. – KIKO Software Feb 27 '23 at 10:48
  • have you looked at this [post](https://stackoverflow.com/questions/9513268/why-does-new-jquery-onchange-not-fire-on-ios-while-it-works-on-android). There might be an issue with IOS handling dynamic content. – Roe Feb 27 '23 at 15:02

1 Answers1

0

It's possible that the issue is related to caching. On mobile devices, browsers may aggressively cache assets like images and 3D models to improve performance. When you change the src attribute of an element using jQuery, the browser may not realize that it needs to download a new version of the asset because it's still in the cache.

You can use the .attr() method in jQuery instead of setting the src attribute directly on the DOM element. The .attr() method takes care of cache-busting automatically.

$('#selector').change(function() {
    var src = path + $(this).val().trim() + '.glb';
    model.attr('src', src);
});
Ridwan
  • 214
  • 4
  • 17
  • I tried that and I keep having the same issue, It seems to be the `.change()` function because it won't show the `console.log()`. I'll try with buttons anyways. Thanks – alesv Feb 27 '23 at 11:35