How to call a js file inside a php file

Question

How to call a js file inside a php file

Asked 4 years ago

Viewed 199 times

-1

Here is the php code (only missing the 'open' php tag, and the line I declare the event variable):




        /* dentro do if queria trocar este alerta por um script inteiro que estaria em um arquivo externo js,
        pois a ideia é estilizar este alert centralizando na pagina, mas vi que fazendo isso iria ter
        um script js muito grande.
        ==========| então quero saber |==============
        como faço para chamar este arquivo js dentro destes if? 
        */ 
        if($evento == 1){
            echo '<script>alert("Login e senhas inválidos!");</script>';
        }
        if($evento == 2){
            echo '<script>alert("Efetue o login para poder acessar a página!");</script>';
        }
    ?>

I think this is the problem, as it has keys in if, and the top of the code is html, I think it is giving problem.

– Luciano Filho

2020/06/11 at 03:52

1 answer

Browser other questions tagged php javascript events

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

by chavesfop • **304** points · Answer 1 · 2020-06-11T05:41:56+00:00

for me at the beginning jQuery for JS was very quiet, I suggest you take a look.
https://jquery.com and https://jqueryui.com

In your case I would do: a separate js file, which would be loaded at the end of your html, in this js file, would use jQuery to perform a $.ajax() call, on a route that just does the login check and returns a json with the message (no HTML in that file in the case).

<!-- arquivo.html -->
<!-- adicionar em <head> (inclui o jquery e jquery ui) -->
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<!-- adicionar na tag <form> (id para jquery utilizar) -->
<form id="idForm"></form>

<!-- adicionar html do modal, é com um P sem mensagem mesmo, pois o ajax que irá carragar a mensagem -->
<div id="modalMensagem"><p id="mensagem"></p></div>

<?php
//arquivo.php
$json = ['error' => ''];
//validações de script, qualquer erro coloque o erro da seguinte forma:
switch($evento) { 
   case 1: 
      $json['error'] = 'Login e senha inválidos';
      break;
   case 2:
      $json['error'] = 'Efetue o login para poder acessar a página!';
}

/* Verifique se sua string é UTF-8, caso contrario json_encode não funcionará.
 * Para saber isto teste uma string com Ç, se retornar um json_encode vazio, é porque os caracteres não são UTF8.
 * Utilize: utf8_encode() na string. $json['error'] = utf8_encode('Mensagem de erro com Ç');
 */
header('Content-Type: application/json'); //define o header como json pra que é o que o jquery espera no ajax com dataType: json
echo json_encode($json); //exibe o json no body

//ARQUIVO.js

$(document).ready(function(){ //jQuery, execute isto após a pagina ser carregada
   $("#idForm").submit(function(event)){ //tratamento do evento submit do form com id="idForm" 
       event.preventDefault(); //informa que o evento default não ocorrerá
       var request = $.ajax({ //inicia o ajax e associa a variavel request
           url: $("#idForm").attr("action"), //pega o parametro action do form
           method: $("#idForm").attr("method"), //pega o parametro method do form
           data: $("#idForm").serialize(), //serializa o form e envia como parametro
           dataType: 'json' //espera um retorno json
       });

       request.done(function(json){ //ao final da request com retorno HTTP 20X
           if (json.error != ''){ //error foi definido no php, e json é um parametro desta função
              $("#modalMensagem #mensagem").html(json.error); //adiciona a mensagem no elemento com id="mensagem" dentro do elemento com id="modalMensagem"
              $("#modalMensagem").dialog({ //exibe modalMensagem como um modal
                  modal: true,
                  buttons: {
                      Ok: function() { //aqui é o array de botões, cada botão recebe uma function referente ao seu evento click.
                          $(this).dialog("close"); //define o que o botão OK faz, neste caso fecha o modal
                      }
              });
           } else {
              document.location.href = 'novarota.php'; //caso não tenha mensagem de erros, ocorreu um (login?) com sucesso e deve ser redirecionado.
           }
       });
   }
});

In the successful event of $.ajax(), you would insert the error message in some or modal done with jqueryui (this would already bring you a centralized 'Alert', but that you could style with CSS and put some buttons with events).

I also suggest taking a look at some programming patterns that apply MVC and Object Orientation. (for PHP see Zend, Laravel, Yii, Slim... Frameworks give a good foundation).