Develop Reference

How to dynamically update google recaptcha sitekey?

I have a plain js + jQuery app with a button protected by google recaptcha, everything works as expected, but I'm failing to update the sitekey on the fly. The reason I want this is that I have a couple of environments (staging, test, production etc.) and I'd like to have a separate sitekey for specific envs (in order to separate the test stats from data from real users).
I'm able to change the attribute on my recaptcha element, but it looks like the attributes are taken by the script on initialising the whole thing, how can I refresh/reset the widget to accept the new sitekey?
I've been experimenting with reset and render methods, but to no effect so far.
<div
id="google-recaptcha"
class="g-recaptcha"
data-sitekey="this-will-be-replaced-anyways"
data-callback="onSubmit"
data-size="invisible"
></div>
if (grecaptcha) {
$('#google-recaptcha').attr({
'data-sitekey': 'my-real-sitekey'
});
}

I think you are looking for Explicitly render the reCAPTCHA widget
1.Specify your onload callback function. This function will be called by JavaScript resource(see the next step)
<script>
function onloadCallback() {
grecaptcha.render('myCaptcha1', {
'sitekey': 'sitekey value', // required
'theme': 'light', // optional
'callback': 'onloadCallback' // optional
});
}
</script>
2.Insert the JavaScript resource, setting the onload parameter to the name of your onload callback function and the render parameter to explicit.
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"></script>
3.Define the target HTML control that is supposed to be a captcha on your page.
<div id="myCaptcha1"></div>
I hope it helps you as helped me, good luck

execute js function after tinymce is loaded

I have a select that onchange trigger a js funtion to show/hide tinymce editor:
<select id="mySelect" onChange="myFuntion()">
<option value="1">Yes</option>
<option value="0">No</option>
Then I have a textarea with tinymce (loaded on page load).
<textarea class="mce" id="myTextarea"></textarea>
<script src="tinymce.js></script> // file with global tinymce.init({ ... });
The js function is like:
<script>
function myFuntion(){
if( $( '#mySelect' ).val() == '1' ) { tinymce.get( 'myTextarea' ).show(); }
else { tinymce.get( 'myTextarea' ).hide(); }
}
$( document ).ready(function() { myFuntion(); }); // show/hide tinymce based on how the mySelect setting is on page load
Everything works great except for the "$( document ).ready(function(){ myFuntion(); });" that throw an error "Uncaught TypeError: Cannot read property 'show' of null", I think its because tinymce is not yet loaded.
There is a way to change the "document ready function" with "when tinymce is loaded > execute myFunction()"
PS: I use tinymce 4, the tinymce.init() is on a external files and used on other pages, so i prefer not to edit this file
EDIT:
my actual workaround is to use:
setTimeout( function(){ myFunction(); }, 1500 );
but if there is a callback or similiar, for example $(document).on('tinymce:init') will be great

In tinymce 4 try to do with Promise
tinymce.init({
//some settings
}).then(function(editors) {
//what to do after editors init
});

To add to the answer that Kim Gysen wrote ... you can always use JavaScript to modify/extend your standard init on a page by page basis.
For example, start with your standard configuration:
baseConfig = {
selector: 'textarea'
....
}
...since this is just a simple JavaScript object you can inject additional properties/methods into that object before you use it to initialize TinyMCE.
For example:
customConfig = {
setup: function (editor) {
editor.on('init', function () {
//Do what you need to do once TinyMCE is initialized
});
}
}
Then you can "inject" customConfig into baseConfig. The easiest way is to use jQuery's extend method:
$.extend(baseConfig, customConfig);
...this will take all the methods and properties from customConfig and add them to baseConfig. Once you are done you can then load TinyMCE using the newly updated baseConfig:
tinymce.init(baseConfig);
This general technique allows you to create a "standard" configuration with all the base capabilities you need while injecting additional configuration options on a page by page basis.
So now you can trigger the "onInit" capability in TinyMCE when you need it without modifying the core configuration used elsewhere.

