CODEWITHSUNDEEP
javascriptjquerycssjquery-mobile
Gank
Gank

Reputation: 4667

Why jQuery mobile change theme automatically?

I popup a form and it can't focus on the input immediately on iPad. Another problem is the form's button's theme changes from e to b after pressing it,and it will not change back any more!

     <div data-role="page" id="addrPage">
       <div id="popupLogin" data-theme="e" class="ui-corner-all"
        style="z-index: 2;position:fixed;display: none;left:10%;top:15%;width: 250px;height: 150px;background-color:#0">
        <form id="OKForm" >
            <input type="text" id="formEdit" value="" placeholder="Input"           data-theme="e" autofocus="autofocus"/>
            <button type="submit" id="btnOK" data-theme="e">
                OK
            </button>
        </form>
        </div>
        <a data-role="button" id="tbProp">show</a>
    </div><!-- /page -->
<script>
$('#tbProp').bind( "click", function(event, ui) {
    $('#popupLogin').show();
        setTimeout(function(){
            $("#formEdit").focus();
        },0);
});

$('#OKForm').submit(function() {
    $("#popupLogin").hide();
    $("btnOK").removeClass("ui-btn-up-b ui-btn-hover-b").addClass("ui-btn-up-e ui-btn-hover-e");
    return false;
});
</script>

demo:http://jsfiddle.net/gclsoft/JZgWT/1/

Upvotes: 1

Views: 367

Answers (1)

Omar
Omar

Reputation: 31732

Update: To open virtual keyboard once popups open, use the below code.

$('#popupLogin').on('popupafteropen', function () {
 $('#formEdit').trigger('click');
});

Popup in jQuery has a data-role="popup" and must be placed inside data-role="page" div. This is the right way to show/close it. Using .show() or .hide() isn't recommended.

Markup

<div data-role="page" id="addrPage">
 <div id="popupLogin" data-theme="e" data-role="popup">
  <form id="OKForm">
   <input type="text" id="formEdit" value="" placeholder="Input" data-theme="e"/>
   <button type="submit" id="btnOK" data-theme="e">OK</button>
  </form>
 </div> <!-- /popup -->
 <a data-role="button" id="tbProp">show</a>
</div> <!-- /page -->

jQuery Mobile

open popup:

$('#tbProp').on('click', function () {
 $('#popupLogin').popup('open');
 $('#formEdit').focus();
});

close it and refresh submit button:

$('#OKForm').submit(function () {
 $('#popupLogin').popup('close');
 $('#btnOK').closest('div').removeClass('ui-btn-active');
});

or you can refresh the button after the popup is closed:

$('#popupLogin').on('popupafterclose', function () {
 $('#btnOK').closest('div').removeClass('ui-btn-active');
});

CSS - optional

#popupLogin {
 padding: 10px !important;
}

Working Demo

Upvotes: 1

Related Questions