Forums

Problem Adding JS Into New Block

Permalink
Hi All:

I keep running into this problem where I add an HTML block that includes JavaScript, CSS, and HTML - then, when I "Update" the block to have the code live, it messes up the page's Dashboard.

When this happens I have to keep resetting the Content and clearing the cache which brings back my Dashboard.

My question is, what is the correct way to include JavaScript functionality in blocks?

Please help - would greatly appreciate it.

Thanks,
Keith
MavenMedia
 
TheRealSean replied on at Permalink Reply
TheRealSean
When I am working within a block I tend to make my jquery call in the block itself then put the javascript into the view.js - that way you dont need to run addToHeader and this method works within template files.

I have never really tried playing with the html block.

Your best bet may be to take a block and add a template to it then hardcode your javascript into the template.

What sort of problems are you getting with the dashboard?
MavenMedia replied on at Permalink Reply
MavenMedia
When you say to hardcode it into the template of the block, that's what I do. I am calling about 3 different JS files and once I include them within the HTML of the block, all previous running items stop working (the Dashboard). Once the Dashboard stops working, I can't revert to a previous version, so when this happens, I was taught to go directly into the database within the table dTLocalContent and delete the latest entry (which works).

I will try your other method first, put the template into the block and call the js within the other js in the header.
TheRealSean replied on at Permalink Reply
TheRealSean
do you get any errors in the console? when this stops running?.

Its a little hard to work out whats going wrong, and where can you share a site link or some example code?
MavenMedia replied on at Permalink Reply
MavenMedia
Ok here's the code that messes it all up:

<link rel="stylesheet" src="<?=$this->getThemePath()?>/js/omgmos.css" type="text/css" media="screen" />
      <script type="text/javascript" src="<?=$this->getThemePath()?>/js/jquery.min.js"></script>
      <script type="text/javascript" src="<?=$this->getThemePath()?>/js/mosaic.1.0.1.js"></script>
      <script type="text/javascript">  
         jQuery(function($){
            $('.bar2').mosaic({
               animation   :   'slide'      //fade or slide
            });
          });
      </script>


When you embed this into an HTML block, the Dash disappears. Am I using the right PHP code?
C5LABS replied on at Permalink Reply
C5LABS
Have you verified that you can actually use php shortags?
MavenMedia replied on at Permalink Reply
MavenMedia
No - Within an HTML block, I was just trying it that way because doing an actual URL link was also breaking the Dashboard.

I've used short tags in the actual template PHP template that belongs in the theme folder, I'm just not sure why JS breaks the Dashboard within an HTML block.

Do you have any insight on how to link JS into a custom HTML block?
C5LABS replied on at Permalink Reply
C5LABS
Yes, If you are using html block, you can create a template.
In that template create a view.php, view.css and a js folder.
drop you js files into the folder and concrete5 will pick them up.
Then insert your html block and choose the created template to render.
MavenMedia replied on at Permalink Reply
MavenMedia
I will try this and get back to you.

Thanks.
C5LABS replied on at Permalink Reply 1 Attachment
C5LABS
Here, grab this example and you should be fine.
If this solves it please mark this as best anwser!!:)
TheRealSean replied on at Permalink Reply
TheRealSean
You are also including an extra version of jquery, try removing that see if you still get the problem, Concrete5 loads jquery in by default

I would just copy that mosaic script into a view.js and the css into a view.css

Then you dont need to make the extra calls, and they are loaded into the header instead of on the actual page.

But my main guess as to the problem is that extra jquery.min.js you are loading in.


+Thanks for the time C5labs was not aware you could just create a JS folder within the block template
C5LABS replied on at Permalink Reply
C5LABS
No worries! You can do the same with css, create a folder css and drop your css files in it.
TheRealSean replied on at Permalink Reply
TheRealSean
I have been playing with the CSS and Js folders very nice tip.

But have come across a stumbling block for me. I am trying to load an autonav from a header. I am using the direct call within the header file itself.

The problem being that I do not seem to be able to include the js and css folders when using this method?

I know the main template is being called but it seems to ignore the CSS and JS folders am I missing something out from my code.

For now I am going to have to add the files to the header, but if anyone could point me towards a better solution?

$blockType = BlockType::getByHandle('autonav');
                  $blockType->controller->displayPages = 'top';
                  $blockType->controller->orderBy = 'display_asc';
                  $blockType->controller->displaySubPages = 'all';                           
                  $blockType->render('templates/header_navigation/header_menu');


I did try using $blockType->controller->addHeaderItem(); but that didn't solve it.
JohntheFish replied on at Permalink Reply
JohntheFish
If this is something that will ever be an add-on, please don't copy any library scripts into view.js. When more than one add-on inserts copies of the same library script it creates messy namespace clashes. These clashes happen anyway (like your duplicate of jQuery), but hiding them in other files just makes it harder to find out what is happening.

With all the work on optimisers there has been recently, automated resolution and removal of duplicated library scripts should be possible as soon as one of the optimiser experts sets their mind to it. But that is less likely to happen if the library scripts are all renamed view.js.