{"id":48096,"date":"2020-02-27T03:01:44","date_gmt":"2020-02-26T17:01:44","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=48096"},"modified":"2020-02-26T15:37:34","modified_gmt":"2020-02-26T05:37:34","slug":"emoji-sms-and-emailing-large-data-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-sms-and-emailing-large-data-tutorial\/","title":{"rendered":"Emoji SMS and Emailing Large Data Tutorial"},"content":{"rendered":"
<\/a>

Emoji SMS and Emailing Large Data Tutorial<\/p><\/div>\n

With the convenience and ease of user interaction the HTML textarea element offers, as you can try with yesterday’s Emoji SMS and Emailing Tutorial<\/a>, there is added responsibility on the programmer to cater for an adventurous user “stretching the friendship” and entering huge amounts of data into that generous “textarea” pallette.<\/p>\n

Even window.localStorage can’t help here on this so far exclusively “client” (ie. just HTML\/Javascript\/CSS) web application because “client email” and\/or “client SMS” still have that length limitation that avoids the dreaded “Bad Request” (error 400) when the amount of user entered data into that provided textarea goes beyond about 800 characters (at least for our rjmprogramming.com.au domain).<\/p>\n

So to progress here with large data scenarios, and yet still “feel client” here with this web application, we embed calls to PHP with an HTML iframe (name=[iframeName]) element, populated via an HTML form method=POST target=[iframeName] action=[inlineHTMLemailPHPhelper]. We’ve done all this before, so, is there anything new to discuss? You bet there is, and it is to do with emoji data. You see, in the subject line<\/font> …<\/p>\n


\n<form id=ifemail target=\"iemail\" style=\"display:none;\" action=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php\" method=\"POST\">
\n<input type=hidden style=display:none; name=inline value=\"\"><\/input>
\n<input type=hidden style=display:none; name=to id=tdto value=\"\"><\/input>
\n<input type=hidden style=display:none; name=subj id=tdsubj value=\"Name Your Mascot - RJM Programming\"><\/input><\/font>
\n<textarea name=hcont style=display:none; value=\"\" id=tdhuhta cols=80 rows=30><\/textarea><\/font>
\n<input type=hidden style=display:none; name=cc id=tdcc value=\"\"><\/input>
\n<input type=hidden style=display:none; name=bcc id=tdbcc value=\"\"><\/input>
\n<input style=display:none; type=submit id=fsubm value=\"Email\"><\/input>
\n<\/form>
\n<iframe style=display:none; name=iemail id=iemail src=\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php><\/iframe>
\n<\/code><\/p>\n

… emojis all work at the destination email, but those same emoji forms in the email body section, as HTML<\/font> caused gobbledygook data at the resultant email. We got great advice<\/font> from this useful link<\/a>, thanks …<\/p>\n


\n\/**
\n * Convert a string to HTML entities ... thanks to https:\/\/stackoverflow.com\/questions\/18749591\/encode-html-entities-in-javascript
\n *\/
\nString.prototype.toHtmlEntities = function() {
\n return this.replace(\/.\/gm, function(s) {
\n \/\/ return \"&#\" + s.charCodeAt(0) + \";\";
\n return (s.match(\/[a-z0-9\\s]+\/i)) ? s : \"&#\" + s.charCodeAt(0) + \";\";
\n });
\n};
\n
\n\/**
\n * Create string from HTML entities
\n *\/
\nString.fromHtmlEntities = function(string) {
\n return (string+\"\").replace(\/&#\\d+;\/gm,function(s) {
\n return String.fromCharCode(s.match(\/\\d+\/gm)[0]);
\n })
\n};<\/font>
\n<\/code><\/p>\n

… to come up with the codeline to fix those emojis within the textarea element arriving properly at the output email via …<\/p>\n


\n document.getElementById('tdhuhta').innerHTML='<html><body><div>' + String.fromHtmlEntities(<\/font>document.getElementById('mybody').value)<\/font> + '<\/div><\/body><\/html>';
\n<\/code><\/p>\n

… you can see happening with the changed<\/a> name_your.html<\/a>‘s live run<\/a> link, for your perusal.<\/p>\n

\n

\n

Previous relevant Emoji SMS and Emailing Tutorial<\/a> is shown below.<\/p>\n

<\/a>

Emoji SMS and Emailing Tutorial<\/p><\/div>\n

The recent Emoji Emailing Primer Tutorial<\/a>, it being a sharing web application pointing at client …<\/p>\n