Reputation: 1744
JQuery with AJAX can't get content from php page
I try press the submit button, nothing change. Not sure why
Heres my 2 pages
Jquery.php
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$("#input").click(function(){
$.ajax({
url: 'jquery2.php?keyword='+$("#fname").val(),
type: 'GET',
success: function (data) {$("#newhtml").val(data);}
});
})
});
</script>
</head>
<body>
First name: <input type="text" id="fname" name="fname"><br>
<input type="button" id="input" value="Search Data">
<div id="newhtml"></div>
</body>
</html>
Jquery2.php
<?php
$advert = array(
'ajax' => 'Hello world!',
'advert' => $row['adverts'],
);
echo json_encode($advert);
?>
Is there anythign wrong with my code?
Upvotes: 0
Views: 1861
Reputation: 1755
This
$("#newhtml").val(data);
should be
$("#newhtml").html(data);
// OR
$("#newhtml").append(data);
You might also have to add
dataType: "json",
contentType: "application/json"
properties to your ajax method before success callback.
UPDATE
Overall, your code in your head tag should be like this
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#input").click(function(){
$.ajax({
url: 'jquery2.php?keyword='+$("#fname").val(),
type: 'GET',
dataType: "json",
contentType: "application/json",
success: function (data) {
$("#newhtml").html(data);
}
});
});
});
</script>
</head>
Upvotes: 1
Reputation: 2029
Jquery2.php throws an error: "Notice: Undefined variable: row in [...]/Jquery2.php on line 4"
$row['adverts'] is not defined.
Also, change following:
$("#newhtml").val(data);
to
$("#newhtml").html(data);
Upvotes: 0
Reputation: 11
Do not use multiple jquery sources. Use only one among those two you referenced.
For non INPUT tags u have to use .html() or .text()
Upvotes: 0
Reputation: 23791
Try changing
success: function (data) {$("#newhtml").val(data);}
to
success: function (data) {$("#newhtml").html(data);}
Upvotes: 0