How to pass parameter to modal, query Mysql and return in html

Question

I’m trying to pass a variable to a modal, perform a query to give a feedback on html, because the data will be formatted in a table. I tried some suggestions as alternatives, but I’m having difficulty to make the thing work, I have this line that invokes the modal:

<a href="#ModalDetalhes" data-toggle="modal" id="<?php echo $Eventos->IdEvento; ?>" data-target="#edit-modal"><?php echo $Eventos->Data; ?></a>

The script that will send the variable is like this:

$('#edit-modal').on('show.bs.modal', function(e) {

  var $modal = $(this),

    IdEvento = e.relatedTarget.id;

    console.log("EVENTO: " + IdEvento);

  $.ajax({
    cache: false,
    type: 'POST',
    url: 'pDetalhesEventos.php',
    data: 'IdEvento=' + IdEvento,
    dataType: 'html',
    success: function(data) {
      $modal.find('.edit-content').html();
    }
  });
})

php is thus configured:

require_once "../_classes/conexao_pdo.class.php";
require_once "../_classes/crud.class.php";

// Atribui uma conexão PDO   
$pdo = Conexao::getInstance();
// Atribui uma instância da classe Crud, passando como parâmetro a conexão PDO e o nome da tabela  
$crud = Crud::getInstance($pdo, 'cadEventos');

// DADOS DO FORMULÁRIO
$IdEvento = (isset($_GET['IdEvento'])) ? $_GET['IdEvento'] : '';

// INICIALIZANDO O ARRAY
$arrayParam = array(); 

// BUSCA COM FILTRO 
$sql = "SELECT *, DATE_FORMAT(Data, '%d/%m/%Y') as Data FROM cadEventos WHERE IdEvento = ?";             
$arrayParam  = array($IdEvento);
$Resultado  = $crud->getSQLGeneric($sql, $arrayParam, TRUE); 
$retorno = count($Resultado);

What I tried was to do this, by passing the variable through url recovering by get and post:

url: "cliente.php?id=123",

The modal is like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<a href="#edit-modal" data-toggle="modal" id="<?php echo $Eventos->IdEvento; ?>" data-target="#edit-modal">#Modal</a>

<div id="edit-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Detalhes do Evento</h4>
      </div>
      <div class="modal-body edit-content">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
      </div>
    </div>
  </div>
</div>

The variable is correct because I can see it on the console.

Screenshots of the FF console:

Answer 1

In this line within the Success function you are using . html() without passing any arguments to the . html function().

$modal.find('.edit-content').html();