2

I'm facing a peculiar problem. My Drupal website uses Jquery 1.4.4 version.

As you all know, Drupal outputs Drupal.settings json to Javascript as:

when I enable devel_themer module:

The following is the output

jQuery.extend(Drupal.settings, {
   "basePath":"\/d7\/",
   "pathPrefix":"",
   "ajaxPageState":{
      "theme":"bartik",
      "theme_token":"KC2-1Z9CN5PCxDyAq_W8FGBQBOOnwt8AyoeX1UDBoP8",
      "js":{
         "misc\/jquery.js":1,
         "misc\/jquery.once.js":1,
         "misc\/drupal.js":1,
         "misc\/ui\/jquery.ui.core.min.js":1,
         "misc\/ui\/jquery.ui.widget.min.js":1,
         "misc\/jquery.cookie.js":1,
         "misc\/jquery.form.js":1,
         "misc\/ui\/jquery.ui.mouse.min.js":1,
         "misc\/ui\/jquery.ui.draggable.min.js":1,
         "misc\/ui\/jquery.ui.resizable.min.js":1,
         "misc\/jquery.ba-bbq.js":1,
         "modules\/overlay\/overlay-parent.js":1,
         "misc\/ajax.js":1,
         "misc\/progress.js":1,
         "sites\/all\/modules\/devel_themer\/devel_themer.js":1,
         "sites\/all\/modules\/devel\/krumo\/krumo.js":1,
         "modules\/toolbar\/toolbar.js":1,
         "sites\/all\/modules\/devel\/devel_krumo_path.js":1
      },
      "css":{
         "modules\/system\/system.base.css":1,
         "modules\/system\/system.menus.css":1,
         "modules\/system\/system.messages.css":1,
         "modules\/system\/system.theme.css":1,
         "misc\/ui\/jquery.ui.core.css":1,
         "misc\/ui\/jquery.ui.theme.css":1,
         "misc\/ui\/jquery.ui.resizable.css":1,
         "modules\/overlay\/overlay-parent.css":1,
         "modules\/comment\/comment.css":1,
         "modules\/field\/theme\/field.css":1,
         "modules\/node\/node.css":1,
         "modules\/search\/search.css":1,
         "modules\/user\/user.css":1,
         "sites\/all\/modules\/devel_themer\/devel_themer.css":1,
         "sites\/all\/modules\/devel\/krumo\/skins\/default\/skin.css":1,
         "modules\/shortcut\/shortcut.css":1,
         "modules\/toolbar\/toolbar.css":1,
         "sites\/all\/modules\/devel_themer\/devel_themer_ie_fix.css":1,
         "themes\/bartik\/css\/layout.css":1,
         "themes\/bartik\/css\/style.css":1,
         "themes\/bartik\/css\/colors.css":1,
         "themes\/bartik\/css\/print.css":1,
         "themes\/bartik\/css\/ie.css":1,
         "themes\/bartik\/css\/ie6.css":1
      }
   },
   "thmrStrings":{
      "themer_info":"Themer info",
      "toggle_throbber":" \u003Cimg src=\u0022\/d7\/sites\/all\/modules\/devel_themer\/loader-little.gif\u0022 alt=\u0022loading\u0022 class=\u0022throbber\u0022 width=\u002216\u0022 height=\u002216\u0022 style=\u0022display:none\u0022 \/\u003E",
      "parents":"Parents: ",
      "function_called":"Function called: ",
      "template_called":"Template called: ",
      "candidate_files":"Candidate template files: ",
      "preprocessors":"Preprocess functions: ",
      "processors":"Process functions: ",
      "candidate_functions":"Candidate function names: ",
      "drupal_api_docs":"link to Drupal API documentation",
      "source_link_title":"link to source code",
      "function_arguments":"Function Arguments",
      "template_variables":"Template Variables",
      "file_used":"File used: ",
      "duration":"Duration: ",
      "api_site":"http:\/\/api.drupal.org\/",
      "drupal_version":"7",
      "source_link":"\/d7\/devel\/source?file="
   },
   "thmr_popup":"  \u003Cdiv id=\u0022themer-fixeder\u0022\u003E\n  \u003Cdiv id=\u0022themer-relativer\u0022\u003E\n  \u003Cdiv id=\u0022themer-popup\u0022\u003E\n      \u003Cdiv class=\u0022topper\u0022\u003E\n        \u003Cspan class=\u0022close\u0022\u003EX\u003C\/span\u003E Drupal Themer Information\n      \u003C\/div\u003E\n      \u003Cdiv id=\u0022parents\u0022 class=\u0022row\u0022\u003E\n\n      \u003C\/div\u003E\n      \u003Cdiv class=\u0022info row\u0022\u003E\n        \u003Cdiv class=\u0022starter\u0022\u003EClick on any element to see information about the Drupal theme function or template that created it.\u003C\/div\u003E\n        \u003Cdl\u003E\n          \u003Cdt class=\u0022key-type\u0022\u003E\n\n          \u003C\/dt\u003E\n          \u003Cdd class=\u0022key\u0022\u003E\n\n          \u003C\/dd\u003E\n          \u003Cdiv class=\u0022used\u0022\u003E\n          \u003C\/div\u003E\n          \u003Cdt class=\u0022candidates-type\u0022\u003E\n\n          \u003C\/dt\u003E\n          \u003Cdd class=\u0022candidates\u0022\u003E\n\n          \u003C\/dd\u003E\n\n          \u003Cdt class=\u0022preprocessors-type\u0022\u003E\n\n          \u003C\/dt\u003E\n          \u003Cdd class=\u0022preprocessors\u0022\u003E\n\n          \u003C\/dd\u003E\n          \u003Cdt class=\u0022processors-type\u0022\u003E\n\n          \u003C\/dt\u003E\n          \u003Cdd class=\u0022processors\u0022\u003E\n\n          \u003C\/dd\u003E\n          \u003Cdiv class=\u0022duration\u0022\u003E\u003C\/div\u003E\n        \u003C\/dl\u003E\n      \u003C\/div\u003E\u003C!-- \/info --\u003E\n      \u003Cdiv class=\u0022attributes row\u0022\u003E\n      \u003Cdiv class=\u0022themer-variables\u0022\u003E\u003C\/div\u003E\n      \u003C\/div\u003E\u003C!-- \/attributes --\u003E\n    \u003C\/div\u003E\u003C!-- \/themer-popup --\u003E\n    \u003C\/div\u003E\n    \u003C\/div\u003E",
   "overlay":{
      "paths":{
         "admin":"node\/*\/edit\nnode\/*\/delete\nnode\/*\/revisions\nnode\/*\/revisions\/*\/revert\nnode\/*\/revisions\/*\/delete\nnode\/add\nnode\/add\/*\noverlay\/dismiss-message\nuser\/*\/shortcuts\nadmin\nadmin\/*\nbatch\ntaxonomy\/term\/*\/edit\nuser\/*\/cancel\nuser\/*\/edit\nuser\/*\/edit\/*\ndevel\/*\nnode\/*\/devel\nnode\/*\/devel\/*\ncomment\/*\/devel\ncomment\/*\/devel\/*\nuser\/*\/devel\nuser\/*\/devel\/*\ntaxonomy\/term\/*\/devel\ntaxonomy\/term\/*\/devel\/*",
         "non_admin":"admin\/structure\/block\/demo\/*\nadmin\/reports\/status\/php"
      },
      "pathPrefixes":[

      ],
      "ajaxCallback":"overlay-ajax"
   },
   "tableHeaderOffset":"Drupal.toolbar.height"
});

