Open Source Spell Check for javascript Typo.js - javascript

As I try to use the typo.js spell checker in my file. But it's throw some error's I can't find the solutions. I just followed the Typo.js Documentation Here is the document link.
https://github.com/cfinke/Typo.js/
Kindly check the below issue and help me to reach out this issue
Here is the console issue image
Here is the used code
JS
<!doctype html>
<html>
<head>
<title>Typo.js Example</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="typo/typo.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
var dictionary = new Typo("en_US", false, false, { dictionaryPath: "typo/dictionaries" });
// function load() {
// $('#loading-progress').append('Loading affix data...').append($('<br />'));
// $.get('typo/dictionaries/en_US/en_US.aff', function (affData) {
// $('#loading-progress').append('Loading English dictionary (this takes a few seconds)...').append($('<br />'));
// $.get('typo/dictionaries/en_US/en_US.dic', function (wordsData) {
// $('#loading-progress').append('Initializing Typo...');
// dictionary = new Typo("en_US", affData, wordsData);
// checkWord('mispelled');
// });
// });
// }
checkWord('mispelled');
function checkWord(word) {
var wordForm = $('#word-form');
wordForm.hide();
var resultsContainer = $('#results');
resultsContainer.html('');
resultsContainer.append($('<p>').text("Is '" + word + "' spelled correctly?"));
var is_spelled_correctly = dictionary.check(word);
resultsContainer.append($('<p>').append($('<code>').text(is_spelled_correctly ? 'yes' : 'no')));
if (!is_spelled_correctly) {
resultsContainer.append($('<p>').text("Finding spelling suggestions for '" + word + "'..."));
var array_of_suggestions = dictionary.suggest(word);
resultsContainer.append($('<p>').append($('<code>').text(array_of_suggestions.join(', '))));
}
wordForm.show();
}
</script>
</head>
<body>
<h1>Typo.js Demo</h1>
<p>This page is an example of how you could use Typo.js in a webpage
if you need spellchecking beyond what the OS provides.</p>
<p id="loading-progress"></p>
<div id="results"></div>
<form method="GET" action="" onsubmit="checkWord( document.getElementById( 'word' ).value ); return false;"
id="word-form" style="display: none;">
<p>Try another word:</p>
<input type="text" id="word" value="mispelled" />
<input type="submit" value="Spellcheck" />
</form>
</body>
</html>

Related

Pass jquery variable to iframe src

I want to pass the value which i get from a text box to the src of my iframe. I am using the following code to get the value from textbox, on the button click it should be passed to the iframe src and replace the query:'*' with the variable passed, i.e. the * should be replaced.
How to proceed with this?
Foloowing is the iframe with html code
<iframe src="http://localhost:5601/#/dashboard/New-Dashboard?embed&_a
=(filters:!(),panels:!((col:1,id:env,row:1,size_x:4,size_y:3,type:visualization)
,(col:5,id:env-2,row:1,size_x:4,size_y:3,type:visualization),(col:9,id:env-3,
row:1,size_x:4,size_y:3,type:visualization)),query:(query_string:(analyze_wildcard:
!t,query:'*')),title:'New%20Dashboard')&_g=(refreshInterval:(display:Off,pause
:!f,section:0,value:0),time:(from:now%2Fy,mode:quick,to:now%2Fy))" height="600"
width="800" id="myframe"></iframe>
<!DOCTYPE html>
<html>
<head>
<title>jQuery With Example</title>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.btnGetName').click(function (event) {
var name = $('.txtName').val();
alert(name);
});
});
</script>
</head>
<body>
<div>
<input type="text" class="txtName" value="hello" id="querypass"/><br />
<button class="btnGetName">Get Name</button>
</div>
</body>
</html>
Try this
var src = $('#myframe').attr('src');
var newSrc = src.replace("query:'*'", "query:'" + name + "'");
$('#myframe').attr('src', newSrc);
You can try following code:
Note: Assuming that your <iframe> is within same HTML document:
$('.btnGetName').click(function (event) {
var name = $('.txtName').val();
alert(name);
var iframeObj = $("#myframe");
var srcString = iframeObj.attr("src");
srcString = srcString.replace("query:'*'","query:'"+name+"'");
iframeObj.attr("src",srcString );
});
Please make sure that you don't put single quote in your text field.

jQuery, appending HTML string not working

When using the code below I am unable to add the HTML string to the innerHTML of the target HTMLElement. What am I doing wrong? Is there a better way to do this?
<html>
<head>
<title>Add HTML input with jQuery</title>
<!--
* This code is meant to include the jQuery library v.1.9.1
* from Google API
-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'></script>
<script>
$('document').ready(function(){
$('#add').click(function(){
var src = $('#src'); // alert(src);
var trgt = $('#src'); // alert(trgt);
var x = null;
var child = null;
var str = null;
if(null != src.val()){
alert(1);
x = trgt.children().length;
str = '<input type="text" name="array[]" id="index' + x + '" value="' + src.val() + '" />';
trgt.html().append(str);
src.val() = null;
}else{
alert('src value is emppty');
}
});
});
</script>
</head>
<body>
<div id="box">
<label></label> <input type="text" name="src" id="src" value="" /> <button id="add">+</button>
<div id="trgt">
</div>
</div>
</body>
</html>
var trgt = $('#src'); ... Your source and target selectors are the same.
This var trgt = $('#trgt') is not the only problem I noticed.
There is trgt.html().append(str); which should be trgt.append(str);.
And then src.val() = null;, are you trying to reset the <input> value? You can simply do it with src.val('');
See this jsfiddle.

