0

I'm trying to post a search query to a local server and return the results into a div using Ajax. I'm following the formula from the documentation but cannot get an output. Also not getting any console log errors. The source code is from: Post a form using ajax and put results in a div

<form action="/" id="searchForm">
   <input type="text" name="s" placeholder="Search...">
   <input type="submit" value="Search">
</form>
  <!-- the result of the search will be rendered inside this div -->
<div id="result"></div>
<p id="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<script>
$(document).ready(function () {

$("#searchForm").submit(function(event) {

  // Stop form from submitting normally
  event.preventDefault();

  // Get some values from elements on the page:
  var $form = $(this),
    term = $form.find( "input[name='s']").val(),
    url = $form.attr("action");

  // Send the data using post
  var posting = $.post( url, {s: term});

  // Put the results in a div
  posting.done(function(data) {
    var content = $(data).find("#content");
    $("#result").empty().append(content);
  });
 });
});  
</script>
Almac
  • 217
  • 6
  • 16
  • possible duplicate of [Submitting HTML form using Jquery AJAX](http://stackoverflow.com/questions/16323360/submitting-html-form-using-jquery-ajax) – abc123 Jun 04 '15 at 03:37
  • I'm assuming the version you're trying to run contains the full example code from the site which has the head elements which loads jQuery from CDN? – s3-4v Jun 04 '15 at 03:41

2 Answers2

0

Code Specifically for you Plunker

JS

// Code goes here
$(document).ready(function() {
  $("#searchForm").submit(function(event) {
    // Stop form from submitting normally
    event.preventDefault();

    // Get some values from elements on the page:
    var $form = $(this),
      term = $form.find("input[name='s']").val(),
      url = $form.attr("action");

    // Send the data using post

    var posting = $.post(
      url, {
        s: term
      },
      myPostWasSuccessful,
      'html'
    );
  });
});

function myPostWasSuccessful(data, textStatus, jqXHR) {
  $("#result").html(data);
}

HTML

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <form action="/" id="searchForm">
    <input type="text" name="s" placeholder="Search...">
    <input type="submit" value="Search">
  </form>
  <!-- the result of the search will be rendered inside this div -->
  <div id="result"></div>
  <p id="content">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  </p>
</body>

</html>

jQuery Post Documentation

We are using the dataType and success arguments to the $.post function.

success

Type: Function( Object data, String textStatus, jqXHR jqXHR )

A callback function that is executed if the request succeeds. Required if dataType is provided, but can be null in that case.

dataType

Type: String

The type of data expected from the server. Default: Intelligent Guess (xml, json, script, text, html).

abc123
  • 16,261
  • 6
  • 46
  • 76
  • I have a chunk of text in another php file. I'm trying query that text and return it into the html. The text is in a p tag like my code above. Can I do this or does my text have to be in XML/Json format? – Almac Jun 04 '15 at 03:56
0

You can use the html() method, i.e.:

var content = data;
console.log(data);
$("#result").html(content);
XtraSimplicity
  • 4,556
  • 1
  • 23
  • 26
DINO U
  • 96
  • 1
  • 6