Develop Reference

Ng-Joyride not working

I'm currently trying to get ng-joyride to work, but it actually doesn't seem to want to do what I want it to do....
I have the following setup:
HTML:
<!--some content-->
<div class="hide" ng-joy-ride="$ctrl.startJoyRide" config="$ctrl.config" on-finish="$ctrl.onFinish()" on-skip="$ctrl.onFinish()"></div>
<button type="button" class="btn btn-default" ng-click="$ctrl.test()">Start Joyride</button>
JS:
class Controller {
constructor() {
this.config = [
{
type: "title",
heading: "Welcome to the NG-Joyride demo",
text: '<div class="row"><div id="title-text" class="col-md-12"><span class="main-text">Welcome to <strong>Ng Joyride Demo</strong></span><br><span>( This demo will walk you through the features of Ng-Joyride. )</span><br/><br/><span class="small"><em>This can have custom html too !!!</em></span></div></div>'
}
];
this.startJoyRide = false;
}
test(){
this.startJoyRide=true;
}
}
export default Controller;
So I have a config as simple as could be but it's not showing anything at all, when I click on the button...
Also (when clicking the button), I'm getting a error in console, saying
$fkEl.size is not a function.
Does anybody see a mistake here, or knows why it's not working?

This has been noted – but not yet fixed – here: https://github.com/abhikmitra/ng-joyride/issues/67
TL:DR; the dev hasn't yet updated it to jquery 3 yet.
Until he does, you'll have to change the .size() to .length, and make sure you're using an earlier version of jQuery – I'm using 2.2.4 – just downgrading might make the difference.
Good luck!

unable to get iris colorpicker on jsfiddle

http://jsfiddle.net/zu5uv650/4/
In my HTML window I have this:
<input type="text" id='color-picker' value="#bada55" />
In my JS window I have this:
jQuery(document).ready(function($){
$('#color-picker').iris();
});
I'm using jQuery 2.1.0 as my framework and am using the following external resources:
http://automattic.github.io/Iris/javascripts/iris.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js
https://cdn.rawgit.com/Automattic/Iris/master/src/iris.css
...and I'm getting a Uncaught TypeError: undefined is not a function error. Any ideas?
Also, jquery UI has a CSS component too. Does jsfiddle.net really not have the ability to auto include JQuery UI?

Your load order is incorrect: jQuery UI should come before the iris.min.js file. Fiddle.
jquery-ui.min.js
iris.min.js
iris.css

javascript variable undefined or null

couldn't find a specfic answer elsewhere. I'm totally new to JS and trying to pull a value out of a form and write it to the page. The result when I try to write ProductName is undefined, and when I try to write ProductNameElement is null. I'm sure it's to do with the form values being empty when the page loads but not sure after that...
<script>
var ProductNameElement = document.getElementById("ProductName");
var ProductName = ProductNameElement.value;
function showname(){
document.write(ProductName);
}
</script>
<h2>Revenues</h2>
<div class="number">Product Name: <input type="text" id="ProductName" value=""></input></div>
<input type="button" value"showname" onclick="showname();"></input>

You are running the first two lines of your script too early BEFORE the elements in your page have been parsed and placed into the DOM. Because of that, the ProductName element doesn't exist yet when you're trying to find it with document.getElementById("ProductName");.
Place your script right before the </body> tag and then all your page elements will be available when you run your script. Or, just put all your code in the showname function that isn't called until the click event.
function showname(){
var ProductNameElement = document.getElementById("ProductName");
var ProductName = ProductNameElement.value;
document.write(ProductName);
}
And, as others have said, using document.write() after the documented has been loaded will cause the existing document to be cleared and a new empty document will be created. This is pretty much never what you want. If you're just doing this for debugging, use console.log(ProductName) and look at the debug console.

You'll have to get the element and the value inside the function, otherwise they aren't available, and the change of the value isn't caught
<script>
function showname(){
var ProductNameElement = document.getElementById("ProductName");
var ProductName = ProductNameElement.value;
document.write(ProductName);
}
</script>
<h2>Revenues</h2>
<div class="number">
Product Name: <input type="text" id="ProductName" value="" />
</div>
<input type="button" value"showname" onclick="showname();" />
FIDDLE
And inputs are self closing, and you should stop using document.write, it will overwrite the entire document and remove everything that is currently there !