QUnit tests failing intermittently

Below is my javascript file that shows the sum of two numbers.
var getSum = function (arg1, arg2) {
var intArg1 = parseInt(arg1);
var intArg2 = parseInt(arg2);
return intArg1 + intArg2;
};
var getSumText = function (arg1, arg2) {
var sum = getSum(arg1, arg2);
return 'The sum of ' + arg1 + ' and ' + arg2 + ' is ' + sum + '.';
};
$(document).ready(function () {
$("#button1").click(function (e) {
console.log('button clicked');
var sumText = getSumText($("#arg1").val(), $("#arg2").val());
$("#output1").text(sumText);
e.stopPropagation();
});
});
Here's my QUnit.html file.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Test Suite</title>
<link href="Content/qunit-1.12.0.css" rel="stylesheet" />
<script src="Scripts/jquery-2.0.0.min.js"></script>
<script src="Scripts/qunit-1.12.0.js"></script>
<script src="Scripts/main.js" data-cover></script>
<script src="Scripts/mainTests.js"></script>
<script src="Scripts/blanket.min.js"></script>
</head>
<body>
<h1 id="qunit-header">Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">
<input type="text" id="arg1" />
<input type="text" id="arg2" /> <br />
<div id="output1"> </div>
<input type="button" id="button1" value="Show sum" />
</div>
<script type="text/javascript">function blanket_toggleSource(e) {
var t = document.getElementById(e);
t.style.display === "block" ? t.style.display = "none" : t.style.display = "block";
}</script>
</body>
</html>
And here's my js tests file.
module('DOM');
test('should add correctly', 1, function() {
$('#arg1').val('2');
$('#arg2').val('5');
console.log($('#arg1').val());
console.log($('#arg2').val());
$('#button1').trigger('click');
var output = $('#output1').text();
equal(output, 'The sum of 2 and 5 is 7.', 'sum text is correct');
});
module('Sum');
test('should add correctly', 1, function() {
var sum = getSum('2', '1');
deepEqual(sum, 3, 'sum is correct');
});
If I move the 'Sum' module above the 'DOM' one, the test in the DOM module fail intermittently. What am I missing?
Thanks,
Arun
You need to separate the library code, that you can test, from the initialization code, that you don't really need to test in this case. Move the code inside the click handler into another named function and called that from a separate script tag or file. That way you can test all three functions from your tests. Currently you end up with document-ready executing code at a some point in time, while your tests run at another. That causes the seemingly random behaviour you're seeing.

Google Places Autocomplete on dynamic inputs

Good day.
I'm trying to add Google Places Autocomplete on dynamically created inputs using code below:
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
var _autoComplCounter = 0;
function assignAutoCompl(_id)
{
var _autocomplete = new google.maps.places.Autocomplete(document.getElementById(_id));
_autocomplete.setTypes(['geocode']);
google.maps.event.addListener(_autocomplete, 'place_changed', function()
{
//processing code
});
}
function CreateElem()
{
var _id = "AutoCompl" + _autoComplCounter;
_autoComplCounter++;
var container = document.getElementById('AutoComplInputs');
container.innerHTML += "<br>" + _id;
var _elem_for_upd = document.createElement("input");
_elem_for_upd.type = "text";
_elem_for_upd.id = _id;
container.appendChild(_elem_for_upd);
assignAutoCompl(_id);
}
</script>
</head>
<body>
<div id="AutoComplInputs"></div>
<input type='button' value='Add' onclick='CreateElem();'>
</body>
</html>
But when I press on button, autocomplete works only on last input, and all prevoius become broken. I think that it can be connected to dynamic creation of inputs, as the code below works fine:
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
var _autoComplCounter = 0;
function assignAutoCompl(_id)
{
document.getElementById(_id).hidden = false;
var _autocomplete = new google.maps.places.Autocomplete(document.getElementById(_id));
_autocomplete.setTypes(['geocode']);
google.maps.event.addListener(_autocomplete, 'place_changed', function()
{
//processing code
});
}
function CreateElem()
{
assignAutoCompl("AutoCompl0");
assignAutoCompl("AutoCompl1");
}
</script>
</head>
<body>
<div id="AutoComplInputs">
<input id="AutoCompl0" type="text" hidden>
<input id="AutoCompl1" type="text" hidden>
</div>
<input type='button' value='Add' onclick='CreateElem();'>
</body>
</html>
I don't understand what I'm doing wrong ...
Don't use innerHTML to add content to container, you will lose all handlers bound to existing elements.
Use appendChild instead:
container.appendChild(document.createElement('br'));
container.appendChild(document.createTextNode(_id));

