I'm writing a little webpage that displays some Flickr photos and also includes microformats using oomph.js. I have bit of JS and when I run the code without <script type='text/javascript' src="oomph.js"></script> the code runs fine (all my photos are loaded. However, when I add in the above script tag, my photos don't load.
Here is my broke JS (doesn't show photos):
<script type='text/javascript' src="jquery-1.6.3.min.js"></script>
<script type='text/javascript' src="oomph.js"></script>
<script>
$(document).ready(function() {
var ajaxURL="http://api.flickr.com/services/feeds/groups_pool.gne?id=626753#N20&lang=en-us&format=json&jsoncallback=?";
$.getJSON(ajaxURL,function(data) {
$('h1').text(data.title);
$.each(data.items,function(i,photo) {
var photoHTML = '<span class="image">';
photoHTML += '<a href="' + photo.link + '">';
photoHTML += '<img src="' + photo.media.m.replace('_m','_s') + '"></a>';
$('#photos').append(photoHTML);
}); // end each
}); // end get JSON
}); // end ready
</script>
and here is the code that works (shows photos):
<script type='text/javascript' src="jquery-1.6.3.min.js"></script>
<script>
$(document).ready(function() {
var ajaxURL="http://api.flickr.com/services/feeds/groups_pool.gne?id=626753#N20&lang=en-us&format=json&jsoncallback=?";
$.getJSON(ajaxURL,function(data) {
$('h1').text(data.title);
$.each(data.items,function(i,photo) {
var photoHTML = '<span class="image">';
photoHTML += '<a href="' + photo.link + '">';
photoHTML += '<img src="' + photo.media.m.replace('_m','_s') + '"></a>';
$('#photos').append(photoHTML);
}); // end each
}); // end get JSON
}); // end ready
</script>
I've browsed the internet and have yet to find a solution. If anyone could shed some light on this issue I would greatly appreciate it :-).
I was able to fix the issue by including an older version of JQuery (version 1.3.2)
Related
My goal is to display a picture from web path. My program automatically gets json formated posts from reddit. Then it takes the path to the image from the response and it looks like this:
https://preview.redd.it/8skueonh6fm21.jpg?auto=webp&s=c189f2a13149d5b3a35b4e84370876e6a8801209
Question is, how can i get the image from that adress? Like .jpg?
Thanks,
You don't even need javascript...
<html>
<img src = "https://preview.redd.it/8skueonh6fm21.jpg?auto=webp&s=c189f2a13149d5b3a35b4e84370876e6a8801209" width="100vw" height= "100vh"/>
</html>
function addUsers(response) {
response.data.forEach((user) => {
$(".user_wrapper").append(
'<div>' +
'<span>' + user.first_name + ' </span>' +
'<img src=' + user.avatar + '>' +
'</div>'
)
})
}
$( document ).ready(function() {
$.get( "https://reqres.in/api/users?page=2",
function( response ) {
addUsers(response)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head></head>
<body>
<div class="user_wrapper"></div>
</body>
</html>
I am having trouble getting css/js to show up on a Webview.
Here is what I am doing:
initializing the webview and engine
WebView browser = new WebView();
WebEngine webEngine = browser.getEngine();
webEngine.setJavaScriptEnabled(true);
This is where I load html content:
htmlViewImgBtn.addEventHandler(MouseEvent.MOUSE_CLICKED,
new EventHandler<MouseEven
#Override
public void handle(MouseEvent event){
if (counter == 0){
contentContainer.getChildren().addAll(browser);
webEngine.loadContent(export.getHTML(note));
//browser.getEngine().load("http://stackoverflow.com/questions/34554583/cant-load-css-js-on-javafx-webview");
contentContainer.getChildren().remove(noteContent);
counter = 1;
}
else {
contentContainer.getChildren().remove(browser);
contentContainer.getChildren().addAll(noteContent);
counter = 0;
}
}
});
Note: The commented code works when loading a website onto the webview, no issues. But Still does not work for the content I am loading.
The content (HTML) that is loaded looks looks like this:
<link href="prism.css" rel="stylesheet" type="text/css" />
<script src="prism.js" type="text/javascript"></script>
<pre><code class="language-java">System.out.println("Hello");
</code></pre>
Also, the css and js files are in the same directory as the java file
I can confirm that the html works by loading it on a web browser, What am I missing?
Blockquote
I was able to get it working by modifying the html as such:
"<link href=\"" + getClass().getResource("./prism.css") + "\"" + " rel=\"stylesheet\"" + " type=\"text/css\"" + " />\n" +
"<script src=\"" + getClass().getResource("./prism.js") + "\"" + " type=\"text/javascript\"" + "></script>\n" +
(rest of html);
You can use ResourceLoader to load HTML, js and css which are located in the same directory as the Java class.
URL url = getClass().getResource("index.html");
webEngine.load(url.toExternalForm());
Trying to retrieve the Unique device ID of the Device .
Using the plugin - UniqueDeviceID
When tring to run the following code
var exec = require('cordova/exec');
module.exports = {
get: function(success, fail) {
cordova.exec(success, fail, 'UniqueDeviceID', 'get', []);
}
};
`
I am getting the following error-
"Uncaught ReferenceError: module is not defined"
This is indeed defined in cordova.js
How do i fix this issue.
Thanks in advance
The get method needs to be called in the device.ready() of the application initialization.
Placing it elsewhere lead to the above mentioned error , worked fine for me .
There is an in built function, for getting uuid:
var string = device.uuid;
Full Example:
<!DOCTYPE html>
<html>
<head>
<title>Device Properties Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
function onDeviceReady() {
var element = document.getElementById('deviceProperties');
element.innerHTML = 'Device Model: ' + device.model + '<br />' +
'Device Cordova: ' + device.cordova + '<br />' +
'Device Platform: ' + device.platform + '<br />' +
'Device UUID: ' + device.uuid + '<br />' +
'Device Version: ' + device.version + '<br />';
}
</script>
</head>
<body>
<p id="deviceProperties">Loading device properties...</p>
</body>
</html>
Kindly, visit this link:
http://docs.phonegap.com/en/3.1.0/cordova_device_device.md.html#device.uuid
See, if that helps.
I used the UniqueDeviceID Plugin from this link: https://www.npmjs.com/package/cordova-plugin-uniquedeviceid
Very simple and powerful. Tried to unistall and reinstall the app and still returned the same UUID.
Two changes I had to make to make this plugin work for me:
1. The above link mentions to add a separate line to the config.xml file. I followed the same and I was unable to build my app. I removed the line and it works fine.
2. Also add a loop for the fail case just like the success case shown, otherwise there is a runtime error.
function fail(error) {
console.log(error); };
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
</head>
<body>
<div id="div1">dv1</div>
<div id="div2">dv2</div>
<script type="text/javascript">
function getData(){
$.ajax({
type:"GET",
url:"j.json",
dataType:"json",
success: function(jsondata){
output(jsondata);
}
});
}
function output(json){
//var Data = eval('(' + json + ')');
var html = '';
//alert(Data.length);
for(var i=0;i<json.length;i++){
html += ' name:' + json[i].name + ' age:' + json[i].age;
}
document.getElementById('div1').innerHTML = html;
document.getElementById('div2').innerHTML = json[0].name;
}
setTimeout(getData, 3000);
</script>
</body>
</html>
j.json file is
[{"name":"aaa","age":18},{"name":"bbb","age":19}]
The aim of above code is to update div content with data in local json file. I've tried that in IE & Chrome, but neither worked. I've googled a lot but still can't figure it out.
Anyone got any hints? Thanks in advance.
Do you use web server?
AJAX calls doesnt work with URL starting with file://. This because of the same-origin requirements which were instituted to help deal with cross-site scripting (XSS). See here for more details.
And as I noticed, you should use $(document).ready(function(){ your code }) instead of setTimeout(getData, 3000);
I am looking at Trying to use jQuery to display JSON text data as an example, but I cannot get any information to display.
When I put the url (http://api.yelp.com/business_review_search?name=pantibar&term=gay&location=Dublin&limit=1&ywsid=XXXXXXXXXXXXXXXXXX) in chrome postman, it does return the information, but I cannot get it to display on my web page.
Any ideas?
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function showData(data) {
$.each(data.businesses, function(i,business){
// extra loop
$.each(business.reviews, function(i,review){
var content = '<p>' + review.text_excerpt + '</p>';
content += '<p>' +review.date + '</p>';
$(content).appendTo('#review');
});
});
}
$(document).ready(function(){
writeScriptTag( "http://api.yelp.com/business_review_search?name=pantibar&term=gay&location=Dublin&limit=1&ywsid=XXXXXXXXXXXXXXXXXX");
});
function writeScriptTag(path) {
var fileref = document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", path);
document.body.appendChild(fileref);
}
</script>
</head>
<body>
</body>
I added the following to the body and everything worked fine.
<div id="review"></div>