Very frustrated here. Can't get this to work and don't know why.
I am trying to populate my div with a div from another html file. Here is my code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<div id="text">
content goes here
</div>
<script type="text/javascript">
function whenButtonClicked() {
var book = document.getElementById("book").value; //this is working
var chapter = document.getElementById("chapter").value; //this is working
var filename = 'files/' + book + chapter + '.html'; //this is working
$('#text').load(filename #source); //this is NOT
}
</script>
Thanks for any help.
Adam
Edit: Here is a link to the actual file I am working on. There may be something wrong in it as well.
Use this code: $('#text').load(filename + " #source");.
Related
I was trying to copy RSS feed from Reddit site, and use below code, but received HTMLInputElement error. I am not sure if my var function is correct to get content. Please help. Thank you!
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Get Reddit Keyword RSS Feed</h1>
<input id="keyword" placeholder="Reddit Keyword">
<button id="submit">Get Reddit RSS Feed</button>
<script type="text/javascript">
$('#submit').click(function() {
if ($('#keyword').val() != '') {
alert('For demonstration purposes only. Please do not point your RSS reader to this server.');
var keyword = $('#keyword').val();
$('#output').html('').append('http://www.reddit.com/r/' + $('#keyword').val()) '/.rss').attr('href', 'http://www.reddit.com/r/' + $('#keyword').val()) '/.rss');
}
});
</script>
</body>
</html>
I think issue is with your code,
at line
$('#output').html('').append('http://www.reddit.com/r/' + $('#keyword').val()) '/.rss').attr('href', 'http://www.reddit.com/r/' + $('#keyword').val()) '/.rss');
There is syntax error, brackets are not getting closed at right places.
$('#output').html('')
.append('http://www.reddit.com/r/' + $('#keyword').val()+ '/.rss')
.attr('href', 'http://www.reddit.com/r/' + $('#keyword').val() + '/.rss');
I use the code below to load a page using YQL :
$(document).ready(function() {
var url = "http://www.google.com";
$.getJSON("http://query.yahooapis.com/v1/public/yql?" +
"q=select%20*%20from%20html%20where%20url%3D%22" +
encodeURIComponent(url) + "%22&format=xml'&callback=?",
function(data) {
$('#container').html(data.results);
alert('Finish');
$('#container2').text($('#container #hplogo').attr('alt'));
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container" style="background-color:#eee;max-height:200px;overflow:scroll;background-color:#eee;">
All Page
</div>
<div id="container2">
Specific Content
</div>
You can see it loads Google website, but I don't know why it stops before executing Alert('Finish'); command. I want to extend my code to get the content of specific element inside the data.results after that.
Any help would be appreciated.
I am using nexusUI for a project and would like to use templates but discovered that don't seem to be rendered. I suppose it is because of the missing canvas context but I am not quite sure how to go about it... Any pointers?
Here's the code that illustrates the issue:
<!-- This renders fine, as expected -->
<div> <canvas nx='button'></canvas> </div>
<!-- this is my rendering container -->
<div class="nxContainer"></div>
<!-- and a template that should contain a "dial" widget -->
<script type="text/html" id="test">
<div data-content="widget"> </div>
</script>
<!-- counter example to make sure that loadTemplate is actually working -->
<div class="Container"></div>
<script type="text/html" id="test2">
<div data-content="text"> </div>
</script>
$(function () {
var nxus = {
widget: "<canvas nx='dial'></canvas>",
text: "Boo!"
}
$(".nxContainer").loadTemplate("#test", nxus);
$(".Container").loadTemplate("#test2", nxus);
});
http://jsfiddle.net/745vhffb/4/
edit:
So after poking around some more and looking through the source code of the nexusUI library, it looks like I found a solution and I updated my fiddle, which is now at revision #9 (I exceeded my quota for posting links).
nx.elemTypeArr.push("myslide");
var mySlider = "myslide";
var x = new slider('myslide');
x.init();
So basically, it looks like I have to take care of registering the new widget with nx and instantiating it.
So here's a complete solution to my issue:
function instantiateWidget(container, template, widgetType, id, destination){
var sub = {
widget: "<canvas nx='" + widgetType + "' id='" + id + "'></canvas>"
}
$(container).loadTemplate(template, sub);
nx.elemTypeArr.push(id);
eval(id + " = new " + widgetType + "('" + id + "', " + destination + ");");
eval(id + ".init();");
}
and then
instantiateWidget("#nxContainer", "#test", "dial", "local");
and this will populate the container with the template:
<div id="nxContainer"></div>
<script type="text/html" id="test">
<div data-content-append="widget"> </div>
</script>
The nx widgets need to be instantiated in order to obtain their canvas context and only then they become available. There is probably a more elegant way of doing this but for now it will do for me.
This script takes the number of likes from a facebook fan page.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//Set Url of JSON data from the facebook graph api. make sure callback is set with a '?' to overcome the cross domain problems with JSON
var url = "https://graph.facebook.com/tenniswarehouse?callback=?";
//Use jQuery getJSON method to fetch the data from the url and then create our unordered list with the relevant data.
$.getJSON(url,function(json){
var html = "<ul><li>" + json.likes + "</li></ul>";
//A little animation once fetched
$('.facebookfeed').animate({opacity:0}, 500, function(){
$('.facebookfeed').html(html);
});
$('.facebookfeed').animate({opacity:1}, 500);
});
});
</script>
</head>
<body>
<div class="facebookfeed">
<h2>Loading...</h2>
</div>
</body>
</html>
Source
I tried to make him take the total number of likes,shares and comments from a url("total_count") , but it didn't work.
<script type="text/javascript">
$(function() {
//Set Url of JSON data from the facebook graph api. make sure callback is set with a '?' to overcome the cross domain problems with JSON
var url = "https://graph.facebook.com/fql?q=SELECT%20url,%20normalized_url,%20share_count,%20like_count,%20comment_count,%20total_count,commentsbox_count,%20comments_fbid,%20click_count%20FROM%20link_stat%20WHERE%20url= %27http://www.google.com%27?callback=?";
//Use jQuery getJSON method to fetch the data from the url and then create our unordered list with the relevant data.
$.getJSON(url,function(json){
var html = "<ul><li>" + json.total_count + "</li></ul>";
//A little animation once fetched
$('.facebookfeed').animate({opacity:0}, 500, function(){
$('.facebookfeed').html(html);
});
$('.facebookfeed').animate({opacity:1}, 500);
});
});
</script>
</head>
<body>
<div class="facebookfeed">
<h2>Loading...</h2>
</div>
</body>
</html>
Could you please help me make the script get the "total_count" from links?
I guess
var html = "<ul><li>" + json.data[0].total_count + "</li></ul>";
should do... Be sure to remove surplus spaces from the URL in the FQL as well.
Have a look at this Fiddle: http://jsfiddle.net/e24ey/1/
Hi I wonder if someone could help me with this small issue I have the following code which I need to modify.
<script type="text/javascript">
function code(id) {
$('#myStyle').load('myphp.php?id=' + id);
}
</script>
I need to pass another variable into this code and add it to the GET part of the URL for example above it will include the URL myphp.php?id=124545
I want to add a second variable called num to the URL part but am confused what the code will need to become to make the correct post via GET
<script type="text/javascript">
function code(id,num) {
$('#myStyle').load('myphp.php?id=' + id); // how do I add the &num=124 for example
}
</script>
Thanks in advance
Simple. Use:
$('#myStyle').load('myphp.php?id=' + id + '&num=' + num);
Reference: http://www.quirksmode.org/js/strings.html#conc
Hope it helps!
Concatenate "&num="+num onto the string you already have:
<script type="text/javascript">
function code(id,num) {
$('#myStyle').load('myphp.php?id=' + id + "&num=" + num); // how do I add the &num=124 for example
}
</script>