I am trying to get all content of two.html in onw.html page by using ajax but don't knw its not working in short in have to develop one page application n url should not load below in have posted my code.
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
// Check browser support
function demo()
{
var name=document.getElementById('dd').value;
if (typeof(Storage) !== "undefined") {
// Store
localStorage.setItem("lastname", name);
// Retrieve
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
}
$(document).ready(function(){
$("button").click(function(){
$.ajax({
url: "two.html",
success: function(result){
$("#result").html(result);
}});
});
});
</script>
</head>
<body>
<div id="result"></div>
<input id="dd" type="text" onblur="demo()" >
<br/>
<button>two</button>
<br/>
write something & click on link it will redirect to another page.
close this page and open three.html page.
<br/>
<img src="1.png" alt="da" style="width:150px;height:150px"></img>
</body>
two.html
<!DOCTYPE html>
<html>
<body id="body">
<div id="result"></div>
<label>Second Page</label>
<script>
if (typeof(Storage) !== "undefined") {
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
</script>
<img src="2.gif" alt="da" style="width:150px;height:150px"></img>
</body>
</html>
Chrome's internal settings are blocking your request because you are not using a supported scheme ie (http, data, chrome, chrome-extension, https, chrome-extension-resource).
Simply put, you are running the file from your desktop so the file address starts with file:// and not http:// or https://
You need to run the file from a server setup as your localhost or upload the files to a remote server.
you could also simplify your code a touch with the shorthand version .get():
$(document).ready(function(){
$("button").click(function(){
$.get( "two.html", function( result ) {
$( "#result" ).html( result );
});
});
});
Apparently, you can also set a flag in chrome to override the scheme requirement, but it would be much preferred to just run the files on a server with the correct scheme, and if you do change the flag, be sure to revert it when you're done testing locally, its there for a reason after all.
On your console i can see many errors.
you are trying to make ajax call without localhost or without any server here.
you not mention its mime-type: "text/html" here.
so 1st you need to know ajax.
Ajax is not work without http or https url. so for that you must need to start localhost or setup any webserver.
and if you want to load your other html file content on your current html page then you can use
$("#results").load("test.html");
but it will works only firefox browser not work on chrome. because chrome-security flag is not allowed you to load files on web browser from your local file system.
if you want it works on chrome also you have two options.
you can make your application as an chrome extention.
first you can setup any local server and start localhost and copy your files in www or webapp directory and then try for Ajax.
try this if you have setup 2nd step.
$("button").click(function(){
/* you can make ajax by 2 ways 1st ways this which used traditionally */
$.ajax({
type:"GET",
url: "two.html",
mimeType: "text/html; charset=utf-8",
success: function(result){
$("#result").html(result);
});
/* 2nd Ajax type is...*/
// $("#result").load("two.html");
});
if you have wamp server then copy your all files and paste on this direcory
"C:\Program Files\wamp\www\" and
start your localhost.
open browser and type localhost
and select your base html file. and then click the button it will works.
I hope it will helps you.
Related
I have an device connected over "/dev/ttyUSB0" to my RaspberryPi. In Chromium I want to set it on "Remote" with a python-serial script:
import serial
ser = serial.Serial()
ser.baudrate = 9600
ser.port = "/dev/ttyUSB0"
ser.open()
ser.write("REM".encode("utf-8"))
ser.close()
this executes on a HTML ButtonClick Event compared with some js code:
function goPython() {
$.ajax({
url: "serial.py",
context: document.body
}).done(function) {
alert('finished python script');;
});
}
HTML:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<button id="click" onclick="goPython()">GO!</button>
</body>
It runs on my Chromium Browser at the RasPi and says:
finished python script
But the device, sadly isnt in Remote Access. Anybody got a hint? Since I had very positive experiences at StackOverflow I wanted to post it here. Thanks a lot people!
I have a python program on remote server. I need to create a web page (html code present in same directory as that of python script on server) having a button on clicking which python script should run. One more thing is that we need to choose a file from local machine after which the python script takes that file as input, runs and outputs another file which needs to be displayed on web page.
I don't know what to use javascript or ajax or php to achieve this. I tried out different ways but in vain.
This is the html code I have been trying with...
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
// var file = $('#fileInput')[0].files[0]
var fd = new FormData();
fd.append('fileInput', file);
// console.log(fd)
$.ajax(
{
type: "POST",
url: "./summarize.py",
data: "fd"
success: function (response) {
}
// error: function (response) {}
});
});
});
</script>
</head>
<body>
<h3>Upload reviews file</h3>
<input type="file" id="fileInput" name="fileInput">
<p>Click the "Get summary" button to summarize the reviews.</p>
<button>Get summary</button>
</body>
</html>
I have searched online but no where the answer was specific (I felt so). Since I am new to javascript, I have trouble in following them. Someone kindly explain what is to be done.
Thank you.
I think you can use php exec, to run Python and your summarize.py script.
<?php
// #result array
exec("python summarize.py", $result);
PHP exec will return you result. Also you can use django or other frameworks to run your Python code.
My aim is to get an element <div id="calender"> and all what is in the element shown in a browser. The point is that normal get-html-source won't do the thing. The element what I am looking for does not exists in the html output of php-function file_get_contents.
I have tried to get the source by php with xpath byt the help of http://us3.php.net/manual/en/class.domxpath.php which inludes a nice tool to get what is in any tag in the html page. But the problem here might be that the element (a calender) is formed to the loaded page by javascript and cannot be caught by server side php. So, is there a way I can catch such element (div) by javascript instead.
There are script examples of javascript for this kind of problem (if I have understood them correctly) but currently I cannot get a simple javascript to work. An example below shows how I have tried to built up a code. $ajax thing here is just one path I have tried to solve the problem but don't know how to use it. More here I cannot figure out why the simple javascript functions do not work (just test purposes).
<!doctype html>
<html lang="fi">
<head>
<meta charset="utf-8">
<title>load demo</title>
<style>
body {
font-size: 12px;
font-family: Arial;
}
</style>
<script type="text/javascript">
function ok {
alert "OK";
}
function get_html (my_html){
alert "OK";
var l = document.getElementById('my_link').value;
alert l;
alert my_html;
var url = my_html;
$.ajax({
url: url,
dataType: 'html'
success: function(data){
//do something with data, which is the page 1.html
var f = fs.open("testi_kalenteri.html", "w");
f.write(data);
f.close();
alert "data saved";
}
});
}
</script>
</head>
<body>
<p id ='my_link' onclick='get_html("lomarengas.fi/en/cottages/kuusamo-rukasaukko-9192")'>html-link</p>
<p id ='ok' onclick='ok()'>show ok</p>
</body>
</html>
Briefly, I have a link to a web page, which shows up a (booking) calendar in it but this calendar is missing in the "normal" source code, by file_get_contents (php). If I browse the html source with Chromes tools (F12) I can find the calendar there. T want that information get by javascript or by php or such.
If you read the source code of the page you point to (http://www.yllaksenonkalot.fi/booking/varaukset_akas.php), you notice that the calendar is loaded via an iframe.
And that iframe points to that location :
http://www.nettimokki.com/bookingCalendar.php?id_cottage=3629&utm_source=widget&utm_medium=widget&utm_campaign=widget
Which is in fact the real source of the calendar...
EDIT following your comment on this answer
Considering the real link : http://www.lomarengas.fi/en/cottages/kuusamo-rukasaukko-9192
If the calendar is not part of the generated html, it is surely asynchronously generated (in javascript, client side).
From this asumption, I inspected the source code (again).
In the developper tools of my browser, in the Network section, where you can monitor what files are loaded, I looked for
calls to server (everything but calls to resources : images, stylesheets...).
I then noticed calls to several urls with json file extensions like http://www.lomarengas.fi/api-ib/search/availability_data.json?serviceNumber=9192¤tMonthFirstDate=&duration=7.
I felt I was on the right track (asynchronous javscript calls to generate html with json datas), I looked for javascript code or files that was not the usual libraries files (jquery, bootstrap and such).
I stumbled upon that file : http://www.lomarengas.fi/resources_responsive/js/destination.js.
It contains the code that generates asynchronously the calendar.
tl;dr
The calendar is indeed generated asynchronously.
You can't get the full html with a curl or file_get_content in PHP and
you can't access it with ajax code (due to Same-origin policy).
By the way, you should contact the site to see if you can access their api via PHP with their consent.
Hope it helped you understand the whole thing...
To get <div id="calender"> you can use next code (jquery):
<div id="calender"></div>
<script>
$("#calendar").click(function(){
alert('calendar was clicked');
});
</script>
If I understand you correctly. I think you need appropriate php respond with some correct code inside php file:
// json_handler.php
<?php
if (is_ajax()) {
$return = $_POST;
$return["ok"]="ok";
$return["json"] = json_encode($return);
echo json_encode($return);
}
function is_ajax()
{
return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
}
and this is script wich is inside html:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<a id="click">click</a>
<script>
$("document").ready(function(){
$("#click").click(function(){
var data = {
"request": "request"
};
data=$.param(data);
// alert(data);
$.ajax({
type: "POST",
dataType: "json",
url: "json_handler.php",
data: data,
success: function(data) {
// here you will see echo respond from your php json_handler.php
// also you can add here more javascript (jquery code) to change your page after respond
alert();
}
});
return false;
});
});
</script>
<body>
<html>
http://www.w3schools.com/jquery/jquery_ajax_intro.asp
I've tried to load external html page on same server using jQuery .load() by clicking on div , but it just doesn't work ! I tried using examples of $.get or $.post from Jquery API website . but every time I found this error in my chrome console :
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.
every correct answers on Stackoverflow also had same results .
I know a little of JavaScript,Jquery and php . can somebody help me out here ?
Extra Notes : I've also tested my codes in XAMP local server ;
I've tried many ways , the last time my code was :
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$('#reslink').click(function(e){
e.preventDefault();
$.ajax({
type: "GET",
url: "2.html",
data: { },
success: function(data){
$('#maincont').html(data);
}
});
});
});
</script>
</head>
<body>
link1
<div id="maincont">
</div>
</body>
</html>
new:
I tested the same code in online free webhost and it just worked there ! I still cand understand the reason why it didnt work in xamp server !
I wanna use Facebook's Like button on my web site.
It's so simple as everyone knows but I have a problem with the censorship in our country.
Facebook is censored in our country and if I use the simple iframe, the people who have no access to Facebook (can't pass the censorship) will see the block page which I don't want to.
So I wanna check if loaded address is Facebook show them the iframe else (they will be redirected to another web site) hide the iframe.
Is there any way for me to find this out? I mean anything like address or content or id etc.
Here is my code:
<html>
<head>
<title>facebook test</title>
<style>
.facebook{
display:none;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
</head>
<script type="text/javascript">
$.ajax({
url: 'https://graph.facebook.com/btaylor?callback=?',
dataType: 'json',
success: function(data) {
$(".faceboock").show();
// alert('success - facebook works');
// alert('data = ' + JSON.stringify(data));
},
error: function() {
alert('error - facebook fails');
}
});
</script>
<div class="faceboock">
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2Fmypage%2F152215541478267&width=292&colorscheme=light&show_faces=true&stream=true&header=true&height=427" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:427px;" allowTransparency="true"></iframe>
</div>
It works when client has access to facebook, I mean the "success: function" works but error function doesn't.
The problem is when facebook is not accessible that json never responds.
Is there any way to set a timeout for response or anything else in order to handle the error?
You can't check the content of an iframe that is not on the same domain as your code.
See Same Origin Policy
iframe.src can be checked without restrictions, but does not change when the redirect happens
iframe.contentWindow.location.href does change when the redirect happens, but can't be accessed in your case due to the security restrictions mentioned above
The only way I can think of to test this is:
Do a JSONP call to one of the Facebook APIs (JSONP has no domain restrictions)
Check the response
If these JSONP calls get redirected as well than it will most likely throw an exception instead of returning the expected values (due to the fact that it will try to parse as javascript a response which is most likely a fullhtml page)
Here is a working example using jQuery to do the JSONP call.
It works from my location, could you test it and see if you get the error alert?
You can also go in your browser to the url in the example. If facebook.com gets redirected, but this one doesn't than you'll have to find some other way to check it...