I used this code for sending and returning result.
<script type="text/javascript">
$(document).ready(function() {
$('.special').click(function(){
var info = $(this).attr("rel");
//$(this).html(sku);
$.ajax({
type: "POST",
url:"../ajax/addSpecialFlag.php",
async: false,
data: {info:info},
success:function(result){
$(this).html(result);
}});
});
});
</script>
<b style="cursor: pointer" class="special" rel="<?=$v['number']."/*".$v['vid']; ?>">Special</b>
addSpecialFlag.php
<?php
echo $_POST['info'];
?>
This code should return "Info" in "<-b class='special' ->" but no returning result. Where is the problem ? Thanks in advance !
The problem should be that $(this) inside your success-handler is not the same as outside of the handler. Doing it like this should solve your problem:
$(document).ready(function() {
$('.special').click(function(){
var $this = $(this);
var info = $this.attr("rel");
$.ajax({
type: "POST",
url:"../ajax/addSpecialFlag.php",
async: false,
data: {info:info},
success:function(result){
$this.html(result);
}});
});
});
<b>? Umad? Please use <strong>.
I have tidied your code so the paranthesis match their line indents and adjusted your success handler. The issue was the success handler is in a different scope to the click function scope so you needed to refer to it in another way, i.e. by assigning it to another variable.
$(document).ready(function () {
$('.special').click(function () {
var info = $(this).attr("rel");
var _this = $(this);
//$(this).html(sku);
$.ajax({
type: "POST",
url: "../ajax/addSpecialFlag.php",
async: false,
data: {
info: info
},
success: function (result) {
_this.html(result);
}
});
});
});
Related
this is my Code inside a html file:
<script>
$(document).ready(function (event)
{
$(document).on("click", ".interestbutton", function(e)
{
var docID = e.target.parentNode.parentNode.id;
$.ajax({
type: "POST",
url: "interest.php",
data: {docID },
success: function(data) {
console.log("done");
}
});
});
});
</script>
The "console.log" works but nothing inside my php file does. Any ideas?
Best regards
Change data: {docID } for data: {docID: docID} as it is an object.
why isn't this working?
jQuery AJAX Code:
$("header input").bind("keyup", function()
{
var searchString= $("header input").val();
var dataString = 'search=' + searchString;
alert(dataString);
$.ajax({
type: "POST",
url: "index.php",
data: dataString,
cache: false
});
});
PHP Code(Just a test Code):
if($_POST["search"]) {
echo "TEST MESSAGE!";
}
It doesn't show The echo :/
thanks for ur help ;)
You need to display the data you receive from the ajax call.
Example, to put the result into a <div> called YourresultDiv:
Try with this
$("header input").on("keyup", function () {
var searchString = $("header input").val();
var dataString = 'search=' + searchString;
alert(dataString);
$.ajax({
type: "POST",
url: "index.php",
data: dataString,
cache: false,
success: function (data) {
$('#YourresultDiv').html(data);
alert("Successful");
}
});
});
Hopes this will help you....
$("header input").bind("keyup", function()
{
var searchString= $("header input").val();
var dataString = 'search=' + searchString;
alert(dataString);
$.ajax({
type: "POST",
url: "index.php",
data: dataString,
cache: false,
async: false
},success: function (data) {
$('div#posteddata').append(data);
}
);
});
<html>
<head>
</head>
<body>
<div id="posteddata"></div>
</body>
</html>
You need to specify an element you want to update.. for example
<div id="result"> </div>
and then append a success event handler to your ajax call
$("header input").bind("keyup", function () {
var searchString = $("header input").val();
var dataString = 'search=' + searchString;
alert(dataString);
$.ajax({
type: "POST",
url: "index.php",
data: dataString,
cache: false
}).success(function (data) {
$("#result").html(data);
}).fail(function () {
alert("Ajax failed!");
});
});
Try with this
In js add
success: function (data) {
// success handler
}
as your response handler
if($_POST["data"]) {
// search = search string available here in $_POST['data']
echo "TEST MESSAGE!";
}
where is your call back function in $.ajax() function,with callback function only,you can display anything through an ajax request..
So try this.
$("header input").on("keyup", function () {
var searchString = $("header input").val();
var dataString = 'search=' + searchString;
alert(dataString);
$.ajax({
type: "POST",
url: "index.php",
data: dataString,
cache: false,
success: function (data) {
$('#Yourdiv').html(data); // or $('#Yourdiv')text(data);
}
});
});
Without success function,you can see the echoed statement in your network segment in console.
for that, press F12,then you will get a link like
XHR finished loading: POST "http://localhost/yourproject/func_name.Click on that link and you will goto network segment and from there,click on the function name and then in response or preview tab,you canb see the echoed statement..
try it.
I have a html link with a value inside like this.
<a data-toggle='modal' data-id='1' href='#myModal' class='marker' title='Edit'>Link</a>
I have a Js script that trigger a php that I want to send the value data-id
<script>
$(document).on("click", ".marker", function () {
var myBookId = $(this).data('id');
$.ajax({
type: "post",
url: "update.php", //
data: myBookId,
success: function(msg) {
$("#thanks").html(msg)
},
error: function() {
alert("failure");
}
});
});
</script>
And in my php I have this
if (isset($_POST['myBookId'])) {
$emp_id = strip_tags($_POST['myBookId']);
echo $emp_id;
But something is wrong the value is not pass.
Your problem is on the params of the AJAX call. Try this way:
data: { myBookId: myBookId },
try
$('.marker')click(function(){
var myBookId = $().attr('data-id');
$.ajax({
type: "post",
url: "update.php", //
data: myBookId,
success: function(msg){
$("#thanks").html(msg)
},
error: function(){
alert("failure");
}
});
return false;
});
The follwing ajax script isn't sending data to php, the page just reloads & form input values are passed onto the url.
Script
<script>
$("#addProducts").submit(function(event) {
var str = $("addProducts").serialize();
event.preventDefault();
$.ajax({
type: "POST",
url: "subAddProduct.php",
data:str
})
});
</script>
HTML Form
<form enctype="multipart/form-data" id="addProducts">
...
</form>
There's already a problem in your code: $("addProducts").serialize(); should be $("#addProducts").serialize();.
I just ran some tests. The problem is because you try to bind your function before your document is ready. Please replace your code by the code below:
$(document).ready(function() {
$("#form1").submit(function(event) {
var str = $("#form1").serialize();
event.preventDefault();
$.ajax({
type: "POST",
url: "test.php",
data: str
});
});
});
About what Zeeshan Bilal and pvorb said, I'm afraid it's false. submit() is the right function to use (see jQuery documentation).
Description: Bind an event handler to the "submit" JavaScript event, or trigger that event on an element.
Perhaps you are trying to bind your function when document is not ready.
$(document).ready(function() {
$("#addProducts").submit(function(event) {
var str = $("addProducts").serialize();
event.preventDefault();
$.ajax({
type: "POST",
url: "subAddProduct.php",
data:str
})});
});
<script>
$("#addProducts").submit(function(event) {
event.preventDefault();
var str = $("#addProducts").serialize();
$.ajax({
type: "POST",
url: "subAddProduct.php",
data:str
})
});
</script>
HTML Form
<form enctype="multipart/form-data" id="addProducts" action="">
...
<input type="submit" name="submit" value="submit">
</form>
To solve this problem you should modify your code in this way:
<script>
$("#addProducts").submit(function(event) {
var str = $("#addProducts").serialize();
$.ajax({
type: "POST",
url: "subAddProduct.php",
data:str,
success: function(data){
//perform your success process here
return false;
}
})
});
</script>
Try Setting the Ajax async property to false as shown below
<script>
$("#addProducts").submit(function(event) {
var str = $("addProducts").serialize();
event.preventDefault();
$.ajax({
async:false
type: "POST",
url: "subAddProduct.php",
data:str
})
});
</script>
Adjust your JS as below
<script>
$("#addProducts").click(function(event) {
$.ajax({
type: "POST",
url: "subAddProduct.php",
dataType : 'json', //data type can be any type like json, html etc.
data:'str='+str
success : function(data) {
//perform your success process here
}
});
});
</script>
I have not tested the above code, but it should work, as i use same codes for my ajax features.
Also check jquery docs for $.ajax http://api.jquery.com/jQuery.ajax/
$("#addProducts").click(function(event) {
var str = $("#addProducts").serialize();
event.preventDefault();
$.ajax({
type: "POST",
url: "subAddProduct.php",
data:str
});
});
Its not ajax issue, actually you are using $("#addProducts").submit that send a page submit request and cause page reload. Use click instead of submit.
The another mistake $("addProducts").serialize(), add # for id selector. Below is the sample code:
$("#addProducts").click(function(event) {
var str = $("#addProducts").serialize();
event.preventDefault();
$.ajax({
type: "POST",
url: "subAddProduct.php",
data:str
});
});
Missing the hashtag when you serialize... your code is having jQuery look for an element called "addProducts" not an element with an id of "addProducts" change this line
var str = $("addProducts").serialize();
to this line
var str = $("#addProducts").serialize();
<script>
$("#addProducts").submit(function(event) {
event.preventDefault();
var str = $("#addProducts").serialize();
event.preventDefault();
$.ajax({
type: "POST",
url: "subAddProduct.php",
data:str
})
});
return false;
</script>
You need to preventDefault, which stops the form being submitted normally, causing the page to reload. You then need to return false after because Firefox doesn't like preventDefault :P
Let's say .. I have the following script in my controller:
$result= array("Name"=>Charlie Sheen, "Age"=>30);
echo josn_encode($result);
And in my view file I have the following java script. Now could you please tell me what exactly to write in the success function of the script below in order to get the "Name" and "Age" displayed in two different divs inside body tag? I have found some tutorials on this but all those are very confusing to me. Could you please kindly help?
Thanks in Advance :)
<script type="text/javascript">
$(function(){ // added
$('a.read').click(function(){
var a_href = $(this).attr('href');
$.ajax({
type: "POST",
url: "<?php echo base_url(); ?>batch/get_info",
data: "id="+a_href,
success: function(server_response){
//What exactly to write here
}
}); //$.ajax ends here
return false
});//.click function ends here
}); // function ends here
</script>
Make sure you spell you json_encode function correctly.
Your html should look like this:
<head>
<script type="text/javascript">
$(function(){ // added
$('a.read').click(function(){
var a_href = $(this).attr('href');
$.ajax({
dataType : 'json', //You need to declare data type
type: "POST",
url: "<?php echo base_url(); ?>batch/get_info",
data: "id="+a_href,
success: function(server_response){
$( '#name' ).text( server_response.Name );
$( '#age' ).text( server_response.Age);
}
}); //$.ajax ends here
return false
});//.click function ends here
}); // function ends here
</script>
</head>
<body>
<div id='name'></div>
<div id='age'></div>
</body>
First of all, you should set the dataType. It should have the value 'json'. As for accessing it, you just access it as you would any other JavaScript object:
<script type="text/javascript">
$(function() {
$('a.read').click(function() {
var a_href = $(this).attr('href');
$.ajax({
type: "POST",
url: "<?php echo base_url(); ?>batch/get_info",
data: "id=" + a_href,
dataType: 'json',
success: function(result) {
alert(result.Name); // Charlie Sheen
}
});
return false;
});
});
</script>