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));
?>
Related
I am trying to get a HTML element to update from an ajax quire to a PHP file but it's not working.
My code is below
<html>
<head>
<script src="jquery-3.1.0.min.js"></script>
</head>
<body>
<script>
var json = (function () {
var json = null;
$.ajax({
url: "test.php",
dataType: "json", //the return type data is jsonn
success: function(data){ // <--- (data) is in json format
json = data.test;
$('#demo').text(json.test1);
}
});
return json;
})();
</script>
<p id="demo"></p>
</body>
</html>
PHP code
<?php
header("Content-Type: application/json");
$test = array();
$test['test1'] = '1';
$test['test2'] = '2';
$test['test3'] = '3';
echo json_encode($test);
//echo nothing after this //not even html
?>
can someone please help, thank you
Your php script sending a JSON object and you can access its property like this:
$.ajax({
url: "test.php",
dataType: "json", //the return type data is jsonn
success: function(data){ // <--- (data) is in json format
$('#demo').text(data.test1);
}
});
the Javascript is the problem. You should bind the function that makes the AJAX query to a DOM event, such as a button click.
<script>
$(document).ready(function(){
$("#submit").click(function(e){
e.preventDefault();
$.ajax({type: "POST",
url: "test.php",
dataType: "json",
data: { name: $("#name").val()},
success:function(data){
$("#demo").text(data.test1);
}
});
});
});
</script>
<input type="text" id="name" placeholder="Enter your name">
<button id="submit">Submit</button>
<p id="demo"></p>
On PHP side, you can read the input:
<?php
header("Content-Type: application/json");
$test = [
'test1'=>1, 'test2'=>2, 'test3'=>3, 'name'=>$_POST['name']
];
echo json_encode($test);
exit;
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()
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);
}
});
});
<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.