AJAX: Post value, make a consult using this value and return a Json array

Question

Can someone tell me why this code don't work? I am trying post a value from form in a php file that make a select in my DB using this value. Return a Json array to ajax and print all results.

SELECT query:

...

$sql= "SELECT * FROM incidente WHERE (titulo LIKE '%':buscar'%'   OR 
descricao LIKE '%':buscar'%')";

...

 $recebeConexao->bindParam(':buscar', $_POST['busca'], 
 PDO::PARAM_STR); 

HTML code:

 //here I am creating a form whit text input and a button that call 
 the function enviar()

<form id="buscar">
            <input id="busca" name="busca" type="text"   
              placeholder="Buscar incidente" />
            <input onclick="enviar()"  type="button" value="ok" />
</form>

//creating a array that will receive values from SQL consult

 <div id="content" class="content">   
   <article class="underline">\
        <a href="incidente.html"><img id="incidente"\ 
        src="img/buraco.jpg" alt="Incidente" /></a>\
        <h2><a href="basic_markup.html" id="tit">'+tit+'</a></h2>\
        <p id="desc">'+desc+'</p>\
        <div class="date" id="date">'+dateVal+'</div>\
        <img class="tick" alt="não resolvido" src="img/no-tick.png">\
        <img class="apoio" alt="apoiar" src="img/apoio.png">\
        </article>'
 </div>

Function enviar():

<script>
function enviar(){
    function viewData(data, el) {

var content='';
for (var i in data) {

var tit    =data[i].titulo;
var desc   =data[i].descricao;
var dateVal=data[i].data;

content+= '<article class="underline">\
        <a href="incidente.html"><img id="incidente"\ 
        src="img/buraco.jpg" alt="Incidente" /></a>\
        <h2><a href="basic_markup.html" id="tit">'+tit+'</a></h2>\
        <p id="desc">'+desc+'</p>\
        <div class="date" id="date">'+dateVal+'</div>\
        <img class="tick" alt="não resolvido" src="img/no-tick.png">\
        <img class="apoio" alt="apoiar" src="img/apoio.png">\
       </article>';
}
$('#'+el).html(content);
}

$(function(){

  $.ajax({
             var formula = $('#buscar').serialize();

             type: "POST",
             data:formula,
             url: "http:/ip/connect/www/buscar.php",
             dataType: "json",

            success: function (data) {
                   viewData(data,'content');
               }
         });
    });
 }
</script>

I am receiving the error: enviar is not defined...

Answer 1

First, the variable content is not properly formatted, where you do the concatenation. Second, it looks like you also have mismatched braces. Third, $.ajax() should take key/value pairs to set up the AJAX request you are trying to make, but you have a variable declaration. You should recheck your whole code.