I am calling a controller (Codeigniter) through jQuery. My dataString variable contains a simple string, which I'm trying to pass through to my controller, so I can pass it into the model. However, I'm getting an error that indicates that my $test_var is undefined. What am I doing wrong?
$('a.test').click(function (event) {
dataString = $(this).attr('name');
$.ajax({
type:"POST",
url:"<?php echo base_url(); ?>controller_name/",
data:dataString,
success:function (data) {
alert('test');
}
});
event.preventDefault();
});
controller
$test_var= $this->input->post('dataString');
Try using a name=value pair:
$('a.test').click(function (event) {
dataString = $(this).attr('name');
$.ajax({
type:"POST",
url:"<?php echo base_url(); ?>controller_name/",
data:'dataString='+dataString,
success:function (data) {
alert('test');
}
});
event.preventDefault();
});
you could also do something like this, which is an alternative syntax
$('a.test').click(function (event) {
dataString = $(this).attr('name');
$.ajax({
type:"POST",
url:"<?php echo base_url(); ?>controller_name/",
data:{'dataString':dataString},
success:function (data) {
alert('test');
}
});
event.preventDefault();
});
in your controller $test_var= $this->input->post('dataString');
or just like in vanilla php
$test_var = $_POST['dataString'];
use data option like this
data: { name: "John", location: "Boston" }
for more details plz check http://api.jquery.com/jQuery.ajax/
Related
I want to pass id with ajax to a php file. I tried a lot but couldnot succed. I want to return to the page with id. Please help me.
I tried like this.
<script>
jQuery.ajax({
var registration_date=$("#registration_date").val()
var building_length_ft=$("#building_length_ft").val();
var building_length_in=$("#building_length_in").val();
var building_breadth_ft=$("#building_breadth_ft").val();
var reg_id=$_GET['id'].val();
var dataString = $('#a').serialize();
$.ajax({
url:'registration_detail.php',
method:'POST',
data: dataString,
success:function(data){
alert(data);
}
});
});
</script>
I tried below code as well.
var reg_id=$_GET['id'].val();
$.ajax({
url:'registration_detail.php',
method:'POST',
data:{
'reg_id=' + reg_id,
},
success:function(data){
alert(data);
}
});
I tried below code as well.
var id = $('#id').val();
$.ajax({
url:'registration_detail.php',
method:'POST',
data: { id: id},
success: function(response) {
$('#result').html(response);
}
});
You should fix your code:
<script>
jQuery.ajax({
var registration_date=$("#registration_date").val()
var building_length_ft=$("#building_length_ft").val();
var building_length_in=$("#building_length_in").val();
var building_breadth_ft=$("#building_breadth_ft").val();
// There is a PHP script here:
var reg_id=<?= $_GET['id'] ?>;
var dataString = $('#a').serialize();
$.ajax({
url:'registration_detail.php',
method:'POST',
data: dataString,
success:function(data){
alert(data);
}
});
});
</script>
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.
I am looking to pass the value of cityField in ajax to $_POST['cityField']. Everything looks in order but the variable is not passing to php on nextpage.php
<script type="text/javascript">
$('#city').blur(function() {
var cityField=$('#city').val();
$.ajax({
type:"post",
url:"nextpage.php",
data:{'cityField':cityField },
dataType:"html",
success:function(data) {
alert("You typed:"+cityField);
}
});
});
</script>
Do not use 'cityField' as object. Because data contains paramaters in the format data{ object: value}.
Use this:
<script type="text/javascript">
$('#city').blur(function() {
var cityField=$('#city').val();
$.ajax({
type:"post",
url:"nextpage.php",
data:{myobj:cityField },
dataType:"html",
success:function(data) {
alert("You typed:"+cityField);
});
</script>
and then retrieve myobj in server side.
In your success function you'll get the data send by nextpage.php in the var named data. You are alerting the cityfield variable.
So change your success function to resemble something like this:
....
success: function (data) {
console.log('This is the answer of nextpage.php : '+ data;
}
...
Besides that, maybe it's a good idea to strip the data to an object outside of your $.ajax call:
var myPostData = {};
myPostData.cityField = $('#city').val();
....
data: myPostData,
....
it's simple.change to :
...
data:$('#city').serialize()
...
or use this fully :
<script type="text/javascript">
$('#city').blur(function() {
var $this=this;
$.ajax({
type:"post",
url:"nextpage.php",
data:$($this).serialize(),
dataType:"html",
success:function(data) {
alert("You typed:"+cityField);
}
});
});
</script>
for more see this : http://api.jquery.com/serialize/
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
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);
}
});
});
});