I'm using a page with lot's of jquery sliders. Everything works fine in Chrome, Firefox, Safari, ... But sometimes it doesn't work in Internet Explorer. And with sometimes I mean that it's really random. It's really strange. Most of the time I get all of the sliders, sometimes I get none and sometimes a get some of the sliders.
It's an ASP.NET MVC 3 project and I'm using one view with multiple EditorTemplates. There is jquery code inside the View and inside the Editor Templates. (I'm just mentioning this to see if this could be a problem)
Has anyone seen this behavior before?
EDIT
Here's my code.
My View:
<script type="text/javascript">
$(document).ready(function () {
$(".guideSlider").slider({
range: "min",
value: 0,
min: 0,
max: 7,
step: 1,
disabled: true,
animate: true
});
$(".average").slider({
range: "min",
min: 0,
max: 7,
step: 0.1,
animate: true,
disabled: true
});
var current = 0;
var currentPage = 1;
$(".next").click(function (e) {
e.preventDefault();
if (submitForm(currentPage)) {
currentPage++;
current += 600;
$('#wrapper').animate({
scrollLeft: current
}, 1000);
}
return false;
});
$("#toOpenQuestions").click(function (e) {
if (!submitForm(currentPage)) {
e.preventDefault();
return false;
}
return true;
});
$(".previous").click(function (e) {
e.preventDefault();
currentPage--;
current -= 600;
$('#wrapper').animate({
scrollLeft: current
}, 1000);
return false;
});
$(".matrixItem .slider").bind("slidestop", function () {
var competenceId = $(this).parents("div[id$=competence]").attr("id");
setAverage(competenceId);
});
$("form").submit(function () {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize()
});
return false;
});
});
function setAverage(competenceId) {
var counter = 0;
var value = 0;
$("#" + competenceId + " div.matrixItem div.slider").each(function () {
var itemValue = $(this).slider("value");
if (itemValue > 0) {
counter++;
value += itemValue;
}
});
if (counter > 0)
value = value / counter;
$("#" + competenceId + " div.ui-state-active div.average").slider("value", value);
}
function submitForm(currentPage) {
var valid = true;
$("#page" + currentPage + " .competenceWrapper").each(function () {
var counter = 0;
$(this).children("div.matrixItem").children("div.slider").each(function () {
var itemValue = $(this).slider("value");
if (itemValue > 0) {
counter++;
}
});
if (counter < 2) valid = false;
});
if (valid)
$("#matrixForm").submit();
else
alert("You have to provide a score for at least 2 items per Competence");
return valid;
}
</script>
<style type="text/css">
.ui-slider-handle
{
z-index: 101 !important;
}
</style>
<div class="myVdp">
<div id="wrapper">
<div id="mask">
@using (Html.BeginForm("Matrix", "Home", FormMethod.Post, new { id = "matrixForm" }))
{
@Html.HiddenFor(m => m.RequestId)
@Html.EditorFor(m => m.Pages)
}
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("div[id$=competence]").each(function () {
var competenceId = $(this).attr("id");
setAverage(competenceId);
});
});
</script>
MatrixPage EditorTemplate
@{
string pageId = "page" + Model.PageNumber;
string progressBarId = "progressBar" + Model.PageNumber;
string guideClass = (Model.PageNumber % 2 == 0) ? "normal" : "flipBg";
}
<div id="@pageId" class="item">
<script type="text/javascript">
$(document).ready(function () {
var value = ((@Model.PageNumber-1)/@ViewBag.TotalPages)*100;
$("#@progressBarId").progressbar({ value: value });
});
</script>
<div id="guideBgColor" class="@guideClass">
<div id="guideBgImage" class="@guideClass">
<div id="guide">
<span id="zero">No score</span> <span id="one">High need for improvement</span>
<span id="seven">Being a grandmaster</span>
<div class="sliderBackground">
</div>
<div class="slider guideSlider">
</div>
</div>
<ul id="score">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li class="lastItem">7</li>
</ul>
</div>
</div>
@{
<div class="innerPage">
@Html.EditorFor(m => m.MatrixCompetences)
</div>
<div class="progressbar" id="@progressBarId">
</div>
if (Model.PageNumber > 1)
{
string previousPage = "page" + (Model.PageNumber - 1);
<a href="#@previousPage" class="previous">
<img src="@Url.Content("~/Content/Images/Left.png")" alt="previous" /></a>
}
if (Model.PageNumber < ViewBag.TotalPages)
{
string nextPage = "page" + (Model.PageNumber + 1);
<a href="#@nextPage" class="next">
<img src="@Url.Content("~/Content/Images/right.png")" alt="next" /></a>
}
else
{
<a href="@Url.Action("MatrixOpenQuestions", "Home", new { requestId = @ViewBag.requestId })" id="toOpenQuestions">
<img src="@Url.Content("~/Content/Images/right.png")" alt="next" /></a>
}
}
</div>
MatrixCompetence EditorTemplate
<script type="text/javascript">
$(document).ready(function () {
$("#@Model.CompetenceId.ToString()_competence .slider .ui-slider-range").css("background", "@Model.ColorHex");
$("#@Model.CompetenceId.ToString()_competence .slider .ui-slider-handle").css("border-color", "@Model.ColorHex");
});
</script>
<div id="@Model.CompetenceId.ToString()_competence" class="competenceWrapper">
<div class="ui-state-active competence">
<div class="competenceText">@Model.Text</div>
<div class="slider average">
</div>
</div>
@Html.EditorFor(m => Model.MatrixItems)
</div>
MatrixItem EditorTemplate
<script type="text/javascript">
$(document).ready(function() {
$("#@Model.ItemId").slider({
range: "min",
value: @Model.Score,
min: 0,
max: 7,
step: 1,
animate: true,
slide: function(event,ui) {
$(this).siblings("input[id$=Score]").val(ui.value);
}
});
$("#@Model.ItemId .ui-slider-range").css("background", "@Model.ColorHex");
$("#@Model.ItemId .ui-slider-handle").css("border-color", "@Model.ColorHex");
});
</script>
<div class="matrixItem">
<div class="itemText">
@Model.Text</div>
<div class="sliderBackground">
</div>
<div id="@Model.ItemId" class="slider">
</div>
@Html.HiddenFor(m=>Model.ItemId)
@Html.HiddenFor(m => Model.Score)
</div>
EDIT
Here's a screenshot. You can see that a few sliders are generated, but after 3 it suddendly doesn't work.
After pressing F5, it shows this. That should be the case from the start.
This is one page of the "live" code.
<div id="page1" class="item">
<script type="text/javascript">
$(document).ready(function () {
var value = ((1-1)/11)*100;
$("#progressBar1").progressbar({ value: value });
});
</script>
<div id="guideBgColor" class="flipBg">
<div id="guideBgImage" class="flipBg">
<div id="guide">
<span id="zero">No score</span> <span id="one">High need for improvement</span>
<span id="seven">Being a grandmaster</span>
<div class="sliderBackground">
</div>
<div class="slider guideSlider">
</div>
</div>
<ul id="score">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li class="lastItem">7</li>
</ul>
</div>
</div>
<div class="innerPage">
<script type="text/javascript">
$(document).ready(function () {
$("#1_competence .slider .ui-slider-range").css("background", "#004c97");
$("#1_competence .slider .ui-slider-handle").css("border-color", "#004c97");
});
</script>
<div id="1_competence" class="competenceWrapper">
<div class="ui-state-active competence">
<div class="competenceText">Structured</div>
<div class="slider average">
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#1").slider({
range: "min",
value: 0,
min: 0,
max: 7,
step: 1,
animate: true,
slide: function(event,ui) {
$(this).siblings("input[id$=Score]").val(ui.value);
}
});
$("#1 .ui-slider-range").css("background", "#004c97");
$("#1 .ui-slider-handle").css("border-color", "#004c97");
});
</script>
<div class="matrixItem">
<div class="itemText">
He is organised and works in a structured manner.</div>
<div class="sliderBackground">
</div>
<div id="1" class="slider">
</div>
<input data-val="true" data-val-number="The field ItemId must be a number." data-val-required="The ItemId field is required." id="Pages_0__MatrixCompetences_0__MatrixItems_0__ItemId" name="Pages[0].MatrixCompetences[0].MatrixItems[0].ItemId" type="hidden" value="1" />
<input data-val="true" data-val-number="The field Score must be a number." data-val-required="The Score field is required." id="Pages_0__MatrixCompetences_0__MatrixItems_0__Score" name="Pages[0].MatrixCompetences[0].MatrixItems[0].Score" type="hidden" value="0" />
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#2").slider({
range: "min",
value: 0,
min: 0,
max: 7,
step: 1,
animate: true,
slide: function(event,ui) {
$(this).siblings("input[id$=Score]").val(ui.value);
}
});
$("#2 .ui-slider-range").css("background", "#004c97");
$("#2 .ui-slider-handle").css("border-color", "#004c97");
});
</script>
<div class="matrixItem">
<div class="itemText">
He sets priorities and deadlines.</div>
<div class="sliderBackground">
</div>
<div id="2" class="slider">
</div>
<input data-val="true" data-val-number="The field ItemId must be a number." data-val-required="The ItemId field is required." id="Pages_0__MatrixCompetences_0__MatrixItems_1__ItemId" name="Pages[0].MatrixCompetences[0].MatrixItems[1].ItemId" type="hidden" value="2" />
<input data-val="true" data-val-number="The field Score must be a number." data-val-required="The Score field is required." id="Pages_0__MatrixCompetences_0__MatrixItems_1__Score" name="Pages[0].MatrixCompetences[0].MatrixItems[1].Score" type="hidden" value="0" />
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#3").slider({
range: "min",
value: 0,
min: 0,
max: 7,
step: 1,
animate: true,
slide: function(event,ui) {
$(this).siblings("input[id$=Score]").val(ui.value);
}
});
$("#3 .ui-slider-range").css("background", "#004c97");
$("#3 .ui-slider-handle").css("border-color", "#004c97");
});
</script>
<div class="matrixItem">
<div class="itemText">
He plans well in advance.</div>
<div class="sliderBackground">
</div>
<div id="3" class="slider">
</div>
<input data-val="true" data-val-number="The field ItemId must be a number." data-val-required="The ItemId field is required." id="Pages_0__MatrixCompetences_0__MatrixItems_2__ItemId" name="Pages[0].MatrixCompetences[0].MatrixItems[2].ItemId" type="hidden" value="3" />
<input data-val="true" data-val-number="The field Score must be a number." data-val-required="The Score field is required." id="Pages_0__MatrixCompetences_0__MatrixItems_2__Score" name="Pages[0].MatrixCompetences[0].MatrixItems[2].Score" type="hidden" value="0" />
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#4").slider({
range: "min",
value: 0,
min: 0,
max: 7,
step: 1,
animate: true,
slide: function(event,ui) {
$(this).siblings("input[id$=Score]").val(ui.value);
}
});
$("#4 .ui-slider-range").css("background", "#004c97");
$("#4 .ui-slider-handle").css("border-color", "#004c97");
});
</script>
<div class="matrixItem">
<div class="itemText">
He arrives on time.</div>
<div class="sliderBackground">
</div>
<div id="4" class="slider">
</div>
<input data-val="true" data-val-number="The field ItemId must be a number." data-val-required="The ItemId field is required." id="Pages_0__MatrixCompetences_0__MatrixItems_3__ItemId" name="Pages[0].MatrixCompetences[0].MatrixItems[3].ItemId" type="hidden" value="4" />
<input data-val="true" data-val-number="The field Score must be a number." data-val-required="The Score field is required." id="Pages_0__MatrixCompetences_0__MatrixItems_3__Score" name="Pages[0].MatrixCompetences[0].MatrixItems[3].Score" type="hidden" value="0" />
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#2_competence .slider .ui-slider-range").css("background", "#004c97");
$("#2_competence .slider .ui-slider-handle").css("border-color", "#004c97");
});
</script>
<div id="2_competence" class="competenceWrapper">
<div class="ui-state-active competence">
<div class="competenceText">Result Oriented</div>
<div class="slider average">
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#5").slider({
range: "min",
value: 0,
min: 0,
max: 7,
step: 1,
animate: true,
slide: function(event,ui) {
$(this).siblings("input[id$=Score]").val(ui.value);
}
});
$("#5 .ui-slider-range").css("background", "#004c97");
$("#5 .ui-slider-handle").css("border-color", "#004c97");
});
</script>
<div class="matrixItem">
<div class="itemText">
He sets achievable goals/priorities.</div>
<div class="sliderBackground">
</div>
<div id="5" class="slider">
</div>
<input data-val="true" data-val-number="The field ItemId must be a number." data-val-required="The ItemId field is required." id="Pages_0__MatrixCompetences_1__MatrixItems_0__ItemId" name="Pages[0].MatrixCompetences[1].MatrixItems[0].ItemId" type="hidden" value="5" />
<input data-val="true" data-val-number="The field Score must be a number." data-val-required="The Score field is required." id="Pages_0__MatrixCompetences_1__MatrixItems_0__Score" name="Pages[0].MatrixCompetences[1].MatrixItems[0].Score" type="hidden" value="0" />
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#6").slider({
range: "min",
value: 0,
min: 0,
max: 7,
step: 1,
animate: true,
slide: function(event,ui) {
$(this).siblings("input[id$=Score]").val(ui.value);
}
});
$("#6 .ui-slider-range").css("background", "#004c97");
$("#6 .ui-slider-handle").css("border-color", "#004c97");
});
</script>
<div class="matrixItem">
<div class="itemText">
He focuses on the result.</div>
<div class="sliderBackground">
</div>
<div id="6" class="slider">
</div>
<input data-val="true" data-val-number="The field ItemId must be a number." data-val-required="The ItemId field is required." id="Pages_0__MatrixCompetences_1__MatrixItems_1__ItemId" name="Pages[0].MatrixCompetences[1].MatrixItems[1].ItemId" type="hidden" value="6" />
<input data-val="true" data-val-number="The field Score must be a number." data-val-required="The Score field is required." id="Pages_0__MatrixCompetences_1__MatrixItems_1__Score" name="Pages[0].MatrixCompetences[1].MatrixItems[1].Score" type="hidden" value="0" />
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#7").slider({
range: "min",
value: 0,
min: 0,
max: 7,
step: 1,
animate: true,
slide: function(event,ui) {
$(this).siblings("input[id$=Score]").val(ui.value);
}
});
$("#7 .ui-slider-range").css("background", "#004c97");
$("#7 .ui-slider-handle").css("border-color", "#004c97");
});
</script>
<div class="matrixItem">
<div class="itemText">
He meets his deadlines.</div>
<div class="sliderBackground">
</div>
<div id="7" class="slider">
</div>
<input data-val="true" data-val-number="The field ItemId must be a number." data-val-required="The ItemId field is required." id="Pages_0__MatrixCompetences_1__MatrixItems_2__ItemId" name="Pages[0].MatrixCompetences[1].MatrixItems[2].ItemId" type="hidden" value="7" />
<input data-val="true" data-val-number="The field Score must be a number." data-val-required="The Score field is required." id="Pages_0__MatrixCompetences_1__MatrixItems_2__Score" name="Pages[0].MatrixCompetences[1].MatrixItems[2].Score" type="hidden" value="0" />
</div>
</div>
</div>
<div class="progressbar" id="progressBar1">
</div>
Hopefully you guys can help me out. Because I don't know what to try anymore.
Kind Regards Tim
