trocando pesquisa reativo de htmx para ajax

This commit is contained in:
2024-12-27 15:19:51 -03:00
parent e7212ab688
commit a1866c842c
9 changed files with 70 additions and 29 deletions

View File

@@ -9,7 +9,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'pico.css' %}">
<script src="{% static 'htmx_base.js' %}"></script>
{% block 'head' %}
{% endblock %}
@@ -18,7 +17,7 @@
<div>
<!-- aqui o menu -->
<nav >
<ul>
<li><a href="{% url 'home' %}">Home</a></li>
@@ -32,11 +31,12 @@
<!-- <div class="content">
<h1>Bem-vindo ao meu site!</h1>
</div> -->
</div>
<body>
{% block 'body' %}
{% endblock %}
<script src="{% static 'htmx_base.js' %}"></script>
</body>
</html>

View File

@@ -8,10 +8,10 @@
name="productBox"
id="productId-{{ product.id }}"
style="background-color: #293552;"
hx-get="{% url 'addProductBalcaoTeclado' product.id comanda.id 1 %} " hx-trigger="click" hx-target="#list-products-balcao"
>
<p hidden id="{{forloop.counter0}}" >{{product.id}}</p>
<p hidden id="comanda{{forloop.counter0}}" >{{comanda.id}}</p>
<p hidden id="comanda{{forloop.counter0}}" >{{comanda_id}}</p>
{{product.name}} <br> <p id="{{product.id}}"></p>
R$ {{product.price}}
</article >
@@ -22,9 +22,9 @@
name="productBox"
id="productId-{{ product.id }}"
style="background-color: #293552;"
hx-get="{% url 'addProductBalcaoTeclado' product.id comanda.id 1 %} " hx-trigger="click" hx-target="#list-products-balcao"
><data value="{{product.id}}"></data>
{{ forloop.counter0 }} {{product.name}} <br>
>
{{product.name}} <br>
R$ {{product.price}}
</article >

View File

@@ -103,10 +103,10 @@ document.onkeydown = teclado
function teclado(event){
if (event.keyCode == 13){
// const productId = document.getElementById('0').value;
// const comandaId = document.getElementById('comanda0').value;
addProductBalcao()
reloadPage()
}else{
console.log(event.keyCode)
}
}
@@ -132,9 +132,6 @@ function addProductBalcao() {
reloadPage()
}
// document.getElementById('openModal').addEventListener('click', openModal);
document.getElementById('productForm').addEventListener('submit', function(event) {
event.preventDefault();
@@ -151,4 +148,42 @@ qtd.addEventListener('input', () => {
console.log(chave, valor);
});
function searchProduct() {
var search_product = document.getElementById('search-product').value
var productListElement = document.getElementById("product-list");
if(search_product.length >= 1){
fetch(`/balcao/listProductBalcao/13/${search_product}`, {
method: 'GET',
}
).then(function(response) {
return response.text();
}).then(function(text) {
productListElement.innerHTML = text;
})}
}
function addProductClick(productId, comandaId) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "{% url 'addProductBalcaoTeclado' product.id comanda.id 1 %}", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var listProductsBalcaoElement = document.getElementById("list-products-balcao");
listProductsBalcaoElement.innerHTML = response.html;
}
};
xhr.send();
}
// hx-get="{% url 'listProductBalcao' comanda.id %}"
// hx-trigger="keyup"
// hx-target="#product-list"
// hx-get="{% url 'addProductBalcaoTeclado' product.id comanda.id 1 %}" hx-trigger="click" hx-target="#list-products-balcao"