11 Replies Latest reply on Dec 16, 2015 7:14 AM by DominicG

Why are the id attributes of the Jive Community changing in page load?

jcflorendo Nov 11, 2015 11:09 PM

Hello Developers!

I just want to know why the id attributes of the html tags of Jive Community are changing in page load?

Its really a big hassle because I'm referencing it to my custom css, and then when the page loads, the id's of the element im pointing to are changing. And thus, the css rules are not being applied.

This is bizarre considering that id attributes are supposed to be unique.

Hope someone can explain and give a solution on this. Thanks in advance.

All the best,

Jc Florendo

Re: Why are the id attributes of the Jive Community changing in page load?

mcollinge Nov 12, 2015 1:57 AM (in response to jcflorendo)

I'm not entirely sure what you mean.. could you screenshot the HTML which has the ID tag you're talking about?
Like (0)

Actions
- Re: Why are the id attributes of the Jive Community changing in page load?
  
  jcflorendo Nov 16, 2015 9:56 PM (in response to mcollinge)
  
  Sure, I'll try to reproduce the issue and have screenshots then update this thread.
  
  Thanks
  
  All the best,
  Jc Florendo
  
  Like (0)
  
  Actions
- Re: Why are the id attributes of the Jive Community changing in page load?
  
  jcflorendo Nov 16, 2015 10:19 PM (in response to mcollinge)
  
  Hello Matt,
  
  I have managed to reproduce the issue. The ID's change when going to the Overview Page and then clicking "Publish Changes"
  
  --------
  Originally, here's the "Ads" id attribute value (jivewidget-frame-header_7863)
  http://i.imgur.com/xHqX7No.png
  
  And here's the code, because I want it to be gone.
  http://i.imgur.com/IYPjrXh.png
  
  Then, after I go to Overview page, and publish layout. The value changes (it becomes jivewidget-frame-header_7879)
  http://i.imgur.com/yzEPTQ1.png
  
  --------
  
  I cannot reference the element if it changes the id attribute of it.
  
  Why does it change? It is supposed to be a unique and permanent that's why it's an ID right?
  
  Like (0)
  
  Actions
  - Re: Why are the id attributes of the Jive Community changing in page load?
    
    mcollinge Nov 17, 2015 6:20 AM (in response to jcflorendo)
    
    Gottcha. Yes, unfortunately these IDs will change when you update/publish any widget changes to Overview pages.
    
    It's difficult to target those elements.. if the widget is always in the same place, then it is possible to use the nth CSS selector, which isn't ideal but could help in this situation; CSS3 :nth-child() Selector https://css-tricks.com/almanac/selectors/n/nth-child/
    
    Like (0)
    
    Actions
    - Re: Why are the id attributes of the Jive Community changing in page load?
      
      mattdickens Nov 17, 2015 10:32 AM (in response to mcollinge)
      
      I've also used a widget's name to identify it or some content within it.
      
      Like (0)
      
      Actions
    - Re: Why are the id attributes of the Jive Community changing in page load?
      
      jcflorendo Nov 24, 2015 6:44 PM (in response to mcollinge)
      
      Thanks for your replies. So it looks like it really is changing every update/publish of a new layout via Overview.
      
      using the Nth child selector is not ideal because we are always not sure if the widgets will be on the same place.
      
      Thanks for the ideas.
      
      All the best,
      Jc Florendo
      
      Like (0)
      
      Actions
Re: Why are the id attributes of the Jive Community changing in page load?

jcflorendo Dec 15, 2015 5:40 PM (in response to jcflorendo)

Hello again guys,

I have used Matt Collinge's suggestion and it worked in our homepage. Unfortunately, since the id's are being repeated on several pages, the rule is also being applied to all the first child of the ID being targeted. Which creates layout problems.

This is the css rule i used:
                  #jive-widget-container_1:first-child{
                      /* height: 375px !important; */
                  }

Thanks in advance for your help. I'm looking for any other possible solutions on this.

All the best,
Jc
Like (0)

Actions
- Re: Why are the id attributes of the Jive Community changing in page load?
  
  mattdickens Dec 15, 2015 2:08 AM (in response to jcflorendo)
  
  This is the approach I took when I wanted to reference a table in a formatted text widget on the overview page from a HTML widget on the same page. I used the title of the widget to identify it.
  
  var linkmgttab = parent.$j('.jive-widget-formattedtextwidget .jive-widget-handle span:contains("Configuration - Group Settings")').length;
  if(linkmgttab > 0){
  var obj = parent.$j("#jive-widgetframe-body_" + parent.$j('.jive-widget-formattedtextwidget .jive-widget-handle span:contains("Configuration - Group Settings")').attr('id').substring(23) + " .jive-rendered-content table");
  }
  
  Like (0)
  
  Actions
  - Re: Why are the id attributes of the Jive Community changing in page load?
    
    jcflorendo Dec 15, 2015 6:56 PM (in response to mattdickens)
    
    Hello Matt Dickens
    
    Thanks for the great idea. Will try that.
    
    Where do you suggest I place my js? Any idea? because right now I'm placing my javascripts inside the HTML widget.
    
    I'm looking for a file solely for javascript/jquery purposes.
    
    Like (0)
    
    Actions
    - Re: Why are the id attributes of the Jive Community changing in page load?
      
      mcollinge Dec 16, 2015 4:11 AM (in response to jcflorendo)
      
      Yes, put them in the HTML widget, then they'll only apply to the page you're on, rather than loading across the entire site.
      
      Like (0)
      
      Actions
Re: Why are the id attributes of the Jive Community changing in page load?

DominicG Dec 16, 2015 7:14 AM (in response to jcflorendo)

I've used this in the past to assign an html class based on the title of the widget.

<style type="text/css">
.jive-widget {
display: none;
}
</style>

<script type="text/javascript">
$j(document).ready(function() {
     $j("h4.jive-widget-handle span").each(function () {
         var widget_name = "named_widget-" + $j(this).text().trim().split(' ').join('_');
         $j(this).closest("div.jive-widget").addClass(widget_name);
     });
     $j("div.jive-widget").fadeIn('slow');
});
</script>
Like (1)

Actions

Go to original post