I am trying to use typeahead.js to create a 'live search' - basically I want to search a json file and return back the results to the screen.
I have generated a json file with all of the devices I am trying to search, the structure is as follows:
{"short_name":"3555","long_name":"Nokia 3555"}
So whatever the user enters then it is searched for in the long_name, the only reason I have the 'short_name' is because I require it to generate the URL that the user will be redirected to eg. site.com/device/3555
I've uploaded the full json file here -
https://docs.google.com/file/d/0B6O0C30w5kQgR08xZ0xMWnV5TW8/edit?usp=sharing
<script type="text/javascript">
$('.typeahead').typeahead({
name: 'devices',
prefect: '/data/devices.json',
limit: 10
});
</script>
The following code doesn't seem to do anything - can anyone indicate where I am going wrong?
You have a spelling mistake prefect should be prefetch, try it but you will want to check the path is correct in your own code too:
<script type="text/javascript">
$('.typeahead').typeahead({
name: 'devices',
prefetch: '/data/devices.json',
limit: 10
});
</script>
Related
I worked on a little startpage for my browser. Now I would like to make some changes to it, so it updates the index.html file depending on a text file, when this got changed. What whould be an efficiant way to solve this problem?
My approach would be to create a text file and read line by line from it and update the html file. In the text file I would store the links shown on my startpage - I thought maybe something like this:
|cat_media
https://mailbox.org,mail
https://netflix.com,netflix
...
http://crunchyroll.com,crunchy
https://jott-uh-be.bandcamp.com,bc
|cat_social
https://pr0gramm.com,pr0
https://stackoverflow.com,stackoverflow
https://twitter.com,twitter
https://instagram.com,insta
When the line starts with the symbol |, it creates a new <div> with the class category and the string in that line (e.G. class= 'category cat_media'). Otherwise, if the line starts with http, it will add a href-link (e.G. <a href='https://mailbox.org'>mail</a>) to the html-code.
I got this website hosted on my raspberry pi with nginx and uploaded it to my github pages.
You don't have to update the index.html file.
You can create dynamic content.
You can use PHP:
You can learn it here:
https://www.w3schools.com/php/default.asp
And here is how to read a file
http://php.net/manual/en/function.fread.php
Or if you cant use PHP you can use Javascript:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(() => {
$.ajax({
url:'your-config-file.xt',
success: function (data){
console.log(data); //this is the config file. just for loop it and modify the dom
}
});
});
</script>
But your config file must contains the string how the links should be shown.
For example:
|catergory one
yt: https://www.youtube.com
Has anybody got the Yammer embed API for Follow and Like to work in a SharePoint site? I can get the buttons to appear and when I click on them they change to Liked and Followed but nothing is posted to Yammer and nothing appears in the activity feed. Several folks have tried this and given up and doing something via the Java SDK instead but this is long-winded with the embed API should work. Any ideas?
Code is as follows:
<script type="text/javascript" src="https://assets.yammer.com/assets/platform_embed.js"></script>
<div id="embedded-like" style="width:400px;"></div>
<script>
yam.connect.actionButton({
container: "#embedded-like",
network: "mynetwork.com",
action: "like"
});
</script>
<p>
<div id="embedded-follow" style="width:400px;"></div>
<script>
yam.connect.actionButton({
container: "#embedded-follow",
network: "mynetwork.com",
action: "follow"
});
</script>
don't know if you got there already - but was able to expand the object properties on the embed like to push details in the recent activity feed in yammer from a sp2010 page. Its totally hard coded for just one page - but I'm exploring the elements the like button can pick up - saw some on this page - but could be pre-API change
http://sp2013.blogspot.co.nz/2013/10/sharepoint-and-yammer-yammer-feed-like.html
my code:
<div id="embedded-like"></div>
<script src="https://assets.yammer.com/assets/platform_embed.js"></script>
<script>
yam.connect.actionButton({
container: "#embedded-like",
network: "[mynetwork]",
objectProperties: {
url: "URL To my sp2010 page",
type: "page",
title: "Some Title to show in the feed"
},
action: "like"
});
</script>
While modifying a phpBB forum, we need to create a custom topic/posts view.
Please see the image below for details
The real problem is Partitions 1 and 2.
The code am using is updated code
The result is -
what ever you set your CSS just add javascript code # the end of your file like ...
<script type="text/javascript">
var h1=document.getElementById('div1').offsetHeight;
var h2=document.getElementById('div2').offsetHeight;
var h3=document.getElementById('div3').offsetHeight;
var h4=parseInt(h2)+parseInt(h3)+"px";
document.getElementById('div1').style.height=h4;
</script>
i run this code, it work for me.
I am using this cool script http://qpoit.com/marcofolio_demo/apple_search/ however when I click on a search result, I want it to be added as html content to an id which I will use like . I know this is done with $("#displayContent").html(data); however I need the content of search result that I clicked on to be and not all the results found. Please help
The rpc.php-file of the search, contains the function, which generates the output of the search.
In line 29, change the content to a JavaScript-function, which does this work for you.
// Used in line 29 in rpc.php
echo '<a href="'.$result->url.'">';
// Change it to something like
echo '<a onclick="applyContent('.$result->url.')">'
After that, head back to the index.html (or the file in which you are using the apple-search), make sure jQuery is loaded and add something like this:
<script type="text/javascript">
// Use the same function name, as in the php-file
function applyContent (resultURL) {
// Use jQuerys get-function to get the content of the file you've found in the search
$.get(resultURL, function(data) {
// Change '#finalResult' to the css-selector, of the element, which should contain the result at the end
$('#finalResult').html(data);
});
}
</script>
Once you click on a search-result, it should make it the content of #finalResult, or whatever element you choose.
In the Application.java I get all users
public static void index() {
renderArgs.put("users", Users.getAll()); //getAll() returns gson.JsonArray
}
In index.html I bootstrap this users like this:
<script type="text/javascript">
Users.reset(&{users});
</script>
But the JSON is rendered like this:
[{"id":"1234" ...
How can I get the JSON to be formated as JSON?
Maybe this will help:
<script type="text/javascript">
Users.reset(&{users.raw()});
</script>
From playframework documentation:
raw()
Returns the object without template escaping.
Returns: play.templates.Template.ExecutableTemplate.RawData.
When you're using Backbone.js, they recommend you to use this style of bootstrapping your collection(s). I didn't really like this approach though, so I used an alternative: to bootstrap your Collections, simply wrap them in a manual $.getJSON() call to initialize them. For example:
<script type="text/javascript">
$(function() {
$.getJSON("#{controllers.MyJsonApiController.getStuff()}", function(data) {
Users.reset(data);
});
});
</script>
Note: the exact syntax of the Users.reset() call may not be correct, you may have to define the collection in the window scope, depending on your requirements.
An even better approach I found — when you're also using the Backbone.js Views — is to encapsulate your Collection management in your View objects. This way, when you render your page, the only thing you have to do is render the view and this will do its own initialization.
Update: corrected the fetch() call to a reset(data) call.