Javascript opener window

I have function that opens up a window, and the values from the newly opened window are listed in the opener window.
The 2nd window - has this function:
function AddOtherRefDoc(name, number) {
var remove = "<a href='javascript:void(0);' onclick='removeRefDoctor(this)'>Remove</a>";
var html = "<li><b> Referral Doctor: </b>"+name+"<b>, Referral No: </b>"+number+ " " +remove+" <input type='text' name='ref_docs' value='"+name+"'></input><input type='text' name='ref_nos' value='"+number+"'></input></li>";
opener.jQuery("#r_docs").append(jQuery(html));
}
The function that calls the one above is:
function addRefDoc(){
var count = 0;
var ref_docarray ;
var ref_noarray ;
<%for(int i1=0; i1<vec.size(); i1++) {
prop = (Properties) vec.get(i1);
String ref_no = prop.getProperty("referral_no","");
String ref_name = (prop.getProperty("last_name", "")+ ","+ prop.getProperty("first_name", ""));
%>
if(document.getElementById("refcheckbox_<%=ref_no%>").checked) {
count++;
if ((ref_doctor!=null)&&(ref_doctor!="")&&(ref_docno!=null)&&(ref_docno!="")) {
ref_docarray = ref_doctor.split(";");
ref_noarray = ref_docno.split(";");
if ((containsElem(ref_docarray,"<%=ref_name%>"))||(containsElem(ref_noarray,<%=ref_no%>))) {
alert("Referral doctor " + "<%=ref_name%>" + " already exists");
} else {
AddOtherRefDoc("<%=ref_name%>", <%=ref_no%>);
}
} else {
AddOtherRefDoc("<%=ref_name%>", <%=ref_no%>);
}
}
<%} %>
self.close();
}
function containsElem(array1,elem) {
for (var i=0;i<array1.length;i++) {
if(array1[i]==elem){
return true;
} else{
return false;
}
}
}
When this function is called, it is supposed to carry the 2 input elements "ref_docs" and "ref_nos" into the page that opened this window. But it is not doing so. It lists the elements alright but when I try to use "ref_docs" and "ref_nos" in another Javascript function in the 1st window, I see that "ref_nos" and "ref_docs" are empty.
What am I doing wrong?
function updateRd(){
var ref_docs = jQuery("#updatedelete").find('input[name="ref_docs"]');
var ref_nos = jQuery("#updatedelete").find('input[name="ref_nos"]'); alert(ref_docs.val() + ref_nos.val());
var rdocs = new Array();
var rnos = new Array();
ref_docs.each(function() { rdocs.push($(this).val()); } );
ref_nos.each(function() { rnos.push($(this).val()); } );
$('#r_doctor').val(rdocs.join(";"));
$('#r_doctor_ohip').val(rnos.join(";")); }
–
This function returns an error saying "ref_docs" and "ref_nos" are undefined.
I think it is trying to use the jQuery on the other page to find "#r_docs" on the current page.
Try:
jQuery(opener.document).find("#r_docs").append(html);
UPDATE:
I created index.html:
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>
<script type="text/javascript">
window.jQuery = jQuery;
function openChild ()
{
var mychildwin = window.open("child.html");
}
</script>
</head>
<body>
<input type="button" value="click" onclick="openChild();" />
<div id="r_docs">
Redocs here.
</div>
</body>
</html>
and child.html:
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>
<script type="text/javascript">
function AddOtherRefDoc(name, number) {
var remove = "<a href='javascript:void(0);' onclick='removeRefDoctor(this)'>Remove</a>";
var html = "<li><b> Referral Doctor: </b>"+name+"<b>, Referral No: </b>"+number+ " " +remove+" <input type='text' name='ref_docs' value='"+name+"'></input><input type='text' name='ref_nos' value='"+number+"'></input></li>";
jQuery(opener.document).find("#r_docs").append(html);
}
</script>
</head>
<body>
<input type="button" value="click" onclick="AddOtherRefDoc('name', 42);"/>
</body>
</html>
UPDATE2:
in your update function document.updatedelete has no attributes ref_docs and ref_nos.
try:
jQuery("#updatedelete")
.find('input[name="ref_docs"], input[name="ref_nos"]')
Where your form is
<form id="updatedelete" ... >
Your function that accesses the DOM elements is incorrect. updatedelete is not a property of document, nor will accessing a ref_docs or ref_nos property automatically build a collection of input elements. Since you're using jQuery already, try this:
var ref_docs = $('input[name="ref_docs"]');
var ref_nos = $('input[name="ref_nos"]');
That will give you Array (or at least array-like) objects that will let you access your inputs:
var rdocs = new Array();
var rnos = new Array();
ref_docs.each(function() { rdocs.push($(this).val()); } );
ref_nos.each(function() { rnos.push($(this).val()); } );
$('#r_doctor').val(rdocs.join(";"));
$('#r_doctor_ohip').val(rnos.join(";"));

Categories

Resources