Solved

Implement wizard step UI navigation with jquery slider in MVC view

Posted on 2010-09-09
10
2,096 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
ID: 33634676
0
 

Author Comment

by:ToString1
ID: 33634776
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
ID: 33634921
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
ID: 33635181
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
ID: 33636612
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
New! My Passport Wireless Pro Wi-Fi Mobile Storage

Portable wireless storage to offload, edit, and stream anywhere.

High-capacity, wireless mobile storage designed to accompany professional photographers and videographers in the field to easily offload, edit and stream captured photos and high-definition videos.

 

Author Comment

by:ToString1
ID: 33636740
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
ID: 33637053
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
ID: 33637454
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
ID: 33637484
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
ID: 33637628
thanks for the points
0

Featured Post

Scale it in WD Gold

With up to ten times the workload capacity of desktop drives, WD Gold hard drives employ advanced technology to deliver among the best in reliability, capacity, power efficiency and performance.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
HTML and CSS for a complex page 20 57
LINQ - C# to VB convertion 12 46
Class object 2 26
Change text to radio button and calendar form 2 32
Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

919 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

21 Experts available now in Live!

Get 1:1 Help Now