Javascript e MySQL

Moneybag · January 17, 2017 at 02:08 PM

Boas

Tenho o seguinte código:

index.php

<head>
	<script type="text/javascript" src="scripts/clickable-grid.js"></script>
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

</head>
<body>

<script>
var lastClicked;
var grid = clickableGrid(5,22,function(el,row,col,i){
    console.log("You clicked on element:",el);
    console.log("You clicked on row:",row);
    console.log("You clicked on col:",col);
    console.log("You clicked on item #:",i);

    el.className='clicked';
    if (lastClicked) lastClicked.className='';
    lastClicked = el;
});

document.body.appendChild(grid);
</script>

<script>
  $('td').click(function(e) {
    var cell = e.target;
    var selected_number = $(e.target).text();

    alert(selected_number);
  });
</script>

</body>

clickable-grid.js

function clickableGrid( rows, cols, callback ){
    var i=0;
    var grid = document.createElement('table');
    grid.className = 'grid';
    for (var r=0;r<rows;++r){
        var tr = grid.appendChild(document.createElement('tr'));
        for (var c=0;c<cols;++c){
            var cell = tr.appendChild(document.createElement('td'));
            cell.innerHTML = ++i;
            cell.addEventListener('click',(function(el,r,c,i){
                return function(){
                    callback(el,r,c,i);
                }
            })(cell,r,c,i),false);
        }
    }
    return grid;
}

clickable-grid.css

.grid { margin:1em auto; border-collapse:collapse }
.grid td {
    cursor:pointer;
    width:30px; height:30px;
    border:1px solid #ccc;
    text-align:center;
    font-family:sans-serif; font-size:13px
}
.grid td.clicked {
    background-color:yellow;
    font-weight:bold; color:red;
}

OUTPUT

Imaginado que a grelha criada por este script representa os lugares disponiveis numa sala, precisava de adicionar uma função para quando o utilizador carregar no botão "pesquisar" (por exemplo entre as datas 20-01-2017 e 27-01-2017 ILUSTRADO EMBAIXO) esta preenche-se os quadrados com as cores conforme os 'status' (campo numa tabela MySql)) de cada lugar.

vermelho para lugar comprado
amarelo para lugar reservado
sem cor para lugar disponível

Atenção os status estão representados na tabela MySql por um numero inteiro, 0 para disponivel, 1 para reservado e 2 para comprado.

tbl_reservas (MYSQL)

id
nome
email
phone
address
city
sala (int)
lugar (int)
start_date (date)
end_date (date)
status (int) 0 ou 1 ou 2

Os status de cada lugar(quadrados na grelha) seriam retornados de uma função php.

função php - QUALQUER COISA DESTE TIPO:

$sql = SELECT * FROM tbl_reservas WHERE (reserva esteja entre a data indicada ps: ainda tenho de pensar como vou fazer o algoritmo")

return query($sql)

como posso alterar o script em cima descrito para fazer o que a ilustração mostra ?

Edited January 18, 2017 at 03:46 PM by Ascensao

HappyHippyHippo · January 18, 2017 at 04:32 PM

sabes que estás a criar a tabela em client-side e a info que tens é server-side, certo ?

necessitas de pedir a info ao servidor (normalmente por AJAX), e depois ir a cada um dos elementos (que terás de identificar de alguma forma) e marca-los como pretendes

Moneybag · January 18, 2017 at 05:52 PM

1 hour ago, HappyHippyHippo said:

sabes que estás a criar a tabela em client-side e a info que tens é server-side, certo ?

necessitas de pedir a info ao servidor (normalmente por AJAX), e depois ir a cada um dos elementos (que terás de identificar de alguma forma) e marca-los como pretendes

Sendo assim o que quer dizer é que a tabela (grid) deve ser criada também em server-side correcto?

HappyHippyHippo · January 18, 2017 at 05:54 PM

Just now, Ascensao said:

Sendo assim o que quer dizer é que a tabela (grid) deve ser criada também em server-side correcto?

não, como disse, basta que tenhas alguma forma inteligente de identificar os elementos da tabela (talvez de um atributo 'data-*') que possas facilmente identificara e obter de forma a processar dependendo da resposta do AJAX (que eventualmente irá ser feito para obter a info da tabela)

Sign In

Javascript e MySQL

Recommended Posts

Moneybag

Link to comment

Share on other sites

HappyHippyHippo

Link to comment

Share on other sites

Moneybag

Link to comment

Share on other sites

HappyHippyHippo

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information