1

For context - I'm using jquery 2.1 and Bootstrap 3.2.

I have a modal that presents a search form and a "go search" button. Below the search form, there is a div reserved to display the results of the query in the same modal. The results are injected in the div by javascript. The user is then allowed to pick one of the results and submit their choice (a second submit event).

So the modal html (rendered with the host page) is:

<form id="'.$formid.'" method="post" action="/control/mm_form_handler.php">

  <div class="form-container text-center">

    <div class="form-row " >
        <input name="f_name" type="text" required/>
        <input name="l_name" type="text" required/>
    </div>

    <div>
      <input type="submit" class="btn search-btn btn-xs" value="Go Search" />
    </div>

  </div>

</form>

<div id="search_results"></div>

The modal search form is submitted via javascript using Malsup's jQuery_form plugin like this:

    $( document ).on('click','.search-btn',function(e) {
        e.preventDefault();

        var formID = $(this).closest("form").attr('id');


        $('#search_results').html('');

        $('#search_results').prepend('<div class="waiting"></div><p>Please be patient. This could take a little time...</p>');

        var options = {
            data: {'formID':formID},
            success: function (data) {
                $('#search_results').html(data);
            },
            error: function() {
                alert('post failed');
            }
        };

        $('#'+formID).ajaxSubmit(options);

    });

And the handler is a php script that gets the likely matches from a data base, and formats them into blocks with radio buttons so the user can select a (near) match. The html string built is, in the end echo'd and displayed in the "search_results" div (see javascript).

I think its only relevant (because it works just fine on PC/Mac) that what is passed back is a string of html and content.

So this set up works perfectly fine on a PC/Mac with Chrome, Safari or Firefox.

The problem is iOS, Chrome and Safari.

On iOS 7.1.2 (iphone 4S), when the search form is submitted (.search_btn), the screen gets screwed up - the top half of the screen is the modal search form (on top of the greyed background on top of the original page) and the bottom half is the content from the modal-launching page presented ON TOP OF the bottom half of the modal. By swiping down the lower half the full modal is revealed. A second press of the search button, then retrieves and displays the results perfectly in the modal just like the PC/Mac experience.

On iOS 8.0.2 (iphone 6 - yes I took the plunge today), the page remains greyed out, but the modal completely disappears (no search form, no content returned, etc.) and the browser locks up.

I've tried taking out the prepended content inserted into search_results but get exactly the same results with or without that content.

Any clues what I need to do to get iOS browsers to behave the way desktop browsers do?

globalSchmidt
  • 1,329
  • 16
  • 28
  • 1
    There is currently no such thing as Bootstrap v3.3. – cvrebert Sep 27 '14 at 04:32
  • 1
    The code you posted doesn't have any Bootstrap modal markup... – cvrebert Sep 27 '14 at 04:35
  • Thanks for catching the bootstrap version typo. Fixed. And you are correct that the code posted didn't have any bootstrap in it. What's shown is the code between the `
    ` tags in an otherwise standard bootstrap modal. http://getbootstrap.com/javascript/#modals. Since bootstrap is unlikely to be the issue here, I've removed the SO tag for this post.     – globalSchmidt Sep 27 '14 at 10:17
  • UPDATE: I found this post: http://stackoverflow.com/questions/10400149/avoid-modal-dismiss-on-enter-keypress and removed all button references from my modal code. On iOS 7.1.2 the modal form submission works as expected IF you close the keyboard BEFORE you hit the "go Search" button. Still not working (just greys out) on iOS 8. – globalSchmidt Sep 27 '14 at 11:49

0 Answers0