I have a very simple HTML file which has one button. When this button is clicked the function loadDoc() runs in the javascript file (ajax.js). The div with ID ajax_text gets changed into 'clicked'. So far so good.
Now I am trying to make ajax call to a php document. The php document should echo "Hello World!". I am trying to show this message by using an alert (alert(msg)). The php document is located in the same folder as my HTML document.
What am I doing wrong in my ajax call??
I already tried multiple urls such as:
- 'http://localhost/ajax_info.php'
- the complete path to the file
- 'localhost/ajax_info.php'
etc. etc.
HTML:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="name">John</div>
<div id="demo">
<h2>Header 2</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
<script src="jquery-3.2.1.js"></script>
<script src="ajax.js"></script>
</body>
</html>
JavaScript:
function loadDoc() {
document.getElementById('name').innerHTML = "Steven";
$.ajax({
type: 'GET',
url: 'ajax_info.php',
success: function(msg){
alert(msg);
}
});
}
PHP:
<?php echo "Hello World"; ?>
It looks as if you call your html page as file from your file-explorer, but not - as you should - via your web-server.
If your address in the browser has file://somefolders/myhtml.html your php script (well, actually the server) will say "hello, that's not where I am!" -> It throws "No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access."
Now you can tell your server "Nah, don't bother, I'll just allow everyone!"
This is what you do when setting the header('Access-Control-Allow-Origin: *');
But your initial problem was that the html-file wasn't called at the same origin, namely your (local) server.
So if you type in your browser's address bar http://localhost/ajax.html and don't just double click the file in file-explorer it should work, because now they both (html and php) live in the same environment.
try to write the javascript code inside the page that has html.
it should works .
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="name">John</div>
<div id="demo">
<h2>Header 2</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
<script src="jquery-3.2.1.js"></script>
<script>
function loadDoc() {
document.getElementById('name').innerHTML = "Steven";
$.ajax({
type: 'GET',
url: 'ajax_info.php',
success: function(msg){
alert(msg);
}
});
}
</script>
Related
Am trying to include html file in another html file and then alert result.
I found a solution here.
Source
Please how do I alert the content of b.html instead of calling it in div.
something like
alert('b.html content here');
a.html:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
alert('b.html content here');
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
b.html:
<p>This is my include file</p>
jQuery has a handy function for getting other webpages, $.get():
$.get('b.html', function(data) {
alert(data);
});
function(data) {} is a callback which runs when the http request is made successfully, and data will contain the response body.
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 am trying to brush up on my jquery and ajax. In Jquery in 8 hours there is this:
<!DOCTYPE html>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A JQuery Sample Program</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript">
$(function() {
$.ajax({
type:"POST",
url:"postFile.php",
data: {data:100},
success:function(data) {
$("div").html(data);} });});
</script>
</head>
<body>
Response: <div></div>
</body></html>
and postFile.php is this:
<?php
if ($_POST["data"]=="100") {echo "100";}
?>
I'm running this under IISExpress. BUT all I get from the browser (Chrome) is method not allowed in jquery.min.js:4. This seems so simple and yet, doesn't work.
Method not allowed usually happens when you're trying to request a file that's on another domain. I assume that's not your real code since it looks like you're calling a file that's on the same domain. Read about cross domain scripting. You can't do AJAX calls to a script that's on a different domain.
I am getting a simple server response which is an html file and I want to display the same in iFrame without saving the file to my workspace or machine.
I am making an ajax call as below.
Ext.Ajax.request({
url : 'url',
method : 'POST',
success : function(response) {
var responseHtmlStr =response.responseText;
Sample Server response which I am getting in responseHtmlStr is as below.
<!DOCTYPE html>
<html>
<head>
<script>
function copyText()
{
alert('It is clicked');
}
</script>
</head>
<body>
Field1: <input type="text" id="field1" value="Hello World!"><br>
Field2: <input type="text" id="field2">
<br><br>
<button onclick="copyText()">Copy Text</button>
</body>
</html>
The code I am using to create the iFrame is as below.
;
As I dont want to store the server response in the server in a file. How to directly feed the server response in the iFrame?
I tried document.getElementsByTagName('iframe')[0].contentWindow.document.write(serverResponse); but it is not working with the above code.
Any other suggestions please. Thanks in advance.
Thanks
Gendaful
With vanilla JavaScript:
document.MyFrame.document.body.innerHTML = serverResponse
..where you have <iframe name="MyFrame"></iframe>
Not sure if this will work, I do something similar using jquery (but could do it just as easily without)...
$('iframe').contents().find("html")
.append($("<head></head><body> blah blah blah </body>"));
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);
},