-2

I found a fiddle that has a feature I want (http://jsfiddle.net/R5sSh/), but I can't get it to work on a test page with newer jquery 2.X and jquery mobile 1.4.X.

My fiddle: http://jsfiddle.net/skfneasfbif/m11v6tef/

My example page, created from my fiddle: 

<html>
<head>
  <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {

      $("#tabs").tabs({
          select: function(event, ui) { console.log("Tab selected"); }
      });
      $("#tabs-1 > #subtabs").tabs({
          select: function(event, ui) { console.log("subTab selected"); }
      });

  });
  </script>
</head>
<body>
  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">Tab1</a></li>
      <li><a href="#tabs-2">Tab2</a></li>
    </ul>
    <div id="tabs-1">
      <p>Console.log shows 1 message : "Tab selected"</p>
      <div id="subtabs">
        <ul>
          <li><a href="#subtabs-1">Subtab1</a></li>
          <li><a href="#subtabs-2">Subtab2</a></li>
        </ul>
        <div id="subtabs-1">
          <p>Console.log shows 2 messages : "Subtab selected" & "Tab selected". I just want the Subtab selected.</p>
        </div>
        <div id="subtabs-2">
          <p>Console.log shows 2 messages : "Subtab selected" & "Tab selected". I just want the Subtab selected.</p>
        </div>
      </div>
    </div>
    <div id="tabs-2">
      <p>Console.log shows 1 message : "Tab selected"</p>
    </div>
  </div>
</body>
</html>

which renders without the tabs, and just contains the text, and doesn't do anything when the links are clicked.

Whats wrong with my test page? Is there a debugger that would have shown me my error?

Edit: I've updated the javascript, but it still doesn't render properly. Theres a test page in my comment.

n k
  • 25
  • 5

1 Answers1

2

You need to enclose the following within a jQuery DOM ready event handler function because the corresponding HTML does not yet exist when this code is called...

$("#tabs").tabs({
  select: function(event, ui) { console.log("Tab selected"); }
});
$("#tabs-1 > #subtabs").tabs({
  select: function(event, ui) { console.log("subTab selected"); }
});

Should be...

$(document).ready(function() {

    $("#tabs").tabs({
        select: function(event, ui) { console.log("Tab selected"); }
    });
    $("#tabs-1 > #subtabs").tabs({
        select: function(event, ui) { console.log("subTab selected"); }
    });

});

It only works in your jsFiddle because jsFiddle automatically wraps your JavaScript in a DOM ready event handler function on its back end.

Sparky
  • 98,165
  • 25
  • 199
  • 285
  • I added the changes (ready function wrapper and indentation), but its still not rendering correctly. I set up a test page here: [link](http://www-zeuthen.desy.de/~nkelhos/test/). – n k Jan 06 '15 at 10:59
  • @nk, you **must** include all the same external resources as in the jsFiddle if you expect your page to work the same. In other words, your test page is ***missing*** the **jQuery UI** plugin and its CSS. – Sparky Jan 06 '15 at 17:02
  • the way the jsFiddle page is organized, it looks like it was loading either (jquery 1.x and jquery ui) _or_ ( jquery 2.x and jquery mobile). But yep, that fixed it, thanks! – n k Jan 07 '15 at 12:48