I have the following code to load the first 10 blog posts and want to see how I can add a 'more...' text link at the end of the lists to load more posts:
$(document).ready(function(){
url = 'http://hopexxx.com/category/daily-devotion/feed/';
$.ajax({
type: "GET",
url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=1000&callback=?&q=' + encodeURIComponent(url),
dataType: 'json',
error: function(){
alert('Unable to load feed, Incorrect path or invalid feed');
},
success: function(data){
var postlist = data.responseData.feed.entries;
var html = '<ul data-role="listview" data-filter="true">';
for (var i = 0; i < 10; i++) {
var entry = postlist[i];
html += '<li>';
html += '<a href="#">';
html += '<div class="entry">' + entry.title + '</div>';
html += '<div class="entry">' + entry.author + '</div>';
html += '<div class="entry">' + entry.publishedDate + '</div>';
html += '<div class="entry">' + entry.contentSnippet + '</div>';
html += '</a>';
html += '</li>';
}
html += '</ul>';
$("#postlist").append(html);
$("#postlist ul[data-role=listview]").listview();
}});
});
The google feed API doesn't have the option to skip elements, its just a feed, so it loads all elements (as you already have defined num=... you already know that you can load more than 4 elements (which is the default).
To do what you want you would have to call the same request on button click and then implement some logic to compare if the new result contains elements which are not displayed on your page. If so, simply append them...
Related
I would like to add a jquery toggle effect on my code which has HTML within my Javascript. Any advice?
GuessGame.prototype.createBoard = function(){
var html = '';
Object.keys(this.cards).forEach(function(key) {
html += '<div class="card" id="' + key + '"';
html += ` style='background-image: url(img/${key}.jpg)'`;
html += '>'
html += '<div class="front" ';
html += 'id="' + key + '">';
html += '</div>';
html += '</div>';
});
// Add all the divs to the HTML
document.getElementById('board').innerHTML = html;
In your example you're not really using the power of jQuery.
Here is a better approach.
GuessGame.prototype.createBoard = function(){
var board = $('#board');
Object.keys(this.cards).forEach(function(key) {
var card = $('<div class="card" id="' + key + '" style="background-image: url(img/${key}.jpg)"><div class="front"></div></div>');
// add onClick Event
card.on('click', function(e) {
card.toggleClass('toggled-class');
});
// append card to board
board.append(card);
});
So I have this jquery function that is pulling data from another domain and i want to display that data with ajax when the user enters a value into the search box. As of now the app continuously gives me the error message I wrote from the error state no matter if I search by .productName or .itemCode. Any ideas what I'm doing wrong?
function foodQuery() {
var key = "123456789";
$("#searchinput").keyup(function() {
var value = $(this).val();
foodQuery(value);
});
function foodQuery(key) { // key is passed as a parameter
var foodURL = "http://api.example.com/items?key=" + key;
$.ajax({
url: foodURL,
type: 'GET',
contentType: "text/plain",
dataType: 'json',
success: function(json) {
$.each(json.products, function(index, product) {
// build product block
var htmlString = '<div class="product large-3 columns">';
//open imgwrap
htmlString += '<div class="imgwrap">';
//get img src
htmlString += ' <img class="item_img" src="http://api.example.com/assets/images/' + product.itemCode + '#2x.jpg" />';
// close imgwrap
htmlString += '</div>';
// open textwrap
htmlString += '<div class="textwrap">';
// get productName
htmlString += '<h1 class="product_headline">' + product.productName + '</h1>' ;
// get itemCode
htmlString += '<h4 class="item_id" >#' + product.itemCode + '</h4>';
// get description
htmlString += '<p class="product_desc">' + product.description + '</p>';
// open price
htmlString += '<div class="price">';
// get price & close div
htmlString += '<span class="dollar"><span class="usd">$</span>' + product.price + '</span> <span class="product_desc">per weight</span></div>'
// close divs
htmlString += '</div>';
//console.log(htmlString);
$('.listing').append( $(htmlString) );
}); //end each
}, // end success
error: function(e) {
console.log(e.message);
$('.listing').append( '<h1 class="errmsg" >Sorry, there was an unkown error.</h1>' );
} // end error
}); // end ajax request
$(".listing").html("");
}
}
Since its from a different domain, you can try using jsonp
Trying to print my htmlString in the .listing div but I'm only getting the last item in the array, yet the console.log loops correctly. what gives?
$.each(json.products, function(index, product) {
// build product block
var htmlString = '<div class="product large-3 columns">';
//open imgwrap
htmlString += '<div class="imgwrap">';
//get img src
htmlString += ' <img class="item_img" src="http://api.example.com/assets/images/' + product.itemCode + '#2x.jpg" />';
// close imgwrap
htmlString += '</div>';
// open textwrap
htmlString += '<div class="textwrap">';
// get productName
htmlString += '<h1 class="product_headline">' + product.productName + '</h1>' ;
// get itemCode
htmlString += '<h4 class="item_id" >' + product.itemCode + '</h4>';
// get description
// get price
// close divs
htmlString += '</div>';
console.log(htmlString);
$('.listing').html(htmlString);
}); //end each
You are overriding the contents of listing in each iteration, instead you need to append the contents.
When you use .html() it will remove the current contents of the element, then replace it with the passed content. To add the new content after the existing one you can use .append()
If you want to clear the listing element, you can do it before the beginning of the loop as shown below
$('.listing').html(''); //clear the listing element if needed
$.each(json.products, function(index, product) {
// build product block
var htmlString = '<div class="product large-3 columns">';
//open imgwrap
htmlString += '<div class="imgwrap">';
//get img src
htmlString += ' <img class="item_img" src="http://api.example.com/assets/images/' + product.itemCode + '#2x.jpg" />';
// close imgwrap
htmlString += '</div>';
// open textwrap
htmlString += '<div class="textwrap">';
// get productName
htmlString += '<h1 class="product_headline">' + product.productName + '</h1>';
// get itemCode
htmlString += '<h4 class="item_id" >' + product.itemCode + '</h4>';
// get description
// get price
// close divs
htmlString += '</div>';
console.log(htmlString);
$('.listing').append(htmlString); //add the current content to existing one
}); //end each
With .html() you're replacing the contents after each loop. Instead, append:
$('.listing').html(htmlString);
becomes:
$('.listing').append( $(htmlString) );
I have a Jquery accordion, accordion has pan's, list elements and anchor tags in list elements, href attributes of anchor tags have current page URL's. I just want that when a page is visited a particular panel (which contains that anchor tag) automatically opens and its list element should become active. I have code which make accordion and snippet in end which make list element active. But list element is not active and panel is not opened. I think I am missing something badly.
Here is code:
<script>
$.ajax({
url: "/categories",
type: 'GET',
success: function(data) {
var content = "";
content += '<div id="category-navigation">';
for (i = 0; i < data.length; i++) {
content += '<div class="head">';
content += '<label class="categoryLables">' + data[i].title;
content += '</label>';
content += '<div>';
content += '<div class="boardsMargin">';
content += '<ul>';
for (j = 0; j < data[i].assigned_boards.length; j++) {
content += '<li>';
content += "<a href='/#categories/" + data[i].id + "/boards/" + data[i].assigned_boards[j].id + "'>";
content += data[i].assigned_boards[j].name;
content += '</a>';
content += '</li>';
}
content += '</ul>';
content += '</div>';
content += '</div>';
content += '</div>';
}
content += '</div>';
$("#myNavigation").html("");
$("#myNavigation").html(content);
$('.head').accordion({
heightStyle: "content",
active: true,
collapsible: true
});
$('.head li').each(function() {
li = $(this);
a = $('a', li);
myUrl = "";
myUrl += (location.protocol + "//" + location.hostname +
(location.port && ":" + location.port));
myUrl += (a.attr('href'));
if (myUrl == window.location.href) {
console.log(myUrl);
console.log(window.location.href);
li.addClass('active');
}
});
}
});
</script>
Brief Demo
My question is quite similar to this question. And I am following its 1st answer.
For more clear view, this is picture of my accordion.
As a side note: I am working in ruby 2.2.1 and rails 4.1
This code should do the trick:
$(document).find("a[href*='" + '/' + window.location.pathname + "']").parents(".head").find("h3").trigger("click");
Example of where to place your code
I have the following .js code but when i test the site, it only displays the wordings as seen in each but no contents. What i want to achieve at the end is to be able to display 5 posts and also add a link at the bottom to display more mosts:
$(document).ready(function(){
url = 'http://hopexxx.com/category/daily-devotion/feed/';
$.ajax({
type: "GET",
url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=1000&callback=?&q=' + encodeURIComponent(url),
dataType: 'json',
error: function(){
alert('Unable to load feed, Incorrect path or invalid feed');
},
success: function(data){
var postlist = data.responseData.feed.entries;
var html = '<ul data-role="listview" data-filter="true">';
for (var i = 0; i < 5; i++) {
html += '<li>';
html += '<a href="#">';
html += '<div class="entry">entry.title</div>';
html += '<div class="entry">author</div>';
html += '<div class="entry">publishedDate</div>';
html += '<div class="entry">contentSnippet</div>';
html += '</a>';
html += '</li>';
}
html += '</ul>';
$("#postlist").append(html);
$("#postlist ul[data-role=listview]").listview();
}});
});
If you know that your postlist is not null, and that each entry has properties 'title', 'author', 'publishedDate' and 'contentSnippet' try this:
var postlist = data.responseData.feed.entries;
var html = '<ul data-role="listview" data-filter="true">';
for (var i = 0; i < 5; i++) {
var entry = postlist[i];
html += '<li>';
html += '<a href="#">';
html += '<div class="entry">' + entry.title + '</div>';
html += '<div class="entry">' + entry.author + '</div>';
html += '<div class="entry">' + entry.publishedDate + '</div>';
html += '<div class="entry">' + entry.contentSnippet + '</div>';
html += '</a>';
html += '</li>';
}
html += '</ul>';
$("#postlist").append(html);
try a $.each loop on data.responseData.feed.entries, see here for details