I am using jquery steps wizard with activeform and it works well. However, other jquery features like datepicker and select2 does not work properly within the steps wizard. They work fine when I am not using the step wizard. What I have done so far is to make sure that my Jquery steps wizard code post to the end of the page. Once datepicker and select2 javascript comes before the jquery steps wizard code then all is right. I can control where I put my jquery code when I am using jquery directly, but when I use yii2 extensions like Kartik Select2 widget extension, the javascript select2 code would be last on the page instead of the jquery steps wizard code. I use $this->registerjs(‘my jquery steps wizard code’,$this::POS_END) to try and put my javascript code at the end. However, Kartik select2 widget code always seems to be last. How can I change that to always make my code last on that page. Here is how the javascript loads in the browser.
<script type="text/javascript">
var form = $("#form").show();
form.steps({
/* Appearance */
headerTag: "h1",
bodyTag: "fieldset",
contentContainerTag: "div",
actionContainerTag: "div",
stepsContainerTag: "div",
cssClass: "wizard",
stepsOrientation: $.fn.steps.stepsOrientation.horizontal,
/* Templates */
titleTemplate: '<span class="number">#index#.</span> #title#',
loadingTemplate: '<span class="spinner"></span> #text#',
/* Behaviour */
autoFocus: false,
enableAllSteps: false,
enableKeyNavigation: true,
enablePagination: true,
suppressPaginationOnFocus: true,
enableContentCache: true,
enableCancelButton: true,
enableFinishButton: true,
preloadContent: false,
showFinishButtonAlways: false,
forceMoveForward: false,
saveState: false,
startIndex: 0,
/* Transition Effects */
transitionEffect: $.fn.steps.transitionEffect.none,
transitionEffectSpeed: 200,
/* Labels */
labels: {
cancel: "Cancel",
current: "current step:",
pagination: "Pagination",
finish: "Finish",
next: "Next",
previous: "Previous",
loading: "Loading ..."
},
onStepChanging: function (event, currentIndex, newIndex)
{
// Always allow going backward even if the current step contains invalid fields!
if (currentIndex > newIndex)
{
return true;
}
var form = $(this);
// Clean up if user went backward before
if (currentIndex < newIndex)
{
// To remove error styles
$(".body:eq(" + newIndex + ") label.error", form).remove();
$(".body:eq(" + newIndex + ") .error", form).removeClass("error");
}
// Disable validation on fields that are disabled or hidden.
form.validate().settings.ignore = ":disabled,:hidden";
// Start validation; Prevent going forward if false
return form.valid();
},
onStepChanged: function (event, currentIndex, priorIndex)
{
// Suppress (skip) "Warning" step if the user is old enough.
if (currentIndex === 2 && Number($("#age").val()) >= 18)
{
$(this).steps("next");
}
// Suppress (skip) "Warning" step if the user is old enough and wants to the previous step.
if (currentIndex === 2 && priorIndex === 3)
{
$(this).steps("previous");
}
},
onFinishing: function (event, currentIndex)
{
var form = $(this);
// Disable validation on fields that are disabled.
// At this point it's recommended to do an overall check (mean ignoring only disabled fields)
form.validate().settings.ignore = ":disabled";
// Start validation; Prevent form submission if false
return form.valid();
},
onFinished: function (event, currentIndex)
{
var form = $(this);
// Submit form input
form.submit();
}
}).validate({
errorPlacement: function (error, element)
{
element.before(error);
},
rules: {
confirm: {
equalTo: "#password"
}
}
});</script>
<script type="text/javascript">jQuery(document).ready(function () {
if (jQuery('#w0').data('select2')) { jQuery('#w0').select2('destroy'); }
jQuery.when(jQuery('#w0').select2(select2_ce87b81b)).done(initS2Loading('w0','s2options_d6851687'));
jQuery.fn.kvDatepicker.dates={};
if (jQuery('#release-releasedate').data('kvDatepicker')) { jQuery('#release-releasedate').kvDatepicker('destroy'); }
jQuery('#release-releasedate-kvdate').kvDatepicker(kvDatepicker_a3562f15);
jQuery('#form').yiiActiveForm([], []);
});</script>
