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

raceyi · 2015-01-09T00:40:58Z

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>

The text was updated successfully, but these errors were encountered:

gabrielschulhof · 2015-01-14T09:16:34Z

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

gabrielschulhof closed this as completed Jan 14, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

raceyi commented Jan 9, 2015

gabrielschulhof commented Jan 14, 2015

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

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

Comments

raceyi commented Jan 9, 2015

gabrielschulhof commented Jan 14, 2015