Another strange issue with Internet Explorer

Question

Here's another strange issue with IE (version 9, in my case, although I suspect it will happen with every other one): my survey works perfectly in both in Chrome and Firefox, but in IE when I click the "next" button nothing happens. This is more strange because I bet it was working before. I'm using SSI Web 7.0.26. I'll post the code below, although it's a little bit extensive:

<link type="text/css" href="[%GraphicsPath()%]/jquery/css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="[%GraphicsPath()%]/jquery/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="[%GraphicsPath()%]/jquery/js/jquery-ui-1.8.19.custom.min.js"></script>

<script>
    jQuery(function()
    {
        jQuery( "#slider" ).slider(
        {
            range: "min",
            value: 1,
            min: 1,
            max: 60,
            slide: function(event, ui)
            {
                      jQuery( "#slider_value" ).val( ui.value );
                  }
        });
        jQuery( "#slider_value" ).val(jQuery( "#slider" ).slider( "value" ) );
    });
</script>

<table class="inner_table" border=1 width="660">
    <tr style=width:"660">
        <td id="td1" class="item_text_cell alt_color2">&nbsp;</td>
    </tr>
    <tr style=width:"660">
        <td id="td2" class="item_text_cell alt_color1">&nbsp;</td>
    </tr>
</table>
  
<script type="text/javascript">
  
function displayRow(x, r)
{
    document.getElementById(x).innerHTML = r;
}

//Randomize the order of the array:
var ids = new Array(1, 2);
ids.sort(function() {return 0.5 - Math.random()}) //Array elements now scrambled

setTimeout(function() {displayRow("td" + ids[0], "[% ListLabel(Question2CP1,1)%]")}, 500);
setTimeout(function() {displayRow("td" + ids[1], "[% ListLabel(Question2CP1,2)%]")},1000);

</script>

<div class="question_body indent"></div>
<div class="question_body indent"></div>
<div class="question_body indent"></div>

<table width="660">
    <tr>
        <td align="left" width="330">Nunca compraria</td>
        <td align="right" width="330">Compraria de certeza</td>
    </tr>
</table>

<!-- HTML to use for the slider //-->
<div class="demo">
    <div id="slider"></div>

    <!--
    <p>
        <label for="slider_value">Valor actual:</label>
        <input type="text" id="slider_value" name="slider_value" style="border:0; color:#f6931f; font-weight:bold;" />
    </p>
    -->

    <input name="VAS2CP1_value" id="VAS2CP1_value" type="hidden" value=1>

    <script type="text/javascript">
        jQuery(document).ready(function()
        {
            jQuery("#slider").slider(
            {
                stop: function(event, ui)
                {
                    jQuery("#VAS2CP1_value").val(ui.value);
                    }
              });
        });
    </script>
</div><!-- End demo -->

<p style="font-style:italic; font-weight:normal;">Utilize o rato para clicar em qualquer ponto da linha (esquerda ou direita), de acordo com a sua preferência.

<!--
<script>
    jQuery(document).ready(function ()
    {
        /*var text = "Para continuar";

        jQuery('#next').before(text.fontsize(2));*/

        jQuery('#next').before('<img src="[%GraphicsPath()%]/texto.png" alt="arrow" border="0">');
    });
</script>
-->

I didn't broke it into parts because I really don't know where is the issue. This is really strange because I bet remembering that the next button functioned, and so I could get to the next questions on IE.

If anyone had the same problem, I would love to know.

Thank you very much,
João

Comments

A little correction I forgot to mention: The "next" button functions in the start page and in some select questions before reaching this question (the one with the code above), which is a free format question. Thank you!

---

I'd say F12 again, on this page hit F12 in IE, go to script tab and enable debugging in that tool. Reload the page and hopefully it will show the error line

---

Hello Bahadir,

It's somehow strange because sometimes the errors aren't displayed on F12. Although, I managed to catch the error: supposedly it has to do with the "addEvent" method. The error is "SCRIPT438: Object doesn't support property or method 'addEvent", and the line is inside the ssi_javascript7_0_26.js file, that goes as this:

NextButtonObj.addEvent("keyup", function(event){if(event.key == "space" || event.key == "enter"){SSI_GraphicalNextSubmit();}});

So it seems an internal SSI Web JavaScript library error - it may not be, but it seems so. Does anybody had this problem before?

---

I've ran into something similar a while ago, it may be that jquery and mootools functions are conflicting. Addevent might be defined in both...

Search for addevent definition in the js you include for jquery and carwfully replace all occurrences with, I font know, jAddEvent

---

This may be a dumb question, but if I'm using jQuery does SSI Web need to load MooTools? Isn't it possible to simply disable it? I remember soeone using a function called noConflict() (or something like that) to avoid conflicts between jQuery and MooTools, I'll lokk for that. And also for your suggestion. Again, thanks! :]

João

---

It seems to be indeed a conflict with MooTools and jQuery. I just added the "jQuery.noConflict();" as the first line of my first script and is apparently working :] I'll now just complete the survey in IE and see if the data is being stored correctly, but I'm optimistic. Many thanks! :]

---

By the way, got the solution from here -> https://www.sawtoothsoftware.com/forum/1489/using-mootools-and-jquery-in-ssi-web-7?show=1490#a1490

Answer 1

Hi Joao,

Can you use jQuery.noConflict() function to your script. See code below for reference.

<link type="text/css" href="[%GraphicsPath()%]/jquery/css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="[%GraphicsPath()%]/jquery/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="[%GraphicsPath()%]/jquery/js/jquery-ui-1.8.19.custom.min.js"></script>
 
<script>
jQuery.noConflict();
jQuery(document).ready(function($)
        jQuery( "#slider" ).slider(
        {
            range: "min",
            value: 1,
            min: 1,
            max: 60,
            slide: function(event, ui)
            {
                      jQuery( "#slider_value" ).val( ui.value );
                  }
        });
        jQuery( "#slider_value" ).val(jQuery( "#slider" ).slider( "value" ) );
    });
</script>