Develop Reference

Integrate monaco-yaml with monaco-editor

I am trying to get use of all monaco-eaditor features, so I will combine the monaco-diff editor with monaco-yaml plugin.
I was able to build the monaco-diff editor following this
https://microsoft.github.io/monaco-editor/playground.html#creating-the-diffeditor-hello-diff-world.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/editor/editor.main.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/loader.js"></script>
<script>
require.config({ paths: {'vs': 'https://unpkg.com/monaco-editor#0.20.0/min/vs'}});
window.MonacoEnvironment = { getWorkerUrl: () => proxy }
let proxy = URL.createObjectURL(new Blob([`
self.MonacoEnvironment = {
baseUrl: 'https://unpkg.com/monaco-editor#0.20.0/min/'
};
importScripts('https://unpkg.com/monaco-editor#0.20.0/min/vs/base/worker/workerMain.js');
`], { type: 'yaml' }));
require([
'vs/editor/editor.main'
], function () {
var lhsModel = monaco.editor.createModel(value, 'yaml');
var rhsModel = monaco.editor.createModel(value, 'yaml');
diffEditor = monaco.editor.createDiffEditor(document.getElementById('diff-editor'), {
enableSplitViewResizing: false,
});
diffEditor.setModel({
original: lhsModel,
modified: rhsModel
});
</script>
However I am not able to find a tutorial to add the monaco-yaml, can someone provide me with a link,tutorial or any useful steps ?

Treeview onNodeSelected not firing

Im using the Jon Miles treeview from https://github.com/jonmiles/bootstrap-treeview
I have generated a JSON data structure and the treeview displays nicely, however I cannot make the onNodeSelected event fire.
JS:
<script src="~/Scripts/jquery-3.1.1.js"></script>
<script src="~/Scripts/bootstrap-treeview.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script>
$(function () {
var defaultData = #Html.Raw(broadcaster.GetTreeViewData()); //Getting data from C# data structure
$('#tree').treeview({
color: "#428bca",
data: defaultData,
levels: 2
});
});
$('#tree').treeview({
onNodeSelected: function(event, data) {
alert('selected:')
}});
</script>
HTML:
<li>
<div id="tree"></div>
</li>
edit:
also tried the jQuery on()but no luck - nothing happens.
$('#tree').on('nodeSelected', function(event, data) {
alert('selected:')

you are initializing nodes 2 times..
it should be like this...
$(function () {
var defaultData = #Html.Raw(broadcaster.GetTreeViewData()); //Getting data from C# data structure
$('#tree').treeview({
color: "#428bca",
data: defaultData,
levels: 2,
onNodeSelected: function(event, data) {
alert('selected:')
}
});
});

ASP.NET MVC5 Select2 not working

This is my first message in this forum, thanks in advance for your help and sorry if I make a bigger mistake here.
I'm trying to implement a select2 JQuery autocomplete combobox.
I copy some code and I can't see where is my mistake, but the edit text looks like a normal Edit text instead change as a Select2, the JavaScrypt is not working for some reason.
Here is my code:
The references in my indexcshtml:
<link href="~/Content/css/select2.css" type="text/css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.1.0.js"></script>
<script src="~/Scripts/select2.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
my textbox who should be converted in a Combobox like cyndarela !
#using (Html.BeginForm())
{
#Html.TextBoxFor(a => a.SupplierId, new { id = "supplier" }) #Html.ValidationMessageFor(a => a.SupplierId)
<br />
<button type="submit">Submit</button>
}
and at the end my JavaScrypt:
<script >
$(document).ready(function () {
var pageSize = 20;
var optionListUrl = '#Url.Action("GetProducts", "Purchases")';
//Method which is to be called for populating options in dropdown //dynamically
$('#supplier').select2(
{
ajax: {
delay: 150,
url: optionListUrl,
//url: '/Purchases/GetProducts',
dataType: 'json',
data: function (params) {
params.page = params.page || 1;
return {
searchTerm: params.term,
pageSize: pageSize,
pageNumber: params.page
};
},
processResults: function (data, params) {
params.page = params.page || 1;
return {
results: data.Results,
pagination: {
more: (params.page * pageSize) < data.Total
}
};
}
},
placeholder: "-- Select --",
minimumInputLength: 0,
allowClear: true,
});
});
</script>
is like #supplier is not working in the script
Thanks for your time guys !

I had the same issue.
The instruction
#Scripts.Render("~/bundles/scripts")
In your layout view includes all your scripts and they sometimes have some instructions that dispose the .send2()
So you can delete that line and just import the scripts .js files that you need including select2.

Parse not working in jQuery

I'm trying to make a website that uses parse. My java script will be shown below. The js is linked and I've made sure to include
<script src="//www.parsecdn.com/js/parse-1.6.12.min.js"></script>
in the html. My js :
$(document).ready(function() {
Parse.initialize("assumeisright", "assumeisright");
var TestObject = Parse.Object.extend("TestObject");
var testObject = new TestObject();
testObject.save({
foo: "bar"
}).then(function(object) {
alert("yay! it worked cash muni");
});
$("div").hover(
function() {
$(this).addClass("active");
},
function() {
$(this).removeClass("active");
}
);
Parse.Push.send({
channels: ["Everyone"],
data: {
alert: "First Push"
}
}, {
success: function() {
// Push was successful
},
error: function(error) {
// Handle error
}
});
});
This doesn't work because in my html my div doesn't change when I hover so I'm assuming the Parse crashed. Any ideas of how to fix this, am I doing something wrong?
Thanks

As you are using jquery so you need to import that library as well, so final code will be something like this
<!doctype html>
<html>
<head>
<style>
</style>
<script src="http://www.parsecdn.com/js/parse-1.6.12.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
Parse.initialize("assumeisright", "assumeisright");
var TestObject = Parse.Object.extend("TestObject");
var testObject = new TestObject();
testObject.save({
foo: "bar"
}).then(function(object) {
alert("yay! it worked cash muni");
});
$("div").hover(
function() {
console.log('add');
$(this).addClass("active");
},
function() {
$(this).removeClass("active");
}
);
Parse.Push.send({
channels: ["Everyone"],
data: {
alert: "First Push"
}
}, {
success: function() {
// Push was successful
},
error: function(error) {
// Handle error
}
});
});
</script>
</head>
<body>
<div>
<p>Hello</p>
</div>
</body>
</html>
On hover i have added console.log('add') just to test if hover is working fine, it outputs add when you hover over div
$("div").hover(
function() {
console.log('add');
$(this).addClass("active");
},
Always check your browser console for errors

Jquery Custom Parser Not working

I have a table which have input field in the 2 nd column (1st if started with index 0). It works fine and sort all regular columns except the column which have textboxes. Here's what I've,
Javascript Code
<script src="jQuery-2.1.4.min.js"></script>
<script type="text/javascript" src="jquery.tablesorter.min.js"></script>
<script>
$('#ordertbldata').tablesorter({
headers: {
1: {
sorter: 'textbox_text'
}
}
});
$.tablesorter.addParser({
id: 'textbox_text',
is: function(s) {
console.log('function is called');
return false;
},
format: function(s) {
console.log('function format called');
return $($.trim(s)).val();
},
type: "text"
});
</script>
I've added log function to debug but the function isn't called. What's wrong I'm doing here ?
UPDATE : Fiddle here

Your demo was declaring the parser after initializing the plugin.
Seems to work well with this configuration
$.tablesorter.addParser({
id: 'textbox_text',
is: function(s) {
return false;
},
format: function(s,table, el) {
return $.trim($(el).find('input').val().toLowerCase());
},
type: "text",
parsed: true,
});
DEMO