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.

Issues in javascript mention script in textarea

im trying to implement mention using (#) on a textarea that feeds from MySQL database.
this is the code im using below
var start=/#/ig; // # Match
var word=/#(\w+)/ig; //#abc Match
$("#newstatus").live("keyup",function()
{
var content=$(this).val() //Content Box Data
var go= content.match(word); //Content Matching #
var name= content.match(word); //Content Matching #abc
var dataString = 'searchword='+ name;
//If # available
if(go.length>0)
{
$("#msgbox").slideDown('show');
$("#display").slideUp('show');
$("#msgbox").html("Type the name of someone or something...");
//if #abc avalable
if(name.length>0)
{
$.ajax({
type: "POST",
url: siteurl + "ajax/mention", // Database name search
data: dataString,
cache: false,
success: function(data)
{
$("#msgbox").hide();
$("#display").html(data).show();
}
});
}
}
return false;
});
The problem happens when i add more text it keeps showing suggested box, i want to stop searching whenever i start a new sentence after the #WORD im using e.g.
#blackberry is my favorite smartphone !
i may use more than one mention in that textarea !
i want your help how do i do that whenever i use # then i have suggested list whenever i choose i can continue writing and may use another mention

Solution is:
$("#newstatus").live("keyup",function()
{
var content=$(this).val() //Content Box Data
var index= content.lastIndexOf("#"); //Content Matching #
var name= content.substr(n+1);; //Content Matching abc, If you want to get #abc then remove +1.
var dataString = 'searchword='+ name;
Explanation:
I am searching last position of # in a given string (using lastIndexOf()) and from that I am getting the string till end using substr().
You no need to use reg exp for this. Regular Exp are very costly, it will consume more resources, According to my knowledge better to ignore regular exp for a small operations.

posting through json and jquery

I'm totally new to JSON format so this is probably a very generic question and I'm not even sure this is the right way to go.
What I would like to do is write a JSON file with some text in it, something like a list of conversations.
var conversations = [
one [{
"you":"Hello",
"him":"Hey there"
}],
two [{
"you":"Hello on this second one",
"him":"Hey there how are you"
}]
];
then, on pageload, load a random conversation on my php index (I can use jquery). What's important for me is sending the you/me content to some specific divs.
the use case would be: Page loads, picks randomly conversation one and renders this on my page
<div class="you">Hello</div>
<div class="him">Hey there</div>
Am I in any way in the good direction? any suggestions or resources I can study to have something like this working? Any hint or code is greatly appreciated :) thanks

Is that what you're looking for?
<div id="you"></div>
<div id="him"></div>
<script>
var conversations = [
{
you:"Hello",
him:"Hey there"
},
{
you:"Hello on this second one",
him:"Hey there how are you"
}
];
// random number from 0 to 1
var random = Math.floor((Math.random() * 2) );
var you = document.getElementById('you');
var him = document.getElementById('him');
you.innerHTML = conversations[random]['you'];
him.innerHTML = conversations[random]['him'];
</script>
https://jsfiddle.net/vjdkLcvq/

I am agree with you. I always prefer JSON instead of Database. Specially for a conversation project like yours. More readable, easy to edit etc.
here is the json file where I save text conversations.
messages.json
{
"1442831655": {
"writtenFrom": "tom",
"line1": "tom writing to jim."
}
action.php
$fileName = "./data/messages.json";
$str_data = file_get_contents($fileName);
$data = json_decode($str_data,true);
echo json_encode( $data );
index.php
...<script src="../public/js/jquery-2.0.3.min.js"></script>
<script src="ad.js"></script>...
ads.js
$(document).ready(function(){
showInbox(authUser);
});
Just sending you some ideas. The whole script is much more complex. (PHP, AJAX, JSON)

How do I Call a URL Action from Javascript?

I am doing:
var url = '#Url.Action("Attachments", "Transactions")';
url += '/?id=' + 3201;
$("#attachments").load(url);
However, on load it doesn't do anything. Am i missing something?
I essentially want to call something similar to:
#{Html.RenderAction("Attachments", "Transactions", new { id = 3301 });}
I get the following error on console:
http://server:54137/Transactions/#Url.Action(%22Attachments%22,

You must be using an external JavaScript file which will not parse your razor syntax hence the error in your console of #Url.Action(%22Attachments%22..
You have a couple of options:
Create a JavaScript function and pass in the url:
function loadUrl(url) {
$("#attachments").load(url);
}
Then in your razor call it within a script tag:
loadUrl(#Url.Action("Attachments", "Transactions", new { id = #Model.Id })
Add the url to the html element as data and read it from your JavaScript with the data method.
In your razor markup add this:
<button data-url="#Url.Action("Attachments", "Transactions", new { id = #Model.Id })" />
From your JavaScript event handler read it with:
var url = $(this).data('url');
$("#attachments").load(url);
I prefer the second option.

You Need to use Html.Raw check below
var url = "#Html.Raw(Url.Action("Attachments", "Transactions"))";
url += '/?id=' + 3201;
$("#attachments").load(url);

easiest way to read data from excel spreadsheet with javascript?

I have a list of airport codes, names, and locations in an Excel Spreadsheet like the below:
+-------+----------------------------------------+-------------------+
| Code | Airport Name | Location |
+-------+----------------------------------------+-------------------+
| AUA | Queen Beatrix International Airport | Oranjestad, Aruba|
+-------+----------------------------------------+-------------------+
My Javascript is passed a 3 character string that should be an airline code. When that happens I need to find the code on the spreadsheet and return the Airport Name and Location.
Im thinking something like:
var code = "AUA";
console.log(getAirportInfo(code));
function getAirportInfo(code) {
// get information from spreadsheet
//format info (no help needed there)
return airportInfo;
}
Where the log would write out:
Oranjestad, Aruba (AUA): Queen Beatrix International Airport
What is the easiest method to get the data I need from the spreadsheet?
Extra Info:
The spreadsheet has over 17,000 entries
The function alluded to above may be called up to 8 times in row
I don't have to use an Excel Spreadsheet thats just what I have now
I will never need to edit the spreadsheet with my code
I did search around the web but everything I could find was much more complicated than what Im trying to do so it made it hard to understand what Im looking for.
Thank you for any help pointing me in the right direction.

I ended up using a tool at shancarter.com/data_converter to convert my flie to a JSON file and linked that to my page. Now I just loop through that JSON object to get what I need. This seemed like the simplest way for my particular needs.

I've used a plain text file(csv, or tsv both of which can be exported directly from Excel)
Loaded that into a string var via xmlhttprequest. Usually the browsers cache will stop having to download the file on each page load.
Then have a Regex parse out the values as needed.
All without using any third party....I can dig the code out if you wish.
Example:
you will need to have the data.txt file in the same web folder as this page, or update the paths...
<html>
<head>
<script>
var fileName = "data.txt";
var data = "";
req = new XMLHttpRequest();
req.open("GET", fileName, false);
req.addEventListener("readystatechange", function (e) {
data = req.responseText ;
});
req.send();
function getInfoByCode(c){
if( data == "" ){
return 'DataNotReady' ;
} else {
var rx = new RegExp( "^(" + c + ")\\s+\\|\\s+(.+)\\s+\\|\\s+\\s+(.+)\\|", 'm' ) ;
var values = data.match(rx,'m');
return { airport:values[2] , city:values[3] };
}
}
function clickButton(){
var e = document.getElementById("code");
var ret = getInfoByCode(e.value);
var res = document.getElementById("res");
res.innerText = "Airport:" + ret.airport + " in " + ret.city;
}
</script>
</head>
<body>
<input id="code" value="AUA">
<button onclick="clickButton();">Find</button>
<div id="res">
</div>
</body>
</html>