how The JQuery ui Tabs to dynamically created elements?

Question

Hello I have the following hml page. I need to apply the jQuery ui Tabs plugin to the dynamically added elements. how can I get that. please note that when I add <li> elements as string that work fine but when i use document.createElement it dont work instead I get the same html structure when I inspect these elements

  <!doctype html>
    <html lang="en">
    <head>
  <meta charset="utf-8">
  <title>jQuery UI Tabs - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http:/resources/demos/style.css">
</head>
<body>

<div id="tabs">
  <ul>
    <li><a href="#tabs0">Sample0</a></li>
  </ul>
  <div id="tabs0">
    <p>exemple1</p>
  </div>
</div>

 <input  type="button" onclick="ReloadTabs()" value="rebuild"/>



<script>
      $(function() {
      $("#tabs").tabs();
    });

  //add tabs and recreate my tabs 

function ReloadTabs() {

  var liElement1 = document.createElement('li');
  var anchElement1 = document.createElement('a');
  $(anchElement1).attr("href", "tab1");
  $(liElement1).append(anchElement1);

  var liElement2 = document.createElement('li');
  var anchElement2 = document.createElement('a');
  $(anchElement2).attr("href", "tab2");
  $(liElement2).append(anchElement2);


  $("#tabs ul").append(liElement1);
  $("#tabs ul").append(liElement2);

  $("#tabs").append('<div id="tab1"><p>sample1</p></div><div id="tab2"><p>.</p><p>Sample2</p></div>');
  $("#tabs").tabs("refresh");
}


  </script>
</body>
</html>

The tabs widget looks for an anchor's href, not id. Also, your second (and every one after that) click will produce invalid HTML as you'll have two a and two div elements with the same ids — blgt
– blgt, Commented May 18, 2015 at 10:39
sorry for the mistake I do but event with this modified code it does not work — monther zlatan
– monther zlatan, Commented May 18, 2015 at 10:47
hrefs, unlike the id attribute, do need a leading # character. Other than this your code looks okay. If it still doesn't work, could you make a MCVE? — blgt
– blgt, Commented May 18, 2015 at 10:49

Akash Chavda · Accepted Answer · 2015-05-18 11:27:28Z

1

you can try like this

change html for your button

<input  type="button" id="rebuild" value="rebuild"/>

change your js code

$(function() {
      $("#tabs").tabs();

    $(document).on('click', '#rebuild', function() {

        var ul = $('#tabs').find('ul');
          var liElement1 = $('<li />');
          $(liElement1).append('<a href="#tab1" >tab1</a>');

          var liElement2 = $('<li />');
          $(liElement2).append('<a href="#tab2" >tab2</a>');

          $(ul).append(liElement1);
          $(ul).append(liElement2);

          $("#tabs").append('<div id="tab1"><p>sample1</p></div><div id="tab2"><p>.</p><p>Sample2</p></div>');
          $("#tabs").tabs("refresh");
    });

});

also check in jsfiddle

http://jsfiddle.net/0jp0xpmu/1/

I am not sure but i think it's helpful to you.

answered May 18, 2015 at 11:27

Akash Chavda

1,2271 gold badge13 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how The JQuery ui Tabs to dynamically created elements?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related