Witam,
mam problem z generowaniem 'buttonset()' w formularzu opartym na jQuery Form i Formwizard Plugin.
W pierwszym kroku grupa radio buttons jest aktywna, a w następnych już nie - nie wiem w czym tkwi problem :/
JS:
$(function(){
$("#dialog-zak-l-form").formwizard({
formPluginEnabled: true,
validationEnabled: true,
focusFirstInput : true,
textNext : 'Dalej',
textBack : 'Wróć',
textSubmit : 'Zatwierdź',
formOptions :{
success: function(data){$("#status").fadeTo(500,1,function(){ $(this).html("You are now registered!").fadeTo(5000, 0); })},
beforeSubmit: function(data){$("#data").html("data sent to the server: " + $.param(data));},
dataType: 'json',
resetForm: true
}
});
});
$("#radio-dialog-zak-l-typzakucia").buttonset();
$("#radio-dialog-zak-l-typsuwmiarki").buttonset();
$("#radio-dialog-zak-l-odmianazakucia").buttonset();
HTML:
<form id="dialog-zak-l-form" method="post" action="json.html" class="bbq ui-helper-reset ui-formwizard">
<div class="fieldWrapper">
<span id="dialog-zak-l-form-1" style="display: inline;" class="step ui-formwizard-content ui-helper-reset ui-corner-all">
<h3>Jaki masz typ zakucia?</h3>
<p><img src="http://ima.gs/350x350.png" />
<img src="http://ima.gs/350x350.png" /></p>
<div id="radio-dialog-zak-l-typzakucia">
<input type="radio" id="dialog-zak-l-typzakucia-1" name="dialog-zak-l-typzakucia" class="ui-wizard-content ui-helper-reset ui-state-default" value="standardowe" />
<label for="dialog-zak-l-typzakucia-1">Standardowe</label>
<input type="radio" id="dialog-zak-l-typzakucia-2" name="dialog-zak-l-typzakucia" class="ui-wizard-content ui-helper-reset ui-state-default" value="oczkowe" />
<label for="dialog-zak-l-typzakucia-2">Oczkowe</label>
</div>
</span>
<span id="dialog-zak-l-form-2" style="display: none;" class="step ui-formwizard-content ui-helper-reset ui-corner-all">
<h3>Jaką masz suwmiarkę?</h3>
<p><img src="http://ima.gs/350x350.png" />
<img src="http://ima.gs/350x350.png" /></p>
<div id="radio-dialog-zak-l-typsuwmiarki">
<input type="radio" id="dialog-zak-l-typsuwmiarki-1" name="dialog-zak-l-typsuwmiarki" class="ui-wizard-content ui-helper-reset ui-state-default" disabled="disabled" value="analogowa" />
<label for="dialog-zak-l-typsuwmiarki-1">Analogowa</label>
<input type="radio" id="dialog-zak-l-typsuwmiarki-2" name="dialog-zak-l-typsuwmiarki" class="ui-wizard-content ui-helper-reset ui-state-default" disabled="disabled" value="cyfrowa" />
<label for="dialog-zak-l-typsuwmiarki-2">Cyfrowa</label>
</div>
</span>
<span id="dialog-zak-l-form-3" style="display: none;" class="step ui-formwizard-content ui-helper-reset ui-corner-all">
<h3>Jaka jest odmiana zakucia?</h3>
<p><img src="http://ima.gs/350x350.png" />
<img src="http://ima.gs/350x350.png" /></p>
<div id="radio-dialog-zak-l-odmianazakucia">
<input type="radio" id="dialog-zak-l-typ-odmianazakucia-1" name="dialog-zak-l-typ-odmianazakucia" class="ui-wizard-content ui-helper-reset ui-state-default" disabled="disabled" value="lekka" />
<label for="dialog-zak-l-typ-odmianazakucia-1">Lekka</label>
<input type="radio" id="dialog-zak-l-typ-odmianazakucia-2" name="dialog-zak-l-typ-odmianazakucia" class="ui-wizard-content ui-helper-reset ui-state-default" disabled="disabled" value="ciezka" />
<label for="dialog-zak-l-typ-odmianazakucia-2">Ciężka</label>
</div>
</span>
<span id="dialog-zak-l-form-4" style="display: none;" class="step ui-formwizard-content ui-helper-reset ui-corner-all">
<h3>Jaki jest typ gwintu?</h3>
<p><img src="http://ima.gs/350x350.png" />
<img src="http://ima.gs/350x350.png" /></p>
<input type="radio" id="dialog-zak-l-typ-typgwintu-1" name="dialog-zak-l-typ-typgwintu" class="ui-wizard-content ui-helper-reset ui-state-default" disabled="disabled" value="zewnetrzny" />
<label for="dialog-zak-l-typ-typgwintu-1">Zewnętrzny</label>
<input type="radio" id="dialog-zak-l-typ-typgwintu-2" name="dialog-zak-l-typ-typgwintu" class="ui-wizard-content ui-helper-reset ui-state-default" disabled="disabled" value="wewnetrzny" />
<label for="dialog-zak-l-typ-typgwintu-2">Wewnętrzny</label>
</span>
<span id="dialog-zak-l-form-5" style="display: none;" class="step ui-formwizard-content ui-helper-reset ui-corner-all">
<h3>Określ kąt stożka</h3>
<p><img src="http://ima.gs/250x350.png" />
<img src="http://ima.gs/250x350.png" />
<img src="http://ima.gs/250x350.png" /></p>
<input type="radio" id="dialog-zak-l-typ-katstozka-1" name="dialog-zak-l-typ-katstozka" class="ui-wizard-content ui-helper-reset ui-state-default" disabled="disabled" value="24" />
<label for="dialog-zak-l-typ-katstozka-1">24</label>
<input type="radio" id="dialog-zak-l-typ-katstozka-2" name="dialog-zak-l-typ-katstozka" class="ui-wizard-content ui-helper-reset ui-state-default" disabled="disabled" value="37" />
<label for="dialog-zak-l-typ-katstozka-2">37</label>
<input type="radio" id="dialog-zak-l-typ-katstozka-3" name="dialog-zak-l-typ-katstozka" class="ui-wizard-content ui-helper-reset ui-state-default" disabled="disabled" value="60" />
<label for="dialog-zak-l-typ-katstozka-3">60</label>
</span>
</div>
<div class="navigation">
<input class="navigation_button" id="back" value="Back" type="reset" />
<input class="navigation_button" id="next" value="Next" type="submit" />
</div>
</form>
Efekt można zobaczyć tutaj po kliknięciu na "Pomóż mi dobrać parametry" na dole po lewej: http://proj.chost.eu/29-3/ .