why is $(this).data('mycontrol') undefined?

Unfortunately my front end skills are lacking as my role puts me more on the server side / db technologies as opposed to css / js. In any event, I am trying to implement this:
https://github.com/blueimp/jQuery-File-Upload/wiki/Complete-code-example-using-blueimp-jQuery-file-upload-control-in-Asp.Net.
And more specifically I was able to find an asp.net example here:
http://www.webtrendset.com/2011/06/22/complete-code-example-for-using-blueimp-jquery-file-upload-control-in-asp-net/
Basically allowing you to do mass image uploads.
I've set up the front end with the correct css and js files. I had to modify some of the js files to make use of on() instead of live() as live is deprecated. My form loads and looks like the following:
So far so good, however, as soon as I "Add file" or drag and drop a file chrome developer tools tells me the following:
Uncaught TypeError: Cannot read property '_adjustMaxNumberOfFiles' of undefined
It specifies the file as jquery.fileupload-ui.js and more specifically points me to this:
var that = $(this).data('fileupload');
that._adjustMaxNumberOfFiles(-data.files.length);
I alerted that and of course it seems to be undefined...But I don't know enough jquery to understand why it is undefined. My fileupload div markup was as follows:
<div id="fileupload">
<form action="/Handler.ashx" method="POST" enctype="multipart/form-data">
<div class="fileupload-buttonbar">
<label class="fileinput-button">
<span>Add files...</span>
<input id="file" type="file" name="files[]" multiple>
</label>
<button type="submit" class="start">Start upload</button>
<button type="reset" class="cancel">Cancel upload</button>
<button type="button" class="delete">Delete files</button>
</div>
</form>
<div class="fileupload-content">
<table class="files"></table>
<div class="fileupload-progressbar"></div>
</div>
</div>
So what could be causing this to be undefined? This is what _adjustMaxNumberOfFiles does
_adjustMaxNumberOfFiles: function (operand) {
if (typeof this.options.maxNumberOfFiles === 'number') {
this.options.maxNumberOfFiles += operand;
if (this.options.maxNumberOfFiles < 1) {
this._disableFileInputButton();
} else {
this._enableFileInputButton();
}
}
},
I'm using jquery 2.0.3 and jquery ui 1.10.3
Update
I've gotten it down to the point that the example link which I posted (2nd link above) the only difference is the version of jquery they are using, appears to be 1.8.2 and I am using 2.0.3. The difference and problem is this piece of code:
var that = $(this).data('fileupload');
In the example download this returns some strange object:
a.(anonymous function).(anonymous function) {element: e.fn.e.init[1], options: Object, _sequence: Object, _total: 0, _loaded: 0…}
In my version (using 2.0.3) I am getting undefined for this:
var that = $(this).data('fileupload');
Is there another way I can do this one line of code?

After much playing around in the console window I got it with this:
var that = $("#fileupload").data('blueimpUI-fileupload');
So for anyone that is using anything > jQuery 1.8 please change this line:
var that = $(this).data('fileupload');
to this:
var that = $("#fileupload").data('blueimpUI-fileupload');

How are you initializing the plugin? The issue might be your selector. Target the form itself, vs. the wrapping div.
Based on your html...
Try changing: $('#fileupload').fileupload({ /*options*/ });
To: $('#fileupload form').fileupload({ /*options*/ });
Also, you may have to move your .fileupload-content div inside of the form tag as well.

Get value of textbox input: Uncaught TypeError: Cannot call method 'val' of null

I have a form input that looks like this:
<input type="text" name="params[well]" id="params_well" value="#f8f8f8" placeholder="#rrggbb" class="minicolors minicolors-input" data-position="right" data-control="hue" size="7" maxlength="7">
and javascript like this:
var params_well = $("#params_well").val();
and getting this error:
Uncaught TypeError: Cannot call method 'val' of null
I really cant proceed with anything else till i figure this out

Try this
$(document).ready(function(){
var params_well = $("#params_well").val();
});
Or put this on bottom of your page
var params_well = $("#params_well").val();

Assuming the jQuery is integrated correctly, you probably trying to access before element is being added to DOM. Your code is working fine.
Live Demo
$(document).ready(function(){
var params_well = $("#params_well").val();
});
You can include jQuery using script tag, also worth going through this post.
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>