Hi I am trying to display javascript charts in DIV tag. I want to call a url using jQuery.ajax. Following is my code.
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="./jquery-ui.css" />
<script src="./jquery-1.9.1.js"></script>
<script src="./jquery-ui.js"></script>
<script>
$(function() {
$( "#btnRun" ).click(function() {
$.ajax({
type: "GET",
url: "http://code.shutterstock.com/rickshaw/guide/start.html",
success: function(response) {
$('#divResult').html(response); // Assign the values to the DIV
}
});
});
});
</script>
</head>
<body>
<input type="button" value="Run" id="btnRun" /> </br>
<div id="divResult"></div>
</body>
</html>
I am able to call url. But not able to display content existing in that url. Can anyone help me to solve this problem.
I think you have a couple of problems here:
You're probably not allowed to do this because of Access-Control-Allow-Origin.
You can't load more JavaScript into a page asynchronous trough another HTML-file.
I got solution for my problem. I added OBJECT tag in DIV. Here is code.
$( "#btnRun" ).click(function() {
$('#divResult').html('<object data="http://code.shutterstock.com/rickshaw/guide/start.html" />');
});
Thanks for All.
Related
I´m trying to learn ajax, sitting here sinse 3 hours and trying to understand what I need to make it run.
I´m using it on Scriptly with Xampp.
This is my code:
<head>
<title>Titel</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ajax Example!</title>
<script src="js\jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("#btnSubmit").click(function(){
//alert("hello");
$.ajax({
type: "POST",
url: "http://localhost/inde.php",
data: {
myName: "durgesh technoclass"
},
success: function(output){
alert(output);
}
});
});
});
</script>
</head>
<body>
<form>
<button id="btnSubmit">Click me !</button>
</form>
I even watched a tutorial on Youtube and copied all the code from there.
The rating of the tutorial is good, the code seems to work for him, but why doesn´t it work for me ?! I don´t understand that.
The Jquery works, but ajax doesn´t. The Script just reloads the page and displays nothing.
Please help.
Edit:
May it be that it doesn´t work, because xampp doesn´t run an actual server ?
On request, here´s the code of the "inde.php":
<?php
echo "Welcome from Server";
?>
Edit 2:
Solution:
I messed up the path of the inde.php.
Just fixed it.
It works but there´s a mistake in the code. It had been fixed by Tanvir Ahmad Sohan. You can find his fix in his answer down there.
Try this...
<script>
$(document).ready(function(){
$("#btnSubmit").click(function(event){
event.preventDefault();
//alert("hello");
$.ajax({
type: "POST",
url: "http://localhost/inde.php",
data: {
myName: "durgesh technoclass"
},
success: function(output){
alert(output);
}
});
});
});
</script>
As your button is inside a form, when you click the button, form is being submitted to the same page, so it just reloads. To prevent this from happening use preventDefault() to prevent the default behaviour.
I'm fumbling around a little bit with jQuery and Python and I was trying to show a very simple page displaying a loading img while a somewhat length python script gets the information I need to display.
Of course, when the Python script is ready, I was hoping to hide the loading image and display the results of the Python script in it's place.
So far, I was able to piece this together with some Google help for my webpage:
<html>
<head>
<img id="img" src="loader.gif">
<script src="assets/js/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
url: "http://localhost/test.py";
$.post(url, function(data){
$("#id").html(data);
});
$("#img").hide();
});
</script>
</head>
</html>
Any help would be greately appreciated. Thanks!
This part
$("#id").html(data);
means that jQuery is filling the element with the id "id" with the response from your Python script. The problem is that you don't have an element that has id="id".
What you also want to do is to put $("#img").hide(); inside your success handler of $.post. This way the image is hidden when $.post has finished. With your current code it's hidden immediately because $.post is an asynchronous request and thus any other code won't wait for it.
Your code should look something like this:
<html>
<head>
<img id="img" src="loader.gif">
<div id="id"></div>
<script src="assets/js/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
url: "http://localhost/test.py";
$.post(url, function(data){
$("#id").html(data);
$("#img").hide();
});
});
</script>
</head>
</html>
Note the <div> I've added (you can replace it with any other HTML element you want).
UPDATE
There is a chance that your $.post request fails due to different reasons. Currently, you only have a success handler which only gets called when the request was successful. You can add an "unsuccess" handler like this:
$.post(url, function(data){
$("#id").html(data);
$("#img").hide();
})
.fail(function(response) {
alert('Error: ' + response.responseText);
// .. do something else ..
});
This has worked well for me:
Index.php
<!DOCTYPE html>
<html>
<head>
<title>Python Loading IMG Page</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" >
<script src="src/jquery-1.10.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="loading">
<img src="src/loading.gif" alt="loading_icon" />
</div>
<div id="results"></div>
</div>
<script language="javascript" type="text/javascript">
var URL = 'cgi-bin/test.py';
function read(){
$('#loading').show();
$.get(
URL,
{},
function(result){
$('#loading').hide();
$('#results').html(result);
},
'text'
).fail(function() {
alert('Wrong Python URL');
});
}
read();
</script>
</body>
</html>
cgi-bin/test.py
#!/usr/bin/env python
print "Content-type: text/html\r\n"
print "\r\n"
print "This is where the text goes."
print "Make sure you use HTML tags."
I have a website with a news feed that I updated regularly. The problem is that when I update it I have to change the code in every page. This wouldn't be a problem if the website was small, but it has about 20 pages
I want to know if there is any way for me to just have a separate html file with just the newsfeed, that I would load on the other pages.
Using jQuery and making an AJAX call would be one solution to your problem, although it's a bit excessive.
<html>
<head>
<script>
$(document).ready(function() {
$.ajax({
url: "news.html",
cache: false
}).done(function(news) {
$("#news").html(news);
});
});
</script>
</head>
<body>
<div id="news">
</div>
</body>
</html>
Another solution would be to simply use an iFrame.
<html>
<head>
</head>
<body>
<div id="news">
<iframe src="news.html"></iframe>
</div>
</body>
</html>
<html>
<head>
<title>Result</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
</head>
<body>
<div></div>
<script>
$(document).ready(function() {
$.getJSON("http://api.crunchbase.com/v/1/company/facebook.js?api_key=mgxpds8ja7f6cncwd39caed7")
});
</script>
</body>
</html>
I feel like there is something ridiculously easy I'm missing, but I can't seem to pull any data off.
There is same origin policy violation in the code, you need to do pass an additional parameter callback=? so that it will make use of JSONP to make the request.
$.getJSON("http://api.crunchbase.com/v/1/company/facebook.js?api_key=mgxpds8ja7f6cncwd39caed7&callback=?", function(data){
console.log(data);
//Do something with the data
})
Demo: Fiddle
Well. I see a couple of things..
Include the Jquery script tag.
Add an id to the place you want to put the results.
Change the script like mentioned below..
Check the settings with the API Key and or Simply use your php backend to retrieve the JSON and then put it un your page. Using JSON like that will return a cross-domain error.
Check the HTML below, works like a charm, but for the x-domain error...
<html>
<head>
<title>Result</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
</head>
<body>
<div id="results"></div>
<script>
$(document).ready(function() {
$("#results").html( function () {
return $getJSON("http://api.crunchbase.com/v/1/company/facebook.js?api_key=mgxpds8ja7f6cncwd39caed7")
});
});
</script>
</body>
</html>
Thanks!
#leo.
After fetching JSON, for next step you need to add callback and do some action with JSON data,
$.getJSON("http://api.crunchbase.com/v/1/company/facebook.js?api_key=mgxpds8ja7f6cncwd39caed7", function(data){
//CALLBACK
console.log(data); //LIST DATAs
//Do Something over here
})
http://api.jquery.com/jQuery.getJSON/
i want to call url from javascript with one parameter then url has to give the response for that particular request.
the response is actually like this:
{"success":true,
"result": {"token":"4fc5ef2bd77a3","serverTime":1338371883,"expireTime":1338372183}
}
if i try this url in browser directly, i can get the same response easily.but through the javascript its not working.
I have posted my sample code for testing purpose but there is no response.
So please help me with how to call and get response?
Thanks in advance.
<html>
<head>
<script type="text/javascript">
function getResponse()
{
var uname=document.testform.uname.value;
$.ajax({
type: 'POST',
url: 'http://192.168.2.113/crm/webservice.php?operation=getchallenge&username='+uname,
data: {},
dataType: 'json',
success: function(data)
{ alert('got here with data'); },
error: function() { alert('something bad happened'); }
});
}
</script>
<title>Test</title>
</head>
<body>
<form name="testform" method="post">
<div id="main" border="5" style="width:100%; height:100%;">
<div id="sub" style="width:50%; height:50%;align:center;">
Username:<input type="text" name="uname">
<input type="button" name="ok" value="submit" onclick="getResponse();">
</div>
</div>
</form>
</body>
</html>
One reason as gdoron said you forgot to include jQuery in your code. But the main thing is you are using ajax with crossing domain name, that the problem. If you type the url in the browser it will work fine because it will request directly from the browser to the site. But you cannot use ajax to send request cross domain like that.
I suggest you to see JSONP or ajax cross domain, if you want to get data from different website.
This may help you :
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="div1" hidden="true"> </div>
<button>Get External Content</button>
<script>
$("#div1").load('http://192.168.2.113/crm/webservice.php?operation=getchallenge&username='+uname);
$(document).ready(function(){
$("button").click(function(){
var t=$("#div1").text();
alert(t);
});
});
</script>
</body>
</html>
You didn't include jQuery library...
Add this to the top of <head>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
If you check your console for errors you will see that $ isn't defined.
The data param you pass to the success function contains your response, and as you're returning JSON it's easy to access any part.
// (inside your ajax call)
success: function(data) {
alert(data.result.token);
alert(data.result.serverTime);
alert(data.result.expireTime);
},