Update div in html using Ajax function failed

Question

I'm trying to display the search result of my page under the the search area. So I used AJAX to display the result in a div. but I could'nt get it work.

I have three main pieces, the div, the searchResult page and the ajax function

<input type="text" name="studentName">
<button type="submit" name="searchByName" onclick='get_info();'>بحث</button>

  <div id="searchResult"><b></b></div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
function get_info() { // Call to ajax function


  $.ajax({
    type: "POST",
    url: "NameSearchResult.php", // Name of the php files
    data: {name: <?php echo $_POST['studentName']; ?>},
    success: function(html)
    {
        $("#searchResult").html(html);
    }
  });
 }

and my search Page:

<?php
include_once 'dbConfigBDO.php';

$studentName = $_POST["name"];
$counter=0;
$emptyString = "لايوجد";

$sql = "SELECT * FROM Student";
$result = $conn->query($sql);
$row_count = $result->rowCount();
if ($row_count > 0){
  ..........  }

Now when I search nothing appears, although it works when I put all the code in one page (which would be messy in term of the appearance of the result!).

Based on your code you want to update HTML after pressing button, right? So, where's your get_info() JS function? Also, if you are not redirected with POST on this page, you can't take $_POST['studentName'] because there's no request. You should take that field using $('#student-name').val() and set the id="student-name" to your input. — GasKa
– GasKa, Commented Jan 31, 2019 at 6:24

Prashant Patil · Accepted Answer · 2019-01-31 06:42:52Z

2

From function return the output as per below: return json_encode($result);

In ajax call use dataType:"json" and show your html

Example ajax call:

$.ajax({
type: "POST",

dataType:"json",

url: "NameSearchResult.php", // Name of the php files

data: {name: $("#studentName").val()},

success: function(html)

edited Jan 31, 2019 at 6:42

Prashant Patil

2,5732 gold badges19 silver badges37 bronze badges

answered Jan 31, 2019 at 6:39

Priyanka Khade

4504 silver badges18 bronze badges

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

1 Comment

Sosy Over a year ago

it gives an error message: json_encode is not defined.

Nguyên Ngô Duy · Accepted Answer · 2019-01-31 06:23:37Z

1

change code like this

<input type="text" name="studentName" id="studentName">
<button type="submit" name="searchByName" onclick='get_info();'>بحث</button>

  <div id="searchResult"><b></b></div>
<script>
  $.ajax({
    type: "POST",
    url: "NameSearchResult.php", // Name of the php files
    data: {name: $("#studentName").val()},
    success: function(html)
    {
        $("#searchResult").html(html);
    }
  });
 }
</script>

answered Jan 31, 2019 at 6:23

Nguyên Ngô Duy

3481 silver badge7 bronze badges

1 Comment

Sosy Over a year ago

I did add the id part and changed AJAX data but nothing happened.

sabbir chowdury · Accepted Answer · 2019-01-31 06:30:28Z

0

inside ajax success method try catch what you are getting

success: function(html)
{
   console.log(html);

}

if you getting something then your code must be work.

answered Jan 31, 2019 at 6:30

sabbir chowdury

1586 bronze badges

6 Comments

sabbir chowdury Over a year ago

see in your browser console. What you getting in your ajax response it will show there .

Priyanka Khade Over a year ago

From function return the output as per below: return json_encode($result); $.ajax({ type: "POST", url: "NameSearchResult.php", // Name of the php files data: {name: $("#studentName").val()}, success: function(html)

Sosy Over a year ago

something comes very quickly then disappear.

sabbir chowdury Over a year ago

can you provide the code what are you trying to return .

Sosy Over a year ago

success: function(html) { console.log(html); }

|

Collectives™ on Stack Overflow

Update div in html using Ajax function failed

3 Answers 3

1 Comment

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related