We Keep Coding

How can I list posts dynamically using jquery and json api?

I want to retrieve posts from my site web with JSON API, and I tried more codes but no data displaying. Where is the problem?
HTML:
<div data-role="page" id="searchPage" >
<div data-role="header" data-position="fixed">
<h1>News</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="searchFood"></ul>
</div>
JS:
$(document).on("pageinit", "#searchPage", function(){
$.getJSON("http://www.maan-lagh.com/?json=get_recent_posts", function(data){
var output = '';
$.each(data, function (index, value) {
output += '<li>' + value.title + '</li>';
});
$('#searchFood').html(output).listview("refresh");
});
});

Fetch Images From SharePoint Into Bootstrap Modal/Carousel

I'm fetching images from SharePoint REST API and writing the calls along with HTML into an HTML doc.
Specifically a Bootstrap Modal Carousel.
I'm getting all the images and content writing to some tiles. The problem are the images in the Modal.
The user clicks on an icon, the Modal fires, the first image in the Carousel displays but it won't navigate next/previous, even though the HTML is being written for each one.
Here's the HTML:
<div class="container">
<!-- GLOBAL NAVIGATION -->
<div class="row">
<div class="col-md-12">
<script type="text/javascript" src="/js/nav.js"></script>
</div>
</div><!-- /end global nav -->
<!-- TILE WRAPPER -->
<div class="row bgTexture bgTexture2 ">
<div class="col-md-12">
<!-- TOP ROW OF TILES -->
<div class="row aoTilesTopWrapper">
<h2>TITLE GOES HERE</h2>
<!-- ///////// BOOTSTRAP ROTATOR -->
<div class=" col-md-12 allModals">
</div><!-- /end allModals -->
</div>
<!-- ///////// end bootstrap modal -->
</div><!-- /end row - top row -->
<!-- BOTTOM ROW OF TILES -->
<div class="row aoTilesBottomWrapper">
<!-- BOTTOM ROW TILES GO HERE -->
</div><!-- /end row - bottom row -->
</div><!-- /end col-md-12 -->
</div><!-- /end main row -->
</div><!-- /end container /content -->
<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/bootstrap.min.js" charset="utf-8"></script>
<script src="/js/custom.js" charset="utf-8"></script>
<script src="/js/add-ons.js" charset="utf-8"></script>
<script>
// Select third list item
var liToSelect = 7;
$(".nav.nav-pills li:eq("+(liToSelect-1)+")").addClass("active");
$(document).ready(function(){
addOns();
});
$('.carousel').carousel({
pause: true,
interval: false
});
</script>
JS/Ajax:
function addOns(){
$.ajax({
async: false,
url: "/_api/lists/getByTitle('Products')/items",
type: "GET",
headers: { "Content-Type": "application/json;odata=verbose", "Accept": "application/json;odata=verbose" },
success: function (data) {
$.each(data.d.results, function () {
var itemID = this.Id;
// Image tiles
var aoTiles = "<div class='col-sm-4 tile' data-imageID='" + this.Id + "'><span class='openRotator' data-toggle='modal' data-target='.itemID" + this.Id + "'><a href='#'><img src='/media/new-window-icon.png' width='20'/></a></span><div class='tileImg'><img src='" + this.Tile_x0020_Thumbnail_.Url + "'/></div><div class='tileTitle'>" + this.Title + "</div><div class='tilePrice'>" + this.Content_x0020_Starting_x.toFixed(2) + "</div></div>";
$(".aoTilesTopWrapper").append(aoTiles);
// Modal
$(".allModals").append("<div class='modal fade bs-example-modal-lg itemID" + this.Id + "' tabindex='-1' role='dialog' aria-labelledby='myLargeModalLabel' aria-hidden='true'><div class='modal-dialog modal-lg'><div class='modal-content'><div id='carouselId" + this.ID + "' class='carousel slide' data-ride='carousel'><!-- Wrapper for slides --><div id='carousel' class='carousel-inner'><!-- Gallery images go here --></div><!-- Controls --><a class='left carousel-control' href='#carouselId" + this.Id + "' role='button' data-slide='prev'></a> <a class='right carousel-control' href='#carouselId" + this.Id + "' role='button' data-slide='next'></a></div></div></div></div>");
// Carousel divs002
$.each(this.Carousel_x0020_Image_x002.split(";"), function () {
$(".modal.itemID"+ itemID +" .carousel-inner").append("<div class='item'><img src='" + this + "'/></div>");
});
});
},
error: function (data) {
alert(data.statusText);
}
});
return true;
}
Any idea why the carousel images aren't sliding?

