IE specific js error

Question

I am getting this js error In IE Browser alone.

SCRIPT5009: 'encodeURIComponent' is undefined 
about, line 53 character 13

This is the js file which is responsible

(function ($) {
  Drupal.color = {
    logoChanged: false,
    callback: function(context, settings, form, farb, height, width) {
      // Change the logo to be the real one.
      if (!this.logoChanged) {        
        $('#preview #preview-logo img').attr('src', Drupal.settings.color.logo);
        this.logoChanged = true;        
      }
      // Remove the logo if the setting is toggled off. 
      if (Drupal.settings.color.logo == null) {
        $('div').remove('#preview-logo');        
      }

      // Solid background.
      $('#preview', form).css('backgroundColor', $('#palette input[name="palette[bg]"]', form).val());      


      $('#preview #preview-main-menu', form).css('background-color', $('#palette input[name="palette[top-menu-bg]"]', form).val());

      $('#preview .preview-content-slideshow a', form).css('color', $('#palette input[name="palette[all-links]"]', form).val());

      // Text preview.
      //$('#preview #preview-main h2, #preview .preview-content', form).css('color', $('#palette input[name="palette[text]"]', form).val());
      $('#preview #preview-content a', form).css('color', $('#palette input[name="palette[link]"]', form).val());

      // Sidebar block.
      $('#preview #preview-sidebar #preview-block', form).css('background-color', $('#palette input[name="palette[sidebar]"]', form).val());
      $('#preview #preview-sidebar #preview-block', form).css('border-color', $('#palette input[name="palette[sidebarborders]"]', form).val());

      // Footer wrapper background.
      $('#preview #preview-footer-wrapper', form).css('background-color', $('#palette input[name="palette[footer]"]', form).val());

      // CSS3 Gradients.
      var gradient_start = $('#palette input[name="palette[top]"]', form).val();
      var gradient_end = $('#palette input[name="palette[bottom]"]', form).val();

      // Menu preview 
      $('#preview #preview-main-menu-links a', form).css('color', $('#palette input[name="palette[sf-menu-sf-style-metroz-a]"]', form).val());

      $('#preview #preview-main-menu-links li', form).css('background-color', $('#palette input[name="palette[sf-menu-sf-style-metroz-li]"]', form).val());


      //$('#preview #preview-header', form).attr('style', "background-color: " + gradient_start + "; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(" + gradient_start + "), to(" + gradient_end + ")); background-image: -moz-linear-gradient(-90deg, " + gradient_start + ", " + gradient_end + ");");
      $('#preview #preview-header', form).attr('style', "background-color: " + $('#palette input[name="palette[header-wrapper]"]', form).val());

      $('#preview #preview-site-name', form).css('color', $('#palette input[name="palette[titleslogan]"]', form).val());

      $('#preview #preview-content h1 a', form).css('color', $('#palette input[name="palette[slideshow-title-text-color]"]', form).val());

      $('#preview #preview-content, #preview #preview-content h1', form).css('background-color', $('#palette input[name="palette[slideshow]"]', form).val());
      $('#preview-node').css('color', '#FFFFFF');

      $('#preview .pagination a.active', form).css('background-color', $('#palette input[name="palette[pagination]"]', form).val());

      $('#preview .search', form).css('background-color', $('#palette input[name="palette[search-button-color]"]', form).val());

      $('#preview .view-more', form).css('background-color', $('#palette input[name="palette[slideshow-wrapper-bg-color]"]', form).val());

      $('#preview .view-more a', form).css('color', $('#palette input[name="palette[slideshow-wrapper-text-color]"]', form).val());

      $("#preview #preview-main-menu-links a").mouseover(function(){
          $(this).css('color', $('#palette input[name="palette[sf-menu-sf-style-metroz-a-hover]"]', form).val());
      });
      $("#preview #preview-main-menu-links a").mouseleave(function(){
          $(this).css('color', $('#palette input[name="palette[sf-menu-sf-style-metroz-a]"]', form).val());
      });

      $("#preview #preview-main-menu-links li").mouseover(function(){
          $(this).css('background', $('#palette input[name="palette[sf-menu-sf-style-metroz-li-hover]"]', form).val());
      });
      $("#preview #preview-main-menu-links li").mouseleave(function(){
          $(this).css('background', $('#palette input[name="palette[sf-menu-sf-style-metroz-li]"]', form).val());
      });
    }
  };
  $(document).ready(function($) {       
     var pos = $('#color_scheme_form').position();
     if (pos.top > 350) {
         $('#preview').hide();
         $('#placeholder').hide();
         $('.color-form > h2').hide();
     }

  });

  $(document).scroll(function(e) {
    var pos = $('#color_scheme_form').position();
    var scrollTop = $(this).scrollTop();
    if (scrollTop > (pos.top - 50)) {
        $('#preview').show();
        $('#placeholder').show();
        $('.color-form > h2').show();
        $('#preview').removeAttr('style');
        $('#placeholder').removeAttr('style');
        $('.color-form > h2').removeAttr('style');
    }    
    else {
        $('#preview').hide();
        $('#placeholder').hide();
        $('.color-form > h2').hide();
    }
  });

})(jQuery);

