I get some data out of an API. I make two calls to the API and save this output in a variable. Now I have two links - One for Data1 and one for Data2. If I click on Data1, the first call should be loaded. Click on Data2 shows the second call should take place. When someone visits the site, Data1 should be the default displayed dataset.
I have a nearly working solution:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
$("#data1").click(function(e){
e.preventDefault();
var datasets = document.getElementById("datasets");
var html = '';
var i = 0;
var results = <?php echo json_encode($resultsD1) ?>;
for (const result of results) {
html += '<article class="dataset"><span class="title">' + result["title"] + '</span><div class="data-meta">';
html += '<span class="release">' + result["release"] + '</span></div></article>';
i++;
}
products.innerHTML = html;
});
$("#data2").click(function(e){
e.preventDefault();
var datasets = document.getElementById("datasets");
var html = '';
var i = 0;
var results = <?php echo json_encode($resultsD2) ?>;
for (const result of results) {
html += '<article class="dataset"><span class="title">' + result["title"] + '</span><div class="data-meta">';
html += '<span class="release">' + result["release"] + '</span></div></article>';
i++;
}
products.innerHTML = html;
});
});
</script>
Now if I click on Data1 the correct data is loaded. The same when I click on Data2. But how can I make Data1 as default when the site is loaded? Also my code seems so bad constructed. I repeat the whole for loop two times...
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
function setData(dataset_type){
var html = '';
var i = 0;
var products = document.getElementById("datasets");
var results = <?php echo json_encode($resultsD1) ?>;
if(dataset_type == 2){
results = <?php echo json_encode($resultsD2) ?>;
}
for (const result of results) {
html += '<article class="dataset"><span class="title">' + result["title"] + '</span><div class="data-meta">';
html += '<span class="release">' + result["release"] + '</span></div></article>';
i++;
}
products.innerHTML = html;
}
// Default Call onload for dataset 1
setData(1);
$("#data1").click(function(e){
e.preventDefault();
setData(1);
});
$("#data2").click(function(e){
e.preventDefault();
setData(2);
});
});
</script>
You need to add the logic to load the data in function, and call the function on button click as well as on page load.
As per your code, as soon as button is clicked the new data is replacing your old data, do you want to do that or you want to keep old data as it is and append new data? I have added comments in the script as answered for above question
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
function loadData(){
var datasets = document.getElementById("datasets");
var html = '';
var i = 0;
var results = <?php echo json_encode($resultsD1) ?>;
for (const result of results) {
html += '<article class="dataset"><span class="title">' + result["title"] + '</span><div class="data-meta">';
html += '<span class="release">' + result["release"] + '</span></div></article>';
i++;
}
//products.append(html); // if you want to append data uncomment this and comment below
products.innerHTML = html; // if you want to replace data comment this and uncomment above
}
$(function(){
// function call on page load
loadData();
$("#data1").click(function(e){
e.preventDefault();
loadData();
});
$("#data2").click(function(e){
e.preventDefault();
var datasets = document.getElementById("datasets");
var html = '';
var i = 0;
var results = <?php echo json_encode($resultsD2) ?>;
for (const result of results) {
html += '<article class="dataset"><span class="title">' + result["title"] + '</span><div class="data-meta">';
html += '<span class="release">' + result["release"] + '</span></div></article>';
i++;
}
products.innerHTML = html;
});
});
</script>
You can create a function
var datasets =document.getElementById("datasets");// make it global
$( window ).load(function() {
loadData(whichButtonCliked,datasets )
});
loadData(whichButtonCliked,datasets )
{
e.preventDefault();
var html = '';
var i = 0;
var results = <?php echo json_encode($resultsD2) ?>;
for (const result of results) {
html += '<article class="dataset"><span class="title">' + result["title"] + '</span><div class="data-meta">';
html += '<span class="release">' + result["release"] + '</span></div></article>';
i++;
}
products.innerHTML = html;
}
and call this function on click now you have to make condition which button is clicked
Related
I started new project and I use jquery to add content to article
when I create a slider with this code:
$(".inserttabtext1").click(function () {
var count = parseInt($(".firsttabtextcount").attr("name"), 10);
var name = parseInt($(this).attr("name"));
var id = "#" + name;
var idi,idt,content,idic,idtc;
content = "<div class='short-tabs'><ul>";
for (var i = 1; i <= count; i++)
{
idi = "#ftti" + i;
idic = $(idi).val();
if (i == 1)
{
content += "<li class='active'><a href='#'> " + i + idic + "</a></li>";
}
else
{
content += "<li><a href='#'> "+ i + idic +"</a></li>";
}
}
content += "</ul>";
for (var i = 1; i <= count; i++)
{
if (i==1)
{
content += "<div class='active'>";
}
else
{
content += "<div>";
}
idt = "#fttt" +i;
idtc = $(idt).val();
content += "<p class='text-go-center'>"+idtc+"</p></div>";
}
content += "</div>";
$(id).html(content);
});
and put them into html code my text slider not worked
but when I put manual html code in my page it work
I use these code for copy my html code
$(id).html(content);
$(id).append(content);
where is my wrong?
create a function and put your slider codes inside it, then call it in $(document).ready, and call it again after adding html
$(document).ready(function(){
Init();
});
function Init(){
//Call your slide function here
}
call Init after Adding Html
$(id).html(content);
$(id).append(content);
Init();
i try to loop trough Objects in a Database (parse.com) and would like to print these results with attributes from Bootstrap. I'm a beginner and don't understand why it's not possible how i did it. i know there is .attr() but i don't get it how i can use this in my example.
This is my code:
var Insider = Parse.Object.extend("Insider");
function getPosts() {
var query = new Parse.Query(Insider);
query.find({
success: function(results) {
var output = "";
for (var i in results) {
var name = results[i].get("name");
var catego = results[i].get("cate");
var imageurl = results[i].get("image");
var tpp = results[i].get("tipp");
output += "<ul class="media-list">";
output += "<li class="media">";
output += "<div class="media-left">";
output += "<a href="#">";
output += "<img id = "two" class="media-object"
alt="...">"
output += "<h4>+ + name + "</h4>";
output += "</a>"
output += "</div>"
}
$("#list").html(output);
},
error: function(error){
console.log("Query error:" + error.message);
}
});
}
getPosts();
});
Any help much appreciated!
I want to use .getJSON to get data from server. The data can get, but it can not display in page.
js code:
$(function(){
alert(1);
$("#jsondata").bind("click",function()
{
var data = "action=getdata";
alert(2);
$.getJSON("Guess.php",data, function(json)
{
alert(3);
var str = '<table><tr><td>Name</td><td>1#Sex</td><td>2#Tel</td></tr>';
$.each(json,function(i,v){
str += '<tr><td>'+v.name+'</td><td>'+v.sex+'</td><td>'+v.tel+'</td></tr>';
});
str += '</table>';
$("#datashow").append(str);
});
});
});
html code:
<button id="jsondata" name="jsondata" accesskey="g">GetData</button>
<div id="datashow"></div>
The data I got from server display in fire bug:
{"name":"Tom","sex":"male","tel":"456","email":"sdfd#15.com"}
The json parameter for success function should already be parsed as JSON, so loop with a normal loop:
$(function(){
alert(1);
$("#jsondata").bind("click",function()
{
var data = "action=getdata";
alert(2);
$.getJSON("Guess.php",data, function(json)
{
alert(3);
var str = '<table><tr><td>Name</td><td>1#Sex</td><td>2#Tel</td></tr>';
for(var i in json) {
str += '<tr><td>' + i.name + '</td><td>' + i.sex + '</td><td>' + i.tel + '</td></tr>';
}
str += '</table>';
$("#datashow").append(str);
});
});
});
Try this: (There is no need to loop with $.each)
$(function () {
$("#jsondata").bind("click", function () {
var data = "action=getdata";
$.getJSON("Guess.php", data, function (json) {
var str = '<table><tr><td>日期</td><td>1#铸机产量</td><td>2#铸机产量</td></tr>';
str += '<tr><td>' + json.name + '</td><td>' + json.sex + '</td><td>' + json.tel + '</td></tr>';
str += '</table>';
$("#datashow").append(str);
});
});
});
Try the following code.
$.getJSON("Guess.php",data, function(json) {
// Convert json reponse object to array
json = $.makeArray(json);
var str = '<table><tr><td>Name</td><td>1#Sex</td><td>2#Tel</td></tr>';
$.each(json,function(i,v){
str += '<tr><td>'+v.name+'</td><td>'+v.sex+'</td><td>'+v.tel+'</td></tr>';
});
str += '</table>';
$("#datashow").append(str);
});
});
I am using a jsnewsticker plugin (http://jsfiddle.net/stevenchu/ezEtK/) which uses <li> to display an item at a time.
The code below works if my <li> items are hard-coded into the HTML. But it doesn't work if I have to dynamically create the <li> items from an RSS feed which my script below does
The final HTML page has the <li> items but the JS isn't scrolling through them. I'm not getting any errors in the console. The JS is appending ticker-active class to my <ul> though.
Could this be a sequential issue - perhaps the JS script is firing before the list of <li> items has been fully rendered? If possible, is there a way I can test this theory?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/js/jsnewsticker.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.get('http://example.com/feed', function (data) {
var count = 0;
$(data).find("item").each(function () {
var newsfeed = $(this);
var newstitle = newsfeed.find("title").text();
var newslink = newsfeed.find("link").text();
var newslist = '';
if (count < 3) {
newslist += '<li class="newsitem">'
+ '<a href="'
+ newslink
+ '">Latest: '
+ newstitle
+ '</a>'
+ '</li>';
count++;
}
$(".latestnews").append(newslist);
});
});
$('.ticker').Ticker();
});
</script>
The HTML taken from browser source:
<ul class="latestnews ticker ticker-active">
<li class="newsitem">Example</li>
<li class="newsitem">Example</li>
<li class="newsitem">Example</li>
</ul>
You have answered your own question earlier. Yes, you are calling ticker before the async Ajax get call has completed, so it fires up the ticker against an empty list.
You need to call it inside the get. e.g. something like:
<script src="/js/jsnewsticker.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.get('http://example.com/feed', function (data) {
var count = 0;
$(data).find("item").each(function () {
var newsfeed = $(this);
var newstitle = newsfeed.find("title").text();
var newslink = newsfeed.find("link").text();
var newslist = '';
if (count < 3) {
newslist += '<li class="newsitem">'
+ '<a href="'
+ newslink
+ '">Latest: '
+ newstitle
+ '</a>'
+ '</li>';
count++;
}
$(".latestnews").append(newslist);
});
$('.ticker').Ticker();
});
});
</script>
I want to append data I fetched from server to a div tag, but I can't get it to work. That's HTML with a div tag to which I'd like to append data from the JS code.
HTML:
<body onload="initialize()">
<div id="text"></div>
</body>
And here is JavaScript code. I would like to replace document.write with a function that will append data to a div tag.
JS:
function initialize() {
$.getJSON('http://www.wawhost.com/izdelava-mobilne-aplikacije-2-del/fetch.php?callback=?', function (data) {
for (var i = 0; i < data.length; i++) {
document.write('<img src="' + data[i].image + '" />' + data[i].title + data[i].description + '<br>');
}
});
}
Fiddle: http://jsfiddle.net/GDxtf/
I just started learning JavaScript. Help will be greatly appreciated :)
Paste this code in the bottom of your HTML document, right before </body>:
<script>
// If you're not using an HTML5 doctype, use <script type="text/javascript> instead of just <script>
$(function () {
$targetDiv = $("#text");
$.getJSON('http://www.wawhost.com/izdelava-mobilne-aplikacije-2-del/fetch.php?callback=?', function (data) {
for (var i = 0; i < data.length; i++) {
var $div = $("<div />");
var $img = $("<img />");
$img.attr("src", data[i].image);
$img.appendTo($div);
var $title = $("<h2>" + data[i].title + "</h2>");
$title.appendTo($div);
var $description = $("<p>" + data[i].description + "</p>");
$description.appendTo($div);
$div.appendTo($targetDiv);
}
});
});
</script>
Did this solve your problem?