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
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
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.
I will try your other method first, put the template into the block and call the js within the other js in the header.
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?
Its a little hard to work out whats going wrong, and where can you share a site link or some example code?
Ok here's the code that messes it all up:
When you embed this into an HTML block, the Dash disappears. Am I using the right PHP code?
<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?
Have you verified that you can actually use php shortags?
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?
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?
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.
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.
I will try this and get back to you.
Thanks.
Thanks.
Here, grab this example and you should be fine.
If this solves it please mark this as best anwser!!:)
If this solves it please mark this as best anwser!!:)
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
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
No worries! You can do the same with css, create a folder css and drop your css files in it.
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?
I did try using $blockType->controller->addHeaderItem(); but that didn't solve it.
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.
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.
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.
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?