Forums

How do I inject PHP variables into external JavaScript files.

Permalink
I'm building a block that relies on a jQuery plugin script that adds elements to the DOM. I'm good until I want to add multiple instances of the block to a page. For elements that already exist in the DOM (i.e. I put them there) I can make them unique by adding "<?php echo bID;?>" to the class name and the element name but I don't know how to add the bID to the DOM elements created by the external JavaScript file. This causes the styles of the last block rendered to 'bleed' into all the blocks being rendered. Any hints or best practices for this?
mhawke
 
ScottC replied on at Permalink Best Answer Reply
ScottC
I would personally set the javascript and css be to served up per block instance, using a block tools file and a proper header. The key is to load it via tools if the plugin accepts it. Your tools files will be php and you can load in the bID or block settings and such, but it will/should return the proper header.
mhawke replied on at Permalink Reply
mhawke
I'll give it a whirl, thanks!
mhawke replied on at Permalink Reply
mhawke
Thanks Scott. Your suggestion worked well but I decided it was overkill for my situation. I learned a lot about using the 'tools' files though. (Documentation needs some work regarding tools but that's no surprise)

Ultimately I just wrapped my block output in a DIV with an ID that contains the block ID and then preceded my css selectors as such:
<style>
#my-block-<?php echo $bID; ?> .my-class {
border: 1px solid #333333;
}
</style>
<div id="my-block-<?php echo $bID; ?>">
   <div class="my-class">
      Hello World!
   </div>
</div>


Can you see any issues with this? It seems to work well.
Sadu replied on at Permalink Reply
Sadu
One thing I discovered over the weekend is that block IDs aren't always unique, which makes them unsuitable for ID attributes in HTML tags.

If you use the scrapbook functionality to copy-paste a block, then both instances of the block will have the same bID.

I workaround this by using what I call a UID instead - which is the bID + a suffix ("_1", "_2" etc) if there's more than one of this bID in use on the page. This way you always get a unique ID to use but it's less scary looking than a random number or hash.

This goes in the controller.php for your block.
function getUid() {
      global $my_uids; //a list of used UIDs
      if (!isset($my_uids)) $my_uids = array();
      $uid = $this->bID;
      $i = 0;
      while (isset($my_uids[$uid])) {
         $uid = $this->bID.'_'.$i++; //add a suffix to the blockid to make it unique 
      };
      $my_uids[$uid] = true;
      return $uid;
   }
function view() {
      $this->set('uid', $this->getUid());
   }


Otherwise append a random number to the end of your ID and hope it doesn't clash :)
mhawke replied on at Permalink Reply
mhawke
Thank you Sadu for this interesting option. I was aware that pasted blocks carry the same block ID and I may use your excellent solution in the future. In my particular case, I will be editing the additional blocks immediately even if I originally generate them through a copy and paste operation. As soon as you edit a pasted block, it gets a unique block ID. I think if I were to simply paste blocks throughout my page without editing them separately then I wouldn't mind them all carrying the same css.

Excellent work with the getUid function. I'll try it out. Thanks!