and in the browser console, as you can see in the following screenshot Drupal.settings object has some strange objects. enter image description here

What is strange about this?

When I try to output in browser console, it says undefinied. But According to Drupal.settings json, there should be a Drupal.settings.thmrStrings object. Instead of showing these meaningful objects, according to json it shows generated some strange objects like Drupal.settings.thmr_1, Drupal.settings.thmr_2, Drupal.settings.thmr_3 .. Drupal.settings.thmr_94. Where are these Drupal.settings.thmr_* objects coming from? They are not in the json? Why are the objects not according to jSON?

The error that you see in the screenshot is caused because of this. The javascript file devel_themer.js is accessing a sub-object of Drupal.settings.thmrStrings but its not getting it. Thats is the main problem why I got behind this.

when I disable devel_themer module:

The following is the output:

<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, {
   "basePath":"\/d7\/",
   "pathPrefix":"",
   "ajaxPageState":{
      "theme":"bartik",
      "theme_token":"KC2-1Z9CN5PCxDyAq_W8FGBQBOOnwt8AyoeX1UDBoP8",
      "js":{
         "misc\/jquery.js":1,
         "misc\/jquery.once.js":1,
         "misc\/drupal.js":1,
         "misc\/ui\/jquery.ui.core.min.js":1,
         "misc\/jquery.ba-bbq.js":1,
         "modules\/overlay\/overlay-parent.js":1,
         "modules\/contextual\/contextual.js":1,
         "misc\/jquery.cookie.js":1,
         "sites\/all\/modules\/devel\/devel_krumo_path.js":1,
         "modules\/toolbar\/toolbar.js":1
      },
      "css":{
         "modules\/system\/system.base.css":1,
         "modules\/system\/system.menus.css":1,
         "modules\/system\/system.messages.css":1,
         "modules\/system\/system.theme.css":1,
         "misc\/ui\/jquery.ui.core.css":1,
         "misc\/ui\/jquery.ui.theme.css":1,
         "modules\/overlay\/overlay-parent.css":1,
         "modules\/contextual\/contextual.css":1,
         "modules\/comment\/comment.css":1,
         "modules\/field\/theme\/field.css":1,
         "modules\/node\/node.css":1,
         "modules\/search\/search.css":1,
         "modules\/user\/user.css":1,
         "modules\/shortcut\/shortcut.css":1,
         "modules\/toolbar\/toolbar.css":1,
         "themes\/bartik\/css\/layout.css":1,
         "themes\/bartik\/css\/style.css":1,
         "themes\/bartik\/css\/colors.css":1,
         "themes\/bartik\/css\/print.css":1,
         "themes\/bartik\/css\/ie.css":1,
         "themes\/bartik\/css\/ie6.css":1
      }
   },
   "overlay":{
      "paths":{
         "admin":"node\/*\/edit\nnode\/*\/delete\nnode\/*\/revisions\nnode\/*\/revisions\/*\/revert\nnode\/*\/revisions\/*\/delete\nnode\/add\nnode\/add\/*\noverlay\/dismiss-message\nuser\/*\/shortcuts\nadmin\nadmin\/*\nbatch\ntaxonomy\/term\/*\/edit\nuser\/*\/cancel\nuser\/*\/edit\nuser\/*\/edit\/*\ndevel\/*\nnode\/*\/devel\nnode\/*\/devel\/*\ncomment\/*\/devel\ncomment\/*\/devel\/*\nuser\/*\/devel\nuser\/*\/devel\/*\ntaxonomy\/term\/*\/devel\ntaxonomy\/term\/*\/devel\/*",
         "non_admin":"admin\/structure\/block\/demo\/*\nadmin\/reports\/status\/php"
      },
      "pathPrefixes":[

      ],
      "ajaxCallback":"overlay-ajax"
   },
   "tableHeaderOffset":"Drupal.toolbar.height"
});
//--><!]]>
</script>

