I am creating a layout with IE10-11 support. Most of my functions work, but the .text jQuery method does nothing. When I click on the button on my page, the text of some elements should change based on the passed argument to my function. The code:
const currenciesChars = new Map([
['rub', '₽'],
['usd', '$'],
['eur', '€']
])
const currenciesNote = new Map([
['rub', 'Руб'],
['usd', 'USD'],
['eur', 'EUR']
])
function changeCurrency(currency) {
$(".currency").text(currenciesChars.get(currency))
$(".currency-note").text(currenciesNote.get(currency))
}
changeCurrency('usd');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="currency"></div>
<div class="currency-note"></div>
The console does not produce a single error. However, the function works if you add alert (123) to it, you can verify this.
What is the problem of my code?
As commented above, new Map(arguments) is not supported in IE11. You need to use #babel/polyfill to polyfill it in IE:
Install #babel/polyfill by running the following command:
npm install --save #babel/polyfill
In the #babel/polyfill npm release, there's a file #babel/polyfill/dist/polyfill.js. You could include it before all your compiled Babel code. You can either prepend it to your compiled code or include it in a <script> before it.
To make your code working in IE 10, you also need to change const to var.
The working code sample is like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="node_modules/#babel/polyfill/dist/polyfill.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="currency"></div>
<div class="currency-note"></div>
<script>
var currenciesChars = new Map([
['rub', '₽'],
['usd', '$'],
['eur', '€']
])
var currenciesNote = new Map([
['rub', 'Руб'],
['usd', 'USD'],
['eur', 'EUR']
])
function changeCurrency(currency) {
$(".currency").text(currenciesChars.get(currency))
$(".currency-note").text(currenciesNote.get(currency))
}
changeCurrency('usd');
</script>
</body>
</html>
Related
const net = new brain.NeuralNetwork();
net.train([
{
input: [0, 0]
output: [0]
},
{
input: [1, 0]
output: [1]
},
{
input: [0, 1]
output: [1]
},
{
input: [1, 1]
output: [0]
}
])
const diagram = document.getElementById('diagram')
diagram.innerHTML = brain.utilities.toSVG(net)
This should show me the neural network diagram but it doesn't I do have the HTML all set up and it's supposed to be working correctly but when I run it first it loads for longer than usual code does but I suppose its because I'm working with more complex stuff than usual and well I just get a blank screen so I would like if someone would help me out by telling me what the problem is
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Storm</title>
<script src="//unpkg.com/brain.js" defer></script>
<script src="index.js" defer> </script>
</head>
<body>
<div id="diagram">Diagram </div>
</body>
</html>
Your import is this:
<script src="//unpkg.com/brain.js" defer></script>
But needs to be this:
<script src="https://unpkg.com/brain.js#1.0.0-rc.3/browser.js"></script>
https:// implies it will download it from a website, whereas yours
// implies it will look on your local machine (your computer) for the file.
Since you didn't download the file, it won't load anything.
Maybe you want to use a different package, but the main issue is the import.
I'm trying to import this Widget designed for JQuery in my React projet :
<script type="text/javascript" src="https://widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js">
</script>
This widget needs JQuery to work, so i also load JQuery using Google CDN:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
The documentation is written for JQuery, and shows this example to use the widget :
HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
<title>Mondial Relay Parcelshop Picker with Map</title>
<!-- JQuery required (>1.6.4) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- Leaflet dependency is not required since it is loaded by the plugin -->
<script src="//unpkg.com/leaflet/dist/leaflet.js"></script>
<link rel="stylesheet" type="text/css" href="//unpkg.com/leaflet/dist/leaflet.css" />
<!-- JS plugin for the Parcelshop Picker Widget MR using JQuery -->
<script src="//widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js"></script>
</head>
<body>
<!-- HTML Element in which the Parcelshop Picker Widget is loaded -->
<div id="Zone_Widget"></div>
<!-- HTML element to display the parcelshop selected, for demo only. Should use hidden instead. -->
<input type="text" id="Target_Widget" />
</body>
</html>
JAVASCRIPT :
```
$(document).ready(function () {
$("#Zone_Widget").MR_ParcelShopPicker({
Target: "#Retour_Widget",
Brand: "BDTEST ",
Country: "FR",
EnableGmap: true
});
});
```
I really don't know how to do it. I've tried for 3 days but i'm still blocked.
Thank you a lot for your help and i'm very sorry for my bad english.
Thanks again.
(UPDATE)
My code is :
import React, { useEffect } from 'react';
const MondialRelay = () => {
useEffect(() => {
const jQuery = document.createElement('script');
jQuery.src = "//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js";
jQuery.async = "true";
document.body.appendChild(jQuery);
return () => {
document.body.removeChild(jQuery);
}
})
useEffect(() => {
const scriptMr = document.createElement('script');
scriptMr.src = "https://widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js";
scriptMr.async = "true";
document.body.appendChild(scriptMr);
return () => {
document.body.removeChild(scriptMr);
}
});
!function(){
// Parameterized the widget
$(document).ready(function () {
$("#Zone_Widget").MR_ParcelShopPicker({
Target: "#ParcelShopCode",
Brand: "BDTEST ",
Country: "FR"
});
});
}();
return(
<div>
<div id="Zone_Widget"></div>
</div>
)
};
export default MondialRelay;
And the error i encounter is "$ is not defined" but this is because i try to use JQuery syntax in React and $ is never defined in my code.
I dont know how to create this div with #Zone_Widget id.
There's a typo in your script tag, you missed https:
change the URL to https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js and it should work.
As a suggestion, since you're using nodejs/npm already, you can install jquery using npm as well.
npm install jquery
I am trying to learn Redux (with React).
I don't want to use Node to install dependencies, just doing it manually with script tags.
I am getting the error reactRedux is not defined. I thought by adding the react-redux.js file I would solve the issue.
Would appreciate any pointers on what I'm doing or understanding wrongly.
(I'm attempting to work through this tutorial https://www.sitepoint.com/how-to-build-a-todo-app-using-react-redux-and-immutable-js/)
Here is the code snippet in question:
<head>
<meta charset="UTF-8">
<script src="public/js/lib/react.js"></script>
<script src="public/js/lib/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.js"></script>
</head>
<body>
<script type="text/babel">
const { Map, List } = Immutable;
const { createStore } = Redux;
const { Provider, connect } = reactRedux;
Line 7 from react-redux.js indicates that it should be ReactRedux not reactRedux.
exports["ReactRedux"] = factory(require("react"), require("redux"))
So it's just a typo in the tutorial - probably an older version of the library being used when it was written.
You need to capitalize the first r in reactRedux. Change:
const { Provider, connect } = reactRedux;
To
const { Provider, connect } = ReactRedux;
As I'm new to Angular, I expect to run in to issues however this issue seems to be repeating itself off and on.
As I'm following a tutorial on learning Angular here, I was learning about how to use expressions.
What I'm attempting to do is access an gem's attributes and display them on the webpage. However, the object values are not being accessed and it is just displaying as so:
{{store.product.name}}
${{store.product.price}}
{{store.product.description}}
Add to Cart
Where as I want it to display as:
Dodecahaderon
$2.95
. . .
Add to Cart
I thought it may be due to the videos using Angular1.2 and I'm using 1.4 however I'm not sure. What am I doing wrong and how can I properly display the object attributes?
Here is the code:
(function () {
var app = angular.module('store', []);
app.controller('StoreController', function(){
this.product = gem;
});
var gem = {
name: 'Dodecahaderon',
price: 2.95,
description: '. . . ',
canPurchase = true,
soldOut = true
};
})();
<!DOCTYPE html>
<html ng-app="store">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
</head>
<body ng-controller="StoreController as store">
<div ng-hide="store.product.soldOut">
<h1>{{store.product.name}}</h1>
<h2>${{store.product.price}}</h2>
<p>{{store.product.description}}</p>
<button ng-show="store.product.canPurchase">Add to Cart</button>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
Your angular library is not referenced correctly. Open your console window and make sure the angular script reference is actually working.
Currently gem is definied outside the scope of the controller. Also, as gem as an object you must change = to :
You need to change your code to this and it works
(function () {
var app = angular.module('store', []);
app.controller('StoreController', function(){
this.item = {
name: 'Dodecahaderon',
price: 2.95,
description: '. . . ',
canPurchase : true,
soldOut : true
};
});
})();
And your html to this:
<!DOCTYPE html>
<html ng-app="store">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-controller="StoreController as store">
<div ng-hide="store.product.soldOut">
<h1>{{store.item.name}}</h1>
<h2>${{store.item.price}}</h2>
<p>{{store.item.description}}</p>
<button ng-show="store.item.canPurchase">Add to Cart</button>
</div>
</body>
</html>
Also, you may need to replace your reference to angular from <script type="text/javascript" src="angular.min.js"></script> to <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
Using the following code, I get working output:
<html>
<head>
<script type="text/javascript" src="/js/showdown.js"></script>
</head>
<body>
<script type="text/javascript">
var converter = new Showdown.converter();
alert(converter.makeHtml('*test* abc'));
</script>
</body>
</html>
Returning <p><em>test</em> abc</p>
I would now like to add an extension. The github page suggests this can be done with:
<script src="src/extensions/twitter.js" />
var converter = new Showdown.converter({ extensions: 'twitter' });
However, modifying my code to:
<html>
<head>
<script type="text/javascript" src="/js/showdown.js"></script>
<script type="text/javascript" src="/js/twitter.js"></script>
</head>
<body>
<script type="text/javascript">
var converter = new Showdown.converter({ extensions: 'twitter' });
alert(converter.makeHtml('*test* abc'));
</script>
</body>
</html>
Produces the error
"Uncaught Extension 'undefined' could not be loaded. It was either not found or is not a valid extension."
Adding the following code (as listed under the Filter example)
var demo = function(converter) {
return [
// Replace escaped # symbols
{ type: 'lang', function(text) {
return text.replace(/\\#/g, '#');
}}
];
}
Produces an error Uncaught SyntaxError: Unexpected token (
I would like to create an extension like this one https://github.com/rennat/python-markdown-oembed to interpret a , but it's unclear how to begin adding this support.
In your last block you have a comma after 'lang', followed immediately with a function. This is not valid json.
EDIT
It appears that the readme was incorrect. I had to to pass an array with the string 'twitter'.
var converter = new Showdown.converter({extensions: ['twitter']});
converter.makeHtml('whatever #meandave2020');
// output "<p>whatever #meandave2020</p>"
I submitted a pull request to update this.
The way we write extensions has changed, I found some help with the following filter example : http://codepen.io/tivie/pen/eNqOzP
showdown.extension("example", function() {
'use strict';
return [
{
type: 'lang',
filter: function(text, converter, options) {
var mainRegex = new RegExp("(^[ \t]*:>[ \t]?.+\n(.+\n)*\n*)+", "gm");
text = text.replace(mainRegex, function(match, content) {
content = content.replace(/^([ \t]*):>([ \t])?/gm, "");
var foo = converter.makeHtml(content);
return '\n<blockquote class="foo">' + foo + '</blockquote>\n';
});
return text;
}
}
]
});