First of all, Sorry for the not-so-descript title, but i couldn't find a way to describe it in a few words.
I'm trying to make a simple Syntax Highlighter, using Javascript and Jquery.
I have a HTML TextArea with some HTML inside, that i want to add classes to, depending on the syntax.
But i have a weird problem with the open and closing tags...
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Syntax Highlighter</title>
<link rel="stylesheet" href="css/style.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/script.js"></script>
<meta charset="UTF-8">
</head>
<body>
<div class="container" id="mainWrapper">
<div class="container" id="mainContent">
<div class="container" id="textareaWrapper">
<textarea name="codeInput" id="codeInput" cols="100" rows="1000" class="textarea">
<html>
<head>
<title>Test page</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<p>I'm a Paragraph</p>
<img src="img/image.jpg" alt="I'm an image!" />
</body>
</html>
</textarea>
</div>
<button id="buttonHighlightSyntax" onClick="addClass()">Huelight</button>
<div class="container" id="syntaxWrapper">
<div id="syntaxContainer">
<pre id="highlighted">
</pre>
</div>
</div>
</div>
</div>
</body>
</html>
$(document).ready(function(){
// HTML tags: http://www.w3schools.com/tags/
var htmlTags = ["!DOCTYPE", "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdi", "big", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "datalist", "dd", "del", "details", "dfn", "dialog", "dir", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "menu", "menuitem", "meta", "meter", "nav", "noframes", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt", "u", "ul", "var", "video", "wbr"];
var code = $('#codeInput').val(); // non-highlighted HTML
code = code.replace(/(<\/|<|\s\/>|\/>|>)/g, "<span class=\"openClose\">$1</span>"); // add openClose class to <,</,>,/>, />
console.log(code);
$('#highlighted').html(code);
})
Here the weird thing happens when it replaces it, or maybe when it sets the html of #highlighted...
either way, the result is this:
<span class="openClose"><</span>html<span class="openClose">></span>
<span class="openClose"><</span>head<span class="openClose">></span>
<span class="openClose"><</span>title<span class="openClose">></span>Test page<span class="openClose"><!--</span-->title<span class="openClose">></span>
<span class="openClose"><</span>link rel="stylesheet" href="css/style.css"<span class="openClose"> /></span>
<span class="openClose"><!--</span-->head<span class="openClose">></span>
<span class="openClose"><</span>body<span class="openClose">></span>
<span class="openClose"><</span>p<span class="openClose">></span>I'm a Paragraph<span class="openClose"><!--</span-->p<span class="openClose">></span>
<span class="openClose"><</span>img src="img/image.jpg" alt="I'm an image!"<span class="openClose"> /></span>
<span class="openClose"><!--</span-->body<span class="openClose">></span>
<span class="openClose"><!--</span-->html<span class="openClose">></span>dsdad
</span></span></span></span></span>
The problem there, is that it seems to screw up when it comes to the ,/> and only partially replaces it?
I'm very confuzzled, so if anyone can explain what is going on with the string.replace(), please do =)
Related
I am working on a script and trying to add links to submenu items based on bootstrap.
The problem appears when I try to click on them.
They don't work: https://smsverificator.com/2/demo/
Don't know the reason the cannot work here.
I even don't know the language it's written below. Can anybody help me?
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="../dist/css/flags.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="../dist/js/jquery.flagstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<link rel="stylesheet" href="https://smsverificator.com/assets/css/language_switcher_style.css">
</head>
<body onload="prettyPrint()">
<div class="col-xs-12 col-md-6">
<form>
<div class="form-group">
<label>Select Language</label><br>
<div id="options"
data-input-name="country2"
data-selected-country="US">
</div>
</div>
</form>
</div>
<script>
$('#basic').flagStrap();
$('#origin').flagStrap({
placeholder: {
value: "",
text: "Language"
}
});
$('#options')
.flagStrap({
countries: {
"US": '<a target="_self" href="https://smsverificator.com">English</a>',
"PL": 'Polish',
"RU": 'Russian',
"DE": 'German',
"UA": 'Ukrainian',
"ES": 'Spanish',
"FR": 'French',
},
buttonSize: "btn-sm",
buttonType: "btn-info",
labelMargin: "10px",
scrollable: false,
scrollableHeight: "350px"
});
$('#advanced')
.flagStrap({
buttonSize: "btn-lg",
buttonType: "btn-primary",
labelMargin: "20px",
scrollable: false,
scrollableHeight: "350px",
onSelect: function (value, element) {
alert(value);
console.log(element);
}
});
</script>
</body>
</html>
How to make them clickable and work?
Below is your edited code. I modified your array of countries to put only their names and created a separate table for the urls.
When the user changes the selection, the OnSelect function is triggered.
We then redirect the page to the new url
Make sure the version of flagstrap is the latest. It can be found here: https://github.com/blazeworx/flagstrap/blob/master/dist/js/jquery.flagstrap.min.js
$('#options')
.flagStrap({
countries: {
"US": 'English',
"PL": 'Poland',
"RU": 'Russian',
"DE": 'German',
"UA": 'Ukrainian',
"ES": 'Spanish',
"FR": 'French',
},
buttonSize: "btn-sm",
buttonType: "btn-info",
labelMargin: "10px",
scrollable: false,
scrollableHeight: "350px",
onSelect: function (value, element) {
let urls = {
"US": 'https://smsverificator.com',
"PL": 'https://smsverificator.com/pl/',
"RU": 'https://smsverificator.com/ru/',
"DE": 'https://smsverificator.com/de/',
"UA": 'https://smsverificator.com/ukr/',
"ES": 'https://smsverificator.com/es/',
"FR": 'https://smsverificator.com/fr/',
};
document.location.href = urls[value];
console.log(element);
}
});
I'm trying to make a system that generates a file based on the selection in a form. Currently I use FormIO to generate the forms from a json structure. FormIO form builder
So when I press submit it would download a file with my selected values.
I know it already generates the object. But I don't know how to filter it with this.
Right now it generates the file with this in it. But I would like to only have the radio button value and the name.
{"data":{"radio2":1,"howLongShouldItWait":12,"submit":true},"metadata":{"timezone":"Europe/Brussels","offset":60,"referrer":"","browserName":"Netscape","userAgent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:65.0) Gecko/20100101 Firefox/65.0","pathName":"/C:/Users/Jan/Desktop/IPP_conf/index.html","onLine":true},"state":"submitted","saved":false}
So what I eventually want is something like this
#define WAIT_TIME 3
#define OVERRIDE_BUTN
The js function to download the file and the JSON part.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>Configuration form</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/formiojs#latest/dist/formio.full.min.css">
<script src="https://unpkg.com/formiojs#latest/dist/formio.full.min.js"></script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="resources/logo64x64.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h1 class="mt-5">Settings</h1>
<div id="formio"></formio>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script>
Formio.icons = 'fontawesome';
Formio.createForm(document.getElementById('formio'), {
"display": "form",
"components": [
{
"label": "Test",
"optionsLabelPosition": "right",
"values": [
{
"label": "Yes",
"value": "1",
"shortcut": ""
},
{
"label": "No",
"value": "0",
"shortcut": ""
}
],
"inline": true,
"mask": false,
"tableView": true,
"alwaysEnabled": false,
"type": "radio",
"input": true,
"key": "radio2",
"defaultValue": 1,
"validate": {
"customMessage": "",
"json": ""
},
"conditional": {
"show": "",
"when": "",
"json": ""
},
"encrypted": false,
"properties": {},
"customConditional": "",
"logic": [],
"reorder": false
},
{
"label": "How long should it wait?",
"optionsLabelPosition": "right",
"values": [
{
"label": "1 Hour",
"value": "1",
"shortcut": ""
},
{
"label": "12 Hours",
"value": "12",
"shortcut": ""
}
],
"inline": true,
"mask": false,
"tableView": true,
"alwaysEnabled": false,
"type": "radio",
"input": true,
"key": "howLongShouldItWait",
"defaultValue": 12,
"validate": {
"customMessage": "",
"json": ""
},
"conditional": {
"show": "",
"when": "",
"json": ""
},
"encrypted": false,
"reorder": false,
"properties": {},
"customConditional": "",
"logic": []
},
{
"label": "Generate",
"state": "",
"theme": "primary",
"shortcut": "",
"disableOnInvalid": true,
"mask": false,
"tableView": true,
"alwaysEnabled": false,
"type": "button",
"key": "submit",
"input": true,
"defaultValue": false,
"validate": {
"customMessage": "",
"json": ""
},
"conditional": {
"show": "",
"when": "",
"json": ""
},
"encrypted": false,
"properties": {
"test": "5"
},
"tags": [],
"showValidations": false,
"event": "",
"url": "",
"custom": "",
"reorder": false,
"customConditional": "",
"logic": []
}
],
}).then(function (form) {
var filename = "settings.h";
function download(filename, text) {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
form.on('submit', function (submission) {
console.log(submission);
download(filename, JSON.stringify(submission));
});
});</script>
</body>
</html>
I tried a for loop on the submission variable. But I don't know how to select the exact data.
Kind regards and thanks in advance
I still have to filter it properly but I got the data i needed, I was looking a bit too far. Instead of using the custom submission endpoint link, there was another simpler way.
for(key in submission.data){
//Do stuff where key would be 0 and value would be the object
console.log(key + ' ' + submission.data[key] );
}
This I can now filter to my needs. I tried getting the data straight out of 'submission' so I was on the right path.
I am writing following code in post. But the chart widget is showing to me only(admin) not to visitor.
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div id="tradingview_c80ea"></div>
<div class="tradingview-widget-copyright"><span class="blue-text">AAPL chart</span> by TradingView</div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"width": 980,
"height": 610,
"symbol": "NASDAQ:AAPL",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "Light",
"style": "1",
"locale": "in",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"container_id": "tradingview_c80ea"
}
);
</script>
</div>
<!-- TradingView Widget END -->
How can I solve the issue?
I'm new to AngularJS, and this project pushes what I already know about using ng-repeat and controllers.
Goal : To make it so when you select an option from the drop down menu and click the button, the guitars will show up with the assistance of ng-repeat. For now, only the names will show up, but I'm focused on ensuring the app.js file works.
HTML :
<!DOCTYPE html>
<html>
<head>
<title>Angular Project 2</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp">
<header ng-controller="HeaderCtrl">
<h1 id="title">{{appDetails.title}}</h1>
<h3 id="tagline">{{appDetails.tagline}}</h3>
</header>
<select id="dropdown">
<option value="Yamaha">Yamaha</option>
<option value="Gibson">Gibson</option>
<option value="Jackson">Jackson</option>
<option value="ESP">ESP</option>
</select>
<br>
<input type="submit" id="searchGuitars" value="Search!">
<section id="bookSection" ng-controller="GuitarCtrl">
<div ng-repeat="guitar in guitars">
{{guitar.title}}
</div>
</section>
</body>
</html>
JS :
var app = angular.module("myApp", []);
app.controller("HeaderCtrl", function ($scope) {
$scope.appDetails = {
title: "JamLog",
tagline: "Take a look at our Fancy Instruments in Stock!"
};
})
app.controller("GuitarCtrl", function ($scope) {
$('#searchGuitars').click(function() {
if ($('#dropdown').val() == "Yamaha") {
$scope.guitars = [
{
title: "Yamaha Revstar 420",
instrument: "Electric Guitar",
color: "Red",
price: "$499.99",
details: "Yes",
imageURL: "YamahaRS420.jpg"
},
{
title: "Yamaha Pacifica Series PAC012",
instrument: "Electric Guitar"
color: "Blue",
price: "$",
details: "Yes",
imageURL: "YamahaPacificaSeriesPAC012.jpg"
}
];
}
else if ($('#dropdown').val() == "Gibson") {
$scope.guitars = [
{
title: "Gibson Les Paul Custom",
instrument: "Electric Guitar",
color: "Blue",
price: "$",
details: "Yes",
imageURL: "GibsonLesCustomBlue.jpg"
},
{
title: "Thunderbird",
instrument: "Bass",
color: "Black",
price: "$",
details: "Used by SOAD Bassist",
imageURL: "GibsonThunderbirdIV.jpg"
}
];
}
})
})
I'm hoping it's not a small error I missed, but the overall layout of this program seems as if it would work, and am unsure as to why not.
Please try to declare JQuery CDN before Angular
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
If you already use the angularjs, do not mix it up with JQuery.
Maybe this solution below could help you.
"use strict";
angular
.module('app')
.controller("HeaderCtrl", function ($scope) {
$scope.appDetails = {
title: "JamLog",
tagline: "Take a look at our Fancy Instruments in Stock!"
};
})
.controller("GuitarCtrl", function ($scope) {
$scope.searchGuitars = function(guitar) {
if (guitar == "Yamaha") {
$scope.guitars = [
{
title: "Yamaha Revstar 420",
instrument: "Electric Guitar",
color: "Red",
price: "$499.99",
details: "Yes",
imageURL: "YamahaRS420.jpg"
},
{
title: "Yamaha Pacifica Series PAC012",
instrument: "Electric Guitar",
color: "Blue",
price: "$",
details: "Yes",
imageURL: "YamahaPacificaSeriesPAC012.jpg"
}
];
}
else if (guitar == "Gibson") {
$scope.guitars = [
{
title: "Gibson Les Paul Custom",
instrument: "Electric Guitar",
color: "Blue",
price: "$",
details: "Yes",
imageURL: "GibsonLesCustomBlue.jpg"
},
{
title: "Thunderbird",
instrument: "Bass",
color: "Black",
price: "$",
details: "Used by SOAD Bassist",
imageURL: "GibsonThunderbirdIV.jpg"
}
];
}
console.log($scope.guitars);
}
});
<!DOCTYPE html>
<html>
<head>
<title>Angular Project 2</title>
<meta charset="utf-8">
<!--<link rel="stylesheet" href="style.css">-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<!--<script src="app.js"></script>-->
</head>
<body ng-app="app">
<header ng-controller="HeaderCtrl">
<h1 id="title">{{appDetails.title}}</h1>
<h3 id="tagline">{{appDetails.tagline}}</h3>
</header>
<select id="dropdown" ng-model="dropdownSelect">
<option value="Yamaha">Yamaha</option>
<option value="Gibson">Gibson</option>
<option value="Jackson">Jackson</option>
<option value="ESP">ESP</option>
</select>
<br>
<div ng-controller="GuitarCtrl">
<input type="button" ng-click="searchGuitars(dropdownSelect)" id="searchGuitars" value="Search!">
<section id="bookSection">
<div ng-repeat="guitar in guitars">
{{guitar.title}}
</div>
</section>
</div>
</body>
</html>
I am using ng-options for my select tag to have choices for the users. Everything works perfectly but after selecting an option for the first time the default blank value is gone. What if I want to revert back to the defaul blank value again? How can that be done? How can I retain that blank value?
Here is an example of my code:
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="myController">
<h1>Hello World!</h1>
<select ng-model="mySelection" name="" id="" ng-options="x.value as x.label for x in myOptions">
</select>
</body>
</html>
<script>
var app = angular.module('app', []);
app.controller('myController', function($scope){
$scope.myOptions = [{
"value": null,
"label": null,
},{
"value": "First",
"label": "First",
},{
"value": "Second",
"label": "Second",
},{
"value": "Third",
"label": "Third",
}]
});
</script>
Here is the plunker: http://plnkr.co/edit/5f17YxRfWFI4g40t3NEf?p=preview
use
<select ng-model="mySelection" name="" id="" ng-options="x.value as x.label for x in myOptions">
<option value=""></option>
</select>
Don't pollute your 'myOptions' with dummy null object, as APIs will not return you the same. you need to handle it on presentation layer, as shown above. while saving, if use selects empty, it will be saved as null (if handled properly)
also you can have something like this
<option value="">---select---</option>
Just add blank option to your options and select the blank by default like:
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="myController">
<h1>Hello World!</h1>
<select ng-model="mySelection" name="" id="" ng-options="x.value as x.label for x in myOptions">
</select>
</body>
</html>
<script>
var app = angular.module('app', []);
app.controller('myController', function($scope){
$scope.mySelection = '';
$scope.myOptions = [{
"value": "",
"label": "",
},{
"value": "First",
"label": "First",
},{
"value": "Second",
"label": "Second",
},{
"value": "Third",
"label": "Third",
}]
});
</script>
here we add the blank option
{
"value": "",
"label": "",
}
and select that empty option $scope.mySelection = '';