Theme Builder Plugin

[All Adaptavist Apps]

Page tree

  • Created by Unknown User (scayla), last modified on Feb 25, 2009

Hi,

In Confluence 2.8.2, we used a jQuery script to "decorate" the breadcrumbs. We accessed the ol#breadcrumbs.list element with this simple code : 

var breadcrumbs2=AJS.$("breadcrumbs.list");
var currentLvl=AJS.$("breadcrumbs.list").lastChild;

This worked.

Now, we have to upgrade our version of Confluence to 2.10.2
A simple look at the js scripts shows that the AJS object has been modified by developers.

As a result, my code is no longer valid.

I thought that the DOM wasn't completely loaded, so I added an event on a click button to find the ol#breadcrumbs.list element : 

AJS.$("#testbutton").bind("click", function () {
var bctestbreadcrumblist=AJS.$("#breadcrumbs.list");
var bctestbutton=AJS.$("#testbutton");
});

(the first var tries to find the #breadcrumbs.list element, the second var tries to find the #testbutton element)

=> Result :
The #breadcrumbs.list is not found (an object with a length of 0)
The #testbutton gives a good object !

When trying to rename the #testbutton element to #test.button (note the dot between the two words, like #breadcrumbs.list), I get the same null object as when trying to retrieve #breadcrumbs.list

So, my question is the following : Is there any known problem when accessing via jquery an element with a "dot" inside its name ?

Note that in Confluence 2.8.2, accessing an element with a "dot" inside the name was not a problem...
Note also that accessing the element with javascript 

var breadcrumbs=document.getElementById('breadcrumbs.list');

works, but I don't want to use javascript but jQuery.

  • No labels

13 Comments

  1. Unknown User (christian.fecteau)

    If you need jQuery, you can't address directly this ID. This grammar (an id with a dot) is not supported by jQuery, as mentionned by jQuery developper John Resig in this thread: http://groups.google.com/group/jquery-en/msg/ca6ecd94ad4a23bd

    The HTML grammar allows a dot in IDs but not the CSS2 grammar for ID slectors:
    HTML: http://www.w3.org/TR/html401/types.html#type-name
    CSS: http://www.w3.org/TR/CSS2/grammar.html#q2

    You can get your OL in a jQuery (version 1.3.2) object like this:

    jQuery(function($){
	var breadcrumbs2 = $(document.getElementById('breadcrumbs.list'));
	console.log(breadcrumbs2);
});

    http://www.google.com/search?q=jquery+id+dot

  2. Unknown User (amoran)

    Unfortunatley we do not control the content of the ajs object, since this is an internal confluence file ... you may be better off accessing jQuery directly, Mark should be able to provide more information about how to do this.

    1. Unknown User (scayla)

      BTW, is there a specific reason why you used breadcrumbs.list instead of breadcrumbs_list for example ? because I guess the breadcrumbs is only available through theme builder via the builder-breadcrumbs macro, isn't it ?

      1. Unknown User (amoran)

        No specific reason ... I can update it for 3.4.0 if it makes your life easier

        1. Unknown User (scayla)

          Thanks Alain but don't worry about this, my trick works, that's all I need (smile)
          If you must change it for other reasons, do it (and let me know (tongue)), otherwise don't.

        2. Mark Gibson

          As Confluence is shifting more into the jQuery arena, I think it would be for the best that we knock these problems on the head now.
          I'd suggest we limit all ID's and CSS class names to just lower case letters and a dash - (rather than underscores), this is the convention used by jQuery-UI.

  3. Unknown User (scayla)

    First of all, my apologies for not googling this simple request "jquery id dot", just forgot to make this kind of research.

    I'm surprised about this jQuery "bug" since this seemed to work on my confluence2.8.2 version (with jQuery 1.3.2 I think).

    Thanks a lot to both of you for answering, and thanks Christian for the links and the tip to get my element.

    Regards.

    Steeve

    1. Unknown User (amoran)

      the ajs.js in confluence 2.8 behaves in unsual ways, I believe it is related to the way that it initialises itself, in later releases of confluence these issues have been fixed. It is possible that your code was relying on some of the oddness within the 2.8.x ajs.js - you may be better off making your code depend directly on jQuery instead.

    2. Unknown User (christian.fecteau)

      You can double escape the dot with backslashes too:

      How do I select an element that has weird characters in its ID?

      1. Unknown User (scayla)

        Well, this doesn't want to work with a code like : var breadcrumbs=AJS.$(document.getElementById('breadcrumbs
        .list'));         nor with # before "breadcrumbs". I'll stick with your first solution var breadcrumbs2 = $(document.getElementById('breadcrumbs.list')); which works perflectly.

        Thanks (smile)

      2. Mark Gibson

        Ah, I didn't know about this, thanks for that Christian.
        I must admit I've never had a problem with weird IDs before.

  4. Mark Gibson

    As Christian says, jQuery doesn't support id's containing dots. This is actually a limitation of CSS selectors - which jQuery follows.

    In this situation I'm afraid you need to resort to fetching the element using the DOM and then wrapping in a jQuery object, as Christian demonstrated:

    var breadcrumbs=AJS.$(document.getElementById('breadcrumbs.list'));

    Note: AJS.$ is just jQuery.

    Alternatively use a different selector, eg: 'ol.breadcrumbs', but the above method is the most efficient.

    Also, you want to wrap the whole thing in a ready event to ensure the DOM is loaded:

    AJS.toInit(function() {
    var breadcrumbs=AJS.$(document.getElementById('breadcrumbs.list'));
});

    1. Unknown User (scayla)

      Thanks Mark.

      Actually, var breadcrumbs=document.getElementById('breadcrumbs.list'); works, whereas var breadcrumbs=AJS.$(document.getElementById('breadcrumbs.list')); doesn't seem to work. The only difference is the AJS statement.
      I don't know about jQuery but in the DOM, (still in 2.8.2), AJS was considered as an object, and it is now considered as a function (which is an object too), ... dunno.

      var breadcrumbs=$(document.getElementById('breadcrumbs.list')); works, I'll use this solution.

      Thanks a lot !