I have a simple code:
ajax.html
<html>
<head>
<title>AJAX</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
$(document).on("click", "#ajax-button", function() {
$.ajax({type: 'POST', url: 'ajax.php', data: ({ ajax: $('input[name="ajax"]').val() }),
success:function(data){
$('#result-ajax').html(data);
}
});
});
});
</script>
<input type="text" name="ajax" /> <button id="ajax-button">OK</button>
<div id="result-ajax"></div>
</body>
</html>
ajax.php
<?php
$ajax = intval($_POST['ajax']);
for ($i=0; $i < $ajax; $i++) {
echo $i;
sleep(3);
}
?>
I want get variable in real time, but now i get variable after loop, how I can update my variable in real time? I am tried set async: false, but it just freeze window browser.
HTTP functions as a request-response protocol, so you cant have response by the server on every 3 seconds without making new request. Another way is to use sockets. I hope its helpfull.
Related
I am having a problem is retrieving data sent to a php file through .ajax() via jquery
Following is my html:
<!-- Jquery tute no 94 onwards -->
<html lang="en">
<head>
<meta charse="utf-8">
<title> jquery4 </title>
<link rel="stylesheet" type="text/css" href="jquery4.css"/>
</head>
<body>
<input id="lo" type="text"> </input>
<input id="ton" type="button" value="Load"> </input>
<div id="content"> </div>
<script type="text/javascript" src="jquery.js"> </script>
<script type="text/javascript" src="jquery4.js"> </script>
</body>
</html>
My jquery4.js is:
$(document).ready(function()
{
$('#ton').click(function()
{
var nm= $('#lo').val();
$.ajax({url: 'page.php', data1: 'name='+nm, success: function(data2)
{
$('#content').html(data2);
}
});
});
});
My page.php is:
<?php
if(isset($_GET['data1']))
{
echo $namer= $_GET['data1'];
}
?>
All the above files are in the same folder, and I have xampp installed.
I guess the error is somewhere in the jquery file where I call the
ajax() function
jQuery ajax doesn't take a data1 parameter. It takes a data parameter, which should be an object of name-value pairs.
$.ajax({
url: 'page.php',
data: {
data1: 'name=' + nm,
},
success: function(data2) {
$('#content').html(data2);
}
});
$.ajax({
type: "GET",
url: "page.php",
data: {
data1: 'name=' + nm,
}
,
success: function(data2) {
$('#content').html(data2);
}
});
Try this:
$(document).ready(function() {
$('#ton').click(function() {
var nm= $('#lo').val();
$.ajax({
url: 'page.php?name=' +nm,
success: function(data2) {
$('#content').html(data2);
}
});
});
});
You don't have to tell jQuery to use GET, as it defaults to that, if nothing else is specified.
So the ajax function does not take an argument called data1, but 'data', this is mostly used for other methods as POST, PUT and DELETE.
I prefer also sending GET requests with a normal query string, like the above example.
You can then check for get GET parameter with PHP, using $_GET['name']
The variable $pos has no value after that the Submit button I pressed.
<?php
$pos = $_GET['pos'];
echo "<br><br>pos = ".$pos;
?>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=us-ascii">
<title></title>
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<script type='text/javascript'>
$(window).load(function(){
var position = 128;
$('#submit').click(function(){
$.ajax({
type:"GET",
url: "ajax_test.php",
data: { pos : position },
success: function(){
//do stuff after the AJAX calls successfully completes
}
});
});
});
</script>
</head>
<body>
<br>
<button id="submit">Submit</button>
</body>
</html>
The web console in FF shows:
[12:41:55.027] GET http://somehost.com/ajax_test.php?pos=128 [HTTP/1.1 200 OK 187ms]
<?php
if($_SERVER['REQUEST_METHOD']=='GET' && isset($_GET['ajax'])){
$pos = $_GET['pos'];
echo $pos; exit;
}
?>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=us-ascii">
<title></title>
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<script type='text/javascript'>
$(window).load(function(){
var position = 128;
$('#submit').click(function(){
$.ajax({
type:"GET",
url: "test.php",
data: { pos : position , ajax:1},
success: function(response){
document.getElementById('response').innerHTML ='pos='+response
//do stuff after the AJAX calls successfully completes
}
});
});
});
</script>
</head>
<body>
<br>
<div id="response">pos=</div>
<button id="submit">Submit</button>
</body>
</html>
Your code is correct, your just not using the result of your Ajax GET Request.
Try this in your success function:
success: function(data) {
alert(data);
}
I don't see any errors in your code, except that you call your PHP script from your JavaScript code, and don't do anything with the output. The echo $pos output isn't used anywhere. Add this to your script:
success: function(result){
$('#YourResultDiv').html(result);
}
You can't retrieve your variable from the AJAX call.
Ajax is async and you can't modify a php code which is already computed.
But you can insert your data with jQuery with appendTo() for example
This is my code and i want to pass javascript variable with ajax to php when i click submit button then the result doesn't show var_data variable from javascript What code is wrong?
This is edit order one before everybody help me
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#sub').click(function() {
var var_data = "Hello World";
$.ajax({
url: 'http://localhost/ajax/PassVariable.php',
type: 'GET',
data: { var_PHP_data: var_data },
success: function(data) {
// do something;
}
});
});
});
</script>
</head>
<body>
<input type="submit" value="Submit" id="sub"/>
<?php
$test = $_GET['var_PHP_data'];
echo $test;
?>
</body>
</html>
and this is source code now
<?php
if (isset($_GET['var_PHP_data'])) {
echo $_GET['var_PHP_data'];
} else {
?>
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
$(document).ready(function() {
$('#sub').click(function() {
var var_data = "Hello World";
$.ajax({
url: 'http://localhost/test.php',
type: 'GET',
data: { var_PHP_data: var_data },
success: function(data) {
// do something;
$('#result').html(data)
}
});
});
});
</script>
</head>
<body>
<input type="submit" value="Submit" id="sub"/>
<div id="result">
</body>
</html>
<?php } ?>
this statement if(isset($_GET['var_PHP_data'])) output false and then show Hello World What should i do to do for isset($_GET['var_PHP_data']) is true?
Your solution has PHP issues: you don't check if the data exists, and also, you don't do anything with the result. I've modified the script to do the following:
Check if the var_PHP_data var is set (in PHP, on the server).
If yes, just send a blank text response containing that data.
If no, then draw the form and everything else.
In the form, I've created a #result div.
Ajax response will be shown in this div.
Also make sure that you host the script at localhost and that it is called test.php. To make sure this is resilient, you can change the Ajax URL to
<?php echo $_SERVER['PHP_SELF'];?> to make sure that you'll hit the correct script.
<?php
if (isset($_GET['var_PHP_data'])) {
echo $_GET['var_PHP_data'];
} else {
?>
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
<script>
$(document).ready(function() {
$('#sub').click(function() {
var var_data = "Hello World";
$.ajax({
url: 'http://localhost/test.php',
type: 'GET',
data: { var_PHP_data: var_data },
success: function(data) {
// do something;
$('#result').html(data)
}
});
});
});
</script>
</head>
<body>
<input type="submit" value="Submit" id="sub"/>
<div id="result">
</body>
</html>
<?php } ?>
Try jQuery Form its this will help to solve many problems.
For you question: try url without domain name, add tags 'form', change event click to submit, add data type
what are the contents of PassVariable.php ? if is the same where you have they jquery bit wont work coz php will print all the page again, if the file is different try
success: function(data) {
alert('databack = '+ data);
}
Try placing your input into a form and attaching the ajax call to the form onsubmit event. The way it happens in the provided happen is when you click in the field, in which case it submits before you can write anything really.
$(document).ready(function() {
$('#brn').click(function() {
var var_data = "Hello World";
alert("click works");
$.ajax({
url: 'http://localhost/ajax/PassVariable.php',
type: 'GET',
data: { x: var_data },
success: function(data) {
alert(data);
}
});
});
});
change it to this code
then in PassVariable.php put
make button
<input type="button" id="btn" value="click me" />
it should work because it is very basic example. If it doesn't work check your console if there are any JavaScript errors and remove them.
Okay, what have I done wrong here?
I'm trying to .POST data from a Form with JQuery $.ajax function and return json data. But every time the post data is null.
Here is the HTML/JQuery Part
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
</head>
<body>
<form action="testform" method="post">
OLD ID:
<input id="OldID" name="OldID" type="text"><br>
NewID:
<input id="NewID" name="NewID" type="text"><br>
<input id="do" name="do" type="button" value="Get New ID">
</form>
<script type="text/javascript">
var CID = $('#OldID').val();
$(document).ready(function(){
$('#do').click(function(){
sendValue();
});
function sendValue(CID){
$.ajax({
type: 'POST',
url: 'getNewID.php',
data: {OldID: CID},
dataType: 'json',
cache: false,
success:
function(data){
$('#NewID').val(data.NewID);
}
}) }
});
</script>
</body>
</html>
Here's the PHP page
<?php
if (isset($_POST['OldID'])){
$value = $_POST['OldID'];
}else{
$value = "ELSE VALUE";
}
echo json_encode(array("NewID"=>$value));
?>
I'm sure this is a simple mistake on my part but I'm just going in circles at this point.
Thanks in advance!
$('#do').click(function(){
sendValue();
});
should be:
$('#do').click(function(){
sendValue("VALUE TO SEND TO THE SERVER");
});
because
function sendValue(CID){
takes the scope of CID which it seems you might think should be this var CID = $('#OldID').val();
Your mistake is that you are getting the value of the OldID field in your script, and not on some event handler method. This causes when the script is loaded (when the page is being viewed), the value of the text input is kept on variable CID. and when the user clicks on the #do button, then the value of CID is still the same as the one when the page was loaded. So no value is stored in CID variable, so no value is sent via AJAX.
Define another function (Say sendOldID) that reads the value of the text input in the CID variable, and then calls the sendValue() method with CID paramter. The use that function as the event handler of the #do button clicked.
<script type="text/javascript">
$(document).ready(function(){
$('#do').click(function(){
sendOldID();
});
function sendOldID() {
var CID = $('#OldID').val();
sendValue(CID);
}
function sendValue(CID) {
$.ajax({
type: 'POST',
url: 'getNewID.php',
data: {OldID: CID},
dataType: 'json',
cache: false,
success:
function(data){
$('#NewID').val(data.NewID);
}
}) }
});
</script>
I'm not receiving any output from this code. What could be the error.
terminal.html
<html>
<head>
<link href="/css/webterminal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.5.2.js"/>
<script type="text/javascript">
function shell_execute(str) {
$.ajax({
url: 'exec.php',
dataType: 'text',
data: {
q: str
},
success: function (response) {
$('#txtOut').append(response);
});
}
</script>
</head
<body">
<div class="container">
<h2>UNIX Web Based Terminal 1.0</h2>
<br />
<p><b>output</b></p>
<form>
<span id="User"></span>< <input type="text" id="txtcmd" onkeyup="shell_execute(this.value)" class="textbox" size="20" />
</form>
<div class="output">
<p><span id="txtOut"></span></p>
</div>
</div>
</body>
</html>
exec.php
<?php
$q=$_GET["q"];
$output=shell_exec($q);
echo "<pre>$output</pre>";
?>
You need to get the value from your text input element and put that into str before you pass it to your script.
Like:
var str = $("#txtcmd").val();
Instead of
<script type="text/javascript" src="jquery-1.5.2.js"/>
Close your script tag like this:
<script type="text/javascript" src="jquery-1.5.2.js"></script>
In terminal.html what is str for ???
you should pass some value to get the output
try echoing $_GET['q']; you will come to know
Not specifically your issue I believe but I would take the
onkeyup="shell_execute(this.value)" out of the markup and put in the script part a jQuery event handler:
$("#txtcmd").keyup(function(){
shell_execute($(this).val());
});
I know this is an old post but this is also the problem as well..
function shell_execute(str) {
$.ajax({
url: 'exec.php',
dataType: 'text',
data: {
q: str
},
success: function (response) {
$('#txtOut').append(response);
} <------------ You were missing this.
});
}