I am new to AJAX & trying to load a page (test.html) through ajax in to a DIV. I just want to know that is it possible to use AJAX without PHP server (which I am not using at present) or is there any error in the code:
My index.html file is as under:
<! doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/hwcb.css">
</head>
<body>
<input type="button" value="Load" class=”loadpage1”/>
<div id="loadpagea1"></div>
<script src="jquery.js"></script>
<script src="css.js"></script>
<script src="main.js"></script>
</body>
</html>
my test.html file:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
We belongs to a great nation
</body>
</html>
main.js page:
$('.loadpage1').click(function(){
$.ajax({
url:'test.html',
success:function(data){
$('#loadpagea1').html(data);
}
});
});
I just want to know that is it possible to use AJAX without PHP server
Assuming by this you mean without any server in general, then no it is not. You cannot make an AJAX request to the local file system as it will be blocked by the browsers' security settings.
You need to make the request to a server, either local or remote. I would suggest setting up an XAMP server for PHP, or IIS for ASP.Net.
Try this,
var jqXHR = $.ajax({
url: "/test.html",
type: "get",
contentType: "text/html; charset=utf-8",
async: false,
success: function (result) {
}
});
$('#loadpagea1').html(jqXHR.responseText);
$(document).ready(function(){
$('.loadpage1').click(function(){
$.ajax({
url:'test.html',
success:function(data){
var data = $(data);
$('#loadpagea1').html(data.find('body').html());
}
});
});
})
Try this
you have html syntax error, see quotes class=”loadpage1” change with class="loadpage1"
Related
I have a very basic webpage which contains of two files, phpcode.php.cgi and frontpage.php.cgi.
I have dropdowns that should be populated dynamically, however I can't get the request/reponse to work. The ID of the dropdown is "start".
I have an Ajax request in the frontpage file:
$(document).ready(function () {
$("#start").change(function(){
alert("dropdown changed");
var val = $('#start').val();
$.ajax({
type: "GET",
data: {Station_Nr : val},
url: "phpcode.php.cgi",
success: function(data){
alert(data);
}
});
});
});
and my phpfile looks like this:
<?php
if(isset($_GET['Station_Nr'])) {
echo "it works";
};
?>
It tries to request from url../phpcode.php.cgi?Station_Nr=27
When I try to enter the page I get a 500 error.
According to chrome, the error lies in the row which starts with $.ajax.
I have included:
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Thanks!
In the top of the file is #!/usr/bin/php5 located.
Here was \r\n added because of Windows and the transfer method was binary. The Apache server responded with an error and when replacing \r\n with \n it works.
When you obtain a 500 error is because something is wrong in server not in client, use /phpcode.php.cgi in $.ajax to use an absolute path just in case.
I tried to update so much rows with PHP that I had to make it with ajax (becouse execution time in server is too short for execute all rows). So I made a code which should call a .php file with the code inside, which updates sended ROW id in mysql table.
I have a code
<html>
<head>
<title>Cron job!</title>
<meta charset="UTF-8" />
<script src="jquery.js"></script>
</head>
<html>
<body>
<div id="body">
</div>
<script>
$(document).ready(function(){
var array_items = <?=$table_info?>;
var updated_items = 0;
for(var i=0; i<array_items.length; i++){
// pradedam kreipimąsi į kiekvieną rową jo updeitui su ajax
$.ajax({
url: "ajax_cron.php",
type: 'POST',
dataType: 'json',
data: {update_id : array_items[i]['ids']},
success: function (data) {
// kreipimąsis pavyko
if(data.updated_id){
updated_items += 1;
}
$("#body").html(updated_items + " iš " +array_items.length + " updeitinta sėkmingai");
}, error: function(e){
console.log(e.message);
}
});
}
});
</script>
</body>
</html>
and it works when I open url with browser but when I make a call to this script with CRON JOB - ajax doesn't work.. So how to make it work?
Ajax is a client side technology, so it requires client (a browser) to be able to execute the script and most importantly the DOM elements which could be read by your Javascript.
Cron Job on the other hand runs on CLI which does not know anything about the DOM when a script runs there.
So in other words what you are trying to do is not possible with the current web technology that we have. However you can always run a server side script on cronjob but client side script, no you can not.
I have a view page below which automatically detects the current user timezone and after detecting timezone , i am sending it to another page for setting the timezone in session for further use.
here is the file(autodetect.php)
<!DOCTYPE html>
<html>
<head>
<title>
<script type="text/javascript" src="....jquery.js' ?>"></script>
<script type="text/javascript" src='..autodetect/Jsfile/detect1.0.4.min.js'>
</script>
<script>
$(function() {
<?php if (!isset($_SESSION['tz'])) { ?>
var timezone = jstz.determine();
$.ajax({
type: "POST",
url:"<?php echo base_url('timezone.php'); ?>",
data: 'timezone='+timezone.name(),
success: function(data){
}
});
<?php } ?>
});
</script>
</head>
<body>
</body>
,in order to perform this functionality i have to load/read this page(autodetect.php) first,
so my question is "how can i run this page(i.e autodetect.php) before loading any view page or calling any view page via controller?
eg. i have to load the signup page , but before then this i need to read the above php file in order to detect the current timezone of user.
To load any script before loading any view page, you can use Hooks:
Hooks - Extending the Framework Core
And choose the appropriate hook point for your need.
I have a slight problem. I am connecting to a web service which provides JSON results and trying to parse the results. The code is working fine on my localhost (wamp server) but code doesn't run on any of the web hosting accounts I tried.
Here is the url providing JSON
http://mohamedbadr.com/webservice/list.php
And here is my file which is trying to fetch results:
http://contestlancer.com/web/getList.php
Here is the code of the Getlist file:
<!DOCTYPE HTML>
<html>
<head>
<title>Hotel Promotion List</title>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript">
function getList()
{
var i=0;
var ntable="<table><thead><tr><th>Image</th><th>Name</th><th>Rating</th><th>Highlights</th></tr></thead><tbody>";
$.getJSON("http://mohamedbadr.com/webservice/list.php", function(data){
$.each(data.promos, function(key, value) {
ntable+="<tr><td><a href='promotion.php?id="+value.promo.id+"'><img src='"+value.promo.image+"' height='100' width='150'/></a></td><td><a href='promotion.php?id="+value.promo.id+"'>"+value.promo.name+"</a></td><td> "+value.promo.stars+"</td><td> "+value.promo.highlights+"</td></tr>";
});
ntable+="</tbody></table>";
$("#content").html(ntable);
});
}
</script>
</head>
<body onLoad="getList()">
<div id="wrapper">
<div id="content"></div>
</div>
</body>
</html>
Most probably the url is not being opened what is the solution to this? Any help will be highly appreciated
It's not working because you are making a cross domain request. Domain A to Domain B.
Try adding this to http://mohamedbadr.com/webservice/list.php before any output is printed.
header('Access-Control-Allow-Origin: http://contestlancer.com');
As mentioned by Nadh, this is due to a cross-domain request. More info # HTTP Access Control. Understanding Same Origin Request.
Since you are using jQuery getJson(), you may alternatively try this approach
var url = "http://mohamedbadr.com/webservice/list.php";
$.getJSON(url + "?callback=?", null, function(data) {
... Success Logic here...
});
The ?callback=? at the end of the url, will convert your request to a JSONP. And if you remove it, this will be a plain Ajax call.
Understanding JSONP
-- Arvind.
Here is what I have so far:
<?php
// Simulating some post values for test proposes
$_POST['test'] = 'testing values';
// POST contents (originally from a form in another page)
$query = http_build_query( $_POST );
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function() { $("#myiframe").load(function(){ window.location.replace('after.php'); }); });
</script>
<title>iFrame Load POST</title>
</head>
<body>
<iframe id="myiframe" src="load.php" width="0" height="0"></iframe>
</body>
</html>
What I need is to be able to send $_POST data, originally sent from a form in another page, to the iframe and redirect the page after the iframe has loaded and processed the post data.
---- EDIT ----
In fact, it doesn't need an iframe, but I still need to do a post call to load.php and wait for it to load in order to make the redirect. I cannot redirect before the load.php has finish loading the request. That's why I was using the iframe method and previously using GET instead of POST.
--------------
Can someone please help?
Thank you!
Just use a jQuery AJAX call. It allows you to attach a handler that gets executed once the request finishes successfully.
$.ajax({
url: 'load.php',
data: {foo: 'bar'},
type: 'post', // you can use get if you want to.
success: function(response) {
window.location.replace('after.php');
}
});