0

Boas, estou a criar um sistema de notificações na minha aplicação onde quero ir buscar dados à base de dados e informar o utilizador consoante os mesmos através de notificações. Acontece que estou um bocado perdido em como é que faço para que as notificações sejam actualizadas sem eu fazer um request de um form ou algo semelhante.

Alguém me consegue dar umas 'luzes' em como é que eu devo proceder? Estou um bocado perdido

UPDATE: Estou a tentar usar AJAX para o fazer e estou a tentar o seguinte código mas nada acontece:

$.ajax({
        url: '<?=base_url("notificacoes")?>',
        type: 'POST',
        data: {
            key: 'olá'
        },
        dataType: 'json',
        success: function(data) {
            console.log(data);
        }
    });

Controller:

defined('BASEPATH') OR exit('No direct script access allowed');

class Notificacoes extends CI_Controller {
    public function index(){
        echo $this->input->post('key');
    }
}

A ideia é fazer um print da variável key quando a página faz load

4
  • 3
    Utilize-se e estude um pouco sobre requisições ajax Commented 6/05/2019 às 12:15
  • Já comecei a ver um pouco de ajax, entretanto, surgiu-me uma duvida e atualizei o post. Se me conseguir ajudar agradecia Commented 6/05/2019 às 14:37
  • Serviu, simplesmente surgiu-me uma duvida nova que está ligada com a resposta que me deram e, para nao estar a criar outro post, reeditei este Commented 6/05/2019 às 14:40
  • Sua função ajax não esta sendo chamada! Commented 6/05/2019 às 19:32

2 Respostas 2

1

De princípio no protocolo HTTP o cliente faz a requisição e o servidor responde, logo, de alguma forma terás que fazer uma requisição. Mas existem algumas soluções, tais como:

  • Ajax - O Ajax te permite comunicar com o servidor sem ter que fazer refresh na página e para o tal terias que fazer requisição de x em x tempo, mas isso iria inundar o seu servidor de pedidos o que não é uma boa implementação.
  • React– Com o React podes escolher o que actualizar no Dom através de componentes reativas que te permite interagir com elementos HTML específicos. E o codeIgniter já tem pacote (CodeIgniter with React) que te permite usar React.

Espero ter ajudado.

2
  • Já comecei a ver um pouco de ajax, entretanto, surgiu-me uma duvida e atualizei o post. Se me conseguir ajudar agradecia Commented 6/05/2019 às 14:38
  • Não acontece nada porque talvez o Ajax não chega a ser chamada. Experimenta colocar o Ajax dentro do window.onload(()=>{ $.ajax({ url: '<?=base_url("notificacoes")?>', type: 'POST', data: { key: 'olá' }, dataType: 'json', success: function(data) { console.log(data); } }); }) Commented 6/05/2019 às 18:59
0

Pra ficar claro: isso aqui não é um tutorial. Vc precisa ter familiaridade com a metodologia do framework.

O código proposto nesta resposta faz basicamente uma requisição $_POST pro method json/index passando os dados do form e trata a resposta para mostrar tudo num alert. OBS: em que pese vc tenha dito que não quer usar um form, vc vai ter que fazer a requisição de uma maneira ou de outra, então, eu usei um form pra organizar os dados. Aprofundando mais no JQuery vc vai aprender a extrair os dados de qualquer tipo de elemento pra enviar.

Considerando a estrutura do CodeIgniter constante da documentação, sugiro criar um Controller que seja responsável apenas pelas respostas dos objetos JSON. Ele vai servir para qualquer tipo de dado que vc queira recuperar, inclusive dados do banco:

Controller 'Json.php':

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Json extends CI_Controller {

    /**
    * Returns a JSON object
    **/
    function index() {
        $alert = $this->input->post();
        $this->output
        ->set_content_type('application/json')
        ->set_output(json_encode($alert));
    }
}

Criado o controller que vai responder com os objetos JSON, crie os que vão usá-los:

Controller 'Pages.php':

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Pages extends CI_Controller {

    public function index() {
        $this->load->view('pages/index');
    }
}

View 'pages/index:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title>Example</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script>
            $(function () {
                //Comportamento do botao de envio
                $('#submit').click(function () {
                    submit();
                });
                //Alteracao do comportamento do formulario de envio
                $("#form").submit(function (e) {
                    e.preventDefault();
                });
            });
            //Funcao que faz o request
            function submit() {
                //Envia um request POST para o method 'json/index';
                $.post(
                    $("#form").attr("action"),//Captura a action do FORM
                    $("#form").serialize(),//Captura os dados do FORM
                    //Captura a resposta do PHP
                    function (resp) {
                        //Alterando os valores em elementos especificos
                        $('#alert-msg').html('Classe invocada: '+resp.class);
                        $('#alert-title').html('Mostrando a classe para o elemento #alert');
                        //Muda a classe do elemento #alert
                        $("#alert").attr('class', resp.class);
                    }
                );              
                //Mostra o elemento #alert
                $('#alert').css('display', 'block');
            }
        </script>
        <style type="text/css"> 
            /* Por padrao, oculta elementos com id = 'alert' */
            #alert{
                display:none;
            }
        </style>
    </head>
    <body>
        <nav class="navbar"></nav>
        <div class="container">
            <p><b>Altere a classe do elemento #alert:</b></p>
            <div id="alert" role="alert">
                <strong id="alert-title">
                </strong> <div id="alert-msg"></div>
            </div>
            <div class="col-lg-3">
                <form action="json/index" id="form">
                    <select class="form-control" name="class">
                        <option value="alert alert-success">Success</option>
                        <option value="alert alert-info">Info</option>
                        <option value="alert alert-warning">Warning</option>
                        <option value="alert alert-danger">Danger</option>
                    </select>
                    <br>
                    <button class="btn btn-primary" type="button" id="submit">Alterar</button>
                </form>
            </div>
        </div>
    </body>
</html>

Observando o código constante da view vc vai perceber que o que importa, neste caso, é o JavaScript/JQuery. Ele é que vai tratar o comportamento do form, dos botões e a resposta obtida do method json/index e alterar os dados mostrados.

O código está comentado, e não deve ser difícil implementar ou alterar para atender às suas necessidades.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .