jQuery loading img while exec Python script PHP - javascript

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."

Related

How to include html file in another html file and then alert result via javascript jquery

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.

Jquery TypeError when replacing page content

I'm trying to achieve the following:
A simple Java Spring application, after receiving a GET request, sends me an HTML page with a form. When the button is pressed in this form, there is a POST request with an XML content sent back to the Spring app, which, in turn, responds with an HTML page. I would like to be able to display this response as a proper page in a browser, including all the scripts being downloaded and fully functional.
The form HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<meta charset="UTF-8" />
<title>Request Report Form</title>
</head>
<body>
<form method="post" action="">
<script>
function sendXml()
{
event.preventDefault();
const request = '<?xml version="1.0" encoding="UTF-8"?>\n' +
<!-- skip -->
$.ajax({
type: 'POST',
url: url,
dataType: 'html',
data: request,
contentType: 'application/xml;'
}).done(function (data) {
$("html").html(data);
}).fail(function (data) {
$("html").html(data.responseText);
});
}
</script>
</form>
</body>
</html>
The $("html").html(data); part above is supposed to replace the current page's content with the content received from the server, as far as I understand. But the page is not being displayed. There is an error message in the browser's console: "TypeError: n.head is null", it seems to have to do with JQuery, see the image link.
My questions are, why does JQuery kicks in and what is it trying to do? And how do I fix this error?
I don't know much about frontend side of development, so please go easy on me ;-)
Edit
Just realised that my first question is moot, I am trying to display the response page using JQuery, so obviously, it kicks in at that point. But the call fails for some reason.
The content of the response from the server that I'd like to see rendered by the browser:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Progress Report</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body data-user="eyJjaGFydCI6eyJyZW5kZXJUbyI6IlByb2dyZXNzIiwidHlwZSI6ImNvbHVtbiJ9LCJzZXJpZXMiOlt7Im5hbWUiOiJQcm9ncmVzcyIsImRhdGEiOlsxLDEsMCwwLDAsMCwwLDAsMCwwXX1dLCJ0aXRsZSI6eyJ0ZXh0IjoiUHJvZ3Jlc3MifSwieEF4aXMiOlt7InR5cGUiOiJsaW5lYXIiLCJjYXRlZ29yaWVzIjpbIlJlZ2lzdGVyZWQ8YnI+KDQuNi4xMykiLCJTZXNzaW9uIDE8YnI+KDEyLjcuMTUpIiwiU2Vzc2lvbiAyIiwiU2Vzc2lvbiAzIiwiU2Vzc2lvbiA0IiwiU2Vzc2lvbiA1IiwiU2Vzc2lvbiA2IiwiU2Vzc2lvbiA3IiwiU2Vzc2lvbiA4IiwiRmluaXNoZWQiXX1dLCJ5QXhpcyI6W3sidGl0bGUiOnsidGV4dCI6IlNlc3Npb24gU3RhcnRlZCJ9LCJtaW4iOjB9XX0=">
<div id="wrap">
<div class="container">
<div class="report"></div>
</div>
</div>
<script>
window.onload = function (event) {
event.preventDefault();
$(".report").append("<div class='chart'><div id='Progress'><img src='staticMedia/img/loader.gif' /></div></div>");
userData = $("body").data("user"); // get user report data
var chart = new Highcharts.Chart(JSON.parse(atob(userData)));
// destroys legend if only 1 series
if (chart.series.length < 2) {
chart.legend.destroy();
}
}
</script>
</body>
</html>
Found an answer here: stackoverflow.com/a/11984907/3182810. Replacing
$("html").html(data);
in the form with
document.open();
document.write(data);
document.close();
does the trick.

Requete ajax to a php file that returns "undefined"

I saw that I was not the only one with such a problem, but I did not find a solution.
So the problem comes from an application much more complex than that, but trying to target the problem I realized that even a simple "Ajax" request between 2 or 3 files returns me "undefined".
Here are my files :
index.php
<body>
<button>Button</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="./main.js"></script>
</body>
main.js
$(document).ready(function()
{
$('button').click(function(){
$.post('test.php', function(data, status){
console.log('data: ' + data, status);
});
});
});
test.php
<?php
echo "lorem ipsum";
?>
When I click on the button the Ajax request returns that in there console:
data: undefined success
When my file is an index.php file it always returns "undefined" no matter the context (Of course if there is no Javascript error).
But by doing several tests I realized different results with the same content but with other file extensions, the returns are not always the same, for example:
index.html instead of index.php, same main.js and same test.php
data: success
index.html instead of index.php, and if I call a test.txt file that contains for example "lorem ipsum" it returns this :
data: lorem ipsum success
That's my problem, thank you in advance for your answers.
well, i think you have to send json instead of echo like this:
return json_encode('lorem ipsum');
try this i hope it help.
Put this code in your test.php file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<button>Button</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$('button').click(function(){
$.post('abc.php', function(data, status){
console.log('data: ' + data, status);
});
});
});
</script>
</body>
</html>
in your abc.php file just put this and check and put test.php and abc.php in same folder or if abc.php is in another location just change the url of abc.php in $.post
<?php echo "hello"; ?>
I found the problem, it came from my work environment, I used this plugin https://github.com/JosephLenton/PHP-Error and by disabling it everything was working correctly ^^'
Now I have to figure out how to keep it activated while making Ajax requests xD
Thank you all for your help and sorry for wasting your time. :/
here try this:
$(document).ready(function() {
$("#button").click(function() {
$.ajax({
url: "test.php",
success: function(result) {
$("#div").html(result);
}
});
});
});
Then for the php code:
$array = array("" => "lorem", "" => " ipsum");
echo json_encoded($array);

Display JS charts in Div using jQuery.AJAX

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.

How to call a url from javascript and get response from url to javascript?

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);
},

Categories

Resources