According to the docs, you have to declare the callback as follows:
function myCustomOnInit() {
alert("We are ready to rumble!!");
}
tinyMCE.init({
...
oninit : myCustomOnInit
});
This is the handle they offer to assure that tinyMCE is ready.
What you're saying here:
I use tinymce 4, the tinymce.init() is on a external files and used on
other page, so i prefer not to edit this file
Doesn't make a lot of sense to me.
According to the docs:
oninit: This option enables you to specify a function to be executed
when all editor instances have finished their initialization. This is
much like the onload event of an HTML page.
Makes it abundantly clear that this is the way you should go.
It doesn't matter where tinymce.init() is declared, just make sure that you provide the function you wish to execute is added.

after clicking {Permalink}, call function

I need to bind a function to initialize a js plugin after {Permalink} is clicked so Tumblr IPA "redirects" the browser to a new page, with the post details.
How can I do so? There's not so much documentation on how {Permalink} really works, whether it's ajax or whether it has some callback function (which I would appreciate).
Of course this would try to initialize before the "new" page is loaded. I think it's ajax though.
$("#{Permalink}").click(function() {
$('.jqzoom').jqzoom({
zoomType: 'standard',
lens:true,
preloadImages: false,
alwaysOn:false
});
});

{Permalink} renders a string that is the URL to the post: http://sample.tumblr.com/post/123
For reference, Tumblr theme operators don't have anything to do with javascript. They render mainly strings.
You need to bind the actual element that is clicked:
HTML
...
jQuery
$(".permalink").click(function() {
...
});
Reference: http://www.tumblr.com/docs/en/custom_themes#posts

Is there any way to acquire focus on a div popup?

From searching the internet and StackOF, I see that my question has been asked before or at least some variation of it; but I cannot identify any real solutions.
I have acquired some code that utilizes div tags to produce a modal popup window. While this seems to work adequately aesthetically, there is a small problem of acquiring and retaining focus on the popup that would allow the user to use the tab key to navigate to screen.
function PopUp() {
$('#<%= divPopUp.ClientID%>').modal(
{
overlayCss: {
backgroundColor: '#000'
},
onShow: function (d) { d.container.css({ position: 'absolute', top: '10px' }); }
});
window.location.hash = 'SubmitButton';
}
The div tag refers to a table element that contains some labels and a couple of asp LinkButtons. The function is called from the Server-side using the ScriptManager component to Register and display the popup.
So far I've tried to set the focus from the Server side code and also made a few attempts based on others suggestions from the Client side but nothing gives.
Is there anyone here who has struggled with this or a very similar issue that wouldn't mind sharing a solution? Or is this expected behavior under the circumstances that can only be circumvented via alternative methods?
I've included VB.Net as a tag on this post because that's the Server code language.
Thanks

JS
Inside the modal open or complete function , add this line
function PopUp() {
$('#<%= divPopUp.ClientID%>').modal(
{
focus:true,
overlayCss: {
backgroundColor: '#000'
},
.....//All other stuff
});
}
OR
Use this in onshow function
$('#<%= divPopUp.ClientID%>').focus();

Drupal 6 - Add Javascript to a View

I want to add a Jquery plugin to a view. However, I don't want to add via the .info file, as I don't want it on every page. I also don't want to add it to the header of the view or create a view.tpl.php file.
This page shows how to add Java Script to a Node via template.php. Is there anyway to do something similar to add Java Script to a View via the template.php file?

Here is an example for Daniel Wehner's answer. It assumes your view is called 'blog', and your display id is 'page_1'. This code goes into template.php. Remember to clear the template cache after adding new functions to template.php.
/**
* Implements hook_preprocess_views_view().
*/
function THEMENAME_preprocess_views_view(&$vars) {
$view = $vars['view'];
// Load the blog.js javascript file when showing the Blog view's page display.
if ($view->name == 'blog' && $view->current_display == 'page_1') {
global $theme;
drupal_add_js(drupal_get_path('theme', $theme) . '/js/blog.js', 'theme', 'footer', FALSE, TRUE, FALSE);
}
}

You can use the hook hook_preprocess_views_view