Passar variável PHP para Javascript

[renan.miranda 0]

Eu sei que muitos vão pedir pra pesquisar melhor a respeito, pois existem vários tópicos criados com esse intuito, mas lhes afirmo, que o que minha humilde sapiência pode alcançar, não obtive êxito na busca... portanto... lá vai.

 

Eu tenho dois arquivos, um PHP e outro JAVASCRIPT.

 

O PHP é responsável por fazer a consulta na base de dados, pegar valores e etc, e também por carregar o Javascript para que dentro de uma DIV ele possa me buscar as informações contidas no JAVA.

 

Abaixo uma pequena amostra da parte principal do PHP, onde ele já realiza perfeitamente um foreach nas informações salvando na variável $autor a informação que eu desejo, ou seja, se eu der um ECHO no $Autor dentro da DIV, ele me mostra,

 <?php
   $autor = $d['nm_autor'];
 ?>
                        
 <div id="social"></div> 

Agora abaixo, o JAVASCRIPT responsável por me mostrar o conteúdo que desejo dentro da DIV:

window.onload = function (){
    var autor = '$autor';
    
    var a, i, r = '\
    <div style="padding: 5px 0; border-top: 1px solid #E3E3E3; border-bottom: 1px solid #E3E3E3; margin: 20px 0; color:#999">\n\
    Por: '+autor+' - <?php echo $dia; ?> - <?php echo $hora; ?> <div style="float: right; margin-right: -20px"><a href="http://www.prodap.ap.gov.br/padrao/template/imprimir.php?id=<?php echo $id; ?>&site=<?php echo $site; ?>" target="_blank"><button class="btn btn-default btn-xs" style="float: left; margin-right: 10px"><i class="fa fa-print"></i> Imprimir</button></a> <div class="fb-share-button" style="float: left; padding-right: 20px" data-href="<?php echo $url ?>" data-layout="button_count"></div> <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a> <div class="g-plusone" data-size="medium"></div></div>\n\
    </div>\n\
        ';
    a = document.getElementById("social"), a && (a.removeAttribute("style"),
            a.innerHTML = r, i = document.getElementsByTagName("head")[0]),
            window._barrabrasil = {insere_css: function (a) {
                    var r, e, t;
                    return e = document.createElement("style"), t = document.createAttribute("type"),
                            t.value = "text/css", r = document.createAttribute("media"), r.value = "all", e.setAttributeNode(t), e.setAttributeNode(r), e.styleSheet ? e.styleSheet.cssText = a : e.appendChild(document.createTextNode(a)), i.appendChild(e);
                }};
}(), window._barrabrasil.insere_css('\
            \n\
'), !function () {
};

Mas ele não me mostra o Autor, ou seja, ele não informa.

O que pode ser? Existe alguma forma de passar dentro do campo da DIV já a variável?

[angelorubin 142]

Olá,

Eu desaconselho você a escrever o código desta forma:

var a, i, r = '\
    <div style="padding: 5px 0; border-top: 1px solid #E3E3E3; border-bottom: 1px solid #E3E3E3; margin: 20px 0; color:#999">\n\
    Por: '+autor+' - <?php echo $dia; ?> - <?php echo $hora; ?> <div style="float: right; margin-right: -20px"><a href="http://www.prodap.ap.gov.br/padrao/template/imprimir.php?id=<?php echo $id; ?>&site=<?php echo $site; ?>" target="_blank"><button class="btn btn-default btn-xs" style="float: left; margin-right: 10px"><i class="fa fa-print"></i> Imprimir</button></a> <div class="fb-share-button" style="float: left; padding-right: 20px" data-href="<?php echo $url ?>" data-layout="button_count"></div> <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a> <div class="g-plusone" data-size="medium"></div></div>\n\
    </div>\n\
        ';

Só lhe trará dor de cabeça no futuro e até no presente, prefira separar cada coisa (html, js, css).

 

Para enviar as informações do js para o php você deve utilizar ajax.

 

Temos duas opções:

• Com JS puro (Vanilla)
• Com Uma biblioteca JS

Aconselho aprender com JS puro se tiver tempo, porém com uma biblioteca você terá tudo abstraído e facilitado, como por exemplo com jquery ajax, o que lhe poupará tempo (ou talvez não).

 

No caminho inverso, ou seja, retornar do php para o js, você pode utilizar a função do php (json_encode) para transformar seus dados em json e enviar a resposta para ser capturada no callback do jquery ajax.

 

Aqui tem um exemplo de requisição assíncrona - http://viniciuswebdev.com/fazendo-uma-requisicao-ajax-com-jquery

 

Espero que ajude.