I try to load a json file and and put the content in a
listview with flipswitches at the right side.
My HTML file with one example listview line, which is working fine
(here without the first page and navbar to keep it clearly)
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="liststyle.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div data-role="page" data-theme="b" id="pagetwo">
<div data-role="main" class="ui-content" id="main">
<ul data-role="listview" data-inset="true" id="alarmlist">
<li data-role="fieldcontain">
Control
<select id="test-slider" data-role="slider" name="testslider">
<option value="off">off</option>
<option value="on">on</option>
</select>
</li>
</ul>
</div>
</div>
</body>
and the linked liststyle.css
.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
display: block !important;
padding: 0,9em 75px 0,9em 15px !important;
}
div.ui-slider-switch {
position: absolute;
right: 0;
width: 40%;
top: 12.5%;
}
and the code in the script.js file
$("#pagetwo").on("pageshow" , function() {
var output = '';
for (var x in data.alarm) {
output += '<li data-role="fieldcontain">' +
'<a href="#">' + data["alarm"][x]["time"] +
'<select data-role="slider">' +
'<option value="off">off</option>' +
'<option value="on">on</option></select>' +
'</a> </li>';
}
$('#alarmlist').append(output).listview("refresh");
});
Now i get this result:
http://imageshack.com/a/img540/3844/dxuopI.png
When i delete the .on("pageshow" , function() { and run both pages from start,
i get a bit better result but also an error.
http://imageshack.com/a/img538/9508/89jtvd.png
You just need to tell jQM to enhance the flipswitch as well as refreshing the list ($('#alarmlist').append(output).listview("refresh").enhanceWithin();):
$(document).on("pageshow", "#pagetwo", function () {
var output = '';
for (var x in data.alarm) {
output += '<li data-role="fieldcontain">' +
'<a href="#">' + data["alarm"][x]["time"] +
'</a> <select data-role="slider">' +
'<option value="off">off</option>' +
'<option value="on">on</option></select>' +
'</li>';
}
$('#alarmlist').append(output).listview("refresh").enhanceWithin();
});
DEMO
Related
I developed a basic site using CSS, semantic HTML, javascript, and API. I have built a basic search application using HTML, sass(scss), gulp, and javascript. It connects to an API that populates a page with the results. I chose to utilize the Movie Database API. However, I used jQuery and now need to convert it with just plain JS and the Fetch method. I can't seem to figure out how to do it.
Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel ="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/main.css" />
<title>Movie Box</title>
</head>
<body>
<!-----*** HEADER ***----->
<header>
<div class="clearfix">
<nav>
<!-- LOGO -->
<h1>MovieBox Logo</h1>
<!-- NAV LINKS -->
<ul class="main-nav">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
<!-- SEARCH FORM -->
<form action="#" class="js-search-form">
<p class="form-p">Search for movies by Title</p>
<div class="search">
<span class="fa fa-search"></span>
<input type="text" class="js-query" placeholder="ex. Star Wars" autofocus>
</div>
<button id="ghost-btn" type="submit">Submit</button>
</form>
</header>
<!-----*** SECTION - SEARCH RESULTS ***----->
<section class="js-search-results clearfix">
</section>
<!-----*** SECTION - VIEW MORE ***----->
<section>
<p class="max center-text">Showing max result of 20</p>
<p class="center-text">
<a class="btn second-btn" href="https://www.imdb.com/find" target="_blank">View More Details on IMDB</a>
</p>
</section>
<!-----*** FOOTER ***----->
<footer>Built by Eileen Villahermosa for DWS2</footer>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="js/index.js"></script>
</body>
</html>
Here is my JS:
// Single state variable for endpoint
var MD_BASE_URL = "https://api.themoviedb.org/3/search/movie?
include_adult=false&page=1";
var state = {
query: ''
};
// State modification functions
function getApiData(searchTerm, callback) {
var query = {
query: searchTerm,
language: 'en-US',
api_key: 'sssssssssssssss', // took the key out for privacy
};
$.getJSON(MD_BASE_URL, query, callback);
}
// Render functions
function displayMDSearchData(data) {
var resultElement = '';
if(data.results.length > 1) {
resultElement += '<section class="js-search-results clearfix">';
resultElement += '<h2>' + '<span>' + "Results for " + state.query + '</span>' + '</h2>';
if(data.results)
data.results.forEach(function(results){
resultElement += '<article>';
resultElement += '<div class="container">';
resultElement += '<img src="https://image.tmdb.org/t/p/w500' + results.poster_path + '"/>';
resultElement += '<div class="content">';
if(results.title.length > 20) {
resultElement += '<h3>' + results.title.substr(0,20) +'...</h3>';
} else {
resultElement += '<h3>' + results.title + '</h3>';
}
resultElement += '<p>Released: ' + results.release_date + '</p>';
resultElement += '</div>';
resultElement += '</div>';
resultElement += '</article>';
});
resultElement += '</section>';
console.log(data);
} else {
resultElement += '<p class="no-results">No results</p>';
}
$('.js-search-results').html(resultElement);
}
// Event listeners
function watchSubmit() {
$('.js-search-form').submit(function(e) {
e.preventDefault();
state.query = $(this).find('.js-query').val();
var query = state.query;
getApiData(query, displayMDSearchData);
});
}
$(function(){watchSubmit();});
I've tried to use a multitude of different scripts with my Behance API key to try and create an online portfolio updated automatically through my managing of my Behance Profile.
The one I'm using now is the simplest I've found, using only jQuery, JSON, and is integrated with Bootstrap by Twitter.
Here's my source code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Portfolio with Behance API & jQuery</title>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick-theme.min.css" rel="stylesheet">
<link href="vendor/prism.css" rel="stylesheet">
<!-- http://fontpair.co/ -->
<link href="//fonts.googleapis.com/css?family=Quando|Judson" rel="stylesheet">
<!-- Demo stylesheet -->
<link href="demo.css" rel="stylesheet">
</head>
<body class="demo">
<div class="demo-intro">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<a href="http://siamkreative.com/">
<img src="https://secure.gravatar.com/avatar/f634817190acb57d0f3e61e7c68eabbb?s=160" alt="Julien Vernet" class="avatar img-circle">
</a>
<h1>Bootstrap Portfolio<br> with Behance API & jQuery</h1>
<p class="lead">If you're using Behance to showcase your projects and you would like to embed your portfolio on your site, look no further.</p>
<p>This quick example show you how to retrieve your projects from Behance using their API, store the data in the browser, and display it using Bootstrap 3 markup. To render the template we use jQuery, but you could also use a template engine such as pure.js or handlebars. Find the most suitable template engine here.</p>
<div class="btn-group" role="group">
Grid Layout
Slider Layout
</div>
</div>
</div>
</div>
</div>
<div class="demo-grid" id="grid">
<div class="container">
<h2>Grid Layout <small>Using Bootstrap Grid</small></h2>
<div id="be_grid" class="row be__portfolio be__grid">Loading...</div>
</div>
</div>
<div class="demo-slider" id="slider">
<div class="container">
<h2>Slider Layout <small>Using Slick Carousel</small></h2>
<div id="be_slider" class="row be__portfolio be__slider">Loading...</div>
</div>
</div>
<div class="demo-source" id="source">
<div class="container">
<h2>Source code</h2>
<!-- http://prismjs.com/plugins/file-highlight/ -->
<pre class="line-numbers" data-src="https://raw.githubusercontent.com/SiamKreative/Bootstrap-Portfolio-Behance-API/master/jquery.behance.js"></pre>
</div>
</div>
<div class="demo-comments">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h3>Leave your feedback below :)</h3>
<br>
<div id="disqus_thread"></div>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/layzr.js/1.4.3/layzr.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-smooth-scroll/1.5.6/jquery.smooth-scroll.min.js"></script>
<script src="vendor/prism.js"></script>
<script src="jquery.behance.js"></script>
<script>
$(function() {
$('a').smoothScroll();
});
</script>
<script>
(function() {
var d = document, s = d.createElement('script');
s.src = '//siamkreative.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
</body>
</html>
Here's the jQuery:
$(function () {
var beUsername = 'josephrobee27e',
beApiKey = 'ugCqRrCuAuHAD6gvDTmegYXLxO2lWVca',
bePerPage = 12,
beProjectAPI = '//www.behance.net/v2/users/' + beUsername + '/projects?callback=?&api_key=' + beApiKey + '&per_page=' + bePerPage,
beItemWidth = 360,
beItemHeight = 282,
beLazyLoad = true,
beLinkTarget = '_self';
/**
* Get Data from Behance API
*/
if (sessionStorage.getItem('behanceProject')) {
setPortfolioTemplate();
} else {
// Load JSON-encoded data from the Behance API & Store it in sessionStorage
$.getJSON(beProjectAPI, function (project) {
sessionStorage.setItem('behanceProject', JSON.stringify(project));
setPortfolioTemplate();
});
}
/**
* Populate Data
*/
function setPortfolioTemplate() {
var projects = JSON.parse(sessionStorage.getItem('behanceProject')).projects;
var portfolio = $('.be__portfolio').html('');
var items = '';
var image = '';
$.each(projects, function (i, val) {
// If Lazy load is enabled, edit the markup accordingly
beLazyLoad ? image = 'src="images/loading.png" data-lazy="' + val.covers.original + '"' : image = 'src="' + val.covers.original + '"';
// Create the items template
items += '<div class="be__item be__item__' + val.id + ' col-lg-4 col-md-4 col-sm-4 col-xs-6 col-xxs-12">';
items += '<a href="' + val.url + '" title="' + val.name + '" target="' + beLinkTarget + '">';
items += '<img class="img-responsive" ' + image + ' width="' + beItemWidth + '" height="' + beItemHeight + '" alt="' + val.name + '">';
items += '</a>';
items += '</div>';
// How many items are shown
return i < bePerPage;
});
// Append items only once
portfolio.each(function (index, el) {
$(el).append(items);
});
// Create Lazy Load instance for Grid Layout
if (beLazyLoad) {
var layzr = new Layzr({
container: '.be__grid',
selector: '[data-lazy]',
attr: 'data-lazy'
});
}
// Slider Layout
$('.be__slider').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
lazyLoad: 'ondemand',
responsive: [{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
}, {
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}]
});
}
});
I see no issues in the code. However this is all that is displayed:
Lastly here's a screen shot of the JSON file it's pulling, so I know that it's printing the information the script requires:
Any help will be seriously appreciated. I honestly have no clue what I'm doing wrong. I included my username and API key because I thought maybe my account was set up wrong and maybe someone could help me with that also.
Turns out for whatever reason the application did not work on a local machine.
I'm currently making a list that creates categories based on user input through a text field. Each time the create button is clicked my JavaScript is called and adds a div that should be collapsible to show a list.
Right now I only have a button collapsing underneath but there will be additional content after I can get the collapse operational.
HTML: The JQuery UI is for potential drag-drop functionality later:
<link href="main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.3.0.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!--
Bootstrap is a lightweight and relativley flexible framework that is great for responsive sites.
Although there are some downsides, as with almost anything, it is great for getting a good looking site up and running quickly.
This would allow this To Do List to be used just as easily on a mobile device while still maintaining an attractive look.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="container">
<div class="h1 row text-center" id="main-header">To Do List</div>
<div class="row" id="category-anchor">
<div role="form" class="form-inline">
<label id="category-label">New Category: </label>
<input type="text" id="new-category" class="form-control">
<button id="create-category" class="btn btn-primary form-control" onClick="createCategory()">Create</button>
</div>
</div>
<li id="anchor">
</li>
</div>
</body>
<script src="todo.js"></script>
</html>
Here is my tiny bit of CSS:
* {
font-family: Serif;
}
#main-header {
font-weight: bold;
background-color: #00ffff;
margin-top: 0px;
}
#category-label {
font-size: 150%;
}
#create-category {
font-weight: bold;
font-family: Sans-serif;
font-size: 100%;
}
li {
list-style-type: none;
}
JavaScript:
var categoryID = 0;
var todoListID = 1000;
function createCategory() {
var newCategory = document.getElementById("new-category").value;
if(newCategory.trim().length != 0) {
var categoryRow = '<div id="' + categoryID + '" class="category">';
categoryRow += '<div class="h2 row text-center" data-toggle="collapse" data-target="#' + todoListID + '">' + newCategory + '</div>';
categoryRow += '</div>';
document.getElementById("new-category").value = "";
}
$(categoryRow).appendTo("#anchor");
addToDoList();
categoryID++;
todoListID++;
}
function addToDoList() {
var list = '<div id="' + todoListID + '" class="list collapse">';
list += '<div class="row">';
list += '<button class="btn btn-success create-list">New ToDo</button>';
list += '</div>';
list += '</div>';
$(list).appendTo("#" + categoryID);
}
If I use "collapse in" the button shows but the above div is still not collapsible.
The following code works as expected on the various desktop browsers, however its target goal is oveasly a smartphone. when accessed from iPhone - content is blank under <ul>?
json is pulled from php page and works as expected.
EDITED: changed getJSON to static json var info for testing - still not rendered on mobile phone? - also tried various version of JQuery and JQuery-Mobile still no change.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no">
<link href="http://jqmdesigner.appspot.com/gk/lib/jquery.mobile/1.4.2/flatui/jquery.mobile.flatui.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<title>parse JSON</title>
<script>
var info = [
{
"UID":5665,
"StudentID":"BA1400",
"LastName":"BARNES",
"FirstName":"JOHN",
"Affiliation":"DFRS"},
{"UID":10430,
"StudentID":"BA3700",
"LastName":"Barnyard",
"FirstName":"Ashley",
"Affiliation":"OTHER"},
{"UID":5781,
"StudentID":"BJ9188",
"LastName":"BARCLAY",
"FirstName":"GEOFFREY",
"Affiliation":"DFRS"},
{"UID":14815,
"StudentID":"BT0021",
"LastName":"Barhydt",
"FirstName":"Jimmy",
"Affiliation":"TAKOMA PARK"
}
];
$(document).on("pageinit", "#info-page", function () {
var server_url = "http://myDomain/tt_json.php";
$.getJSON(server_url, function(notUsing){
var li = "";
$.each(info, function (i, name) {
li += '<li>' + name.LastName + ', ' + name.FirstName + '</li>';
});
$("#prof-list").append(li).promise().done(function () {
$(this).on("click", ".info-go", function (e) {
e.preventDefault();
$("#details-page").data("info", info[this.id]);
$.mobile.changePage("#details-page");
});
$(this).listview("refresh");
});
});
});
$(document).on("pagebeforeshow", "#details-page", function () {
var info = $(this).data("info");
var info_view = "";t
for (var key in info) {
info_view += '<div class="ui-grid-a"><div class="ui-block-a"><div class="ui-bar field" style="font-weight : bold; text-align: left;">' + key + '</div></div><div class="ui-block-b"><div class="ui-bar value" style="width : 75%">' + info[key] + '</div></div></div>';
}
$(this).find("[data-role=content]").html(info_view);
});
</script>
</head>
<body>
<!--first page -->
<div data-role="page" id="info-page">
<div data-role="header" data-theme="b">
<h1>GET JSON data</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="prof-list" data-divider-theme="a" data-inset="true">
<li data-role="list-divider" data-theme="b" role="heading">Names</li>
</ul>
</div>
</div>
<!--second page -->
<div data-role="page" id="details-page">
<div data-role="header" data-theme="b">Go back
<h1>User Details</h1>
</div>
<div data-role="content"></div>
</div>
</body>
</html>
Not sure why this resolves the issue since i'm doing a standard json request from same domain but it did fix the issue:
added header:
header("Access-Control-Allow-Origin: *");
I have the following code working but would like when I click on each posts, the post content to be displayed using either an external .html or within the default html a div page so that the content does not show the whole website contents:
HTML Code:
<head>
<meta charset="utf-8">
<title>Hope</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="css/style.css"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div id="devotionpage" data-role="page">
<div data-role="header" class="sys_hd" data-position="fixed" data-id="sys_header" data-theme="c" >
<h1>Daily Devotional Messages</h1>
</div><!-- header -->
<div data-theme="c" data-role="content" id="devotionlist"> </div><!-- content -->
<div data-role="footer" data-position="fixed" data-id="sys_footer" data-theme="c">
<div data-role="navbar" >
<ul>
<li>Home</li>
<li>Disclaimer</li>
</ul>
</div><!-- navbar -->
</div><!-- footer -->
</div><!-- page -->
<div id="articlepost" data-role="page" data-transition="fade">
<div data-role="header" class="devotion_hd" data-position="fixed" data-theme="c" >
<div data-theme="c" data-role="content" id="articlecontent"> </div><!-- content -->
<div data-role="footer" data-position="fixed" data-id="sys_footer" >
<div data-role="navbar" >
<ul>
<li>Home</li>
<li>Disclaimer</li>
</ul>
</div><!-- navbar -->
</div><!-- footer -->
</div><!-- page -->
</body>
</html>
JS Code:
$(document).on("pagebeforeshow", "#devotionpage", function() {
$(this).find(".ui-listview-filter input").val("").trigger("change");
});
$( document).ready(function (){
var url = 'http://howtodeployit.com/category/daily-devotion/feed/?json=recentstories&callback=listPosts' ;
$.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 < 6 ; i++) {
var entry = postlist[i];
html += '<li>';
html += '<a href="' + entry.link + '">';
html += '<div class="etitle">' + entry.title + '</div>' ;
html += '<div class="eauthor">' + entry.author + '</div>' ;
html += '<div class="epubdate">' + entry.publishedDate + '</div>';
html += '<div class="esnippet">' + entry.contentSnippet + '</div>';
html += '</a>';
html += '</li>';
}
html += '</ul>';
$( "#devotionlist" ).append(html);
$( "#devotionlist ul[data-role=listview]" ).listview();
}});
});
Thanks
I see one issue with the code. The function showarticle has this line
(html+='</ul>';) outside the ajax call's callback handler, but the variable html is declared inside it. So, actually the line
html+='</ul>' is translated to undefined += '</ul>', which is not correct, unless you have var html; declared globally outside.
"the post content to be displayed using either an external .html"
you can make an ajax call to the external html with content type as text/html, and load the response into a div.
I am afraid I should not post full workable code, because SO is for helping people achieve their solution, and point them in right direction. So, I will post only a code snippet.
$.ajax({
url: your_server_side_script.extension, //example: handleInput.php
dataType: 'text/html',
data: {postid: $('#postid').val()},
success: function(responseHTML) {
$('#postContentDiv').html(responseHTML);
}
});
your_server_side_script.extension (handleInput.php) should generate html tags and print it, so that it'll be available in responseHTML variable in ajax success.
I created a function to handle display of each post on a different page:
function showPost(id) {
$('#devotionlist').html("Please wait...");
$.getJSON('http://howtodeployit.com/?json=get_post&post_id=' + id + '&callback=?', function(data) {
var output='';
html += '<h3>' + data.post.title + '</h3>';
html += data.post.content;
$('#devotionlist').html(html);
}); //get JSON Data for Stories
} //showPost
This bit calls the onClick function:
html += '<a href="#articlecontent" onclick="showPost(' + val.id + ')">';