Run Javascript after updating block
Permalink
Hi all, my first post, yea! I spent a couple hours today searching for information on how to run javascript after saving a block. In this case, I'm building a custom block which outputs span tags and uses javascript to replace the span tags with link tags (for making mailto links). Everything is working fine except I have to refresh the browser manually after saving the block to get the javascript function to kick in and replace the span tags.
After googling around as well as sifting through these forums, which are really well done BTW, I figured I just ask what the best way to call a javascript function after saving your custom block?
Thanks in advance, concrete5 is way frak'n cool! BTW :)
After googling around as well as sifting through these forums, which are really well done BTW, I figured I just ask what the best way to call a javascript function after saving your custom block?
Thanks in advance, concrete5 is way frak'n cool! BTW :)
if you have it execute on load then it should work fine,
I have the function call within jQuery's ready function but this is only called when the page is fully refreshed.
EDIT: .load is different than .ready, I will try it out. Thanks!!!
UPDATE: can't get the function to fire after updating the block content. Quick look through the default concrete/blocks and I don't see any examples of what I'm trying to accomplish: triggering a javascript function after updating a block that does something to the contents of the edited block.
Any ideas or clarification on how to apply/bind the load event? Do I bind the load event to the window object or somewhere else? Is there a different method I should use i.e. forced screen refresh after block update could work (although it's not quite sexy and seems hackish...even though hackish is my current skill level) Anyone's insight or suggestion will be greatly appreciated since I'm just starting out with custom blocks.
EDIT: .load is different than .ready, I will try it out. Thanks!!!
UPDATE: can't get the function to fire after updating the block content. Quick look through the default concrete/blocks and I don't see any examples of what I'm trying to accomplish: triggering a javascript function after updating a block that does something to the contents of the edited block.
Any ideas or clarification on how to apply/bind the load event? Do I bind the load event to the window object or somewhere else? Is there a different method I should use i.e. forced screen refresh after block update could work (although it's not quite sexy and seems hackish...even though hackish is my current skill level) Anyone's insight or suggestion will be greatly appreciated since I'm just starting out with custom blocks.
C5 doesn't reload the page when you add a block so none of the things that the block includes in the header will be there upon first addition to the page (e.g. css and js).
For CSS I've solved this by dynamically loading the block's view.css file via javascript if I detect that the styles aren't already there (which is not 100% foolproof, but seems to work well). You can check out the code I use for this in the free "Simple Image Gallery" on the marketplace -- see the end of the block controller's view() function, and the bottom of the block's view.php template.
As for javascript, I'm not sure if that's possible (very well might be, but I've never been able to make it work). What I often do instead is "cheat" by disabling dynamic javascript effects then the block is in edit mode -- usually I do this for a better UI (hard to click on blocks to edit them if they're jumping around and animating all over the place), but it has the nice side-effect of rendering this problem moot.
For CSS I've solved this by dynamically loading the block's view.css file via javascript if I detect that the styles aren't already there (which is not 100% foolproof, but seems to work well). You can check out the code I use for this in the free "Simple Image Gallery" on the marketplace -- see the end of the block controller's view() function, and the bottom of the block's view.php template.
As for javascript, I'm not sure if that's possible (very well might be, but I've never been able to make it work). What I often do instead is "cheat" by disabling dynamic javascript effects then the block is in edit mode -- usually I do this for a better UI (hard to click on blocks to edit them if they're jumping around and animating all over the place), but it has the nice side-effect of rendering this problem moot.
Dude, Jordan, you rock! Thanks for spelling it out. After studying some of the other blocks I now understand the good reasoning behind the default behavior and you're right it would be tricky to edit things if js kicked in, at least in those cases with positioning and turning elements on/off etc.
I'll take a look at the block you suggest for further study. BTW, on a different note, thank you soooo much for developing the Designer Content block, holy crap it is the coolest thing since sliced bread! Seriously, I think it should be part of the core it's saved me so much time using it to create my custom blocks and in the process also am learning how it's all put together. Great work and thank you!
I'll take a look at the block you suggest for further study. BTW, on a different note, thank you soooo much for developing the Designer Content block, holy crap it is the coolest thing since sliced bread! Seriously, I think it should be part of the core it's saved me so much time using it to create my custom blocks and in the process also am learning how it's all put together. Great work and thank you!
Thanks Aaron, and I appreciate the great feedback about Designer Content. It has been insanely useful and time-saving for me personally (which is why I made it in the first place), and it's even better to know that it's helping others too.
If you have a minute to spare, it would be great if you could add a little review for it to the marketplace.
-Jordan
If you have a minute to spare, it would be great if you could add a little review for it to the marketplace.
-Jordan
silly question... how do I add a review? I can read the reviews but there is no button/link to create/add a review :)
Weird... it's a blue button on the top-right of the page, called "Add a Review".
If you're not logged in it doesn't show up. And maybe it only shows up if you've gotten the addon by doing the "add to cart" thing, instead of clicking the "Download Archive" link.
Didn't realize it was so complicated! Thanks for trying, but don't worry about it :)
If you're not logged in it doesn't show up. And maybe it only shows up if you've gotten the addon by doing the "add to cart" thing, instead of clicking the "Download Archive" link.
Didn't realize it was so complicated! Thanks for trying, but don't worry about it :)
I had setup another account for my client and downloaded the add on under that account. hence no review button (just dawned on me now, not sure why I did it that way, my first c5 site) haha
Cool, thanks. By the way, I've recently learned more about this "javascript not loading when block is first added" issue -- apparently the js *does* get loaded somehow, but due to a bug in C5, it only works if you're running your site at the top level of your domain name (not a subdirectory, which is how I do all of my development). I've been in touch with Andrew about this so hopefully it will be fixed in the next release and my crazy hack won't be necessary.
-Jordan
-Jordan
Cool! thanks for sharing, I was developing in a subdirectory... hmmm I'll check it out!
another way is to override edit_block_popup.php in your package and add javascript there
I have found this problem also after trying to run some js after block is updated. I will try a workaround by loading my js file only when the page is in edit mode.
This goes in the head of my theme's default.php:
<?php
if($c->isEditMode()){
$path = $this->getThemePath();
echo "<script type=\"text/javascript\" src=\"{$path}/js/myscript.edit.js\"></script>";
}
?>
In the script I will conditionally trigger some code on an event which occurs very often, like a mousemove inside the body element.
This goes in the head of my theme's default.php:
<?php
if($c->isEditMode()){
$path = $this->getThemePath();
echo "<script type=\"text/javascript\" src=\"{$path}/js/myscript.edit.js\"></script>";
}
?>
In the script I will conditionally trigger some code on an event which occurs very often, like a mousemove inside the body element.
It's perfectly doable by making your code event driven. This is how I just did it with jQuery:
In your block's view.php
In your main JS file inside document ready:
In your block's view.php
In your main JS file inside document ready:
$(document).on('flickr-block-loaded', function(event, params){ doWhateverYouWant($(params.selector)); // this can read extra parameters from data attributes of this element });
While your suggestion should definitely work, I wonder if any more elegant/modern solution exists. Maybe it's just me, but plaguing the HTML with inline <script> tags doesn't seem like a good idea to me... E.g. in my case, I want to run certain JS after Content block is updated. And there can be loads of Content blocks on my page... So I wonder, isn't there any C5 event that can be hooked into? Actually, where is C5 documentation on JS hookable events - does it exist at all?
