This is the code of index.php:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script type="text/javascript">
jQuery(function () {
jQuery('#city').change(function() {
var city = jQuery('#city').val();
var data = "city=" + city;
jQuery.ajax({
url: 'page.php',
type: 'GET',
data: data,
success: function(data){ jQuery("#my_div").html(data); }
});
});
});
</script>
</head>
<body>
<select id='city'>
<option value='Paris'>Paris</option>
<option value='London'>London</option>
<option value='Rome'>Rome</option>
</select>
<div id='my_div'>
<?php require_once('page.php'); ?>
</div>
</body>
<html>
And page.php:
<?php if (isset($_GET['city'])) echo 'you selected '.$_GET['city']; ?>
Selected a city should display 'you selected ' then the name of the city. But it doesn't do anything..
you are not sending the data... data is undefined here... change your code var city = "city=" + city; to var data= "city=" + city;.. adn you are getting your response as data.. so replace
jQuery("#my_div").html(html);
with
jQuery("#my_div").html(data);
try this
jQuery('#city').change(function() {
var city = jQuery('#city').val();
var data= "city=" + city; //<--here
jQuery.ajax({
url: 'page.php',
type: 'GET',
data: data,
success: function(data){ jQuery("#my_div").html(data); } //<--here
});
});
you could use shorthand... but the real issue here is two variables are "undefined".
The html variable is not defined, nor was the data variable as previously mentioned.
Give this a shot
$('#city').change(function() {
var data= "city=" + $('#city').val();
$.ajax({
url: 'page.php',
type: 'GET',
data: data,
success: function(html){
$("#my_div").html(html);
}
});
});
Related
I'm trying to counting a SESSION variable, but i don't want that the user seeing any refreshes.
my problem with the code below is that, it change only ones and then its needed a refresh. How can i do this without any refreshes?
test page:
<?php session_start(); ?>
<script src="../../../common/js/jquery-1.11.2.min.js"></script>
<script src="../../../common/js/jquery.touchwipe.min.js"></script>
<?php
if(empty($_SESSION['counter'])){
$_SESSION['counter'] = 1;
}
$count = $_SESSION['counter'];
?>
<div id="main"><?= $count; ?></div>
<button id="detailed">Link</button>
<script type="text/javascript">
$(document).ready(function(){
$(document).on('click','#detailed',function(){
var count = "<?= $count ?>";
count++;
$.ajax({
type: "POST",
url: "test.php",
data: {countertje: count},
success:function(data){
$('#main').html(data);
console.log(data);
}
});
})
});
</script>
do_ajax.php
<?php
session_start();
$_SESSION['counter'] = $_POST['countertje'];
echo $_SESSION['counter'];
?>
<script type="text/javascript">
var count = "<?= $count ?>";
$(document).ready(function(){
$(document).on('click','#detailed',function(){
count++;
$.ajax({
type: "POST",
url: "test.php",
data: {countertje: count},
success:function(data){
$('#main').html(data);
console.log(data);
}
});
})
});
</script>
count should be a global variable
Something you could use in javascript
var count = $('#main').val();
instead of following :
var count = "<?= $count ?>";
Writting PHP code inside javascript isnt good idea!
I'm trying to get data via ajax then send it through a form. However it doesn't seem to be working. Any ideas what im doing wrong?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form method="get" action="test.php">
<input id="myvar" type="hidden" name="albumid" />
<button type="submit" id="btnsubmit">Submit</button>
</form>
<script type="text/javascript">
$('form').submit(function() {
$.ajax({
url: "newAlbum.php",
success: function(data){
var album = data;
$('#myvar').val(album);
}
});
});
</script>
newAlbum.php
<?PHP echo '11'; ?>
test.php
<?php echo $_GET["albumid"]; ?>
Okay try adding as follows:
$('form').submit(function() {
$.ajax({
url: "newAlbum.php",
async:false,
success: function(data){
var album = data;
$('#myvar').val(album);
}
});
});
As someone else pointed out - you need to add the data parameter. But I would also use $(this).serialize(), since that will fetch all form input elements.
<script type="text/javascript">
$('form').submit(function() {
$.ajax({
url: "newAlbum.php",
data: $(this).serialize(),
success: function(data){
var album = data;
$('#myvar').val(album);
},
error : function(data) {
console.log(data);
}
});
});
</script>
Try receiving the data as JSON
$.getJSON()
I have an ajax call that passes data to another php file, createTest2.php, as below.
But the createTest2.php file throws error
"Notice: Undefined index: aaa in C:\xampp\htdocs\TestProj\Test\createTest2.php on line 2
I have no clue how to fix it.
caller.php
$(document).ready(function(){
$("#button_submit").click(function()
{
$.ajax({
type:"POST",
url:"createTest2.php",
data:{aaa : "UNIT_TEST"},
success:function()
{
alert("success");
}
});
});
});
createTest2.php
$test_name = $_POST['aaa'];
if you are using
$test_name = $_POST['aaa'];
you have to call ajax like this
$(document).ready(function(){
$("#button_submit").click(function()
{
$.ajax({
type:"POST",
url:"createTest2.php",
data:"aaa=UNIT_TEST",
success:function()
{
alert("success");
}
});
});
});
the main thing is that " data:"aaa=UNIT_TEST", "
Try this:
//sample.php
<?php
if(isset($_POST) && isset($_POST['aaa'])){
echo json_encode("hello world! Your data was: " . $_POST['aaa']);
}
?>
//your client side page
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function send(){
$.ajax({
type:"POST",
url: 'sample.php',
data:{aaa:"UNIT_TEST"},
dataType: 'json'
}).done(function(data){
alert(data);
});
}
</script>
</head>
<body>
Send
</body>
</html>
Try this in your, for example, index.html:
<script>
$(document).ready(function(){
$("#button_submit").click(function()
{
$.ajax({
global: false,
type:"post",
dataType: "html",
cache: false,
url: "createTest2.php",
data: {aaa:'test'},
success:function(html) { alert(html); },
error: function(e) {alert(e);}
});
});
});
</script>
And in your createTest2.php just put this to see if ajax calls are received:
<?php
echo $_POST['aaa'];
?>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
var content = $('#content').html();
var data = {"content":content};
$.ajax({
type: "POST",
dataType: "json",
url: "ajax.php",
data: {content:content},
success function (data) {
alert('Hello!');
}
});
});
});
</script>
<div id="content"><?php echo $content; ?></div>
ajax.php
echo json_encode($_POST['content']); ?>
Nothing happens... WhatI really want to achieve is to get that alert box and get the return data, but I am lost since I don't get any errors or nothing.
You miss " : " after success
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
var content = $('#content').html();
var data = {"content":content};
$.ajax({
type: "POST",
dataType: "json",
url: "ajax.php",
data: {content:content},
success: function (data) {
alert('Hello!');
}
});
});
});
</script>
<div id="content"><?php echo $content; ?></div>
As #sofl said, if you change it to success:function (data) { it will work!
Just remember that the $("a") from $("a").click(function() { called when click in a link tag like <a href"">.
If you are using an input ou button with a class="a" you should change the code to $(".a").click(function() {
(just add a . before a)
PS: If you're using a link, you should set the href="" to href="#" to work.
I tried to post values from the link title attribute with jquery ajax json post. Here is my code. where is the problem? Why doesn't it work?
main.php
<script type="text/javascript">
$(document).ready(function(){
$(".link").click(function(){
var aa = $(this).attr('title');
$.ajax({
url: "data.php",
dataType: "json",
data: "number1="+aa,
success: function(json){
$("#result").html(json.number1);
}
});
});
});
</script>
A
B
O
<div id="result"></div>
data.php
<?php
$number1 = $_GET['number1'];
echo json_encode($number1);
?>
Try this:
<script type="text/javascript">
$(document).ready(function(){
$(".link").click(function(){
var aa = $(this).attr('title');
$.ajax({
url: "data.php",
dataType: "json",
data: {"number1": aa},
success: function(json){
$("#result").html(json.number1);
}
});
});
});
</script>
A
B
O
<div id="result"></div>
<?php
$number1 = $_GET['number1'];
echo json_encode(array('number1' =>$number1));
?>