You're going to laugh. The first <div class="item"> needed the .active class in order for it to work.
Duh!

Having same page footer when open RSS pages

When I click on RSS items in my mobile app, I would like to see same page footer as I have in my first page. I've created my app using Cordova 4.3.0, jQuery mobile and read RSS feeds using jQuery in my onDeviceReady() function in index.js file as follow:
onDeviceReady: function () {
$(function () {
$.get('http:myRssUrl.cshtml',function(data) {
var $XML = $(data);
var html = '';
$XML.find("item").each(function() {
var $this = $(this),
item = {
title: $this.find("title").text(),
link: $this.find("link").text(),
description: $this.find("description").text(),
pubDate: $this.find("pubDate").text(),
author: $this.find("author").text(),
enclosure: $this.find("enclosure").attr('url'),
};
html +=
'<a class="result-link" title=" " style="text-decoration: none" href="' + item.link + '" style="font-size: 11px" >' +
'<div class="result-image">' +
' <figure>' +
'<img src="' + item.enclosure + '" style="display: block;"></img>' +
'</figure>' +
'</div>' +
'<div class="alltext" style="padding-right: 5px;">' +
'<h3 class="result-title">' + item.title +'</h3>' +
'<div class="result-description">' + item.description +'</div>' +
'</div></a>'
});
jQuery('#result').html(html);
});
});
app.receivedEvent('deviceready');
}
I also have my footer navigation bar in footer.html file which will be loaded in index.html file as follows:
<script>
$(document).on('pageinit', "#index", function (event, ui){
$("#" + event.target.id).find("[data-role=footer]").load("pages/footer.html", function(){
$("#" + event.target.id).find("[data-role=navbar]").navbar();
});
});
</script>
<body>
<div data-role="page" class="app" id="index">
<div data-role="header" data-position="fixed" data-id="main-header" id="header">
<div data-role="navbar" class="ui-btn-active ui-state-persist">
<ul>
<li>
</li>
<li></li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<div data-role="content" data-theme="d" id="deviceready">
<div id="result" data-role="listview">
</div>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-id="main-footer" id="footer">
</div><!-- /footer -->
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
My problem is that I can't load my page footer navbar in my RSS pages, I saw some relevant examples about it and applied different approaches, but still have the same problem.

Append more Data into existing Data

I was hoping not to ask this question yet since I decided to read more and do more research but at the moment I am not getting much far with it.
This is my code:
function listPosts(data) {
var $count = data.count;
var limitposts = 5;
var $output = $('<ul class="posts" data-role="listview" data-filter="true">')
$.each(data.posts,function(i, val) {
console.log(i);
if (i<limitposts && i>=0) {
var $post = $('<li/>').append([$("<h3>", {html: val.title}),$("<p>", {html: val.excerpt})]).wrapInner('');
$output.append($post).appendTo('#postlist');
i++;
// return (i !== 4);
}});
}
HTML
<!-- Page: home -->
<div id="home" data-role="page" data-theme="d" data-title="My first App">
<div data-role="listview">
Display Messages
</div><!-- links -->
</div><!-- page -->
<div id="devotion" data-role="page" data-title="My first App">
<div data-role="header" data-theme="a" data-position="fixed"> <h2>Devotional Messages</h2></div><!-- header -->
<div data-theme="d" data-role="listview" id="postlist"> </div><!-- content -->
<div class="addMorePosts">Load More Posts...</div>
</div><!-- page -->
<script src="http://howtodeployit.com/category/daily-devotion/?json=recentstories&callback=listPosts" type="text/javascript"></script>
I initially limited the number of Posts displayed by using the Return statement. I now changed it to For statement to see if I can increment the number of Posts displayed by the click of a button.
At this stage I am trying to figure out the best logic to use. I have tried to add another Function to achieve this but no luck. Still reading and researching but was hoping for guidance or good example

