I am very much new to AngularJS. I want to update the .less files variable dynamically. But didn't get how to access this .less file using AngularJS.
My code:
style.less
#bg-color: #484848;
.header{
background: #bg-color;
}
I want to update #bg-color: #484848; present in the style.less file to some value input by user. How can I get this using AngularJS.
You should run Less in browser to do this. If you load less.js in your HTML, the global less object come available, so you can use less.modifyVars() and less.refreshStyles() inside your angularJS code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example78-production</title>
<link rel="stylesheet/less" type="text/css" href="color.less" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.3.1/less.min.js"></script>
</head>
<body ng-app="submitExample">
<script>
angular.module('submitExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.list = [];
$scope.text = 'orange';
$scope.submit = function() {
if ($scope.text) {
less.modifyVars({ color : $scope.text });
}
};
}]);
</script>
<h1>Colored text</h1>
<form ng-submit="submit()" ng-controller="ExampleController">
Enter text and hit enter:
<input type="text" ng-model="text" name="text" />
<input type="submit" id="submit" value="Submit" />
</form>
</body>
</html>
See: http://plnkr.co/5b1HTkneFXLMGVvXEG8j http://plnkr.co/edit/Z9tRY3Lol31PMnPUfxQi
Related
https://alligator.io/vuejs/stripe-elements-vue-integration/
On this website, it says we need to import the file with the script tag in the index.html file, which I did, but I noticed I get a js error.
It's only when I imported directly the script inside the component that the error "'Stripe' is not defined" disappeared.
<template>
<div>
</div>
</template>
<script src="https://js.stripe.com/v3/"></script>
<script>
export default {
name: 'component',
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
I don't want to import it directly inside my component, because it's not clean, what can I do?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://js.stripe.com/v3/"></script>
<title>vue-app</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Late to the party, but here is a solution that works for me
Your index.html file looks fine:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://js.stripe.com/v3/"></script>
<title>vue-app</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Then in the component where you want to use it, you can access stripe with the window object, and set the publishable key. This can be done locally in a method, or globally for the component, like this:
<script>
const stripe = window.Stripe(process.env.VUE_APP_STRIPE_PK)
export default {
data() {
return {
// ...
}
},
methods: {
async confirmPayment() {
const paymentResult = await stripe.confirmCardPayment(this.clientSecret, {
receipt_email: 'email#example.com',
})
console.log('paymentResult:', paymentResult)
},
},
}
</script>
I think you should move the script tag of Stripe before the rest of your JavaScript code. The code is probably trying to access the Stripe object before it's been loaded.
I am in process of learning so kindly help me to do how the retrieval of table from mysql in ibm mobile first by just clicking an button from my html page. I have tried but not working help please
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>vikdemodb</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<!--
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
-->
<link rel="stylesheet" href="css/main.css">
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body style="display: none;">
<!--application UI goes here-->
<div id="header">
<h1>database Demo</h1>
</div>
<div id="wrapper">
<input type="button" id="databasecon" value="click me to get data from db" /><br />
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
My main.js
function wlCommonInit(){
$('#databasecon').click(loadSQLRecords);
}
function loadSQLRecords(){
var invocationData = {
adapter : 'vikadap',
procedure : 'getstudinfo',
parameters : []
};
WL.Client.invokeProcedure(invocationData,{
onSuccess : loadSQLQuerySuccess,
onFailure : loadSQLQueryFailure
});
}
function loadSQLQuerySuccess(result){
window.alert("success");
console.log("Retrieve success" + result);
console.log(result.invocationResult.resultSet);
}
function loadSQLQueryFailure(result){
WL.Logger.error("Retrieve failure");
}
You have a button in your HTML:
<input type="button" id="databasecon" value="click me to get data from db" />
You handle this button in wlCommonInit():
$('#databasecon').click(loadSQLRecords);
In loadSQLRecords() you call an adapter procedure to retrieve data from the database. If this operation succeeds then it calls the loadSQLQuerySuccess callback function.
It is this function that you are supposed to handle the display of the response from the backend (your database). But what are you doing? You only print to the console the response. You do not handle at all, displaying it in the application - in the HTML.
So in your HTML, you need to prepare a place holder that you will append the result into. For example: <table id="mytable"></table>
Then you need to populate the table with the data...
So in loadSQLQuerySuccess, you could for example do the following... this is where you need to learn HTML and JavaScript to accomplish what YOU want it to look like:
function loadFeedsSuccess(result) {
if (result.invocationResult.resultSet.length > 0)
displayFeeds(result.invocationResult.resultSet);
else
loadFeedsFailure();
}
function loadFeedsFailure() {
alert ("failure");
}
function displayFeeds(result) {
for (var i = 0; i < result.length; i++) {
$("#mytable").append("<tr><td>" + result[i].firstName + "</td></tr>");
$("#mytable").append("<tr><td>" + result[i].lastName + "</td></tr>");
}
}
Note that you need to create your own code in the for loop to make it look like how you want it to look, and of course append your own properties from the database, instead of "firstName" and "lastName".
I am trying to open a simple modal dialog and I have been struggling to do this. Can
any one please help? This is the HTML code(please remove pre). This simply doesnot work.
Can any one please tell **strong text**me why? I have not been getting the kind of output that I really
need.
Any one help me.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/magnific-popup.css" rel="stylesheet" />
<script src="js/jquery.magnific-popup.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
</head>
<body>
<a class="popup-modal" href="#test-modal">Open modal</a>
<div id="test-modal" class="white-popup-block mfp-hide">
<h1>Modal dialog</h1>
<p>You won't be able to dismiss this by usual means (escape or
click button), but you can close it programatically based on
user choices or actions.</p>
<p><a class="popup-modal-dismiss" href="#">Dismiss</a></p>
</div>
<script>
$(function () {
$('.popup-modal').magnificPopup({
type: 'inline',
preloader: false,
focus: '#username',
modal: true
});
$(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
});
});
</script>
</body>
</html>
Load jquery before the magnific-popup plugin, it relies on jquery (I've never used it but I'm assuming so seeeing as it is pre-appended withfixed 'jquery')
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/magnific-popup.css" rel="stylesheet" />
<!-- Jquery loaded first here... -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
<!-- Plugins after... -->
<script src="js/jquery.magnific-popup.js"></script>
</head>
<body>
I am having trouble getting a reference to the dijit form widget when the form contains a DateTextBox. The code snippet below demonstrates the problem. When executed, the alert box says "undefined". However, if I get rid of <input ... id="dateTextBox"... />, I am able to get a reference to the form widget.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css" media="screen">
<!-- load dojo and provide config via data attribute -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"
data-dojo-config="async: true, parseOnLoad: true">
</script>
<script type="text/javascript">
require(["dijit/form/TextBox", "dijit/form/DateTextBox"]);
</script>
<script type="text/javascript">
require(["dojo/parser", "dijit/registry", "dijit/form/Form", "dojo/domReady!"],
function(parser, registry) {
parser.parse();
alert(registry.byId("frm_test"));
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/form/Form" id="frm_test" encType="multipart/form-data" action="" method="">
<input type="text" id="textBox" name="textBox" data-dojo-type="dijit/form/TextBox" />
<input type="text" id="dateTextBox" name="dateTextBox" data-dojo-type="dijit/form/DateTextBox" />
</div>
</body>
</html>
I'd recommend wrapping the registry.byId into a ready call.
Keep parse onLoad: true, remove
require(["dijit/form/TextBox", "dijit/form/DateTextBox"]);
as the parser will auto require (when dojo>= 1.8) and use the following:
<script type="text/javascript">
require(["dojo/ready", "dijit/registry", "dojo/domReady!"],
function(ready, registry) {
// by default the prioirty of this ready call will be after the
// ready call used to parse when parseOnLoad is true
ready(function() {
alert(registry.byId("frm_test"));
});
});
</script>
Note that waiting for dojo/domReady! to fire is often not sufficient
when working with widgets. Many widgets shouldn’t be initialized or
accessed until the following modules load and execute:
dojo/uacss
dijit/hccss
dojo/parser
Thus when working with widgets you should generally put your code
inside of a dojo/ready() callback
http://dojotoolkit.org/reference-guide/1.9/dojo/domReady.html
http://dojotoolkit.org/reference-guide/1.9/dojo/ready.html#dojo-ready
I have downloaded dojo build, now I have an doubt, in the below example code, I am using "dojo.js.uncompressed.js" as a start of source file, is it right? Just I want to display a button in the web page. Which one is the start file? in dojo library.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
<head>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="../dojo/lib/dojo/dojo.js.uncompressed.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.form.Button");
dojo.addOnLoad(function() {
// Create a button programmatically:
var button = new dijit.form.Button({
label: "Click me!",
onClick: function() {
// Do something:
dojo.byId("result1").innerHTML += "Thank you! ";
}
},
"progButtonNode");
});
</script>
<link rel="stylesheet" type="text/css" href="../dojo/lib/dijit/themes/claro/claro.css" />
</head>
<body class=" claro ">
<button id="progButtonNode" type="button">
</button>
<div id="result1">
</div>
<!-- NOTE: the following script tag is not intended for usage in real
world!! it is part of the CodeGlass and you should just remove it when
you use the code -->
<script type="text/javascript">
dojo.addOnLoad(function() {
if (document.pub) {
document.pub();
}
});
</script>
</body>
</html>
dojo (and any js file) should be put next to your html files so that it is served by the server. Then you don't have to relate to long relative paths