Im trying to get jscolor (http://jscolor.com/) to work on my meteor app.
The jscolor.js javascript file is located at:
client/lib/jscolor.js
Now when I put an input element with class jscolor in my main.html like:
<head>
<title>Meteor Site</title>
</head>
<body>
<input class="jscolor" value="ab2567">
</body>
it works! But as soon as I put it inside a template which is controlled by the iron router, settings for instance:
<template name="settings">
Settings
<input class="jscolor" value="ab2567">
</template>
It does nothing and it stay a regular input field. Do I need to pass the javascript file to a template somehow or do I need to make it global? Hope someone can help me out?
meteor add risul:bootstrap-colorpicker
html file
<template name="hello">
<input type="text" class="demo1" value="#5367ce" />
</template>
js file
Template.hello.rendered = function() {
$('.demo1').colorpicker();
}
Related
hey this is an edited version of my first post:
Pretty much what I want to do is have a text input box that stores its contents in a javascript variable. The catch is I want it to happen live, so the variable will update automatically say, ever .2 seconds without the user needing to press a submit button. Thanks
Are you looking for the two way data binding? Something like this: https://codepen.io/manishiitg/embed/ZYOmbB?
<html>
<head>
<script src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
<script>
var mainMod = angular.module('MainApp', []);
mainMod.controller('MainCtrl', function ($scope) {
$scope.text = '';
});
</script>
</head>
<body ng-app='MainApp'>
<div ng-controller='MainCtrl'>
<div>
Change Text Here:
<input type='text' ng-model='text' />
</div>
<div>
<p>Text: {{text}}</p>
</div>
</div>
</body>
<html>
You can achieve that with Angular, React and Vue.js framework, even with jQuery. Perhaps you should try one of the frameworks that solves your needs quickly.
If you choose Angular, I recommend you to make the tutorial steps, specially this part: https://angular.io/tutorial/toh-pt1#two-way-binding
I have a dropdown menu and want to write data to a field when clicked. I have tested it with regular tags but I am having trouble with the syntax when I am testing a tag from a PLC that is named 'mytag' with these '' around it .
In the HTML document, I have to tell the program that the particular tag is both read and write by doing this:
<!-- AWP_In_Variable Name="webdata".'mytag' -->
'"webdata".mytag' is a tricky name, so I made an alias named 'mytag':
<!-- AWP_In_Variable Name="webdata" -->
<!-- AWP_In_Variable Name='Fortype' Use='"webdata".mytag' -->
Here is an example for a typical application of the tag where it works using it:
:=mytag:
<form method="post">
<input name='mytag' type="text" size=2 />
<button type="submit">Save</button>
</form>
The code for setting values by click works with regular tags like this:
$("#id_from_dropdown_menu").click(function() {
$("#myval").html("10");
});
But the code does not work when I try to use 'mytag', I think it is because of the '' signs.
$("#id_from_dropdown_menu").click(function() {
$("#mytag").html("10");
});
ANY TIPS?
NO worries! Figured it out. Leave post of you get similar problems :)
Is there a way to force Angular to recognize an expression with a variable inside a script tag? For reasons beyond my control, this is sort of how I have to run things.
<div ng-app="testApp">
<input type="text" ng-model="testvar" />
<input type="button" onclick="clickFn()" value="Test" />
<script type="text/javascript">
window.clickFn = function() {
console.log('{{testvar}}');
}
</script>
</div>
with just a basic app invocation
var app = angular.module('testApp', []);
Basically I want to be able to utilize an angular variable within a basic function that's not bound to the app, even though the script tag that calls the function is housed within the app. I know this is not the best of practices, but I think it's the only solution for my problem. Any other solutions are also welcome. Thanks!
Fiddle for playing
If we are going to hell, why not do it in style?
<div ng-app="testApp">
<input type="text" ng-model="testvar" />
<input type="button" onclick="clickFn()" value="Test" />
<p id="testvar" style="display:none">
{{testvar}}
</p>
<script type="text/javascript">
window.clickFn = function() {
console.log(document.getElementById("testvar").innerHTML);
}
</script>
</div>
Bind that variable to the DOM, and then shamelessly read in the textContent or innerHTML depending on target browser.
Here is your fiddle back: https://jsfiddle.net/8kpfu42w/2/
I am learning Angular JS and I am stuck at a pretty basic step.
Here is my test code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
function enable()
{
$("#test_model").attr("data-ng-model", "test");
$("#test_bind").attr("data-ng-bind", "test");
};
</script>
</head>
<body>
<div data-ng-app="">
<div>
<input type=text id=test_model />
</div>
<div>
<p id=test_bind></p>
</div>
<button onclick=enable()>Enable</button>
</div>
</body>
</html>
Here, what I expect to happen is, when the Enable button is clicked, it should enable the bind, and so if anything is typed into the #test_model input, it should update #test_bind paragraph. But it is not working.
I can see with Firebug that the attributes (data-ng-model and data-ng-bind) are being updated when the Enable button is clicked, but it is not taking effect as it would if it were statically coded (hard-coding the model and bind parameters).
If I code it statically, then I notice that 3 new classes (ng-pristine, ng-untouched and ng-valid) are automatically added to #test_model and one new class (ng-binding) is added to #test_bind. So I changed my enable() function to this:
function enable()
{
$("#test_model").attr("data-ng-model", "test");
$("#test_bind").attr("data-ng-bind", "test");
$("#test_model").addClass("ng-pristine");
$("#test_model").addClass("ng-untouched");
$("#test_model").addClass("ng-valid");
$("#test_bind").addClass("ng-binding");
};
But still, not working.
What am I missing?
If you want to dynamically add Angular directives like ng-model, ng-bind etc.
you must create your own directive and use $compile.
You can use angular ng-show or ng-switch to switch showing DOM elements without bindings and elements with ng-model and other attributes that you need.
I often have this problem with jquery and meteor, I get a undefined is not a function, and I just cant figure out why.
Here is my code for pagedown-bootstrap package i installed. WRONG LINK this is the right source
Template.postSubmit.rendered = function () {
$("textarea#pagedownMe").pagedownBootstrap();
};
My html template
<template name="postSubmit">
<form class="submitForm">
<label for="date">Date</label>
<input name="date" type="text" value="" placeholder="Date"/>
<label for ="title">Title</label>
<input name ="title" type="text" value="" placeholder="title"/>
<label for="content">Content</label>
<textarea id="pagedownMe" name="content" class="form-control" rows="10">
This is the *first* editor.
------------------------------
Just plain **Markdown**, except that the input is sanitized:
<marquee>I'm the ghost from the past!</marquee>
</textarea>
<input type="submit" value="Submit" />
</form>
</template>
The error I am getting
Exception from Deps afterFlush function function: TypeError: undefined is not a function
at Object.Template.postSubmit.rendered (http://localhost:3000/client/postsPagedown.js?05d5727bffc4120f5b1e1765e9451a7571bbd788:5:26)
at http://localhost:3000/packages/ui.js?f0696b7e9407b8f11e5838e7e7820e9b6d7fc92f:426:23
at _assign.flush (http://localhost:3000/packages/deps.js?91f1235baecd83915f7d3a7328526dbba41482be:345:13)
Pacakges from atmosphere
main package pagedown-bootstrap dependant marked
It looks like you need to convert the package to work with meteor. The main thing to do is un-variable scope the main variables.
You need to look for files which have variables that are accessed by other variables. Here are two questions that go over the basics of what meteor does and how to get passed it
I would suggest you make it a Meteor package that contains the pagedown package with the variables modified to be global. This way you can namespace the project away from your app and still have it work.
This is a good tutorial on how to make a package: http://www.vintyge.com/blog/2012/12/creating-a-basic-meteorite-smart-package
Sorry about all the links but looking at the package's source it wont be as simple as just copying and pasting it in.
Shortcut but slightly weird way.
You can place the packages files in /client/compatibility. Though you may have to rename the files so they load in the correct order. Meteor loads files alphabetically, so you would have to rename the first file a.js (Markdown.Converter.js - I think) and the next b.js
I was using the wrong code, I looked at the wrong resource.
JS
$(function () {
var converter = new Markdown.Converter();
var editor = new Markdown.Editor(converter);
editor.run();
HTML
<div class="wmd-panel">
<div id="wmd-button-bar">
</div>
<textarea class="wmd-input" id="wmd-input">
This is the *first* editor.
------------------------------
Just plain **Markdown**, except that the input is sanitized:
<marquee>I'm the ghost from the past!</marquee>
</textarea>
</div>
<div id="wmd-preview" class="wmd-panel wmd-preview">
</div>