New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ui.tabs has problem in a page created by pagecontainer(“change”); #7908

Closed
raceyi opened this Issue Jan 9, 2015 · 1 comment

Comments

Projects
None yet
2 participants
@raceyi

raceyi commented Jan 9, 2015

It is fine when the page refreshes or move into the page with data-ajax="false" .
But a page with tab doesn't show correctly when a page is created by a link with data-ajax="true" or pagecontainer("change");

I investigated the reason and found out that ui.tabs checks all anchors if they are local or not by function isLocal( anchor ). But location.href is not updated yet as it is done when the change is completed.

I am new to jquery mobile. Please let me know if I use tab widget incorrectly.

Please check below case. Is there a way to attach files into this issue tracker?

index.html


<!DOCTYPE html>
<html class="ui-mobile">

<head>

<meta charset="utf-8" http-equiv="Content-Type" name="viewport" content="width=device-width, initial-scale=1" > 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<title>Insert title here</title>

</head>

<body>

<div data-role="page" data-theme="a" >

<div data-role="content">

<!--

<a href="tab.html" data-transition="fade" data-role="button">tab</a>

-->

<input type="button" id=tabbutton value=tab />

<script type="text/javascript">

$("#tabbutton").bind ("click", function (event)

{

$("body").pagecontainer("change", "tab.html");

console.log("index");

return false;

});

</script>

</div>

</div>

</body>

</html>

tab.html



<!DOCTYPE html>

<html class="ui-mobile">

<head>

<meta charset="utf-8" http-equiv="Content-Type" name="viewport" content="width=device-width, initial-scale=1" > 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<title>Insert title here</title>

</head>

<body>

<div data-role="page" data-theme="a" >

<div data-role="content">

<div data-role="tabs" id="tabs" >

<div id="navBarWithAudio" data-role="navbar" >

  <ul id="tabList">
  <li><a id="textInputTab"  href="#textInput" data-ajax="false">textInput</a></li>
  <li><a id="audioInputTab" href="#audioInput" data-ajax="false">audioRecognition</a></li>
  <li><a id="imageInputTab" href="#imageInput" data-ajax="false">textRecognition</a></li>
</ul>

</div>

<div >

</div>

<div id="textInput" data-role="content">

textInput

</div>

<div id="audioInput" data-role="content">

audioInput

</div>

<div id="imageInput" data-role="content">

imageInput

</div>

</div>

</div>

</div>

</body>

</html>

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jan 14, 2015

Contributor

This is a duplicate of issue #7169 and will be fixed in 1.5.0.

Contributor

gabrielschulhof commented Jan 14, 2015

This is a duplicate of issue #7169 and will be fixed in 1.5.0.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment