We Keep Coding

Meteor froala:editor-reactive save on change of data

I have Meteor project which uses the froala:editor-reactive package in order to set the user's about me field.
Here is my template js code:
Template.profile.helpers({
getAbout: function() {
return Meteor.user().profile.about;
},
doSave: function (e, editor) {
// Get edited HTML from Froala-Editor
var newHTML = editor.getHTML();
// Do something to update the edited value provided by the Froala-Editor plugin, if it has changed:
if (!_.isEqual(newHTML, Meteor.user().profile.about)) {
Meteor.call("updateTestimony", Meteor.userId(), newHTML);
}
return false; // Stop Froala Editor from POSTing to the Save URL
}
}
Here is my template html code:
<template name="profile">
<div>
{{> froalaReactive _onbeforeSave=doSave _value=getAbout}}
</div>
</template>
It's supposed to save as the value changes (I hope).
But I have an error with the line var newHTML = editor.getHTML(); and I've also tried var newHTML = editor.html.get(true);. Both of these result in an error where it cannot read the property of html or getHTML. I'm hoping this is just a syntax error and I need something else but what's wrong here?

Per the plugin docs, try:
var newHTML = editor.html.get(true /* keep_markers */);
If that doesn't work, you may possibly be using a different version. In which case, give the following syntaxes a shot:
var newHTML = $('.your_selector').editable('getHTML', true, true);
var newHTML = $('.your_selector').froalaEditor('html.get', true);
More from the official docs here and see this question.

highlight search word using jquery in MVC

I have MVC controller that returns a list containing a search string.
public ActionResult GetList(string searchString)
{
ViewData["searchString"] = searchString;
if (String.IsNullOrEmpty(searchString))
{
var persons = db.Persons.ToList();
return View(persons);
}
else{
var persons = db.Persons.Where(p=> p.Title.Contains(searchString)).ToList();
return View(persons);
}
}
In the view the list is displayed in a table. I want to highlight the searchString (or at most the td that contains the searchString). The following is my jquery where I attempted to achieve this. I have tried putting this bit of code in a separate .js script or in the view itself and I have also tried to change the code in several ways but it wouldn't work. It appears like the searchString remains null even if the content of my ViewData has changed.
$(document).ready(function () {
var textToHighligt = #ViewData["searchString"];
$("#simpleSearchButton").click(function () {
$("td:contains(textToHighligt)").css("background-color", "yellow");
});
});

I think this:
var textToHighligt = #ViewData["searchString"];
$("td:contains(textToHighligt)").css("background-color", "yellow");
should be concatenated:
var textToHighligt = '#ViewData["searchString"]'; //<---put in quotes
$("td:contains("+textToHighligt+")").css("background-color", "yellow");

I think you can do otherwise if it is not happening in the javascript file , create a hidden field and populate the value from the ViewBag
#Html.Hidden("hiddensearchString", (string)ViewBag.searchString)
For the ViewData
#Html.Hidden("FirstName", ViewData["searchString"])
and then the javascript read the value like this
var searchString = $("#hiddensearchString").val();
In you code you can also try this using of the single quote.
var textToHighligt = '#ViewData["searchString"]';

Render JSON into HTML

I get JSON data with next code:
$.getJSON(
"data.json",function foo(result) {
$.each(result[1].data.children.slice(0, 10),
function (i, post) {
$("#content").append( '<br> HTML <br>' + post.data.body_html );
}
)
}
)
<div id="content"></div>
Some of strings included : < and > and this did not displaying as regular html <, >
Try to use .html() instead .append() did not work.
Here is live example http://jsfiddle.net/u6yUN/

Just use the 3rd (space) parameter of JSON.stringify to format the json, and use <pre> tags to display.
const json = { foo: { bar: 'hello' } }
$('html').append('<pre>' + JSON.stringify(json, null, 2) + '</pre>')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

If you're looking for a nice collapsible render I've written a module to this. It's in pure JavaScript so you can use it in any framework.
mohsen1/json-formatter-js
It's also available as an AngularJS directive if you are using AngularJS
mohsen1/json-formatter
Checkout the demo here: AngularJS directive demo
It's also theme-able, so you can change the colors:

Here is whet you were asking for: Complete JSFiddle Demo
var jsonRequestUrl = 'http://www.reddit.com/r/funny/comments/1v6rrq.json';
var decoder = $('<div />');
var decodedText = '';
$.getJSON(jsonRequestUrl, function foo(result) {
var elements = result[1].data.children.slice(0, 10);
$.each(elements, function (index, value) {
decoder.html(value.data.body_html);
decodedText += decoder.text();
});
$('#content').append(decodedText);
});
Edit: Keeping this here as a simpler example.
// Encoded html
var encoded = '<div style="background:#FF0">Hello World</div>';
// Temp div to render html internally
var decode = $('<div />').html(encoded).text();
// Add rendered html to DOM
$('#output').append(decode);
DEMO

Another library that works for rendering JSON objects is: renderjson
Although it has a minimalistic style, it allows to click through the JSON structure.
Example usage:
document.getElementById("test").appendChild (renderjson (data));

You may want to give JSON2HTML a try. Works with native JavaScript, with jQuery and with node.js. Allows to completely customize the generated HTML.

Use $.parseHTML() jQuery method
var myData = "yourHtml with <" //
$("#content").append($.parseHTML(myData));
Here it is a jsfiddle: http://jsfiddle.net/x4haw/

One of the easiest way is
var t= post.data.body_html;
t.replace('&lt','<').replace('&gt', '>');
$("#content").append( '<br> HTML <br>' + t );

try this way...
var htmlString = $("<div/>").html(data).text();

jQuery .html only get last value of JSON

I have a problem with jQuery("#someID").html. It only prints the last key from the JSON.
Here is the js:
<div class="row" id="fetchmember">
<script type="text/javascript">
jQuery('#group').change(function() {
var id_group = this.value;
var memberjson = "fetchmember.php?group="+id_group;
jQuery.getJSON(memberjson, function(data) {
jQuery.each(data, function(i, items) {
jQuery("#fetchmember").html("<li>"+items.name+"</li>");
});
});
});
</script>
</div>
JSON result from one of the selected option :
[{"id":"1645819602","name":"Michael English","first_name":"Michael","last_name":"English"},
{"id":"100000251643877","name":"Bill Gaither","first_name":"Bill","last_name":"Gaither"}]
I want to print all of name from the json, but it print only last name key of the json. What's wrong with my code?
Any advice and helps would be greatly appreciated. Thank you very much

You're erasing the content on each iteration. Use append instead of html

Instead of
jQuery("#fetchmember").html("<li>"+items.name+"</li>");
Use
jQuery("#fetchmember").append("<li>"+items.name+"</li>");
At iteration, you overwrite the content with last one.

Better to use .append instead of .html, but you have to make the area empty before : jQuery("#fetchmember").empty();

write GET URL variable to page using javascript

I have a form which contains a wysiwyg editor. The form data is sent to a page using a GET method in the form.
How would i decode(to keep the DIV and BR tags) in the variable and print it out on the page using Javascript?
Any help would be appreciated

The equivalent of decode would be unescape(), you should be able to something like this:
(function(){
document.$_GET = [];
var urlHalves = String(document.location).split('?');
if(urlHalves[1]){
var urlVars = urlHalves[1].split('&');
for(var i=0; i<=(urlVars.length); i++){
if(urlVars[i]){
var urlVarPair = urlVars[i].split('=');
document.$_GET[urlVarPair[0]] = urlVarPair[1];
}
}
}
})();
document.write(unescape(document.$_GET['varname']));

Maybe you should try this script: http://www.webtoolkit.info/javascript-url-decode-encode.html
It encodes decodes everything.