this fiddle
translates into this page
Which gives me a script looking like this:
<script type="text/javascript">//<sels.length="";i=""++) {
if="" (sels=""[i=""].name="".indexOf=""("-Car=""") != -1="") {
IDs="".push=""(sels=""[i=""].name="".split=""("-")[0=""]);
}
}
form="".onsubmit="function()" {
var="" atLeastOne="false,id,error="",fieldToFocus;"
for="" (var="" i="0;i<IDs.length;i++)" {
id="IDs[i];"
var="" sel1="this.elements[id+"-Car"];"
var="" sel2="this.elements[id+"-AgeGroup"];"
I am editing on my iPad so I have a hard time seeing where the issue is.
I know it is a localised issues, so apologies if it is off topic
For me it looks like this, so all is fine:
<script type='text/javascript'>//<![CDATA[
window.onload=function() {
var IDs = [],
form = document.getElementById("form1"),
sels = form.getElementsByTagName("select");
Related
I'm stuck since a while on this problem now and I'm struggling to find answers or peoples that have experienced the same problem.
Also, I'm not a native English speaker and I'm new to programming, so sorry if it's not clear / if my approch is dumb as f
I decided to turn the Wordpress of my company to headless (on Nuxt). Everything was pretty fine until I tried to internationalized the app. The best solution (I think) to manage this task is to use nuxt-i18n, a tool to properly translate the app (strings, paths etc). But this solution seems to not be very compatible with data fetched from the Rest API.
For now I'm trying to passing the data from single page like that :
<script>
import SwitchL from '~/components/LanguageInput.vue'
export default {
components: {
SwitchL,
},
data() {
return {
fetchRestFr: null,
fetchRestEn: null,
i18nData: null,
}
},
i18n: {
messages: {
// help
}
},
methods: {
fetchSomeData() {
// Get page data in French
let fetchRestFr = this.$axios.$get(`https://www.company-site.com/wp-json/wp/v2/pages?include=42&lang=fr`);
// Get page data in English
let fetchRestEn = this.$axios.$get(`https://www.company-site.com/wp-json/wp/v2/pages?include=42&lang=en`);
// Assign data to null variables
this.fetchRestFr = fetchRestFr[0]
this.fetchRestEn = fetchRestEn[0]
// Build the i18n object
this.dataToI18n();
},
dataToI18n() {
if (this.fetchRestFr && this.fetchRestEn) {
let fr = this.fetchRestFr
let en = this.fetchRestEn
let data = {
messages: {
fr,
en
}
}
this.i18nData = data
}
},
},
created() {
this.fetchSomeData();
},
}
</script>
An other approch was to use the tag outside the template section like so :
<i18n>
// Inject the data generated from a function
{
"en": {
"data": "here"
},
"fr": {
"data": "ici"
}
}
</i18n>
But I don't find any solution to dynamically inject JSON here.
Last solution is to make things to preper way, by creating JSON file for i18n to referencing, but I think It will be pretty hard for me to do this, and to manage this on long term.
If you have advice, thoughts on this I will be very grateful !
You do usually use some JSON files directly. They will be stored into /locales/fr.json with something like this
{
"here": "ici"
}
Then, you'll access it into your template with
<template>
<p>{{ $t('here') }}</p>
</template>
And it will handle the fr/en switch by the several ways available (manual switch, checking browser's locale, URL's path, cookie etc).
You can check nuxt-i18n's documentation for this and get a proper simple setup quickly here: https://i18n.nuxtjs.org/
Usually, you won't need to use the i18n tag anymore but if you still need to, you can do as explained here: https://i18n.nuxtjs.org/per-component-translations
Tried several solutions before posting, but none seems to be working and I must be doing something wrong.
My code is as follows (simplified)
<label>
<input type="checkbox" id="menu-image-settings-container" value="1" name="..." checked="checked">
Add image?
</label>
<div class="image-settings">show content if checked</div>
js code
$( ".image-settings" ).hide();
var wrapper = $(this).closest('li.menu-item');
if ( $('input#menu-image-settings-container').is(':checked') ) {
wrapper.find('.image-settings').show();
console.log('is-checked');
} else {
wrapper.find('.image-settings').hide();
console.log('is-not-checked');
}
$('input#menu-image-settings-container').change(function(){
if(this.checked) {
wrapper.find('.image-settings').show();
} else {
wrapper.find('.image-settings').hide();
}
});
console.log says is-not-checked, while it clearly is in the source code.
I've tried using if ($('input#menu-image-settings-container').is(':checked')) {...} but that didn't worked either, while normally that should work as well.
First, is(':checked') is a correct solution. Here's why: https://stackoverflow.com/a/7672031/9145243
And you can see that in this part of code your console.log works.
The actual problem is in this construction: wrapper.find('.image-settings').hide(); This code just can't find your .image-settings element.
I've replaced it with $('.image-settings') just to show you that the problem was here.
$('input#menu-image-settings-container').change(function() {
if($(this).is(':checked')) {
$('.image-settings').show();
} else {
$('.image-settings').hide();
}
});
When you debug your code it's a good practise to always use console.log, line by line. And then you will clearly see where exactly you have a problem
I'm trying to do a redirect after set a $storage var, using ngStorage module. This is not working, and I can't find out why.
My code is below:
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script src="https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js"></script>
<script>
angular.module('app', [
'ngStorage'
]).
controller('Ctrl', function (
$scope,
$localStorage
) {
$scope.$storage = $localStorage.$default({
array: []
});
$scope.Redirect1 = function () {
$scope.$storage.array = ['pineapple', 'pear', 'peach'];
window.location.href = 'http://localhost:61267/Page1.aspx?q=fruitsp';
};
$scope.Redirect2 = function () {
$scope.$storage.array = ['blackberry', 'banana', 'blueberry'];
window.location.href = 'http://localhost:61267/Page1.aspx?q=fruitsb';
};
});
</script>
</head>
<body ng-controller="Ctrl">
{{$storage|json}}
<br/>
<button ng-click="Redirect1();">Change Array</button><br/>
<button ng-click="Redirect2();">Change Array2</button>
</body>
</html>
If I remove the window.location rows, it work normally.
Am I doing something in the wrong order?
This problem has been answered here by #claireablani.
It seems that page reloading occurs before modification on localStorage has been applied.
You can use a fork of ngStorage library by #raynode (Github here, not available on bower) which add a $save() method to ensure modification had been applied.
$localStorage.$apply();
did the trick for me
thanks to this github issue comment
var setLocalStorage = function (token, uname)
{
$localStorage.token = token;
$localStorage.name = uname;
}
$timeout(setLocalStorage(token, userForm.uname), 500);
Module Used : ngStorage
OR
$localStorage.apply();
//Just after adding values in localstorage use this. No timeout required.
I also ran into this issue. I was trying to update localStorage in a service and it didn't seem to work. At least not inside a promise. Tried $localStorage.$apply() and $timeout there, but it didn't work. I had to move the code inside my controller to make this work.
$scope.$localStorage.myVar = 'test';
$scope.$localStorage.$apply();
$state.go('app.home');
I am trying to use one Deferred.when statement which can return an object after the completion of an eventhandler. My code looks like something below. Can someone guide me how to make it work? I am using dojo 1.7.
define(["dojo/_base/declare","dojo/_base/lang", "dojo/_base/xhr",
"dojo/_base/json","dojo/_base/Deferred","dijit/registry","dojo/_base/connect",
"dojo/query","dojo/on","dojo/dom-attr","dojo/dom","dojo/has","dojo/json","dojo/dom-style"],
function(declare,lang,xhr,json,Deferred,registry,connect,$,on,attr,dom,has,json,domStyle)
{
declare("model.Item", [],
{
deferred:null,
item:null,
Load: function(){
this.deferred = new Deferred();
var overlay = registry.byId("readFromStore");
overlay.show();
Deferred.when(connect.connect(registry.byId("storeReadOK"),"onClick",this,this.loadFromStorage), (return (this.deferred)));
// I want modification for the above line.
}
loadFromStorage:function()
{
// Do something here
this.deferred.callback(this.item);
}
return model.Item;
}
);
I also tried this below code for the Load function but it is also not working.
Load: function(){
this.deferred = new Deferred();
connect.connect(registry.byId("storeReadOK"),"onClick",this,this.loadFromStorage);
var overlay = registry.byId("readFromStore");
overlay.show();
// Deferred.when(connect.connect(registry.byId("storeReadOK"),"onClick",this,this.loadFromStorage),(overlay.hide()));
return this.deferred;
}
This below code is working fine and I was facing problem due to some other bug in my code which i have rectified and is working fine now. Thanks to all the people who tried to help me.
Load: function(){
this.deferred = new Deferred();
connect.connect(registry.byId("storeReadOK"),"onClick",this,this.loadFromStorage);
var overlay = registry.byId("readFromStore");
overlay.show();
return this.deferred;
}
So I am using the Disqus Plugin v2.65. I am trying to edit the dsq-global-toolbar at the top of the Disqus comments.
The following tags are in disqus-comment-system/comments.php
<div id="disqus_thread">
<?php if (!get_option('disqus_disable_ssr')): ?>
<?php
// if (is_file(TEMPLATEPATH . '/comments.php')) {
// include(TEMPLATEPATH . '/comments.php');
// }
?>
<div id="dsq-content">
<ul id="dsq-comments">
however on my site there are mulitple tags (the disqus-global-toolbar div) that seem to be dynamically appended between the dsq-content div and the dsq-comments ul. Where is this coming from and where can I edit this? Any help would be greatly appreciated.
I think it is coming somewhere around line 3140 in disqus.js
You can use this code to wait for the document to finish loading completely then do your changes (client side):
$(document).ready(function() {
window.disqus_no_style = true;
$.getScript('http://sitename.disqus.com/embed.js', function() {
var loader = setInterval(function() {
if($('#disqus_thread').html().length) {
clearInterval(loader);
disqusReady();
}
}, 1000);
});
function disqusReady() {
//whatever you can imagine
}
});
window.diqus_no_style can be deleted as well as the $.getsript wrapper.
Is that what you are looking for?
Something like this (use livequery instead of live):
function disqusReady() {
$('#dsq-global-toolbar').livequery(function() {
//$(this) will refer to object
});
}
Not sure what plug-in you're talking about, but if it's WordPress, I've done the same thing. Modify wp-content/plug-ins/disqus-comment-system/comments.php by adding an event handler for 'afterRender' (fires when the content ready in the DOM, but still hidden), eg. around line 70:
config.callbacks.afterRender.push(myFunctionToModifyDisqusOutput);