Search jQuery

jQuery Forum

Tabs + jQueryUI button via ajax.

in Using jQuery UI • 10 years ago

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.

Attachments

spanproblem.jpg
Size : 410.77 KB Downloads : 2361 Download

Replies(1)

kovyrshin

Re: Tabs + jQueryUI button via ajax.

10 years ago

The problem is solved.

I've added

<div id='delivery".$orderid."' class='bset'>
<input type='radio' id='radio1-".$orderid."' name='deliv".$orderid."' checked='checked'/><label for='radio1-".$orderid."' style='width:187px;' >Доставка</label>
<input type='radio' id='radio2-".$orderid."' name='deliv".$orderid."' /><label for='radio2-".$orderid."' style='width:187.5px;'>Самовывоз</label>
</div>

insted of this one:

<div id='delivery".$orderid."' class='bset'>
<input type='radio' id='radio1' name='deliv".$orderid."' checked='checked'/><label for='radio1' style='width:187px;' >Доставка</label>
<input type='radio' id='radio2' name='deliv".$orderid."' /><label for='radio2' style='width:187.5px;'>Самовывоз</label>
</div>

It all works fine now;

Top Reply

Response title

Attachments

jQuery Forum

Tabs + jQueryUI button via ajax.

Attachments

Replies(1)

Re: Tabs + jQueryUI button via ajax.

Statistics

Tags

Actions