Skip to content
DB App-Eat-Easier v3.0
App-Eat-Easier
More
Share
Explore
Code Snippets

icon picker
Javascript

Day Picker Calendar
$("#myDatePicker").datepicker().on('changeDate', function(e){
dayPickerCall($("#myDatePicker").datepicker('getDate'))
})
$("#myDatePicker").datepicker().on('changeDate',function(e){
console.log("This is an event from day-picker: " + $("#myDatePicker").datepicker('getDate'))
})
$("#myDatePicker").datepicker('update','2021-10-03')
let my_var = $("#myDatePicker").datepicker('getDate')
console.log("This is initial date from day-picker: " + my_var)
function dayPickerCall(myDate){
console.log("You have entered into the space-time tunnel: " + myDate)
}
let my_json_date = new Date(my_json_list[i].meal_date)
console.log("my_json_date: " + my_json_date
let my_picker_date = new Date(target_date)
console.log("my_picker_date: " + my_picker_date)
⁠
<!--USER PLANNER PERIOD SELECTOR -->

let my_selector = document.querySelector('#period_selector')
my_selector.addEventListener('click', (event)=>{
if(event.target.id == 'semanal' || event.target.id == 'quincenal'){
user_period = event.target.id
my_selector.querySelector('#dropdownMenuLink').innerText = event.target.innerText
}
})
<!--USER PLANNER PERIOD SELECTOR -->

<div class="row">
<div class=" col-12 col-sm-6 col-md-8 d-flex mx-auto justify-content flex-column">
<p class="p-title">Elige el periodo de tu menú</p>
</div>
<div class="dropdown col-12 col-sm-6 col-md-4 text-center d-flex mx-auto flex-column"
id="period_selector">
<a class=" btn-lg-org ps-2 mb-5 d-flex text-cente justify-content-between align-items-center"
href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown"
aria-expanded="false">
Elige el periodo
<span class="down-arr">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-up"
role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
class="svg-inline--fa fa-chevron-up fa-w-14 fa-5x">
<path width="30" height="30" fill="#FF8908"
d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z"
class=""></path>
</svg>
</span>
</a>
<ul class="col-12 col-sm-6 col-md-4 dropdown-menu offcanvas-bg"
aria-labelledby="dropdownMenuLink">
<li>
<a class="dropdown-item p-title" href="#" id="semanal">Periodo Semanal</a>
</li>
<li>
<a class="dropdown-item p-title" href="#" id="quincenal">Periodo Quincenal</a>
</li>
</ul>
</div>
</div>
//my_username.setCustomValidity('Por favor verifica tu usuario o alias')
//my_eMail.setCustomValidity('Por favor verifica tu email')

/*
my_form.addEventListener('input', (e)=>{
e.target.checkValidity()
console.log('Checking validity in: ' + e.target.id)
})
my_username.addEventListener('invalid', (e)=>{
my_username.setCustomValidity('Por favor usa un formato valido para el username')
console.log('validation: ' + e.target.id + " its NOT Ok !!")
})
my_eMail.addEventListener('invalid', (e)=>{
e.preventDefault()
e.stopPropagation()
my_eMail.setCustomValidity('Por favor usa un formato valido de e-mail')
console.log('validation: ' + e.target.id + " its NOT Ok !!")
})
*/

AJAX Fetch Issues:
Aqui abajo se listan todas las maneras en que se probó y que se fracasó
usarlo como futura referencia
try {
// const response = await fetch(`${API_URL}users/signup/`, {
// headers: {
// "Content-Type": "application/json"
// },
// method:"POST",
// body: JSON.stringify(my_user_data),
// redirect:"manual"
// });
// console.log("response: ", response)
// const data = await response.json()
// my_json_list = data
// saveUserProfile(data)
// console.log("data: ", data)
// return data
// } catch (error) {
// console.log(error)
// }

function createNewUser(){
this_user = getLocalUserData()
try {
fetch(`${API_URL}users/signup/`, {
headers: {
"Content-Type": "application/json"
},
method:"POST",
body: JSON.stringify(this_user)
})
.then((my_response)=>{
return my_response.json()
})
.then((json_res)=>{
my_json_list = json_res
console.log("-----------------------------")
console.log("Response from Django: ")
console.log(json_res)
})

} catch (error) {
console.log(error)
}
}

function createUserAjax(){
this_user = getLocalUserData()
console.log("This user:")
console.log(this_user)
$.ajax({
url: `${API_URL}users/signup/`,
data: JSON.stringify(this_user),
type: 'POST',
datatype: 'json',
success: function(my_response){
console.log(my_response)
},
error: function(my_error){
console.log(my_error)
},
})
}

/*
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest', //Necessary to work with request.is_ajax()
},

headers.append('Content-Type', 'application/json');
headers.append('Accept', 'application/json');
headers.append('Access-Control-Allow-Origin', 'http://localhost:5500');
*/

/*
.then(response => {
console.log('response:', response)
return response.json()
})
//.catch(err => console.error('response_error:', err.message))
.then(data => {
console.log('data:', data)
saveUserProfile(data)
return data
})
.catch(err => console.error('json_data:', err.message))
*/
/*
const createNewUser = async () => {
let user_data = {};
let new_user = {};
try {
user_data = getLocalUserData();
const response = await fetch(`${API_URL}users/signup/`, {
method: "POST",
headers: {
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*",
},
body: JSON.stringify(user_data),
});
new_user = await response.json();
saveUserProfile(new_user);
return new_user;
} catch (error) {
console.log(error);
}
};
*/
/*

// This method it´s very unstable
async function postNewUser() {
console.log("posting with Ajax postNewUser: ");
let my_user_data = getLocalUserData();
console.log("my_user_data: ", my_user_data);
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.