在IE中使用锚点的Jquery Mobile重定向

问题描述：

My code is running on jquery mobile 1.4.5. When i submit the form. The website will make a call to login.php and if it succeeds it will redirect to the #customer anchor. If not it will redirect to the #error popout. The problem is that this works as expected on chrome and firefox however it does not work on desktop IE11.

$(document).ready(function() {
  $('#loginform').submit(function(e) {
    e.preventDefault();
    $.ajax({
      type: "POST",
      url: 'login.php',
      data: $(this).serialize(),
      success: function(data) {
        if (data === 'login') {
          window.location = '#customer';
        } else {
          window.location = '#error';
        }
      }
    });
  });
});

<form id="loginform" method="post">
  <div class="ui-field-contain">
    <label for="storeID">Store ID:</label>
    <input type="text" name="usn" id="usn">
    <label for="password">Password:</label>
    <input type="password" name="upw" id="upw">
  </div>
  <input type="submit" Value="Login" />
</form>

</div>

答

JQM has its own widget for navigating to Pages. It loads pages using Ajax into the Dom or once loaded into the Dom it directs to that Page. The Widget used is called Pagecontainer using Change Method.

Now i dont know about IE11, never used it, but per JQM user guide the following way is the one you need to use.

http://api.jquerymobile.com/pagecontainer/

(page transition in the example is set to none) you can choose one from here --http://demos.jquerymobile.com/1.4.5/transitions/

 $( ":mobile-pagecontainer" ).pagecontainer( "change", "#customer", { transition: "none" })

if you want a reverse transition, ie going the other way round use reverse true

 $( ":mobile-pagecontainer" ).pagecontainer( "change", "#customer", { transition: "none", reverse: true })

For the error dialog JQM has a widget for that too.

http://api.jquerymobile.com/dialog/

To Open the error dialog

$.mobile.changePage( "#error", { role: "dialog" } );

在IE中使用锚点的Jquery Mobile重定向

相关推荐