User-762556441 posted
Hello
I have created a wizard form based on jquert Steps from this link http://www.jquery-steps.com/ .
This wizard is on a form :
<form id="form" action="ApplicationSettings" method="post" enctype="multipart/form-data" class="wizard-big">
<h1>Application</h1>
<fieldset>
....
</fieldset>
<h1>Images</h1>
<fieldset>
<h2>Images</h2>
<div class="input-group m-b">
<span class="input-group-btn">
<a href="@Url.Action("Index", "EsxTreeCaptureOne", new { idreturn = 0 })" class="control-label" onclick="return DisplayProgressMessage(this, 'Capture Image')">
<input type="button" class="btn btn-primary" value="Select">
</a>
</span>
</div>
</fieldset>
<h1>Finish</h1>
<fieldset>
.....
</fieldset>
</form>
And the script look like this :
<script type="text/javascript">
$(document).ready(function () {
$("#wizard").steps({enableAllSteps: true});
$("#form").steps({
enableAllSteps: true,
bodyTag: "fieldset",
onStepChanging: function (event, currentIndex, newIndex) {
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) {
if (currentIndex===4)
{
// var indexnou = '';
var table = document.getElementsByTagName("table")[1];
for (var ln = 1; ln < table.rows.length ; ln++) {
var secondRow = table.rows[ln];
indexnou += ln.toString() + "<";
indexnou += secondRow.id.toString() + ">";
}
alert(indexnou);
}
},
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
},
onFinished: function (event, currentIndex) {
var form = $(this);
// Submit form input
form.submit();
}
}).validate({
errorPlacement: function (error, element) {
element.before(error);
},
rules: {
confirm: {
// equalTo: "#password"
}
}
});
From the fieldset Image I must open another view and it is called by :
<span class="input-group-btn">
<a href="@Url.Action("Index", "EsxTreeCaptureOne", new { idreturn = 0 })" class="control-label" onclick="return DisplayProgressMessage(this, 'Capture Image')">
<input type="button" class="btn btn-primary" value="Select">
</a>
After closing this view (Index from EsxTreeCaptureOne from Cancel Action ) I must to go back to last step on ApplicationSettings View where wizard is, (in this case in Image fieldstep) .Well my action in EsxTreeCaptureOne looks like :
public ActionResult Cancel(int idreturn)
{
return new RedirectResult(Url.Action("Index", "ApplicationSettings", new { id = -1, idw = -1, idt = -1 });
}
and this redirect to the first step(the main index view). How to change this action to redirect to the Image step(last accessed in the previous view )?
I saw that when a fildset is active this is the line added on page source code :
<span class="current-info audible">current step:
</span>
<form id="form" class="wizard-big wizard clearfix" enctype="multipart/form-data" method="post" action="ApplicationSettings" role="application" novalidate="novalidate">
<div class="steps clearfix">
<ul role="tablist">
<li class="first done" role="tab" aria-disabled="false" aria-selected="false">
<a id="form-t-0" aria-controls="form-p-0" href="#form-h-0">
<span class="number">1.</span>
Load/CreateNew
</a>
</li>
<li role="tab" aria-disabled="false">
<a id="form-t-1" aria-controls="form-p-1" href="#form-h-1">
<span class="number">2.</span>
Application
</a>
</li>
<li class="current" role="tab" aria-disabled="false" aria-selected="true">
<a id="form-t-2" aria-controls="form-p-2" href="#form-h-2">
<span class="current-info audible">current step: </span>
<span class="number">3.</span>
Images
</a>
</li>
<li role="tab" aria-disabled="false">
<li role="tab" aria-disabled="false">
<li class="last" role="tab" aria-disabled="false">
</ul>
</div>
<div class="content clearfix">
<div class="actions clearfix">
</form>
Please help me . Thanks in advance
