I'm trying change data after click on a div, but it's not changing de results
JS code
$(document).ready(function() {
$('#piso .caixa').click(function() {
var valorpiso = $(this).text();
alert(valorpiso);
$.ajax({
type:"post",
url:"getpiso.php",
data:"npiso="+valorpiso,
sucess:function(data){
$("#caixas").html(data);
}
});
});
});
the alert is printing the right value
PHP code
$piso1=$_POST["npiso"];
$result=mysql_query("select * FROM rooms where floor='$piso1' ");
while($dados=mysql_fetch_array($result)){
echo "<div id='caixa'>";
echo "<p>$dados[block].$dados[floor].$dados[room]</p>";
echo "</div>";
}
Can you help me?
Is this your actual code? There's a mispelling in the callback function: It should be "success", instead of "sucess".
success:function(data){
$("#caixas").html(data);
}
If that doesn´t work, try to get more information on what's happening. Use some kind of Dev Tool to watch the ajax response. (CTRL+SHIFT+I on Chrome)
OBS: Your PHP code is vulnerable to SQL Injections. Read more about it here: How can I prevent SQL injection in PHP?
Have 2 problems
1) @Rogerio said is right, you used "sucess":
when the correct way is "success":
But now with jquery you can use the following methods:
jqXHR.done(function( data, textStatus, jqXHR ) {});
An alternative construct to the success callback option, the .done()
method replaces the deprecated jqXHR.success()
method. Refer to deferred.done()
for implementation details.
jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {});
An alternative construct to the error callback option, the .fail()
method replaces the deprecated .error()
method. Refer to deferred.fail()
for implementation details.
jqXHR.always(function( data|jqXHR, textStatus, jqXHR|errorThrown ) { });
An alternative construct to the complete callback option, the .always()
method replaces the deprecated .complete()
method.
In response to a successful request, the function's arguments are the same as those of .done()
: data, textStatus, and the jqXHR object. For failed requests the arguments are the same as those of .fail()
: the jqXHR object, textStatus, and errorThrown. Refer to deferred.always()
for implementation details.
jqXHR.then(function( data, textStatus, jqXHR ) {}, function( jqXHR, textStatus, errorThrown ) {});
Incorporates the functionality of the .done()
and .fail()
methods, allowing (as of jQuery 1.8) the underlying Promise to be manipulated. Refer to deferred.then()
for implementation details.
Read about in: http://api.jquery.com/jquery.ajax/
A type, you using "npiso="+valorpiso
, but this not encoding, prefer use json, like this: { npiso: valorpiso }
(Jquery auto encoding data)
2) Don't use repeated IDs in HTML, this repeate ID by results number:
while($dados=mysql_fetch_array($result)){
echo "<div id='caixa'>";
Use class=
instead of id=
First, update Jquery to last version
Javascript:
$.ajax({
"type": "POST",
"url": "getpiso.php",
"data": { "npiso": valorpiso }
}).done(function(data) {
console.log(data);
$(".list_caixa").html(data);
}).fail(function(err) {
console.log("Failed", err);
}).always(function() {
console.log("complete");
});
"HTML":
$piso1=$_POST["npiso"];
$result=mysql_query("select * FROM rooms where floor='$piso1' ");
while($dados=mysql_fetch_array($result)){
echo "<div class='list_caixa'>";
echo "<p>$dados[block].$dados[floor].$dados[room]</p>";
echo "</div>";
}
index.php
`
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function () {
$('#piso .caixa').click(function () {
var valorpiso = $(this).text();
$.ajax({
type: "post",
url: "getpiso.php",
data: "npiso=" + valorpiso,
success: function (data) {
$("#caixas").html(data);
}
});
});
});
</script>
</head>
<body>
<div id="piso">
<p class="caixa" style="cursor:pointer;color:red;background-color:#000;padding:10px;">TEST</p>
</div>
<div id="caixas">
</div>
</body>
`
getpiso.php
<?php
if($_POST["npiso"]!=null){
$piso1=$_POST["npiso"];
echo "<div id='caixa'>";
echo "<p>".$piso1." RESULT</p>";
echo "</div>";
}
?>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.