I tried using Mention.js from this.
My Search.html contains,
<!DOCTYPE html>
<html>
<body>
<div>
<textarea id="try"></textarea>
</div>
<script type="text/javascript" src="http://jakiestfu.github.io/Mention.js/javascripts/bootstrap-typeahead.js">
$('#try').mention({
delimiter: '#',
users: [{
username: "ashley"
}, {
username: "roger"
}, {
username: "frecklefart123"
}]
});
</script>
</body>
</html>
The box returns no result. Any help in pointing my mistake is appreciated. Thanks.
P.S This is pseudocode, the actual usage is in my rails app in search.html.erb which has Typeahead dependancy.
As the documentation of Mention.js
Dependencies
jQuery ,
Typeahead
so you should use
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://jakiestfu.github.io/Mention.js/javascripts/bootstrap-typeahead.js"></script>
then the plugin
<script type="text/javascript">(function(e){e.fn.extend({mention:function(t){this.opts={users:[],delimiter:"#",sensitive:true,queryBy:["name","username"],typeaheadOpts:{}};var n=e.extend({},this.opts,t),r=function(){if(typeof e=="undefined"){throw new Error("jQuery is Required")}else{if(typeof e.fn.typeahead=="undefined"){throw new Error("Typeahead is Required")}}return true},i=function(e,t){var r;for(r=t;r>=0;r--){if(e[r]==n.delimiter){break}}return e.substring(r,t)},s=function(e){var t;for(t in n.queryBy){if(e[n.queryBy[t]]){var r=e[n.queryBy[t]].toLowerCase(),i=this.query.toLowerCase().match(new RegExp(n.delimiter+"\\w+","g")),s;if(!!i){for(s=0;s<i.length;s++){var o=i[s].substring(1).toLowerCase(),u=new RegExp(n.delimiter+r,"g"),a=this.query.toLowerCase().match(u);if(r.indexOf(o)!=-1&&a===null){return true}}}}}},o=function(e){var t=this.query,r=this.$element[0].selectionStart,i;for(i=r;i>=0;i--){if(t[i]==n.delimiter){break}}var s=t.substring(i,r),o=t.substring(0,i),u=t.substring(r),t=o+n.delimiter+e+u;this.tempQuery=t;return t},u=function(e){if(e.length&&n.sensitive){var t=i(this.query,this.$element[0].selectionStart).substring(1),r,s=e.length,o={highest:[],high:[],med:[],low:[]},u=[];if(t.length==1){for(r=0;r<s;r++){var a=e[r];if(a.username[0]==t){o.highest.push(a)}else if(a.username[0].toLowerCase()==t.toLowerCase()){o.high.push(a)}else if(a.username.indexOf(t)!=-1){o.med.push(a)}else{o.low.push(a)}}for(r in o){var f;for(f in o[r]){u.push(o[r][f])}}return u}}return e},a=function(t){var r=this;t=e(t).map(function(t,i){t=e(r.options.item).attr("data-value",i.username);var s=e("<div />");if(i.image){s.append('<img class="mention_image" src="'+i.image+'">')}if(i.name){s.append('<b class="mention_name">'+i.name+"</b>")}if(i.username){s.append('<span class="mention_username"> '+n.delimiter+i.username+"</span>")}t.find("a").html(r.highlighter(s.html()));return t[0]});t.first().addClass("active");this.$menu.html(t);return this};e.fn.typeahead.Constructor.prototype.render=a;return this.each(function(){var t=e(this);if(r()){t.typeahead(e.extend({source:n.users,matcher:s,updater:o,sorter:u},n.typeaheadOpts))}})}})})(jQuery)</script>
or just download the Mention.js file and link it to your code
and then
<script>
// run your code here
</script>
$('#try').mention({...)};it should be in $( document ).ready().
Related
I am trying to set a value with Javascript using getElementById but it is not working. Can anyone see what I'm doing wrong? Sorry if this is basic question. Have not used JS in a long while.
<html>
<head>
<script>
function setSymbol(sym) {
//alert("hi");
document.getElementById("personName")=sym;
}
</script>
</head>
<body onload="setName('John Ford')">
<script type="text/javascript">
new awesome.widget({
"name": "<span id = personName>",
"locale": "en"
});
</script>
</body>
</html>
Thanks for any suggestions.
You are looking for .innerHTML or better yet .textContent:
document.getElementById('personName').textContent = sym;
<HTML>
<HEAD>
<script>
$(function(){
$(window).on('hashchange', function() {
var hash = location.hash.replace( /^#/, '' );
document.title = 'example ' + hash;
});
$(window).trigger('hashchange');
});
</script>
<TITLE>example</TITLE>
</HEAD>
<BODY>
</body>
</HTML>
Let's say the <title> of example.com is example
This code should automatically update the page title for example.com/#city1 to example city1 and example.com/#city2 to example city2 and so on.
I have only an index.html file and I don't want to add php file to my html file.
As said in the comments you need to add the jQuery library to your page using :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
Then your code should work as expected.
I am trying to accomplish simple tasks with dojo's new AMD feature, and I don't get an error on the screen neither the result is being displayed....
I wanted to rewrite the first programmatic example dijit.Tree mentioned in the dojo reference guide:
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.Tree");
dojo.ready(function(){
var store = new dojo.data.ItemFileReadStore({
url: "{{dataUrl}}/dijit/tests/_data/countries.json"
});
var treeModel = new dijit.tree.ForestStoreModel({
store: store,
query: {"type": "continent"},
rootId: "root",
rootLabel: "Continents",
childrenAttrs: ["children"]
});
new dijit.Tree({
model: treeModel
}, "treeOne");
});
</script>
to the AMD version:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" href="js/dojo/dijit/themes/claro/claro.css" />
<script src="js/dojo/dojo/dojo.js" data-dojo-config="async: true"></script>
<script language="JavaScript">
var param = new Array(null,["dojo/dom","dijit/tree","dojo/data/ItemFileReadStore","dijit/tree/ForestStoreModel","dojo/domReady!"]);
require(param[1],function(dom,dtree,ifrs,fsm)
{
var store = new ifrs({url: "js/countries.json"});
var treeModel = new fsm({store: store,query: {"type": "continent"},rootId: "root",rootLabel: "Continents",childrenAttrs: ["children"]});
new dtree({model:treeModel},"treeOne");
});
</script>
</head>
<body class="claro">
<div id="treeOne">
</div>
</body>
</html>
Firebug doesn't whow me an runtime error, or doesn't tell me that something is missing. The page just stays empty. What did I make wrong?!
The main problem is how you build the param array and only use the first value in the array.
Also, dojo.ready is not the same as dojo/domReady!
require(["dojo/dom", "dijit/tree", "dojo/data/ItemFileReadStore",
"dijit/tree/ForestStoreModel", "dojo/ready"],
function(dom, dtree, ifrs, fsm, ready) {
ready(function() {
...
});
});
I'm trying to get the jQuery template feature working but have finally come to a dead end. From all my investigation the code listing below should work and I expect to get:
file1.txt, 123456, 2012-01-01
file2.txt, 234567, 2012-01-02
file3.txt, 345678, 2012-01-03
but instead I get
, ,
, ,
, ,
Clearly the library is loading and the code is running but for some reason it will not pick up the data elements. The code behaves the same regardless of the browser. I've tried compiling the template and not, each with the same results.
I'm sure that I'm missing something simple, but I've been pulling my hair out for about 8 hours staring at examples (and I've not that much hair left!). Thanks in advance for any assistance.
<html lang="en">
<head>
<title>jQuery Template Test</title>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script src="inc/jquery.tmpl.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var exampleData = [
{ name: "file1.txt", size: "123456", date: "2012-01-01" },
{ name: "file2.txt", size: "234567", date: "2012-01-02" },
{ name: "file3.txt", size: "345678", date: "2012-01-03" }
];
var markup = "<li>${name}, ${size}, ${date}</li>";
$.template( "exampleTemplate", markup );
$.tmpl("exampleTemplate", exampleData).appendTo("#target");
});
</script>
</head>
<body>
<ul id="target"></ul>
</body>
</html>
I had the same problem with JSP: Use \$ to escape EL expression
I have this basic auto complete JavaScript that works well, but you need to hard code the web page. What I'm trying to do is send the "Autocomplete" variable data to the page using a Perl script
The working JavaScript code looks like this:
var CustomArray = new Array('an apple','alligator','elephant','pear','kingbird',
'kingbolt','kingcraft','kingcup','kingdom','kingfisher',
'kingpin','SML');
Now the new code is:
var CustomArray=new Array(Autocomplete);
And the Perl script is sending back the data to the browser looking like this:
var Autocomplete = 'an apple','alligator','elephant','pear','kingbird',
'kingbolt','kingcraft','kingcup','kingdom','kingfish er','kingpin','SML'
I also tried
var Autocomplete = ['an apple','alligator','elephant','pear','kingbird',
'kingbolt','kingcraft','kingcup','kingdom','kingfisher',
'kingpin','SML']
But I get: 'an apple','alligator','elephant','pear','kingbird','kingbolt','kingcraft','kingcup','kingdom','kingfish er','kingpin','SML' All as one string in the auto complete.
I cant seem to get it to work right. Full HTML code is below.
<html>
<head>
<script language="javascript" type="text/javascript" src="http://www.comicinvasion.com/Code/Java/Autocomplete/Autocomplete.js"></script>
<script language="javascript" type="text/javascript" src="http://www.comicinvasion.com/Code/Java/Autocomplete/Common.js"></script>
<script language="JavaScript1.2" type="text/javascript" src="http://www.ComicInvasion.com/cgi-bin/Autocomplete.pl"></script>
<script>
var CustomArray=new Array(Autocomplete);
</script>
</head>
<body>
<input type='text' style='font-family:verdana;width:300px;font-size:12px' id='ACMP' value=''/>
<script>
var obj = actb(document.getElementById('ACOMP'),CustomArray);
</script>
</body>
</html>
First, it looks like there is a typo. The id of your input element is ACMP whereas you pass 'ACOMP' to getElementById.
Second, you do not provide the source code for your Perl script. It might look like this:
#!/usr/bin/perl
use utf8;
use strict; use warnings;
use CGI();
local $| = 1;
print CGI::header(
-type => 'text/javascript',
-charset => 'utf-8',
);
print <<JS;
var Autocomplete = [
'an apple','alligator','elephant','pear','kingbird',
'kingbolt','kingcraft','kingcup','kingdom','kingfisher',
'kingpin','SML'
];
JS
With the following HTML, autocompletion works:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="http://www.comicinvasion.com/Code/Java/Autocomplete/Autocomplete.js"></script>
<script type="text/javascript" src="http://www.comicinvasion.com/Code/Java/Autocomplete/Common.js"></script>
<!-- Replace with the URI of your script -->
<script type="text/javascript" src="http://test:8080/cgi-bin/autocomplete.pl"></script>
</head>
<body>
<input type='text'
style='font-family:verdana;width:300px;font-size:12px'
id='ACOMP' value=''>
<script type="text/javascript">
var obj = actb(document.getElementById('ACOMP'), Autocomplete);
</script>
</body>
</html>
Finally, I find it curious that your JavaScript files live in a directory called Java.
Have the perl script return this:
var CustomArray = "an apple, alligator".split(',');
Or, if it has to be this it's okay too:
var CustomArray = "'an apple','alligator'".split(',');
Obviously, I omitted the rest of the items in there but you'd include all of them.