Solved

Implement wizard step UI navigation with jquery slider in MVC view

Posted on 2010-09-09
10
2,083 Views
Last Modified: 2013-11-08
I have asp.net MVC2 app and have implemented wizard navigation to complete a customer survey.

Customers can fill out different surveys and each survey has a different number of questions.

A survey is loaded and each question is displayed one at a time with a NEXT button to proceed onto next question.

I need to implement something like a jquery slider/progress bar plugin or something experts can recommend

http://jqueryui.com/demos/slider/#rangemax
or something like
http://jqueryui.com/demos/progressbar/

so as a user progresses through survey by clicking the next button the slider progresses as well.
In the view I can get the total number of questions to use this as the range max.
How can I implement this?  
0
Comment
Question by:ToString1
  • 6
  • 4
10 Comments
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
0
 

Author Comment

by:ToString1
Comment Utility
Ideally I want something from the jquery core like this

http://jqueryui.com/demos/slider/#rangemax

I need a code snippet of how to pass the number of questions to the slider so it progresses correctly.

0
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
If i have understood the requirement correctly, you are looking for
Number of steps in the wizard
http://jqueryui.com/demos/slider/#option-step

<<I need a code snippet of how to pass the number of questions to the slider so it progresses correctly.>>
How would you like to distribute the questions among screens?
0
 

Author Comment

by:ToString1
Comment Utility
What I do is have an MVC ActionResult that returns one question at a time.

My view inherits from a viewmodel that passes in the total number of questions and the current question.
0
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
If you give min as '1' and max as 'number of questions', doesn't that give you what you are looking for?
$("#slider-range-max").slider({
                  range: "max",
                  min: 1, \\starting point
                  max: 10, \\number of questions
                  value: 2,
                  slide: function(event, ui) {
                        $("#amount").val(ui.value);
                  }
            });
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:ToString1
Comment Utility
Hi Yes

It does but I am unsure of how to pass this to the jquery function from hidden fields in my view

So in my view I have

 <input name="currentQuestionNo" type="hidden" value="<%Model.customer.qustID%>" />
<input name="totalQuestions" type="hidden" value="<%Model.customer.qustID%>" />


How can I pass  questionNo to the jquery

$("#slider-range-max").slider({
                  range: "max",
                  min: 1, \\starting point
                  max: 10,                          // totalQuestions from hidden field
                  value: 2,                                 //currentQuestionNo  from hidden field
                  slide: function(event, ui) {
                        $("#amount").val(ui.value);
                  }
            });

0
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
Make it

$("#slider-range-max").slider({
                  range: "max",
                  min: 1,
                  max: $(input[name='totalQuestions']).value,
                  value: 2,                                
                  slide: function(event, ui) {
                        $("#amount").val(ui.value);
                  }
            });

0
 

Author Comment

by:ToString1
Comment Utility
Thanks but if I try that I get "input undefined"

Its on the
 max: $(input[name='totalQuestions']).value,
0
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 500 total points
Comment Utility
are you not calling this function at the document.ready (body onload event)?

If not, then this input element will not be available to the slider unless the document is ready to be processed
0
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
thanks for the points
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The purpose of this video is to demonstrate how to set up the WordPress backend so that each page automatically generates a Mailchimp signup form in the sidebar. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome…
The viewer will learn how to dynamically set the form action using jQuery.

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now