Develop Reference

Getting started with guppy wyswyg javascript plugin

Im trying to use guppy wyswyg javascript plugin for mathematical expressions rendering. I went to its basic example at its webpage https://guppy.js.org/site/examples/basic/, but i cant deploy it at my local xampp proyect.
According to the example, i already set these dependencies (different paths in my proyect):
<link rel="stylesheet" href="localhost/lib/build/guppy-default.min.css">
<script type="text/javascript" src="../../../build/guppy.min.js"></script>
And then this:
Guppy.init(
{
"path":"http://localhost/lib/guppy",
"symbols":"http://localhost/lib/guppy/sym/symbols.json"
}
);
Finally this:
<input type="text" id="myinputtypeelementid" placeholder="Type math here" >
var g1 = new Guppy("myinputtypeelementid");
I just can see this:
Does anybody know what else i need to do?

Issue solved:
It just needed use a <div> tag with the right id instead o a <input> tag. Now it works ! I reply myself in case anybody gets benefit of this issue i faced.

How to you get the contents of an iFrame to insert into a database?

I have created a wysiwyg text editor using an iframe and am trying to save the contents of this.
The HTML for my iframe is:
<iframe name="richTextField" id="wysiwyg" src="page?page_id=3"></iframe>
I am then using a hidden input to submit this to the database:
<input type="hidden" id="text_content" name="text_content" value="">
I am trying to get the contents of this into the value of the input field using JS like this:
$text_content = #wysiwyg.document.getElementsByTagName('body')[0].textContent;
$("#text_content").attr("value", $text_content);
If I set $text_content to just a random string it will work but it won't get the contents of the iframe.
I have tried $("#wysiwyg document body").textContent, #wysiwyg.document.getElementsByTagName('body')[0].textContent and richTextField.document.getElementsByTagName('body')[0].textContent.
richTextField.document.getElementsByTagName('body')[0].textContent is actually what I used in the JS for toggling to the source but it will not work when trying to set it as a variable.
Should I be trying to do something like php serialize() to get this as a variable I can work with? Or are the terms I've tried as my selectors just wrong? Any help with this will be greatly appreciated.

For future reference, this is what I used:
richTextField.document.getElementsByTagName('body')[0].innerHTML;

Using AngularJS code in template property of kendo window

I am using kendo window with AngularJS in the following way.
HTML Code
<div kendo-window="showProspectDetailWindow" k-title="'Prospect Detail window'"
k-width="" k-height="" k-visible="false"
k-content="{template:confirmationWindowTemplate}"
k-on-open="" k-on-close=""></div>
JavaScript Code
$scope.confirmationWindowTemplate = 'Are you sure you want to delete?<br />This data will not be recoverable, do you want to continue ?<br /><div class="pull-right"><button class="k-primary" ng-click = "yesButton()">Yes</button><button class="k-button" ng-click="noButton()"> No</button></div>';
I have created a model in the script in the following way
$scope.createProspectDetailModel = function(data)
{
$scope.prospectDetail.AccountId = data.AccountId;
$scope.prospectDetail.BusinessType = data.BusinessType;
$scope.prospectDetail.FirstName= data.FirstName;
}
The above code works. With the help of debugger I can verify that the values from the data field are going into each of the $scope.prospectDetail value. However, when I change my template into
$scope.confirmationWindowTemplate = 'Are you sure you want to delete {{prospectdetail.FirstName}}'
It doesn't work. I also tried
$scope.confirmationWindowTemplate = 'Are you sure you want to delete {{#= prospectdetail.FirstName #}}'
but it doesn't work as well. I have referred this link on SO but didn't help. I have searched a lot but still cannot find the solution to this. Any help would be appreciated.

Ok. I found the answer myself. I changed the HTML Code . Removed the k-content
<div kendo-window="confirmationWindow" k-title="'Confirmation window'"
k-width="" k-height="" k-visible="false"
k-on-open="" k-on-close=""></div>
and assigned it in the script
$scope.confirmationWindow.content('Are you sure you want to delete'+ $scope.prospectDetail.FirstName '?<br />

How to copy file path in to span in addition to the input control itself?

So far I tried this:
JS:
function Copy(copyfrom, copyto) {
document.getElementById(copyto).value = copyfrom.value;
}
And HTML code look like this:
<div>
<input type="file" onchange="Copy(this, 'txtFileName');" />
</div>
<div>
<span id="txtFileName" type="text" readonly="readonly" />
</div>
I want To copy the selected file name/path to different span,
Thanks!

From Joe Enos answer you don't need to get server path
Some browsers have a security feature that prevents javascript from
knowing your file's local full path. It makes sense - as a client, you
don't want the server to know your local machine's filesystem. It
would be nice if all browsers did this.
And to get the name of file, try to use innerText property of span instead of value as value works on form element fields try this,
function Copy(copyfrom, copyto) {
document.getElementById(copyto).innerText = copyfrom.value;
}
Working demo

<input type="file"..> will not show textbox in chrome and safri browser, you can configure the display styles by CSS itself, go to the link here

This is not possible due to security reasons.
For more details, see: How to get full path of selected file on change of <input type=‘file’> using javascript, jquery-ajax?

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.