In a totally custom Wordpress page, written as a PHP snippet using Woody Snippets plugin, I need to use a jQuery datepicker to select a date.
I imported the necessary files correctly, and also called and set up the datepicker correctly. Yesterday, I attached the datepicker to a hidden input field, so that when I clicked on an icon, the calendar would float in place, and everything was fine, even the localization, although I hadn't taken any measures for the localization of the calendar (importing the i18n files etc)...
Today, I had to change the page's layout a bit, so I had to make the calendar show from the beginning (inline). According to the demo page, in order to put the datepicker inline, all you have to do is attach it to a div instead of an input field.
The datepicker indeed turned into an inline element, but the localization went away... The initial language is English, until I interact in any way with the calendar (go back or forth a month, or pick a date, etc). Once I do that, the localization turns into my site's language!
What's more crazy is that this situation continued even after I specifically imported and set up the localization.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/i18n/jquery-ui-i18n.min.js" integrity="sha512-zZ27MiE6yuwkKbHnJ/7ATQF/7l+Jwk5jSxgmLJ1SS5QJexaYswmP3OKBPDVMfM8TlSOudAKHTWH2UtS+0LDddw==" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('#frontpages-date-filter').datepicker($.extend({},
$.datepicker.regional['el'], {
dateFormat: 'yymmdd',
minDate: new Date({$min['y']}, {$min['m']}, {$min['d']}),
maxDate: new Date({$max['y']}, {$max['m']}, {$max['d']}),
onSelect: function(dateText) {
window.location.href = location.protocol + '//' + location.host + location.pathname + '?date=' + dateText;
}
}
));
});
</script>
Exactly the same code works fine right from the start in the following JSFiddle
From what I've searched so far, it most likely has to do with WP v4.6+ where localization is automatically added to jQuery, but no matter what I've tried, I haven't been able to make the inline datepicker load localized without having to interact with it in any way!
BTW, I had noticed the exact same behavior, and even had recorded a short video for the developers of ACF, thinking it had to do with their plugin, but they responded it wasn't due to their plugin, so as it was in the Admin side, I didn't bother losing time to debug it further. But this time, the page is in the public side, so it has to be fixed!
Any help will be very much appreciated. Thanks in advance.
This must have been a conflict in my site. TBH, I wasn't able to spot the conflict, but I was able to circumvent it by setting the necessary lang strings just before datepicker's initiation like so:
$(function() {
$.datepicker.regional['el'] = {
closeText: 'Κλείσιμο',
prevText: 'Προηγούμενος',
nextText: 'Επόμενος',
currentText: 'Σήμερα',
monthNames: ['Ιανουάριος', 'Φεβρουάριος', 'Μάρτιος', 'Απρίλιος', 'Μάιος', 'Ιούνιος', 'Ιούλιος', 'Αύγουστος', 'Σεπτέμβριος', 'Οκτώβριος', 'Νοέμβριος', 'Δεκέμβριος'],
monthNamesShort: ['Ιαν', 'Φεβ', 'Μαρ', 'Απρ', 'Μαι', 'Ιουν', 'Ιουλ', 'Αυγ', 'Σεπ', 'Οκτ', 'Νοε', 'Δεκ'],
dayNames: ['Κυριακή', 'Δευτέρα', 'Τρίτη', 'Τετάρτη', 'Πέμπτη', 'Παρασκευή', 'Σάββατο'],
dayNamesShort: ['Κυρ', 'Δευ', 'Τρι', 'Τετ', 'Πεμ', 'Παρ', 'Σαβ'],
dayNamesMin: ['Κ', 'Δ', 'Τ', 'Τ', 'Π', 'Π', 'Σ'],
weekHeader: 'Εβδ',
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''
};
$.datepicker.setDefaults($.datepicker.regional['el']);
$('#frontpages-date-filter').datepicker();
});
Related
So on all my web pages i have this code what is used by Yandex metrika for analytics. According to google this script is slowing down my pages and needs something changing in the way it loads to not be render blocking, TTI time to input blocking, FID first input delay blocking, First contentful paint blocking.
<script data-cfasync="false" type="text/javascript">
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(XXXXXXXX, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true,
webvisor:true
});
</script>
Googles page speed reports the following
https://developers.google.com/speed/pagespeed/insights/
What can i modify the Yandex metrika javascript to in order to fix this issue ?
You don't have many options I am afraid as it is a third party script.
One option to improve your score and perceived load times is to wrap the call to the function in a setTimeout set long enough to delay loading the script until the essential content is loaded.
<script data-cfasync="false" type="text/javascript">
setTimeout(function(){
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(XXXXXXXX, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true,
webvisor:true
});
}, 5000); //set this as high as you can without ruining your stats.
</script>
This is definitely a workaround and I would instead advise using a different library that is less bloated if you can find one.
<script data-cfasync="false" type="text/javascript">
(function(){
var a = function() {try{return !!window.addEventListener} catch(e) {return !1} },
b = function(b, c) {a() ? document.addEventListener("load", b, c) : document.attachEvent("onreadystatechange", b)};
b(function(){
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(XXXXXXXX, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true,
webvisor:true
});
}, false);
})();
</script>
One option is to use old Yandex Metrika code (new Ya.Metrika...).
You can view the old code if you set checkbox in advanced settings of the Metrika. Old code has some limitation but it's much smaller and few times faster.
Disabling clickmap and webvisor could help.
I have been trying to display value of a datepicker in a div and two texboxes. I was able to do it in a normal PHP file however when i try to do it in a wordpress website. It is not happening The jquery code i am using is as follows:
jQuery(function() {
jQuery('#ui-datepicker-div').datepicker({
altField: '#wc_order_field_2563', //setting alternate field
onSelect: function(dateText, inst) {
$('#show_pickupdate_input').val(dateText);
$('#pickupdate_text').text(dateText);
//alert(dateText);
}
});
});
If you want to see this in action you an see it on twomoms.kitchen checkout page. However this does not seem to work no matter what I do.
Please let me know what is it that i am doing wrong :(
the issue got resolved by changing the code above with the following code below. This modification was done as the datepicker was added using a plugin that adds any fields as required. Code below changes div and textbox using the change in other textbox.
jQuery(function() {
jQuery('#wc_order_field_2563').datepicker({
onSelect: function(dateText, inst) {
$('#show_pickupdate_input').val(dateText);
$('#pickupdate_text').text(dateText);
//alert(dateText);
}
});
});
I am using wordpress and WPML to make websites, and I apply reCAPTCHA under the contact form.
My website is mainly in Chinese, so the reCAPTCHA shows "I am not a robot" in Chinese. But after I duplicate the page into other languages, it still shows the wording in Chinese.
I'm wondering is there any way to change the wording of "I am not a robot" in English?
Thanks a lot for helping!!
User1121883's solution is for the old text reCaptcha v.1.0, not the modern behaviour reCaptcha. It has limited customization options now.
So if you want to change other language for other custom language page you'll need to play with reloading it with other language that would have different hl GET parameter:
<script src="https://www.google.com/recaptcha/api.js?hl=en-GB"></script>
Update
I've done it client-side (demo), but you may do it server-side or also use this client side code.
<button class="btn" onclick="btnclick();return false;">Load reCaptcha in Chinese</button>
<script>
function callback() { console.log("Chinese reCaptcha loaded"); }
function btnclick()
{
s = document.createElement("script");
s.src="https://www.google.com/recaptcha/api.js?hl=zh-CN";
if(s.addEventListener) {
s.addEventListener("load",callback,false);
}
else if(s.readyState) {
s.onreadystatechange = callback;
}
// we remove the inner html of old reCaptcha placeholder
var oldRecaptcha=document.getElementById('g-recaptcha');
while (oldRecaptcha.firstChild) {
oldRecaptcha.removeChild(oldRecaptcha.firstChild);
}
document.body.appendChild(s);
}
</script>
reCAPTCHA has a number of built in translations. You can use these by setting the lang parameter of the RecaptchaOptions:
<script type="text/javascript">
var RecaptchaOptions = {
lang : 'fr',
};
</script>
You can find more here:
https://developers.google.com/recaptcha/old/docs/customization?hl=en#i18n
I am using WordPress 5+, at wp-config.php
$locale='sv_SE';
(For example, in the case of the Swedish language)
I've created a google content experiment without redirects using the docs.
The basic implementation involves a javascript snippet that uses the following code to choose the version of the experiment:
<!-- Load the Content Experiment JavaScript API client for the experiment -->
<script src="//www.google-analytics.com/cx/api.js?experiment=YOUR_EXPERIMENT_ID"></script>
<script>
// Ask Google Analytics which variation to show the user.
var chosenVariation = cxApi.chooseVariation();
</script>
<!-- Load the JQuery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
// Define JavaScript for each page variation of this experiment.
var pageVariations = [
function() {}, // Original: Do nothing. This will render the default HTML.
function() { // Variation 1: Banner Image
document.getElementById('banner').src = 'bay-bridge.jpg';
},
function() { // Variation 2: Sub-heading Text
document.getElementById('heading').innerHTML = 'Look, a Bridge!';
},
function() { // Variation 3: Button Text
document.getElementById('button').innerHTML = 'Learn more';
},
function() { // Variation 4: Button Color
document.getElementById('button').className = 'button button-blue';
}
];
// Wait for the DOM to load, then execute the view for the chosen variation.
$(document).ready(
// Execute the chosen view
pageVariations[chosenVariation]
);
</script>
However, when I visit the page using an incognito window, I only see the first variation of the experiment. When I check chosenVariation in the console, it's always 0. In fact, when I call cxApi.chooseVariation(); in the console, it always returns 0.
Is this because google recognizes my incognito browser windows, or is something broken with cxApi.chooseVariation(); or in my implementation?
I had the same problem, 100% of the sessions were given the original (0) variation. In order to fix the problem, I added the javascript code provided by the experiment. Go to your experiment (edit), click Setting up your experiment code, manually insert the code, copy the code in there.
Now since you (and I) don't want to have a redirect, remove this part at the end of the code <script>utmx('url','A/B');</script>. If your page is templated, you can use a variable and insert your experiment key (not experiment id) where you see var k='########-#'
Now either very few people use the experiments in a client-only fashion or we're totally stupid because it would seem to me that the guide is wrong and there's absolutely no documentation that shows a working client-only setup.
I'm putting together a webpage with a datepicker. So far the datepicker has worked on other pages, but these don't have a master menu over the top of them. Code for the datepicker is below:
<input type="text" ID="txtMSStart" runat="server" onkeypress="return ReturnNothing()"/>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#txtMSStart").datepicker(
{
showOn: 'button',
buttonImage: 'icon-calendar.jpg',
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
dateFormat: "dd/mm/yy",
showAnim: 'slideDown',
duration: 'fast'
});
});
</script>
This is the same as the other datepickers. The ReturnNothing() function works and basically ensures that the user can't manually enter anything into the input box (apparently it needs to be an input box, and not a textbox, as I gather you can't add custom stuff like this to a textbox).
However, on my previous pages (which are all stand-alone pages, which don't have a master file) this works fine. In this case, however, it doesn't, and the only thing I can see which is different is that the
<script type="text/javascript" language="javascript">
line brings up a warning, which is:
Validation (XHTML 1.1): Attribute 'language' is not a valid attribute of element 'script'
That's the only difference I can see. The box is there but no datepicker button appears next to it. Without the ReturnNothing() you can enter text manually into it.
Thanks for help in advance.
The error that you get is because of the attribute 'language' that you specified in tag. Therefore, just remove language="javascript" from tag and that's it. Hope helps.
I've decided to do another work-around instead. Seems the datepickers only work on some pages and not others, and am against the clock on this one. So instead I've simply got two calendar controls (you've got to have a "from" date and "to" date) and am using them. Bit ugly, but it works for the moment.