I am trying to list my github repos through their api but its not showing up on my page but by using the exact same code its working here on JSFiddle
Debugging shows that the script is being called but its just not loading in its <div>:
<div id="repos">
<ul id="repo_list">
</ul>
</div>`
Here is the markup in my source code:
<section id="git-hub">
<div class="container">
<div class="box">
<div class="center">
<h2>GitHub</h2>
<p class="lead">Go on! Take a look through my repos!</p>
<div id="repos">
<ul id="repo_list">
</ul>
</div>
<div id="repo_content"></div>
<script>
$.ajax({
type: "GET",
url: "https://api.github.com/users/google/repos",
dataType: "json",
success: function(result) {
for( i in result ) {
$("#repo_list").append(
"<li><a href='" + result[i].html_url + "' target='_blank'>" +
result[i].name + "</a></li>"
);
console.log("i: " + i);
}
console.log(result);
$("#repo_count").append("Total Repos: " + result.length);
}
});
</script>
</div><!--/.center-->
</div>
</div>
</section><!--/#pricing-->
Does anybody know what could be the reason?
You're putting this script tag above where you're loading your jQuery. Place this script tag below where you're loading your jQuery.
Related
I need to make a dynamic running banner in one line, it works but it spans two lines. I can't figure out why it spans 2 lines. Please help.
$(document).ready(async function() {
GetBannerMessages();
});
async function GetBannerMessages() {
$.ajax({
url: '/Banner/Banner',
type: 'POST',
data: {
},
datatype: "html",
success: function(res) {
console.log(res);
var holder = $('#bannerHolder');
for (var i = 0; i < res.length; i++) {
var row = "<div class='text-container' > <a data-fancybox-group='gallery' class='fancybox' href='#' title='" + res[i].Msg_Text + "'>" + res[i].Msg_Text + "</a></div>" +
"<div class='text-container'> <a data-fancybox-group='gallery' class='fancybox' href='#'> </a></div>";
holder.append(row);
}
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="runtext-container col-12" style="margin-top: 5%;">
<div class="main-runtext">
<marquee direction="right" scrollamount="3" onmouseover="this.stop();" onmouseout="this.start();">
<div class="holder" id="bannerHolder"></div>
</marquee>
</div>
</div>
I'm using the OpenWeatherMap API to get to display certain items in HTML and my code does not display them.
$('.`btn`').click(function() {
var city = $('.inputValue').val();
var key = '88da1611665dfe9338cd6679dee95466';
$.ajax({
url: 'http://api.openweathermap.org/data/2.5/weather',
dataType: 'json',
type: 'GET',
data: {
q: city,
appid: key,
units: 'metric'
},
success: function(data) {
var temp = '';
$.each(data.weather, function(index, val) {
wf += '<p><b>' + data.name + "</b><img src=" + val.icon + ".png></p>" +
data.main.temp + '°F ' + ' | ' + val.main + ", " +
val.humidity + val.wind + val.uv
}, $("showWeather").html(temp));
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="4">
<nav class="navbar navbar-light bg-light">
<p><b>Search for a city:</p></b>
<form class="d-flex">
<input type="search" class="inputValue" placeholder="" aria-label="Search">
<button class="btn btn-outline-success">
<i class="fas fa-search"></i>
</button>
</form>
</nav>
</div>
</div>
<div class="col-8">
<div class="row">
<h2 id="showWeather" class="date"></h2>
<p>Temperature:</p>
<p>Humidity:</p>
<p>Wind Speed:</p>
<p>UV Index:</p>
</div>
</div>
</div>
There's quite a few individual issues in your code:
You have backticks in the .btn selector which are invalid, remove them.
You need to prevent the standard form submission so that the AJAX call can fire and return data without the page refreshing. To do this call preventDefault() on the event which is fired, ideally on the submit of the form, not click of .btn.
</p></b> tags are the wrong way around
.html(temp) needs to be placed outside the each(), and definitely not as an additional argument passed to it
wf += should be temp += as that's what your variable is called
You can use map() along with template literals to build the HTML string more succinctly.
You're missing the # on $('showWeather')
wind is an object so you can't concatenate it to the string directly. Access its speed or deg properties (or both).
humidity is a property of main, not the weather you're looping through
There is no uv property anywhere in the response, so that needs to be removed.
With all that fixed, try this:
$('.d-flex').on('submit', function(e) {
e.preventDefault();
var city = $('.inputValue').val();
var key = '88da1611665dfe9338cd6679dee95466';
$.ajax({
url: 'https://api.openweathermap.org/data/2.5/weather',
dataType: 'json',
type: 'GET',
data: {
q: city,
appid: key,
units: 'metric'
},
success: function(data) {
let html = data.weather.map(loc => `<p><b>${data.name}</b><img src="${loc.icon}.png" /></p>${data.main.temp}°F | ${loc.main}, ${data.main.humidity}%, ${data.wind.speed}kph # ${data.wind.deg}°`);
$("#showWeather").html(html);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="4">
<nav class="navbar navbar-light bg-light">
<p><b>Search for a city:</b></p>
<form class="d-flex">
<input type="search" class="inputValue" placeholder="" aria-label="Search" value="miami">
<button class="btn btn-outline-success">
Search
<i class="fas fa-search"></i>
</button>
</form>
</nav>
</div>
</div>
<div class="col-8">
<div class="row">
<h2 id="showWeather" class="date"></h2>
<p>Temperature:</p>
<p>Humidity:</p>
<p>Wind Speed:</p>
<p>UV Index:</p>
</div>
</div>
</div>
I am having an issue when I reload the jstree with data from my AJAX call. So on load it works fine, but adding data, and getting a response back the tree loses its structure
Initial html is an empty div, data is updated on button click using ajax
<div id="pnlTree">
<div id="jstree" style="text-align: left">
</div>
</div>
success: function (data)
{
if( data )
{
var output = '<ul class="appointmentlist">';
$.each(data, function(key, val){
output += "<li id='"+data[key].data1+"' name='dtpurchase'"+counter+"' value='" + data[key].data2 + "'>" +dtdata + "</li>";
//output += '<a id="dtappointment" name="dtpurchase" value="' + data[key].data3 + '"'+ '>'+data[key].purchase_date + '</a>';
//output += '</li>';
counter++;
});
output += '</ul>';
$('#jstree').html(output);
}
},
I have tried refreshing, reloading but nothing seems to fix the issue.
Soooo what you need to do is to refresh() the tree after you updated the data.
Now this works only if you append the date to the element with $("#jstree").jstree(true).settings.core.data = output. If you use $('#jstree').html(output) then it doesn't work
Run the snippets to see it in action:
Working:
$('#jstree').jstree()
function update() {
var output = `<ul><li>New Item</li></ul>`
$("#jstree").jstree(true).settings.core.data = output
$('#jstree').jstree(true).refresh();
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div id="jstree">
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
<button onclick="update()">Update data</button>
Okay, so this second one is working with AJAX. It doesn't work in the Stack Overflow sandbox, but it does work on a normal HTML page (see screenshots). It's the exact same concept, you just need to apply it in the right order:
$('#jstree').jstree()
function update() {
$.ajax({
url: "https://swapi.dev/api/people/1",
success: function(data){
var output = `<ul>
<li>${data.name}</li>
<li>${data.eye_color}</li>
<li>${data.height}</li>
</ul>`
$("#jstree").jstree(true).settings.core.data = output
$('#jstree').jstree(true).refresh();
}
});
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div id="jstree">
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
<button onclick="update()">Update data</button>
here is my codepen link
my html code
<div id="main">
<h1>Wikipedia Viewer</h1>
<form class="form-inline">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-4 col-lg-7 col-lg-offset-4">
<div class="form-group">
<label class="sr-only" for="search">search</label>
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="button" class="btn btn-primary"><i class="fa fa-search"></i></button></form>
</div>
</div>
</div>
Surprise me!
</div>
<div id="search">
</search>
jquery code for making wikipedia api search call and then displaying title and overview.i want to associate links to respective article on dynamically created p element
$(document).ready(function() {
$("button").click(function() {
var article = $("input").val();
$.ajax({ //wikipedia api call
url: "https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" + article + "&format=json",
dataType: "jsonp",
success: function(data) {
for (var i = 0; i < data.query.search.length; i++) { //displaying titles and snippets accroding to search query. i want to associate link to each dynamically created p element.
var title = data.query.search[i].title;
var snippet = data.query.search[i].snippet;
$("#search").append("<p>" + title + "<br>" + snippet + "</p>");
}
$("#main").attr({
'style': 'display: none'
});
},
error: function() {
$("h1").html("oops");
}
});
});
});
Change your $("#search").append() as follows:
$("#search")
.append("<p><a href='https://en.wikipedia.org/wiki/" + title + "'>" + title + "</a>" +
"<br>" + snippet + "</p>"
);
Codepen
Is it possible to link directly to a tab for a site such as http://www.antutu.com/Ranking.shtml?
I'm referring to the tabs Recommend, Highest, Lowest........
Looking at the source, I couldn't find any references of class and id in a script from the block:
<div class="tab">
<div class="tab_bg" id="mobile-tab">
<div class="fl tab_i">Recommend</div>
<div class="fl tab_i2">Highest</div>
<div class="fl tab_i2">Lowest</div>
<div class="fl tab_i2">Cost-effective</div>
<div class="fl tab_i2">Experience</div>
<div class="fl tab_i2">Hottest</div>
<div class="fl tab_i2">Camera</div>
<div class="fl tab_i2">Professional</div>
<div class="cl"></div>
</div>
</div>
Oh and I'm really new to html and javascript, but I was using this site: http://www.dnnstuff.com/modules/aggregator-tabbed-modules/aggregator-demos/linking-directly-to-a-tab.aspx 's code as a guide.
Using an actual link to the page it wouldnt appear so.
The page runs this code when clicking on a tab
function loadRanking_order(obj, m, o) {
$("div#" + m + "-tab div.tab_i,div#" + m + "-tab div.tab_i2").removeClass("tab_i").addClass("tab_i2");
obj.parentNode.className = "fl tab_i"
if (o == 'df') {
$('#rank_' + m + '_lists').html($('#rank_' + m + '_default').html());
return;
}
$.ajax({
url: '/Ranking.shtml?cmd=ajax_' + m + '&o=' + o,
dataType: "html",
success: function (data) {
$('#rank_' + m + '_lists').html(data);
}
});
}
You could perhaps load the page in an iframe and call the javascript method yourself