Communication between javascript and PHP

Question

Hello, I’m a beginner in php and javascript and I’m having trouble creating iterative tables.
In my case, I have an initial table:

When selecting the line that I want to check in more detail the accidents (in this case the option is São Paulo), a new table is opened in a dialog box:

So far so good, I’ve been able to identify which line I’m clicking but I can’t pass this information to php code, because it would have to access the database and bring the information concerning the selected city.

Any hint?

<script>
	$(document).ready(function(){
    $("tr[rel=modal]").click( function(ev){
    // Efeitos de transição para aparecer a janela semelhante um alerta
      ev.preventDefault();
		
		var cidade = $(this).attr("id"); //Essa variavel carrega a informação da linha selecionada
      }
                             </script>

<tr href="#janela1" rel="modal" class="read checked" id="<?=$linha['cidade']?>">
									<a id="<?=$linha['cidade']?>"></a>
							  
									
								<td><?=$linha['cidade']?></td>
								<td><?=$linha['acidentes']?></td>
								<td><?=$linha['fatais']?></td>
								<td><?=$linha['ano']?></td>
								<td><?=$linha['meta']?></td>
								<td><?=$linha['farol']?></td>
  
  							  </tr>

I edited the question because I believe it makes it easier to understand my doubt.

I tried here in a similar way, but you need to give F5 so that the selected option is enabled, if not F5, stays in the selected option before refreshing the page. $(Document). ready(Function(){

$("tr[rel=modal]"). click( Function(Ev), Ev.preventDefault();

var indicator = $(this). attr("id"); $("#window12"). load('valida2.php', {acc:indicator}); in valida2.php put $_SESSION[indicator]=$_POST['acc'];

Got any more tips? I’m racking my brain here

I was able to put the modal window to open an external page. Now I’m having trouble with this modal window, the first time it opens her navigation tabs don’t work, the second time they work normally. This repeats, odd attempt does not open and even opens. Another detail is in the mask, that after 4 clicks she gives a bugger, getting missing and appearing a few times. I’ll edit the topic for better visualization of the code.

$(document).ready(function(){
			
	$("tr[rel=modal]").click( function(ev){
		
        ev.preventDefault();
		
		var indicador = $(this).attr("id");
		$("#janela12").load('tabelas.php', {acc:indicador});
		
		
        var id = $(this).attr("href");
 
        var alturaTela = $(document).height();
        var larguraTela = $(window).width();
     
        //colocando o fundo preto
        $('#mascara').css({'width':larguraTela,'height':alturaTela});
        $('#mascara').fadeIn(300); 
        $('#mascara').fadeTo(300,0.8);
 
        var left = ($(window).width() /2) - ( $(id).width() / 2 );
        var top = ($(window).height() / 2) - ( $(id).height() / 2 );
     
        $(id).css({'top':top,'left':left});
        $(id).show();  
		
		
		
		
		
		
    });
 
    $('#mascara, .fechar').click(function(e){
		
			if( e.target !== this ) 
       			return;
			$('#mascara').fadeOut(30);
			$('.window').fadeOut(30);
			$('#mascara').hide();
			$('.window').hide();
			
		});
	});

<div id="mascara"></div>
							<div class="window" id="janela1">
							 						 
							 <div id="janela12"></div>

Answer 1

It is not possible to "pass" Javascript variables to PHP, as each one works in different locations, the reverse can only occur when the document is rendered.

Javascript (pure, as in the case, because there are variations that run backend) runs on the client, that is, on the computer of who is accessing.

PHP is a "back-end" language, running on the Server running the application.

This way, to have this interaction it is necessary to use an HTTP request (Post, Get, Push, etc....).

In order for this request to occur without changing pages, it is necessary to make an asynchronous call (because if it was a synchronous call, its front would be directed to that url).

For this you can use the AJAX.

Example:

  function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

I believe that using Jquery Ajax is more friendly to those who are starting.

Answer 2

My answer doesn’t fully answer your question but somehow it can help you. I use datatables.net in some proprietary applications. It is an own framework to handle data capture and formatting of tables, is done in Javascript and adapts very well with php ( with other CSS frameworks also if applicable) You will see on the website that there are examples showing this "exchange" of information between php and Javascript. As others put it, it is not possible to pass data directly from php to Javascript, but it is possible to synthesize this by calling php using ajax and Javascript and processing/treating the return.