Core Preview.js:

/** * @file * Attaches preview-related behavior for the Color module. */

(function ($) {
  Drupal.color = {
    callback: function(context, settings, form, farb, height, width) {
      // Solid background.
      $('#preview', form).css('backgroundColor', $('#palette input[name="palette[base]"]', form).val());

      // Text preview
      $('#text', form).css('color', $('#palette input[name="palette[text]"]', form).val());
      $('#text a, #text h2', form).css('color', $('#palette input[name="palette[link]"]', form).val());

      // Set up gradients if there are some.
      var color_start, color_end;
      for (i in settings.gradients) {
        color_start = farb.unpack($('#palette input[name="palette[' + settings.gradients[i]['colors'][0] + ']"]', form).val());
        color_end = farb.unpack($('#palette input[name="palette[' + settings.gradients[i]['colors'][1] + ']"]', form).val());
        if (color_start && color_end) {
          var delta = [];
          for (j in color_start) {
            delta[j] = (color_end[j] - color_start[j]) / (settings.gradients[i]['vertical'] ? height[i] : width[i]);
          }
          var accum = color_start;
          // Render gradient lines.
          $('#gradient-' + i + ' > div', form).each(function () {
            for (j in accum) {
              accum[j] += delta[j];
            }
            this.style.backgroundColor = farb.pack(accum);
          });
        }
      }
    }
  };
})(jQuery);

This is changing preview option for theme in Drupal.

In IE10 its working, it doesn't have any issues, where as in ie9,ie8,ie7 its throwing this 'encodeURIComponent' error.

I dont know how to rectify this.Any help will be appreciated. Thanks in advance.

You have no object `encodeURIComponent` in your script. Without code listing nobody can help you here. — BaBL86, Jan 06 '14 at 08:08
Sorry. Just now added the js file which is causing that issue — Ram, Jan 06 '14 at 08:10
Ram: There is no any `encodeURIComponent` in this code. You have an error somewhere else. — BaBL86, Jan 07 '14 at 09:00
@BaBL86: I have attached the core preview.js file which will get the values from my js. Is that error coming from here then ? — Ram, Jan 07 '14 at 09:27
No. You need a file, where `encodeURIComponent` call is present. — BaBL86, Jan 07 '14 at 15:34
I dont know what is tat encodeURIComponent ? can be more specific how it is related to this? — Ram, Jan 07 '14 at 16:38

score 0 · Answer 1 · edited May 23 '17 at 11:49

0

I'm not sure if this is the same issue, but a similar issue has been raised in this thread (it's a link to another question).

It's an unusual behaviour by IE, often when trying to include an external frame to the DOM of your page.

Perhaps if you make sure any content you add dynamically to your page is appended into the body tag scope of your page's DOM, then it might spread some light on the matter.

// External content:
$externalContent = $(/*external content object*/);
// Create a placeholder for your content:
$div = $("<div></div>");
// Append the content to the <div> placeholder:
$div.append($externalContent);
// Append the placeholder to your DOM, it doesn't have to be the "body" tag
// but also any other placeholder within the body scope
$("body").append($div);

edited May 23 '17 at 11:49

Community

1
1

answered Jan 06 '14 at 08:19

Yuval Herziger

1,145
2
16
28

@Ram, it's hard to tell, judging by your code. Have you tried debugging it in IE? Place breakpoints in the script and try to catch the moment in which this particular error is produced. – Yuval Herziger Jan 06 '14 at 10:44
callback is not getting invoked. I cant able to find much more than that – Ram Jan 06 '14 at 10:49

IE specific js error

1 Answers1