Dynamic data display with PHP

Asked

Viewed 1,985 times

2

I am developing a website, in which I have several products, for example and a button for each of them.

When I click the button, it opens a modal (Bootstrap).

But, I want to generate the content of this modal, or the whole modal even dynamically with a Function in PHP

For example, a product with the data

Nome: Carro,
Valor: 3,000.

Then I send the information to the function:

gerarmodal($nome, $valor);

And she returns to me the modal, or her content, with the values of the variables in their proper places.

"You are buying a Car, for the amount of 3,000 reais."

I know it is necessary to use javascript together with php, to request the data without refresh. I’ve tried but I can’t come up with a logic to make it work.

How could I do that and display the modal on my page?

php javascript html

  • Hello, welcome to Stackoverflow! I don’t think you can do this using PHP, since it runs inside the server. Only if you call a page. php inside the modal with iframe, or call inside a div superimposed on the rest of the page (modal) or something similar. But I believe it is easier to be solved using Ajax requests.

  • 1

    Yes. I forgot to mention that javascript would be needed, along with PHP. ?

  • Search on AJAX, then put a System in the boot that runs AJAX and put the data in the modal.

  • Take a look here: http://answall.com/q/6626/129

2 answers

1


It’s quite simple to actually work with the combination of html,ajax and php to make requests, see the example below:

1 thing to do is to put a field inside the modal where you will receive this information, in my case I used a div called content:

 <div id="conteudo"></div>

2 you already have a button that when you click opens the modal, so in addition to opening the modal you should call an ajax that will send information to php, I created a function that searches cars stating the minimum and maximum value of each one:


 $("#botao").click(function(){ // no click do botao que abre a modal faça
            buscaCarro(3000,15000);
     });

function buscaCarro(min, max) {
   $.ajax({
      type: "POST",
      url: 'arquivo.php',
      dataType: 'json',
      data: 'acao=carro' + '&min=' + min + '&max=' + max,
      success: function (data) {
         console.log(data);
         // resposta do php
        $("#conteudo").append(data); // colocando o conteudo na modal
 // dependendo do conteudo pode ser html(),text()...

      },
      error: function (data) {
         alert(data.responseText);
      }
   });
}

Ajax accesses the php file and makes the following action:


 if($_REQUEST['acao'] === "carro"):
      $output = buscaCarro($_REQUEST['min'],$_REQUEST['max']);
 endif;

 echo json_encode($output);

This is a basic example, I advise you to take a basic workbook: Handouts - Ajax Php

  • Thank you very much! I already know what I needed. What I was really running away from was logic. I managed to make it work here Õ/

0

Buddy, come on, I think the way is this:

A PHP file that will return the information of a product, where, such a file will receive the product ID, for example.

A little Javascript (and jQuery) that will make the request in the PHP file and, after receiving the data, will include such values in the modal.

Come on:

php query.

$id = $_POST['id'];

// faça sua query aqui e adicione em $dadosRetornados

echo json_encode($dadosRetornados);

functions js.

Now you must make a function that receives the product ID and use it in the request that will make the query. Something like this: (idProduct will be the parameterized value)

$.ajax({
    type: "POST",
    url: "consulta.php",
    data: { id: idProduto },
    success: function (resposta) {
        var dados = JSON.parse(resposta);
        $('#conteudoModal').html('Produto: ' + dados.nome + 'Valor: ' + dados.valor);
}

});

I believe this is the solution you are looking for, just change your HTML and add the function that will make the modal call.

Browser other questions tagged php javascript html

You are not signed in. Login or sign up in order to post.