Here is all the code I've tried:

select:function(event, ui) {
    window.open(ui.item.value, "_blank");
}

select:function(event, ui) {
    window.location.href = ui.item.value;
}

When in web app mode, the screen just refreshes, it doesn't go to the location. In Mobile Safari, it works as intended.

Is this a limiting with web apps on iPhone? Is there a way around it?

Here is the plete code:

<script>
$(document).ready(function() {
    var cct = $('input[name=csrf_token]').val();    
    var searchInput = $('input[name=search]');

    function loadEventsData(onSuccess){
      $.ajax({
        type: 'POST',
        url: '<?php echo site_url('ajax_frontend/getEventsSearch'); ?>',
        dataType: 'json',
        success: onSuccess,
        error: function(XMLHttpRequest, textStatus, errorThrown) { alert(errorThrown); }
      });
    }

    function initializeEventsAutoplete(data){
      searchInput.addClass('loaded').autoplete({
      source:data,
      appendTo: '.search_autoplete',
      minLength:2,
      delay:0,
      selectFirst:false,
      open: function(event, ui) {
        $('ul.events').hide();
        $('.ui-autoplete').removeAttr('style');
        $('.icon-search').hide();
        $('.icon-close').show();
      },
      close: function(event, ui) {
        val = searchInput.val();
        searchInput.autoplete("search", val);
        searchInput.focus();
        return false;
      },
      select:function(event, ui) {
        window.location.href = ui.item.value;
        return false;
      }
      });
    }

    $('form').submit(function(e) {
        e.preventDefault();
        searchInput.blur();
    });

    searchInput.keyup(function(){
    if($(this).is(".loaded")) return;
    loadEventsData(initializeEventsAutoplete);
    });

    $('.icon-close').click(function(e) {
        e.preventDefault();

        $(this).hide();
        $('.icon-search').show();
        searchInput.autoplete('close');
        $('ul.events').show();
        searchInput.val('');
    });
});
</script>

And here is the JSON (some of it):

[{"value":"http:\/\/events.dev\/index.php\/event\/canada-day","label":"Canada Day"},{"value":"http:\/\/events.dev\/index.php\/event\/triathlon-festival","label":"Triathlon Festival"}]

Here is all the code I've tried:

select:function(event, ui) {
    window.open(ui.item.value, "_blank");
}

select:function(event, ui) {
    window.location.href = ui.item.value;
}

When in web app mode, the screen just refreshes, it doesn't go to the location. In Mobile Safari, it works as intended.

Is this a limiting with web apps on iPhone? Is there a way around it?

Here is the plete code:

<script>
$(document).ready(function() {
    var cct = $('input[name=csrf_token]').val();    
    var searchInput = $('input[name=search]');

    function loadEventsData(onSuccess){
      $.ajax({
        type: 'POST',
        url: '<?php echo site_url('ajax_frontend/getEventsSearch'); ?>',
        dataType: 'json',
        success: onSuccess,
        error: function(XMLHttpRequest, textStatus, errorThrown) { alert(errorThrown); }
      });
    }

    function initializeEventsAutoplete(data){
      searchInput.addClass('loaded').autoplete({
      source:data,
      appendTo: '.search_autoplete',
      minLength:2,
      delay:0,
      selectFirst:false,
      open: function(event, ui) {
        $('ul.events').hide();
        $('.ui-autoplete').removeAttr('style');
        $('.icon-search').hide();
        $('.icon-close').show();
      },
      close: function(event, ui) {
        val = searchInput.val();
        searchInput.autoplete("search", val);
        searchInput.focus();
        return false;
      },
      select:function(event, ui) {
        window.location.href = ui.item.value;
        return false;
      }
      });
    }

    $('form').submit(function(e) {
        e.preventDefault();
        searchInput.blur();
    });

    searchInput.keyup(function(){
    if($(this).is(".loaded")) return;
    loadEventsData(initializeEventsAutoplete);
    });

    $('.icon-close').click(function(e) {
        e.preventDefault();

        $(this).hide();
        $('.icon-search').show();
        searchInput.autoplete('close');
        $('ul.events').show();
        searchInput.val('');
    });
});
</script>

And here is the JSON (some of it):

[{"value":"http:\/\/events.dev\/index.php\/event\/canada-day","label":"Canada Day"},{"value":"http:\/\/events.dev\/index.php\/event\/triathlon-festival","label":"Triathlon Festival"}]

• javascript
• iphone
• web-applications

Share Improve this question Follow edited Jul 23, 2012 at 19:15 dallen asked Jul 23, 2012 at 18:58 dallendallen 2,65177 gold badges3838 silver badges4949 bronze badges 5

• Are you sure it's not a problem with the select:function call itself? If you do another bit of JavaScript instead of a window open, does it work? – ceejayoz Commented Jul 23, 2012 at 19:09
• Looks like you're right. I put it outside of the select:function and it works. But I still need it in there, unfortunately. I'm using jQuery UI Autoplete. Any idea what might be stopping it and how to overe it? – dallen Commented Jul 23, 2012 at 19:12
• Can you show the entirety of the autoplete call? I'd guess it's something simple you missed but without the code that's hard to say for certain. – ceejayoz Commented Jul 23, 2012 at 19:14
• And, like I said in the question, it does work in regular Mobile Safari, but not in full-screen web app mode. Weird. – dallen Commented Jul 23, 2012 at 19:14
• @ceejayoz I have added the plete code. Thanks for checking! – dallen Commented Jul 23, 2012 at 19:16

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Programmatically (Javascript) opens a link in Mobile Safari. Ideal if you cannot use a standard html link but you must use Javascript:

var a = document.createElement("a");
a.setAttribute('href', facebook);
a.setAttribute('target', '_blank');
a.click();

I figured this out. I'm using the following code to prevent links in the web app from opening in Safari:

https://gist.github./1042026

This was causing some unwanted side effects. To fix this, I added:

event.stopPropagation();

to my selection:function area and it works as it should.