Databases
StackOverflow2013
Postsdbo
POjQuery Slider in IE
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Slider in IE
    primarykey
    data
    text
    <p>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.</p> <p>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)</p> <p>Has anyone seen this behavior before?</p> <p><strong>EDIT</strong></p> <p>Here's my code.</p> <p>My View:</p> <pre><code> &lt;script type="text/javascript"&gt; $(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 &gt; 0) { counter++; value += itemValue; } }); if (counter &gt; 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 &gt; 0) { counter++; } }); if (counter &lt; 2) valid = false; }); if (valid) $("#matrixForm").submit(); else alert("You have to provide a score for at least 2 items per Competence"); return valid; } &lt;/script&gt; &lt;style type="text/css"&gt; .ui-slider-handle { z-index: 101 !important; } &lt;/style&gt; &lt;div class="myVdp"&gt; &lt;div id="wrapper"&gt; &lt;div id="mask"&gt; @using (Html.BeginForm("Matrix", "Home", FormMethod.Post, new { id = "matrixForm" })) { @Html.HiddenFor(m =&gt; m.RequestId) @Html.EditorFor(m =&gt; m.Pages) } &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;script type="text/javascript"&gt; $(document).ready(function () { $("div[id$=competence]").each(function () { var competenceId = $(this).attr("id"); setAverage(competenceId); }); }); &lt;/script&gt; </code></pre> <p>MatrixPage EditorTemplate</p> <pre><code> @{ string pageId = "page" + Model.PageNumber; string progressBarId = "progressBar" + Model.PageNumber; string guideClass = (Model.PageNumber % 2 == 0) ? "normal" : "flipBg"; } &lt;div id="@pageId" class="item"&gt; &lt;script type="text/javascript"&gt; $(document).ready(function () { var value = ((@Model.PageNumber-1)/@ViewBag.TotalPages)*100; $("#@progressBarId").progressbar({ value: value }); }); &lt;/script&gt; &lt;div id="guideBgColor" class="@guideClass"&gt; &lt;div id="guideBgImage" class="@guideClass"&gt; &lt;div id="guide"&gt; &lt;span id="zero"&gt;No score&lt;/span&gt; &lt;span id="one"&gt;High need for improvement&lt;/span&gt; &lt;span id="seven"&gt;Being a grandmaster&lt;/span&gt; &lt;div class="sliderBackground"&gt; &amp;nbsp;&lt;/div&gt; &lt;div class="slider guideSlider"&gt; &lt;/div&gt; &lt;/div&gt; &lt;ul id="score"&gt; &lt;li&gt;0&lt;/li&gt; &lt;li&gt;1&lt;/li&gt; &lt;li&gt;2&lt;/li&gt; &lt;li&gt;3&lt;/li&gt; &lt;li&gt;4&lt;/li&gt; &lt;li&gt;5&lt;/li&gt; &lt;li&gt;6&lt;/li&gt; &lt;li class="lastItem"&gt;7&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; @{ &lt;div class="innerPage"&gt; @Html.EditorFor(m =&gt; m.MatrixCompetences) &lt;/div&gt; &lt;div class="progressbar" id="@progressBarId"&gt; &lt;/div&gt; if (Model.PageNumber &gt; 1) { string previousPage = "page" + (Model.PageNumber - 1); &lt;a href="#@previousPage" class="previous"&gt; &lt;img src="@Url.Content("~/Content/Images/Left.png")" alt="previous" /&gt;&lt;/a&gt; } if (Model.PageNumber &lt; ViewBag.TotalPages) { string nextPage = "page" + (Model.PageNumber + 1); &lt;a href="#@nextPage" class="next"&gt; &lt;img src="@Url.Content("~/Content/Images/right.png")" alt="next" /&gt;&lt;/a&gt; } else { &lt;a href="@Url.Action("MatrixOpenQuestions", "Home", new { requestId = @ViewBag.requestId })" id="toOpenQuestions"&gt; &lt;img src="@Url.Content("~/Content/Images/right.png")" alt="next" /&gt;&lt;/a&gt; } } &lt;/div&gt; </code></pre> <p>MatrixCompetence EditorTemplate</p> <pre><code>&lt;script type="text/javascript"&gt; $(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"); }); &lt;/script&gt; &lt;div id="@Model.CompetenceId.ToString()_competence" class="competenceWrapper"&gt; &lt;div class="ui-state-active competence"&gt; &lt;div class="competenceText"&gt;@Model.Text&lt;/div&gt; &lt;div class="slider average"&gt; &lt;/div&gt; &lt;/div&gt; @Html.EditorFor(m =&gt; Model.MatrixItems) &lt;/div&gt; </code></pre> <p>MatrixItem EditorTemplate</p> <pre><code>&lt;script type="text/javascript"&gt; $(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"); }); &lt;/script&gt; &lt;div class="matrixItem"&gt; &lt;div class="itemText"&gt; @Model.Text&lt;/div&gt; &lt;div class="sliderBackground"&gt; &amp;nbsp;&lt;/div&gt; &lt;div id="@Model.ItemId" class="slider"&gt; &lt;/div&gt; @Html.HiddenFor(m=&gt;Model.ItemId) @Html.HiddenFor(m =&gt; Model.Score) &lt;/div&gt; </code></pre> <p><strong>EDIT</strong></p> <p>Here's a screenshot. You can see that a few sliders are generated, but after 3 it suddendly doesn't work. <img src="https://i.stack.imgur.com/pMf04.png" alt="screenshot"></p> <p>After pressing F5, it shows this. That should be the case from the start.</p> <p><img src="https://i.stack.imgur.com/1j0s1.png" alt="after refresh"></p> <p>This is one page of the "live" code.</p> <pre><code>&lt;div id="page1" class="item"&gt; &lt;script type="text/javascript"&gt; $(document).ready(function () { var value = ((1-1)/11)*100; $("#progressBar1").progressbar({ value: value }); }); &lt;/script&gt; &lt;div id="guideBgColor" class="flipBg"&gt; &lt;div id="guideBgImage" class="flipBg"&gt; &lt;div id="guide"&gt; &lt;span id="zero"&gt;No score&lt;/span&gt; &lt;span id="one"&gt;High need for improvement&lt;/span&gt; &lt;span id="seven"&gt;Being a grandmaster&lt;/span&gt; &lt;div class="sliderBackground"&gt; &amp;nbsp;&lt;/div&gt; &lt;div class="slider guideSlider"&gt; &lt;/div&gt; &lt;/div&gt; &lt;ul id="score"&gt; &lt;li&gt;0&lt;/li&gt; &lt;li&gt;1&lt;/li&gt; &lt;li&gt;2&lt;/li&gt; &lt;li&gt;3&lt;/li&gt; &lt;li&gt;4&lt;/li&gt; &lt;li&gt;5&lt;/li&gt; &lt;li&gt;6&lt;/li&gt; &lt;li class="lastItem"&gt;7&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="innerPage"&gt; &lt;script type="text/javascript"&gt; $(document).ready(function () { $("#1_competence .slider .ui-slider-range").css("background", "#004c97"); $("#1_competence .slider .ui-slider-handle").css("border-color", "#004c97"); }); &lt;/script&gt; &lt;div id="1_competence" class="competenceWrapper"&gt; &lt;div class="ui-state-active competence"&gt; &lt;div class="competenceText"&gt;Structured&lt;/div&gt; &lt;div class="slider average"&gt; &lt;/div&gt; &lt;/div&gt; &lt;script type="text/javascript"&gt; $(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"); }); &lt;/script&gt; &lt;div class="matrixItem"&gt; &lt;div class="itemText"&gt; He is organised and works in a structured manner.&lt;/div&gt; &lt;div class="sliderBackground"&gt; &amp;nbsp;&lt;/div&gt; &lt;div id="1" class="slider"&gt; &lt;/div&gt; &lt;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" /&gt; &lt;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" /&gt; &lt;/div&gt; &lt;script type="text/javascript"&gt; $(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"); }); &lt;/script&gt; &lt;div class="matrixItem"&gt; &lt;div class="itemText"&gt; He sets priorities and deadlines.&lt;/div&gt; &lt;div class="sliderBackground"&gt; &amp;nbsp;&lt;/div&gt; &lt;div id="2" class="slider"&gt; &lt;/div&gt; &lt;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" /&gt; &lt;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" /&gt; &lt;/div&gt; &lt;script type="text/javascript"&gt; $(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"); }); &lt;/script&gt; &lt;div class="matrixItem"&gt; &lt;div class="itemText"&gt; He plans well in advance.&lt;/div&gt; &lt;div class="sliderBackground"&gt; &amp;nbsp;&lt;/div&gt; &lt;div id="3" class="slider"&gt; &lt;/div&gt; &lt;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" /&gt; &lt;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" /&gt; &lt;/div&gt; &lt;script type="text/javascript"&gt; $(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"); }); &lt;/script&gt; &lt;div class="matrixItem"&gt; &lt;div class="itemText"&gt; He arrives on time.&lt;/div&gt; &lt;div class="sliderBackground"&gt; &amp;nbsp;&lt;/div&gt; &lt;div id="4" class="slider"&gt; &lt;/div&gt; &lt;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" /&gt; &lt;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" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;script type="text/javascript"&gt; $(document).ready(function () { $("#2_competence .slider .ui-slider-range").css("background", "#004c97"); $("#2_competence .slider .ui-slider-handle").css("border-color", "#004c97"); }); &lt;/script&gt; &lt;div id="2_competence" class="competenceWrapper"&gt; &lt;div class="ui-state-active competence"&gt; &lt;div class="competenceText"&gt;Result Oriented&lt;/div&gt; &lt;div class="slider average"&gt; &lt;/div&gt; &lt;/div&gt; &lt;script type="text/javascript"&gt; $(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"); }); &lt;/script&gt; &lt;div class="matrixItem"&gt; &lt;div class="itemText"&gt; He sets achievable goals/priorities.&lt;/div&gt; &lt;div class="sliderBackground"&gt; &amp;nbsp;&lt;/div&gt; &lt;div id="5" class="slider"&gt; &lt;/div&gt; &lt;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" /&gt; &lt;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" /&gt; &lt;/div&gt; &lt;script type="text/javascript"&gt; $(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"); }); &lt;/script&gt; &lt;div class="matrixItem"&gt; &lt;div class="itemText"&gt; He focuses on the result.&lt;/div&gt; &lt;div class="sliderBackground"&gt; &amp;nbsp;&lt;/div&gt; &lt;div id="6" class="slider"&gt; &lt;/div&gt; &lt;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" /&gt; &lt;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" /&gt; &lt;/div&gt; &lt;script type="text/javascript"&gt; $(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"); }); &lt;/script&gt; &lt;div class="matrixItem"&gt; &lt;div class="itemText"&gt; He meets his deadlines.&lt;/div&gt; &lt;div class="sliderBackground"&gt; &amp;nbsp;&lt;/div&gt; &lt;div id="7" class="slider"&gt; &lt;/div&gt; &lt;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" /&gt; &lt;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" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="progressbar" id="progressBar1"&gt; &lt;/div&gt; </code></pre> <p>Hopefully you guys can help me out. Because I don't know what to try anymore.</p> <p>Kind Regards Tim</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USTim D'haeyer
    1. USTim D'haeyer
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POjQuery Slider in IE
      1. This table or related slice is empty.
      1. VTUpMod
    1. COCan you share the code?
      singulars
      1. POjQuery Slider in IE
      1. USDarren
    2. COI added all the code
      singulars
      1. POjQuery Slider in IE
      1. USTim D'haeyer
    3. COshow the generated code, I think it would be more helpful. Also you can try removing the sliders and test them 1 by 1, maybe one of them is causing the rest to break. For example, test the first 1, then add the second and so on and see when it starts to break. Do you get errors in IE?
      singulars
      1. POjQuery Slider in IE
      1. USHuangism
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload