Tabs + jQueryUI button via ajax.
HI!
I'm using tabs on a web site and load some content via ajax. I want to use JqueryUI radiobuttons there. But there's a problem of styling.
That's what i have:
-
$tabs.tabs('add', 'order.php?id='+num, "Order #"+num);
and order php file for example:
-
$('#gotorderby".$orderid."').buttonset();
- ....[some code here]...
-
<div id='gotorderby".$orderid."' class='bset'>
-
<input type='radio' id='radio6' name='gotby".$orderid."' checked='checked' /><label for='radio6' style='width:187px;'>Cart</label>
-
<input type='radio' id='radio7' name='gotby".$orderid."' /><label for='radio7' style='width:187.5px;'>Phone</label>
-
</div>
When i add one tab it's all ok, but when i add second all my radiobuttons get additional <span> tag inside, and height increaes. it aslo increases on all radiobuttons on a previuos tabs.
After some added tabs result is:
-
<div class="bset ui-buttonset" id="delivery2">
-
<input type="radio" checked="checked" name="deliv2" id="radio1" class="ui-helper-hidden-accessible">
-
<label style="width: 187px;" for="radio1" class="ui-state-active ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" aria-pressed="true" role="button" aria-disabled="false">
-
<span class="ui-button-text">
-
<span class="ui-button-text">
-
<span class="ui-button-text">
-
<span class="ui-button-text">
-
Доставка</span></span></span></span>
-
</label>
-
<input type="radio" name="deliv2" id="radio2" class="ui-helper-hidden-accessible">
-
<label style="width: 187.5px;" for="radio2" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
-
<span class="ui-button-text">
-
<span class="ui-button-text">
-
<span class="ui-button-text">
-
<span class="ui-button-text">Самовывоз
-
</span></span></span></span>
- </label>
- </div>
I treid to solve the problems, but still no result. Can anyone figure what's wrong?
I've attached a screenshot to show how does it looks.