function addMorePosts ( data, offset, amount ) {
var $postsList = $('#postlist'),
posts = data.slice(offset, amount);
$.each(posts, function ( index, post ) {
$postsList.append(
'<li>' +
'<h3>' + post.title + '</h3>' +
'<p>' +
post.excerpt +
'' +
'</p>' +
'</li>'
);
});
}
JSFiddle: http://jsfiddle.net/V4Ucv/2/

how to bind id at <li> with event Onclick

Good day all, I little stuck how to bind value id at <li> tag
My ajax
//AJAX MENGAMBIL KATEGORI SEKOLAH
$.getJSON('http://localhost/aplikasi/assets/www/include/kategori.php', function(data) {
console.log(data); //Untuk melihat data yang berhasil diambil di firebugs
results = data.items; //Menampung array ke dalam variabel results
//menggunakan fungsi each untuk membuat elemen list, sesuai banyaknya array
$.each(results, function (index, kategori) {
var html;
//Membuat element list untuk setiap kategori
html = '<li id="klik" data-katid="';
html += kategori.kat_id;
html += '"><a id="klik2" data-transition="slide" href="#list" OnClick="carisekolah()">';
html += kategori.kat_nama;
html += '</a></li>';
//Memasukkan ke dalam unordered list
$('#kategorisekolah').append(html);
});
//Refresh list
$('#kategorisekolah').listview('refresh');
//Memberikan fungsi ke setiap element
$("#listsekolah").children("li").bind("click", function (e) {
carisekolah($(this).attr("data-katid"));
});
});
function carisekolah(id) {
$.getJSON('http://localhost/aplikasi/assets/www/include/list.php?id=' + id, function(data) {
console.log(data); //Untuk melihat data yang berhasil diambil di firebugs
results = data.items; //Menampung array ke dalam variabel results
$('#listsekolah').empty();
//menggunakan fungsi each untuk membuat elemen list, sesuai banyaknya array
$.each(results, function (index, sekolah) {
var html;
//Membuat element list untuk setiap sekolah
html = '<li data-sekid="' + sekolah.content_id + '">';
html += '<h2>' + sekolah.content_nama + '</h2>';
html += '<p>' + sekolah.content_alamat + '</p>';
html += '<p> Telepon : ' + sekolah.content_telepon + '</p>';
html += '</li>';
//Memasukkan ke dalam unordered list
$('#listsekolah').append(html);
});
//Refresh list
$('#listsekolah').listview('refresh');
});
}
My HTML
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Aplikasi Pencarian Sekolah</h1>
</div>
<div data-role="content">
<p> Selamat datang di aplikasi pencarian sekolah..<br /><br />
Silahkan memilih kota..
</p>
JABODETABEK
</div>
</div>
<div data-role="page" id="kategori">
<div data-role="header">
<h1>Aplikasi Pencarian Sekolah</h1>
</div>
<div data-role="content">
<ul id="kategorisekolah" data-role="listview" data-inset="true"></ul>
</div>
</div>
<div data-role="page" id="list" data-add-back-btn="true" data-back-btn-text="Kembali">
<div data-role="header">
<h1>List Sekolah</h1>
</div>
<div data-role="content">
<!-- Format list Jquery Mobile menggunakan fitur 'Pencarian' -->
<ul id="listsekolah" data-role="listview" data-filter="true" data-filter-placeholder="Cari sekolah..." data-inset="true"></ul>
</div>
</div>
</body>
I tested with static id and it works
$.getJSON('http://localhost/aplikasi/assets/www/include/list.php?id=1'
My function carisekolah(id) with get that parameter id is totaly fail, How i can get the paramater id in the right ways?

It's hard to understand your question. But it sounds like you want to do something like this:
$("li").on("click", function(event){
var id = $(this).attr("id");
carisekolah(id);
});

It seem's like you are binding the <li> of your list at DOM ready, however in your HTML markup your list has no children. If these are being added dynamically, then you should use event delegation. Give this a try:
$(document).on('click', '#listsekolah li', function() {
carisekolah(this.id);
});
If the ID is actually coming from the data-katid attribute, call the function like this:
carisekolah($(this).data("katid"));