I'm having trouble getting Google's load feed to work. Example is supposed to be at www.eslangel.com
I put this code in the header
<script type="text/javascript"
src="https://www.google.com/jsapi?key=ABQIAAAAO2BkRpn5CP_ch4HtkkOcrhQRKBUhIk5KoCHRT6uc9AuUs_-7BhRyoJdFuwAeeqxoUV6mD6bRDZLjSw">
</script>
And then, just to test, I copied and pasted their sample code using a Digg feed into the body of my blog, but there's no result of any kind.
Does anyone have any idea what I might be doing wrong?
/*
* How to load a feed via the Feeds API.
*/
google.load("feeds", "1");
// Our callback function, for when a feed is loaded.
function feedLoaded(result) {
if (!result.error) {
// Grab the container we will put the results into
var container = document.getElementById("content");
container.innerHTML = '';
// Loop through the feeds, putting the titles onto the page.
// Check out the result object for a list of properties returned in each entry.
// http://code.google.com/apis/ajaxfeeds/documentation/reference.html#JSON
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
div.appendChild(document.createTextNode(entry.title));
container.appendChild(div);
}
}
}
function OnLoad() {
// Create a feed instance that will grab Digg's feed.
var feed = new google.feeds.Feed("http://www.digg.com/rss/index.xml");
// Calling load sends the request off. It requires a callback function.
feed.load(feedLoaded);
}
google.setOnLoadCallback(OnLoad);
Well, did you also create a container for the feed? :-)
Try placing
<div id="content"></div>
before the feed loading script.
Related
I have written the JavaScript to modify the DOM attribute based on the click and stored the values in local storage. So after the page loaded, it's getting the value from local storage and set the new attribute to DOM. It's working fine and able to achieve my scenario after perfectly page loaded.
ready(function(){
let element = document.querySelector("body");
if(element.classList.contains("path-api-catalog") ){
let name1 = document.querySelectorAll(".tooltip_heading > h6");
for (let i = 0; i < name1.length; i++) {
let title = name1[i].innerText.replace(/[\n\r]+|[\s]{2,}/g, ' ').trim();
let titleURL = name1[i].parentNode.parentNode.querySelector('.btn.primary-btn').href;
if (localStorage.getItem(title) != null){
if(localStorage[title]===titleURL){
let titleDiv = name1[i].parentNode;
titleDiv.querySelector('.bookmark-icon').setAttribute('onclick','RemoveListItem(event)');
}
}else{
let titleDiv = name1[i].parentNode;
titleDiv.querySelector('.bookmark-icon').setAttribute('onclick','SaveListItem(event)');
}
}
}
})
But I have Ajax category filter to filtering the content. Whenever I click the filter, the content loaded through Ajax. After the Ajax, my JavaScript not modify the attribute and not executed correctly. So, how to execute the JavaScript function even after Ajax content loaded.
I have this page where I have a ranking system. For the ranking to display I create some elements on a loop through javascript, according to the data that I fetch from the database. Then, I want the data to change when the database changes, but instead of having to reload the page, I want it to reload just the div related to the ranking content. The problem is that when I call the function $(#idOfRankingsParent).load("index.php #idOfRankingsChild), it doesn't load anything because the content is only created after the DOM is fully loaded (because of the document.createElement, and appendChild, etc). Is there any way for me to load the content after every element is created?
So, I have this function being called on a setInterval:
function loadContent() {
console.log("loaded");
$( "#ranking-container" ).load("index.php #ranking-wrapper");
rankingList.style.filter="blur(0)";
}
setInterval(loadContent, 5500);
Then I have this function creating the elements, and being called as soon as possible:
function createRanks() {
(...)
var pontosOrdered = x;
var equipasOrdered = y;
for (var t=0; t<equipasOrdered.length; t++) {
var rankLi = document.createElement("li");
rankingList.appendChild(rankLi);
if (t===0) {rankLi.id="first-place";}
if (t===1) {rankLi.id="second-place";}
if (t===2) {rankLi.id="third-place";}
var lugarP = document.createElement("p");
rankLi.appendChild(lugarP);
lugarP.classList.add("lugar");
lugarP.innerHTML=t+1;
var nomeEquipaP = document.createElement("a");
rankLi.appendChild(nomeEquipaP);
nomeEquipaP.innerHTML=equipasOrdered[t];
nomeEquipaP.href="/equipas/#"+nameToLowerCase(equipasOrdered[t]);
var pontosP = document.createElement("p");
rankLi.appendChild(pontosP);
pontosP.classList.add("pontos");
pontosP.innerHTML=pontosOrdered[t];
}
}
$(document).ready(function() {
createRanks();
});
(edited)
I have here some prints of the page when I load the first time:
And when the div loads:
I am new into javascript and sharepoint.
Say, there are two lists, list1 (Process, ProcessImage), list2 (SubProcess, Process). In list2 "Process" is a lookup value from list1. The count of all three Process, SubProcess and ProcessImage is not fixed, so say n number.
Using JavaScript and HTML, I need to show the data on a Page like this:
List1
Process ProcessImage
Process1 ProcessImage1
Process2 ProcessImage2
Process3 ProcessImage3
: :
: :
ProcessN ProcessImageN
List2
SubProcess Process
SubProcess1 Process2
SubProcess2 Process2
SubProcess3 Process1
SubProcess4 Process4
: :
SubProcessN Process3
Result in Tabular Form Using Javascript and HTML
ProcessImage1 ProcessImage2 ProcessImage3 ProcessImage4
SubProcess3 SubProcess1 SubProcess4
SubProcess2
If you're using SharePoint 2010 or above, you can use the JavaScript Object Model (JSOM) to access the list items programmatically, as in the following example code.
<style>
/* Adjust this CSS as necessary to adjust the style of your table */
#custom_output{display:table; }
.column_outer{display:table-cell; font-weight:bold; min-width:100px;}
.column_inner{font-weight:normal; margin:4px;}
</style>
<div id="custom_output"></div>
<script>
SP.SOD.executeOrDelayUntilScriptLoaded(function(){
var output = document.getElementById("custom_output");
var clientContext = new SP.ClientContext();
var lists = clientContext.get_web().get_lists();
var query = new SP.CamlQuery(); // blank query to get all items
var parentListItems = lists.getByTitle("List1").getItems(query),
childListItems = lists.getByTitle("List2").getItems(query);
clientContext.load(parentListItems);
clientContext.load(childListItems);
clientContext.executeQueryAsync(
function(){ // on success callback function
var columnMap = createColumns(parentListItems);
createAndAppendCells(childListItems, columnMap);
},
function(sender, args){ // on error callback function
alert(args.get_message());
}
);
// this function builds HTML columns and returns a handy reference map
function createColumns(parentListItems){
var parentEnumerator = parentListItems.getEnumerator(),
columnMap = {};
while(parentEnumerator.moveNext()){
var item = parentEnumerator.get_current();
columnMap[item.get_item("ID")] = createColumn(item);
}
return columnMap;
}
// this function adds a column to the HTML and returns a reference to a div inside it (so we can add cells later)
function createColumn(item){
var outer = document.createElement("div"),
inner = document.createElement("div"),
title = item.get_item("Process");
outer.className = "column_outer";
inner.className = "column_inner";
output.appendChild(outer).appendChild(document.createTextNode(title));
outer.appendChild(inner);
return inner;
}
// this function creates a cell for each child list item and appends it to the appropriate column
function createAndAppendCells(childListItems, columnMap){
var childEnumerator = childListItems.getEnumerator();
while(childEnumerator.moveNext()){
item = childEnumerator.get_current();
var lookup = item.get_item("Process");
if(lookup){
columnMap[lookup.get_lookupId()].appendChild(createCell(item));
}
}
}
// this function creates a cell with text derived from the given list item
function createCell(item){
var cell = document.createElement("div");
cell.innerHTML = item.get_item("SubProcess");
return cell;
}
},"sp.js");
</script>
How you would go about embedding that code on a page depends on the version of SharePoint you're using.
In SharePoint 2010, you can save your HTML/CSS/JavaScript as an HTML file in a document library, then embed it on a page using a Content Editor web part (editing its "Content Link" property to be the URL of the HTML file).
In SharePoint 2013+ you can also use a script editor web part. You can also use SharePoint Designer to create and edit a page to add JavaScript.
I'm writing a small progam wherein I'm getting data using $.get then display the data so far so good and then there's this part then when I click a certain link it refresh the page but it has this blinking effect. Is there a way on how to reload the content get the new updated content then replace the previously loaded data.
NOTE: I didn't use setInterval or setTimeout function because it slows down the process of my website. any answer that does not include those functions are really appreciated.
Here's the code
function EmployeeIssues(){
$('#initial_left').css({'display' : 'none'});
var table = $('#table_er');
$.get('admin/emp_with_issues', function(result){
var record = $.parseJSON(result);
var data = record.data,
employees = data.employees,
pages = data.pages;
if(employees){
$('#er_tab_label').html('<b>Employees with Issues</b>');
for (var i = 0; i < employees.length; i++) {
$('#table_er').fadeIn('slow');
table.append(write_link(employees[i])); // function that displays the data
}
if(pages){
$('#pagination').html(pages);
}
}else{
$('#er_tab_label').html('<b>No employees with issues yet.</b>');
}
});
table.html('');
}
then this part calls the function and display another updated content
$('#refresh_btn').on('click', function(e){
e.preventDefault();
var tab = $('#tab').val();
if(tab == 'er'){
EmployeeIssues();
}
});
What should I do to display the content without any blinking effect?
thanks :-)
This section might be the issue :
if(employees){
$('#er_tab_label').html('<b>Employees with Issues</b>');
for (var i = 0; i < employees.length; i++) {
$('#table_er').fadeIn('slow');
table.append(write_link(employees[i])); // function that displays the data
}
if(pages){
$('#pagination').html(pages);
}
} else ...
It seems you're asking table_er to fade in once per run of the loop whereas s there can only be one such table, you only need to do it once ?
first try re-arringing it like this:
if(employees){
$('#er_tab_label').html('<b>Employees with Issues</b>');
$('#table_er').hide(); // hide it while we add the html
for (var i = 0; i < employees.length; i++) {
table.append(write_link(employees[i])); // function that displays the data
}
$('#table_er').fadeIn('slow'); // only do this after the table has all its html
if(pages){
$('#pagination').html(pages);
}
} else ....
Another possibility is that you're running through a loop and asking jquery to do stuff while the loop is running. It might be better to work out the whole HTML for the new page data in a string and then get the screen to render it in one line. I cna't do this for you as I don't know what's in write_link etc but something like this ..
if(employees){
$('#er_tab_label').html('<b>Employees with Issues</b>');
var sHTML ="";
$('#table_er').hide(); // hide it while we add the html
for (var i = 0; i < employees.length; i++) {
sHTML+=write_link(employees[i]); // maybe this is right ? if write_link returns an HTML string ?
}
table.append(sHTML); // add the HTML from the string in one go - stops the page rendering while the code is running
$('#table_er').fadeIn('slow'); // now show the table.
if(pages){
$('#pagination').html(pages);
}
} else ...
I'm trying to place a google news search within a div on my site. I'm currently using the script google provides, but am a novice at Ajax/JavaScript. I am able to display the most recent stories from google news, but don't know how to have it display within a div let alone manipulate the style with CSS. Below is the code I'm using. Any help would be greatly appreciated!
<script type="text/javascript">
google.load('search', '1');
var newsSearch;
function searchComplete() {
// Check that we got results
document.getElementById('averagecontainer').innerHTML = '';
if (newsSearch.results && newsSearch.results.length > 0) {
for (var i = 0; i < newsSearch.results.length; i++) {
// Create HTML elements for search results
var p = document.createElement('p');
var a = document.createElement('a');
a.href = newsSearch.results[i].url;
a.innerHTML = newsSearch.results[i].title;
// Append search results to the HTML nodes
p.appendChild(a);
document.body.appendChild(p);
}
}
}
function onLoad() {
// Create a News Search instance.
newsSearch = new google.search.NewsSearch();
// Set searchComplete as the callback function when a search is
// complete. The newsSearch object will have results in it.
newsSearch.setSearchCompleteCallback(this, searchComplete, null);
// Specify search quer(ies)
newsSearch.execute('Barack Obama');
// Include the required Google branding
google.search.Search.getBranding('branding');
}
// Set a callback to call your code when the page loads
google.setOnLoadCallback(onLoad);
</script>
If I understand correctly, this is what you need:
Create the <div> and give it an ID:
<div id="your-div">HERE BE NEWS</div>
Then modify the searchComplete funcion like this:
function searchComplete() {
var container = document.getElementById('your-div');
container.innerHTML = '';
if (newsSearch.results && newsSearch.results.length > 0) {
for (var i = 0; i < newsSearch.results.length; i++) {
// Create HTML elements for search results
var p = document.createElement('p');
var a = document.createElement('a');
a.href = newsSearch.results[i].url;
a.innerHTML = newsSearch.results[i].title;
// Append search results to the HTML nodes
p.appendChild(a);
container.appendChild(p);
}
}
}
As for style manipulation, you can match the elements by the given ID in css. For example like this:
#your-div a {
font-weight: bold;
}
EDIT:
To show you that this is working, I have created a jsfiddle: http://jsfiddle.net/enjkG/
There is not a lot of things you can mess up here. I think you may have a syntactic error and did not check the console for errors.