and in the browser console as you can see the following picture Drupal.settings object is interpreted properly. I mean, objects are as per json. There are no strange objects like in the above case.

enter image description here

Question: What is causing this strange behaviour? How to rectify it?

  • 2
    What do you think is odd? – mpdonadio Mar 5 '14 at 0:17
  • Have to agree. What's odd about this behavior? It's basically providing the thmr_ tags to the API so it can do fancy highlighting. – webkenny Mar 5 '14 at 0:54
  • @MPD: I've prettified json and added What is strange about this? section to my question. Please refer to it. – claws Mar 5 '14 at 4:32
5
+100

Those objects are coming from the Theme Developer module.

The module relies on data attributes on HTML elements to do it's thing. It either attaches to the element directly, or it will inject a <span>. All of the data elements are of the form data-thmr="thmr_XXX". The data value matches up with an entry in Drupal.settings, and contains all of the theme information for that particular element, and is used to build the fancy box that appears when you click on something.

When I do a view-source on a site where I have Theme Developer enabled, I see the data attributes in the code, and I see the data elements in the DOM, and I see the objects in Drupal.settings. I also see the Drupal.settings.thmrStrings object.

However, if you poke through the issue queue and search for "thmrStrings", you will run across this issue, which talks about incompatibilities with the 2.x branch of simplehtmldom. The simplehtmldom module has this warning on it page:

If you're using Theme developer please note that it's currently incompatible with simplehtmldom 7.x-2.x. Use 7.x-1.12 instead. More details #2199439: Incompatible with simplehtmldom 7.x-2.x

So, I would disable Theme Developer, then disable an uninstall simpledom API, download and enable simplehtmldom-7.x-1.12, and then enable Theme Developer again.

1

They come from Drupal.settings. When devel_themer is enabled, there is a second block jQuery.extend(Drupal.settings that defines those objects.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.