Two extension (same) objects on the same tab - not possible?

[RSvebeck]

It seems like I can not have the same extension object more than once on the same sheet. Is that correct? is it a known limitation? -> If I place it twice, only on of them work (shows correct information), the other one remains "blank". Version 11.

//Robert

[Brian_Munz]

You could give it a unique ID:

var divName = _this.Layout.ObjectId.replace("\\", "_");

         if (this.Element.children.length == 0) {//if this div doesn't already exist, create a unique div with the divName

  var ui = document.createElement("div");

  ui.setAttribute("id", divName);

  this.Element.appendChild(ui);

  } else {

  //if it does exist, empty the div so we can fill it again

  $("#" + divName).empty();

  }

       $("#" + divName).addClass("calFrame");

Then use that ID for all of your selectors and things.  So if the code did something like:
$("#fo").hide();

You could do:

$('#' + divName + ' #fo').hide();

[Anonymous]

Thanks for the help.

I will try with this.

[Anonymous]

Its not working Brian.  I am new to Javascript.Please help me from the beginning.

Thanks.

[Anonymous]

I have placed the code

var divName = _this.Layout.ObjectId.replace("\\", "_");

         if (this.Element.children.length == 0) {//if this div doesn't already exist, create a unique div with the divName

  var ui = document.createElement("div");

  ui.setAttribute("id", divName);

  this.Element.appendChild(ui);

  } else {

  //if it does exist, empty the div so we can fill it again

  $("#" + divName).empty();

  }

       $("#" + divName).addClass("calFrame");

after loading css file in the script. Do I need to change anywhere else?

I have executed by placing the above code.I have dragged the same object twice, but data is not getting appended to both the calendars.

[Brian_Munz]

There are a lot of other places where Ids are referenced, such as $("#fo") These will have to be changed to add the divName like $("#" + divName + " #fo") This way the code knows to only use the one in the current extension.

[Anonymous]

Hi Brian,

Apologies for the late reply.

I was able to drag more number of calendars with your code. But this part is a little bit confusing in giving id's.

Please help.

this.Element.innerHTML += '<div id="fo"><img src="/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/QlikView/Examples/calendar/x.png" class="xImg"/><div id="f_top"></div><div id="f_mid"><div id="f_arrow"></div><div id="content"></div></div><div id="f_btm"></div>';

    $('.xImg').click(function(){

     $('#fo').hide();

    });

    $('.calTable td').click(function(){

     if (($(this).html() != " ") && ($(this).find('ul').length > 0)) {

      $('#fo').hide();

      $('#fo #content').html('<ul>' + $(this).find('ul').html() + '</ul>');

      $('#fo').css('left', ($(this).position().left + 90) + 'px');

      $('#fo').css('top', ($(this).position().top - 10) + 'px');

      $('#fo').show();

     }

    });

[Nicole-Smith]

Alexander Karlsson, your way is so much simpler than the way I've been doing it.  Thank you for this!