locked
JQuery Steps Redirect RRS feed

  • Question

  • 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

    Friday, February 26, 2016 8:17 AM

Answers

  • User-762556441 posted

    I found the solution here :

    http://forums.asp.net/t/2076896.aspx?Setting+the+active+index+of+the+JQuery+Steps

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, February 26, 2016 3:08 PM