<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.
Related
I am trying to pass data from a hyperlink to a page via a get request using Ajax
Initially I am able to do this without Ajax directly as below
<a id="link" href="page.php?id=12&pid=12" >pass data</a>
and I catch below in php
<?php $_GET['id'] ?>
<?php $_GET['pid']?>
now I want to do this using Ajax so the page does not need to load
I am trying with the below
<a class="choice" id="link" href="page.php?id=12&pid=12" >pass data</a>
$(document).ready(function() {
$(".choice").click(function(e) {
e.preventDefault();
$.ajax( {
<!--insert.php calls the PHP file-->
url: "votes.php",
method: "get",
dataType: 'html',
success: function(strMessage) {
$("#vote").html(strMessage);
}
});
});
});
but I am unable to get this to work. I need help on the correct implementation of send data using Ajax to my php file
First of all, a <script> tag is required for JavaScript part. Ajax URL can read from <a> tag href attribute by $(this).attr('href'). Also based on your code, a div with vote id is needed so <div id="vote"></div> added.
<a class="choice" id="link" href="page.php?id=12&pid=12" >pass data</a>
<div id="vote"></div>
<script>
$(document).ready(function() {
$(".choice").click(function(e) {
e.preventDefault();
$.ajax( {
url: $(this).attr('href'),
method: "get",
dataType: 'html',
success: function(strMessage) {
$("#vote").html(strMessage);
}
});
});
});
</script>
Document
pass data
<script>
$(document).ready(function() {
$("#choice").click(function(e) {
e.preventDefault();
$.ajax({
url: $(this).attr('href'),
method: "GET",
dataType: 'html',
success: function(strMessage) {
$("#vote").html(strMessage);
}
});
});
});
</script> </body>
this code is about showing more data from database within the same page,without refreshing page,but this deos not work.need some help.
function showmore()
{
$.ajax({
type: "POST",
url: 'showmore.php',
data:{action:'true'},
success:function(html) {
alert(html);
}
});
}
<button type="button" onclick="showmore()">showmore</button>
showmore.php
<?php echo "<div><p>something</p></div>"?>
Change this to update your page dynamically:
In the php function:
<?php echo 'something'; ?>
Add this line to your html document (it is good practice not to return html from the server):
<div><p id="the-p-id"></p></div>
And in your jquery function, on success:
success: function(result) {
$('#the-p-id').html(result);
}
This is work for me. If I use library of jquery like this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function showmore(){
$.ajax({
type: "POST",
url: 'showmore.php',
data:{action:'true'},
success:function(html) {
console.log(html);
}
});
}
</script>
<button type="button" onclick="showmore()">showmore</button>
**showmore.php**
<?php echo "<div><p>something</p></div>"?>
Output
<div><p>something</p></div>
for the PHP is just simple check:
All in the same page named **
page.php
if(isset($_POST['XYZ']){
echo "WORKING";
}
then for my HTML:
<h1 id='XYZ'>CLICK ME</h1>
now at the same page i'm trying to do the AJAX POST request like this
$('#XYZ').click(function(){
var XYZ = 'XYZ';
$.post('page.php',{
XYZ: XYZ
})
})
and the request didn't work, How do i just pass the $_POST data? I removed success function since i didn't think it is useful in this case.
What i want is when i click on the <h1> the echo appears.
try this:
var my_string = 'xyz';
$.ajax({
url: 'ajax.php',
type: 'post',
data: { "action":my_string},
dataType: "json",
success: function(response) {
if(response['state'] == 'ok'){
console.log("ok");
}
}
});
ajax.php
<?php echo $_POST['action']; ?>
<head>
<script>
var my_string = 'xyz';
$.ajax({
method: 'POST',
url: './giveposts',
dataType: "text",
contentType: "application/json; charset=utf-8",
data:my_string,
success: function(data) {
{
$("#test").html(data);
}
}
});
</head>
</script>
<body>
<div id="test>
/*echo
</div>
</body>
I am using an ajax call which is as follows
var ID=$(this).attr('id');
var input=$("#input_"+ID).val();
var dataString = {id: ID, value: input};
$("#span_"+ID).html(input);
if(input.length>0)
{
$.ajax({
type: "POST",
url: "/apps/worker_app.php",
data: dataString,
cache: false,
success: function(html)
{
$("#span_"+ID).html(span);
}
});
}
How can I get the data in my php function edit_ajax() which is inside worker_app
I use post but the array come to be empty
Thanks
Add dataType: 'json',
var ID=$(this).attr('id');
var input=$("#input_"+ID).val();
var dataString = {id: ID, value: input};
$("#span_"+ID).html(input);
if(input.length>0)
{
$.ajax({
type: "POST",
url: "/apps/worker_app.php",
data: dataString,
dataType: 'json',
cache: false,
success: function(msg)
{
$("#span_"+ID).html(span);
}
});
}
and in worker_app.php get id and value by
$id=$_POST['id'];
$value=$_POST['value'];
edit_ajax($id,$value);
function edit_ajax($id,$value){
$sql="update from ..........";
}
Is this what u want?
Have you tried setting the dataType in your ajax call, like this:
$.ajax({
type:"POST",
url: "/apps/worker_app.php",
data: dataString,
cache: false,
success:function(html) {
},
dataType:"json"
});
Also, you could use a tool like firebug to see so the data is passed correctly in your ajax request.
Here is an example:
file1.php:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javscript"></script>
<script type="text/javascript">
$(document).ready(function() {
// catch submit event for your form
$('#form1').submit(function() {
// serialize data from form
var data = $(this).serialize();
$.ajax({
type="POST",
url:"file2.php",
data:data,
success:function(resp) {
// output response
$('#output').html(resp);
}
});
return false;
});
]);
</script>
</head>
<body>
<div id="output"></div>
<form method="POST" id="form1">
<input type="text" name="name" />
<input type="submit" value="send" />
</form>
</body>
</html>
file2.php:
<?php
if(isset($_POST['name'])) {
header('Content-type: text/html');
echo '<p>Response From Server - Your name is: '.$_POST['name'].'</p>';
}
?>
in /apps/worker_app.php get those posted values
$id=$_POST['id'];
$value=$_POST['value'];
and now use the values with your php function
function edit_ajax($id,$value)
{
echo $id;
echo $value;
}
echo $return=edit_ajax($id,$value);
now you can get the values in the current page as
success: function(html)
{
$("#span_"+ID).html(span);
}
> $.ajax({
> type: "POST",
> url: "/apps/worker_app.php",
> data: dataString,
> cache: false,
> success: function(msg)
> {
> $("#span_"+ID).html(msg);
> }
> });
on success, the argument function is receiving should be same used with
$("#span_"+ID).html(msg);
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));
?>