Select "onchange" event on mobile

Question

I have a select box created by an API that has a few options in it. These options have values in it which are URLs. The native code for the box is something like this:

<select onchange="if(this.value!=''){window.open(this.value);}">
    <option value>Select one</option>
    <option value="http://www.google.com">Google</option>
    <option value="http://www.stackoverflow.com">StackOverflow</option>
</select>

The code opens the URL of the option in a new tab. It works fine on a desktop site, but trying it in mobile Safari doesn't work.

It works fine on android FF. When using one of my 2 android devices I am prompted to open the popup, so perhaps your code works fine but safari is blocking the popup. — chiliNUT, Nov 19 '13 at 00:31
@Derek朕會功夫 If you're referring to something such as jQuery's .click() or .blur() or .on(), I have. Safari ignores all of them. — user1583044, Nov 19 '13 at 00:43
@chiliNUT I've had a coworker try it on an Android device of his and got the same result as you, but unfortunately it needs to work on Safari as well. — user1583044, Nov 19 '13 at 00:44
Check safari's settings and see if it has pop up blocker turned on and of so turn it off. And have you tried adding the onblur event? Don't swap out on change for onblur, but add them both. Also try to open a pop up on your own, outside of the select and see if that even works — chiliNUT, Nov 19 '13 at 00:50
@chiliNUT As for opening another popup event, it's the damnedest thing, but it works. I've accidentally clicked an image link instead of the "done" button by accident, and it opens the link that was pushed _and_ the link that the select box was supposed to (during this time, the option wanted was selected, but the dropdown hadn't yet closed). It's great, but I can't replicate it with code and a link that leads nowhere. Turning off Safari's popup blocker does the job (says that it's trying to open up a popup) even without both onblur and onchange (with both, it does both, with one, does one). — user1583044, Nov 19 '13 at 01:05
ok, so then we have ruled out onblur/onchange as the culprit, sounds like it was indeed the popup blocker. Sorry, do you still have an issue or are you good now? — chiliNUT, Nov 19 '13 at 22:15
@chiliNUT It looks like what we have now will work fine, but thanks for your help. I never would have thought to look at the popup blocker. — user1583044, Nov 20 '13 at 15:17

score 0 · Answer 1 · answered Nov 19 '13 at 01:03

0

I don't believe that window.open will work in ios safari. You can use jquery to trigger a click event on a hidden link

<a class='hiddenbtn' target="_blank" style='display:none'></a>

<select class='mySelect'>
    <option value>Select one</option>
    <option value="http://www.google.com">Google</option>
    <option value="http://www.stackoverflow.com">StackOverflow</option>
</select>

$( ".mySelect" ).change(function() {
   if(this.value!=''){
     $('hiddenbtn').attr('href',this.value);
     $('hiddenbtn').trigger("click");
   }
});

answered Nov 19 '13 at 01:03

smstromb

586
2
7
19

It's looking as if window.open does work, but only if pop up blocker is off. Yours does work as well--but again, popup blocker has to be off. It's looking as if I can't get around the popup blocker. The last-ditch thing would be to just change the window.location to the URL needed, which does work without the popup blocker. It's looking like that's what I'll have to do, though. – user1583044 Nov 19 '13 at 01:25
@smstromb - If you are using jQuery, you might as well want to create the `` programmatically instead of manually. – Derek 朕會功夫 Nov 19 '13 at 01:32

score 0 · Accepted Answer · answered Nov 19 '13 at 15:24

It looks as if there's no way to get around a phone's popup blocker if they don't want popups. However, there's at least a way to somewhat circumvent the problem. Basically, check to see if you can create a popup window and give it focus, and if you can't just change the current window's location. In the end, this was the code I went with:

if ( /Android|webOS|iPhone|iPod|Blackberry|Windows Phone/i.test(navigator.userAgent)){
    $('#divID select').each(function(){
        $(this).attr("onchange", "if($(this).val()!=''){var popup=window.open($(this).val());if(!popup||typeof(popup)==='undefined'){window.location=$(this).val();}}");
    })
}

A more easily-navigable bit of code would be this:

if ( /Android|webOS|iPhone|iPod|Blackberry|Windows Phone/i.test(navigator.userAgent)){
    var onchange=["if ($(this).val()!=''){"];
    onchange.push("    var popup=window.open($(this).val());");
    onchange.push("    if (!popup||typeof(popup)==='undefined'){");
    onchange.push("        window.location = $(this).val();");
    onchange.push("    }");
    onchange.push("}");
    $('#divID select').each(function(){
        $(this).attr("onchange", onchange.join(''));
    })
}

When you are using jQuery why dont you attach the event using `.on` instead of adding an attribute? — Andreas Louv, Nov 19 '13 at 15:26
The attribute, as mentioned in the question, is already there. I could have used `.on` or `.stopPropagation`, but I decided to just do it through the attribute instead. — user1583044, Nov 19 '13 at 18:21

Andreas Louv · Answer 3 · 2013-11-19T20:27:42.760

Instead of using onchange attribute I would attach an event listener:

var select = document.querySelect('select');

select.addEventListener('change', function() {
  var val = select.value || select.options && select.options[select.selectedIndex];

  if ( val ) {
    // try window.open
    var win = window.open(val);
    if ( !win ) {
      // apparently window.open didnt work, use fallback:

      var a = document.createElement('a');
      a.href = val;
      a.target = '_blank';

      // trigger click on a tag:
      triggerEvent(a, 'click');
    }
  }
}, false);

And the triggerEvent function:

var triggerEvent = function(element, eventType) {
  // http://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript
  var event;
  if (document.createEvent) {
    event = document.createEvent("HTMLEvents");
    event.initEvent(eventType, true, true);
  } else {
    event = document.createEventObject();
    event.eventType = eventType;
  }

  event.eventName = eventName;
  event.memo = {};

  if (document.createEvent) {
    element.dispatchEvent(event);
  } else {
    element.fireEvent("on" + eventType, event);
  }
};

Select "onchange" event on mobile

3 Answers3