I have a click event under document.ready function like this
<script type= "text/javascript">
$(document).ready(function(){
var roll;
var course_code;
$('#table').on('click', 'button', function(){
var obj = JSON.parse($(this).val());
course_code = obj.course_code;
roll = obj.roll;
$.ajax({
type : "POST",
dataType: "html",
url : "./card.php",
data : {"course_code":course_code,"roll":roll},
success : function(returndata){
$("#modal-body").html(returndata);
}
});
$("#myModal").modal('show');
});
});
</script>
card.php code
<?hph
echo '<pre>';
echo htmlspecialchars(var_dump($_POST));
echo '</pre>';
?>
the output from the card.php is
C:\wamp\www\card.php:3:
array (size=0)
empty
Why i am not been able to send the data to card.php
what is the correct solution
If your version of JQuery is more than 1.9.0 you need to replace TYPE to METHOD in your Ajax request.
Related
As i'm building an website that needs Ajax for sending POST methods without refreshing the entire page.
I tried using ajax to send data from an onclick event on an LINK-tag, but the ajax code does seem to send an EMPTY post.
This is the php/jquery/ajax code:
<p id="school_content">
</p>
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".toggleThis").click(function(){
var Id = $(this).attr('id');
$.ajax({
contentType: "application/json; charset=utf-8",
url: "id_script.php",
type: "POST",
data: {
'school_name': Id,
},
success: function(data){
alert(Id);
},
});
$("#school_content").load("id_script.php");
});
});
</script>
The LINK-tag has the 'id' of the school of wich the information needs to be shown in the PARAGRAPH with 'id' "school_content" by this jquery part: $("#school_content").load("id_script.php"); .
The var Id = $(this).attr('id'); part works, because he's giving me the right school_name in an alert(); if I ask it to.
The id_script.php needs to get this POST in the usual way, but is does not..
The id_script.php code:
<?php
include('connect.php');
header('Content-Type: application/json');
if(isset($_POST['school_name'])){
$Id = $_POST['school_name'];
$extract = mysqli_query($con, "SELECT * FROM school_kaart WHERE school_name='$Id'");
$numro=mysqli_num_rows($extract);
if(mysqli_num_rows($extract) == '1'){
$row = mysqli_fetch_assoc($extract);
echo 'Yes it works!';
}
else{
echo 'Nope, didnt work!';
}
}
else{
echo 'Not posted!';
}
?>
I'm still getting "Not posted!" in the PARAGRAPH I mentioned earlier. What seems to be the problem?
.load is shorthand for an ajax request so you are actually doing 2 request.
The latter isn't sending any data and so it returns 'Not Posted!';
http://api.jquery.com/load/
try
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".toggleThis").click(function(){
var Id = $(this).attr('id');
$.ajax({
url: "id_script.php",
type: "POST",
data: {
'school_name': Id,
},
success: function(data){
alert(Id);
$("#school_content").html(data);
},
});
//remove this
//$("#school_content").load("id_script.php");
});
});
</script>
When I perform a simple ajax request I get the following error
TypeError: 'toString' called on an object that does not implement interface HTMLAnchorElement.
This is my ajax script
<script type="text/javascript">
$(document).on("ready", function(){
$("#tabla_persona table tr").click(function() {
var cod = $( "#identificador",this);
alert(cod.html());
var parametros={
"cod":cod
};
$.ajax({
type: 'POST',
url: '<?php echo site_url("archivo/prueba"); ?>',
data: parametros,
success: function(resp) {
$("#tabla_usuario_individual").html(resp);
}
});
});
});
</script>
This is my controller
public function prueba(){
$this->load->view('datos_persona');
}
and my simple page to see the result
<a>
Prueba
</a>
Try changing:
var parametros={
"cod":cod
};
to:
var parametros={
"cod":cod.html()
};
Just need simple change.I think the following code will work.
public function prueba(){
echo $this->load->view('datos_persona',true);
}
this is my first time writing an ajax below is my structure
submitted.php
<?php $a = $_POST['a']; // an input submitted from index.php ?>
<button>bind to jquery ajax</button> // call ajax
<span></span> // return ajax result here
<script>
$('button').on('click', function() {
event.preventDefault();
$.ajax({
method: "POST",
url: "test.php",
data: { "key" : 'data'}
})
.done(function( msg ) {
$('span').html(msg);
});
});
</script>
test.php
<?php echo $a; // will this work? ?>
ajax return blank... no error, my error_reporting is on.
No, there are a few things wrong with this:
You are posting a key - value pair where the key is key, so you would need $_POST['key'] in your php script;
You should use .preventDefault() if you need to prevent an event like a form submit that is caused by your button. If that is the case, you need to get the event variable from your event handler: $('button').on('click', function(event) {.If there is no event to prevent, you can simply remove that line;
If you do have a form (it seems so from your comment), you can easily send all key - value pairs using: data: $('form').serialize().
form.php
<button>bind to jquery ajax</button> <!-- ajax trigger -->
<span></span> <!-- return ajax result here -->
<script>
// NOTE: added event into function argument
$('button').on('click', function(event) {
event.preventDefault();
$.ajax({
method: "POST",
url: "test.php",
data: { "key" : 'data'}
})
.done(function(msg) {
$('span').html(msg);
});
});
</script>
process.php
<?php
echo (isset($_POST['key'])) ? $_POST['key'] : 'No data provided.';
?>
This is the way to do it:
ubmitted.php
<button>bind to jquery ajax</button> // call ajax
<span></span> // return ajax result here
<script>
$('button').on('click', function() {
// no need to prevent default here (there's no default)
$.ajax({
method: "POST",
url: "test.php",
data: { "key" : 'data'}
})
.done(function( msg ) {
$('span').html(msg);
});
});
</script>
test.php
<?php
if (isset($_POST['key'])
echo $_POST['key'];
else echo 'no data was sent.';
?>
I'm using jQuery autocomplete and want to retrieve data from php file called some.php, in which is only written
<?php
echo "Hello World";
?>
and here is javascript
<script type="text/javascript">
$(function(){
$("#key").autocomplete({
source: function(){
$.ajax({
type: "POST",
url: "./some.php",
data: {key: $("#key").val()},
success: function(result){
// what code is needed here to be placed
}
});
}
});
});
</script>
and html by the way =>
<input type="text" name="key" id="key">
I think script is written correctly , because when I'm writing in success function alert(result) it gets "Hello world", but I want it to be in drop down box , how can fix this problem , please help me , thanks :)
$("#key").autocomplete({
source: function(request, response){
$.ajax({
type: "POST",
url: "./some.php",
data: {key: request.term},
success: function(result){
response(result);
}
});
}
});
response(result) will display the autocomplete menu -- result should be an array of items (where each item is a string or an object with value or label keys).
As SJ GJ mentioned, you can simply set source: "./some.php" but then some.php needs to be modified to accept the request parameter term and return a json array of items.
try this:
JS:
<script type="text/javascript">
$(function(){
$("#key").autocomplete({
source: "./some.php"
});
});
</script>
PHP:
$result = array('1' => 'Hello World');
echo json_encode($result);
main.php:
<SCRIPT type="text/javascript">
$("#btnSubmit").click(function () {
alert("What will i put here!");
});
</SCRIPT>
<input type = "submit" id = "btnSubmit" value = "Try IT!" />
<div id = "show_search2">
</div>
output.php:
<?php $val = $_POST['btnSubmit'];
echo "<H1>$val</H1>"; ?>
What specific jQuery functionality can get the value of the btnSubmit and access it through $_POST and output it to the div show_search2? I used prototype.js but it provides conflict with my other JS scripts in the index.
Note: all my script source is included in index and that's why I didn't include the source in this post.
Do you mean something like this:
$("#btnSubmit").click(function (e) {
e.preventDefault();
var submitVal = $(this).val();
$.ajax({
type: "POST",
url: "url_of_your_output.php",
data: {btnSubmit : submitVal},
success: function(response) {
$("#show_search2").html(response); //response from output.php
}
});
});