JQuery with AJAX can't get content from php page

Question

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?

Gurminder Singh · Accepted Answer · 2013-10-03 08:18:31Z

1

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>

edited Oct 3, 2013 at 8:18

answered Oct 3, 2013 at 8:09

Gurminder Singh

1,75516 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

iJade · Accepted Answer · 2013-10-03 08:10:24Z

0

Try changing

success: function (data) {$("#newhtml").val(data);}

to

success: function (data) {$("#newhtml").html(data);}

answered Oct 3, 2013 at 8:10

iJade

23.9k58 gold badges163 silver badges251 bronze badges

Comments

Chaitanya Moganti · Accepted Answer · 2013-10-03 08:11:27Z

0

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()

answered Oct 3, 2013 at 8:11

Chaitanya Moganti

113 bronze badges

Comments

Lionel · Accepted Answer · 2013-10-03 08:13:16Z

0

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);

answered Oct 3, 2013 at 8:13

Lionel

2,0293 gold badges19 silver badges27 bronze badges

Collectives™ on Stack Overflow

JQuery with AJAX can't get content from php page

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related