My code is working properly on liveserver, but when I merge on github and open using github pages both conditionals "if" dont work at all. It's something that should be apllied on all pages.
This is how I load on HTML
<head>
<script src="./JS/header.js" defer></script>
</head>
<body>
<header id="header"></header>
This is the JS code:
function insertHeader(){
var codeBlock1 = '<div class="container">' +
'<img class="logo" src="./assets/logo.jpeg" alt="logo página">' +
'<div class="menu-section">' +
'<div class="container-menu">' +
'<input type="checkbox" id="checkbox-menu" />' +
'<label class="menu-button-container" for="checkbox-menu">' +
'<span></span>' +
'<span></span>' +
'<span></span>' +
'</label>' +
'<nav>' +
'<ul class="menu">' +
'</ul>' +
'</nav>' +
'</div>' +
'</div>' +
'</div>';
document.querySelector("#header").innerHTML += codeBlock1;
const urlAtual = window.location.pathname.substring(1);
if (urlAtual !== 'index.html'){
var codeBlockHome = '<li>' +
'Home' +
'</li>';
document.querySelector(".menu").innerHTML += codeBlockHome;
};
var codeBlockLocais =
'<li>' +
'Locais' +
'<ul class="submenu-locais">' +
'<li>Pontos Turísticos</li>' +
'</ul>' +
'</li>';
document.querySelector(".menu").innerHTML += codeBlockLocais;
if (urlAtual !== 'team.html'){
var codeBlockTeam = '<li>' +
'Equipe' +
'</li>';
document.querySelector(".menu").innerHTML += codeBlockTeam;
};
var codeBlockContato = '<li>' +
'Contato' +
'</li>';
document.querySelector(".menu").innerHTML += codeBlockContato;
for (i=0; i< estados.length; i++){
estadosNome[i] = estados[i].slice(0, -5);
estadosSigla[i] = estados[i].split(' ').pop();
var codeBlock2 = `<li>${estadosNome[i]}</li>`;
document.querySelector(".submenu-locais").innerHTML += codeBlock2;
}};
insertHeader();
Only "ifs" dont work, and I already solved this problem with CSS. But I'm still curious to why it worked on liveserver and not on github pages.
I am working with javascript also am a newbie in js so actually, I want to get the current index and then update a specific field to the realtime if somebody helps me out I will thankful to him here is my script where I fetch the data in realtime firebase and I put my value inside inner HTML format so I want when user press specific buttons its pending data update to booked.
userDataRef.once("value").then(function(snapshot) {
snapshot.forEach(function(childSnapshot, index) {
console.log(childSnapshot.val());
key = childSnapshot.key;
userid = childSnapshot.val().userid;
var carid = childSnapshot.val().carid;
var imageload = childSnapshot.val().imgurl;
var loadfirstname = childSnapshot.val().userfirstname;
var loadcarname = childSnapshot.val().carname;
var loadlastname = childSnapshot.val().userlastname;
var loadphonenumber = childSnapshot.val().phoneNumber;
var loaddropoffadd = childSnapshot.val().dropoffaddress;
var loadpickupadd = childSnapshot.val().pickupaddress;
loadprice = childSnapshot.val().price;
var appenddata =
'<div class="container rounded" style="background-color: #00829E" id="datalist">' +
'<div class="row">' +
'<div class="col-md-12">' +
'<div class="row">' +
'<div class="col-md-4 mt-2 mb-2 ml-2">' +
'<div class="container rounded"style="background-color: #efefef">' +
'<center>' +
'<img src="' + imageload + '" id="loadimage" style="height: 100px; width: 100px;">' +
'</center>' +
'</div>' +
'</div>' +
'<div class="col-md-6 mt-2 mb-2">' +
'<div class="container rounded para">' +
'<h5 id="loadcarname">' + loadcarname + '</h5>' +
'<p id="loadfirstname">First Name: ' + loadfirstname + '</p>' +
'<p id="loadlastname">Last Name: ' + loadlastname + '</p>' +
'<p id="loadphone">Phone Number: ' + loadphonenumber + '</p>' +
'<p id="loadpickup">Pickup Address: ' + loadpickupadd + '</p>' +
'<p id="loaddropoff">Dropoff Address: ' + loaddropoffadd + '</p>' +
'</div>' +
'</div>' +
'<div class="col-md-2"></div>' +
'</div>' +
'<div class="row">' +
'<div class="col-md-4"></div>' +
'<div class="col-md-4"></div>' +
'<div class="col-md-2 para1 mt-2">' +
'<p id="loadprice">Price:' + loadprice + ' Sum/Day</p>' +
'</div>' +
'<div class="col-md-2 mb-3">' +
'<button class="btn btn-info btn-sm rounded-pill check" id="approvebutton" value ="Booked" onclick="myFunction(this.value)" aria-pressed="true">Approve</button>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
$("#listshow").append(appenddata);
});
});
when user press the button I call function named Myfunction I just want to update specific id in that function
my function name script
function myFunction(value) {
approvecar = document.getElementById('loadprice').value;
firebase.database.ref("carBooking/" + userid).update({
status: ""
});
}
To be able to write a value in the database, you need to know the complete path to that node. Right now, you know what value to write, but you've lost information about what key (the -M.... value) to write it to.
So you'll need to pass the key of the item the user clicked on, from your HTML into the myFunction function.
The simplest way to do that is something like:
'<button class="btn btn-info btn-sm rounded-pill check" id="approvebutton" value ="Booked"
onclick="myFunction(\''+key+'\', this.value)" // 👈 is changed
aria-pressed="true">Approve</button>' +
There may be some syntax problems in this part as I'm having a hard time parsing your HTML construction code.
Now that you're passing both the key and the value, you can update the correct node with:
function myFunction(key, value) {
approvecar = document.getElementById('loadprice').value;
firebase.database.ref("carBooking").child(key).update({
status: ""
});
}
Here are many solutions of checkbox keep checked but in this method these solution does not work.
I've trying in AdminLTE to keep layout-options work after reload the page, but the whole coding of layout-option comes from jquery and I'm not comforted in jquery, can you tell me how can fix. I have used these codes...
demo.js
send views of layout options..
// Layout options
$demoSettings.append(
'<h4 class="control-sidebar-heading">'
+ 'Layout Options'
+ '</h4>'
// Fixed layout
+ '<div class="form-group">'
+ '<label class="control-sidebar-subheading">'
+ '<input type="checkbox" data-layout="fixed"class="pull-right" name="fixed_layout"/> '
+ 'Fixed layout'
+ '</label>'
+ '<p>Activate the fixed layout. You can\'t use fixed and boxed layouts together</p>'
+ '</div>'
// Boxed layout
+ '<div class="form-group">'
+ '<label class="control-sidebar-subheading">'
+ '<input type="checkbox"data-layout="layout-boxed" class="pull-right" name="boxed_layout"/> '
+ 'Boxed Layout'
+ '</label>'
+ '<p>Activate the boxed layout</p>'
+ '</div>'
// Sidebar Toggle
+ '<div class="form-group">'
+ '<label class="control-sidebar-subheading">'
+ '<input type="checkbox"data-layout="sidebar-collapse"class="pull-right" name="toggle_sidebar"/> '
+ 'Toggle Sidebar'
+ '</label>'
+ '<p>Toggle the left sidebar\'s state (open or collapse)</p>'
+ '</div>'
// Sidebar mini expand on hover toggle
+ '<div class="form-group">'
+ '<label class="control-sidebar-subheading">'
+ '<input type="checkbox"data-enable="expandOnHover"class="pull-right" name="sidebar_hover"/> '
+ 'Sidebar Expand on Hover'
+ '</label>'
+ '<p>Let the sidebar mini expand on hover</p>'
+ '</div>'
// Control Sidebar Toggle
+ '<div class="form-group">'
+ '<label class="control-sidebar-subheading">'
+ '<input type="checkbox"data-controlsidebar="control-sidebar-open"class="pull-right" name="toggle_slide"/> '
+ 'Toggle Right Sidebar Slide'
+ '</label>'
+ '<p>Toggle between slide over content and push content effects</p>'
+ '</div>'
// Control Sidebar Skin Toggle
+ '<div class="form-group">'
+ '<label class="control-sidebar-subheading">'
+ '<input type="checkbox"data-sidebarskin="toggle"class="pull-right" name="toggle_skin"/> '
+ 'Toggle Right Sidebar Skin'
+ '</label>'
+ '<p>Toggle between dark and light skins for the right sidebar</p>'
+ '</div>'
)
var $skinsList = $('<ul />', {'class': 'list-unstyled clearfix'})
I've Using jquery for checkbox keep checked, It works on other single HTML pages, but here i do not understand how to do this...
(function() {
var cbstate;
window.addEventListener('load', function() {
cbstate = JSON.parse(localStorage['CBState'] || '{}');
for(var i in cbstate) {
var el = document.querySelector('input[name="' + i + '"]');
if (el) el.checked = true;
}
var cb = document.getElementsByClassName('pull-right');
for(var i = 0; i < cb.length; i++) {
cb[i].addEventListener('click', function(evt) {
if (this.checked) {
cbstate[this.name] = true;
}
else if (cbstate[this.name]) {
delete cbstate[this.name];
}
localStorage.CBState = JSON.stringify(cbstate);
});
}
});
})();
})
I try to insert a dynamic h3 to a dynamic div, hovewer something is odd as it gets inserted outside the lblUser div. I would also like to be inserted after the "Role" h3.
Here is my code : function showUsers() {
lblUserList.innerHTML = "";
for ( var i = 0; i < ajUserDataFromServer.length; i++ ) {
var lblUser = document.createElement('div');
lblUser.innerHTML = '<div class="lblUser">' + '<img src="' + ajUserDataFromServer[i].image + '" alt="user" class="lblUserImage" data-userImage="' + ajUserDataFromServer[i].image + '">' + '<h3 class="lblUserId">' + 'Id:' + ' ' + ajUserDataFromServer[i].id + '</h3>' + '<h3 class="lblUserRole" data-userRole="' + ajUserDataFromServer[i].role + '">' + 'Role:' + ' ' + ajUserDataFromServer[i].role + '</h3>' + '<h3 class="lblUserName" data-userName="' + ajUserDataFromServer[i].name + '">' + 'Name:' + ' ' + ajUserDataFromServer[i].name + '<h3 class ="lblUserLastName" data-userLastName="' + ajUserDataFromServer[i].lastname + '">' + 'Lastname:' + ' ' + ajUserDataFromServer[i].lastname + '</h3>' + '<h3 class="lblUserPassword" data-userPassword="' + ajUserDataFromServer[i].password + '">' + 'Password:' + ' ' + ajUserDataFromServer[i].password + '</h3>' + '<button id="btnEditUserBody" class="btnShowPage btnEditUser" data-userId="' + ajUserDataFromServer[i].id + '" data-showThisPage="pageUpdateUser">' + 'EDIT USER' + '</button>' + '<button class="btnDeleteUser" data-userId="' + ajUserDataFromServer[i].id + '" >' + 'DELETE USER' + '</button>' + '<h3 class="lblErrorMessage" id="lblDeleteUserErrorMessage">' + '</h3>' + '</div>';
if ( ajUserDataFromServer[i].email ) {
var lblUserEmail = document.createElement('h3');
lblUserEmail.innerHTML = '<h3 class="lblUserEmail" data-userEmail="' + ajUserDataFromServer[i].email + '">' + 'Email:' + ' ' + ajUserDataFromServer[i].email + '</h3>';
lblUser.appendChild( lblUserEmail );
}
if ( ajUserDataFromServer[i].phonenumber ) {
var lblUserPhoneNumber = document.createElement('h3');
lblUserPhoneNumber.innerHTML = '<h3 class="lblUserPhoneNumber" data-userPhoneNumber="' + ajUserDataFromServer[i].phonenumber + '">' + 'Phone-number:' + ' ' + ajUserDataFromServer[i].phonenumber + '</h3>';
lblUser.appendChild( lblUserPhoneNumber );
}
lblUserList.appendChild( lblUser );
}
}
I can see a few things wrong with the code, for example:
var lblUserEmail = document.createElement('h3');
lblUserEmail.innerHTML = '<h3 class="lblUserEmail" data-userEmail="' + ajUserDataFromServer[i].email + '">' + 'Email:' + ' ' + ajUserDataFromServer[i].email + '</h3>';
Should be something like:
var lblUserEmail = document.createElement('h3');
lblUserEmail.classList.add("lblUserEmail");
lblUserEmail.setAttribute("data-userEmail", ajUserDataFromServer[i].email);
lblUserEmail.innerText = 'Email:' + ' ' + ajUserDataFromServer[i].email;
Now you can append it:
lblUser.appendChild(lblUserEmail);
If you do it your way you wil get nested h3 and div elements.
Furthermore, you need to close your img tag. I can advice creating those tags either in code or with the new es5 string interpolation this will clean up your code and will show you these types of errors.
I have a function getsWeather which uses the SimpleWeather framework. That function is as follows:
function getsWeather(city, unitMes) {
$.simpleWeather({
location: city,
woeid: '',
unit: unitMes,
success: function(weather) {
// ---- For testing the weather code ----
//alert(weather.code);
//alert(weather.currently);
//alert(weather.forecast[1].code);
var conditionArr0 = conditionsImage(weather.code);
var conditionArr1 = conditionsImage(weather.forecast[1].code);
var conditionArr2 = conditionsImage(weather.forecast[2].code);
var conditionArr3 = conditionsImage(weather.forecast[3].code);
loc = weather.city + ', ' + weather.region;
html = '<h3>Now</h3><p>'+returnsDate()+'</p><p id="city-reading">' + weather.city + ', ' + weather.region + '</p>';
html += '<div class="icon ' + conditionArr0[0] + '"></div>';
html += '<i class="icon-'+weather.code+'"></i><h2 id="temperature-reading">'+weather.temp+'°'+weather.units.temp+'</h2>';
html += '<h6 class="currently">'+weather.currently+'</h6>';
forecast1 = '<h4>' + weather.forecast[1].day + '</h4>';
forecast1 += '<div class="icon-sm ' + conditionArr1[0] + '"></div>';
forecast1 += '<h5>H: ' + weather.forecast[1].high + '</h5>';
forecast1 += '<h5>L: ' + weather.forecast[1].low + '</h5>';
forecast2 = '<h4>' + weather.forecast[2].day + '</h4>';
forecast2 += '<div class="icon-sm ' + conditionArr2[0] + '"></div>';
forecast2 += '<h5>H: ' + weather.forecast[2].high + '</h5>';
forecast2 += '<h5>L: ' + weather.forecast[2].low + '</h5>';
forecast3 = '<h4>' + weather.forecast[3].day + '</h4>';
forecast3 += '<div class="icon-sm ' + conditionArr3[0] + '"></div>';
forecast3 += '<h5>H: ' + weather.forecast[3].high + '</h5>';
forecast3 += '<h5>L: ' + weather.forecast[3].low + '</h5>';
//$("input[name=locSearch]").val(loc);
$("#weather").html(html);
$(".today").css('background-color', conditionArr0[1]);
$("#1").html(forecast1);
$("#2").html(forecast2);
$("#3").html(forecast3);
},
error: function(error) {
loc = '<h5><button id="search"><i class="fa fa-search" id="search-icon"></i></button></h5>';
html = '<p>Today</p><p><strong>'+returnsDate()+'</strong></p>';
html += '<div class="icon ' + ' ' + '"></div>';
html += '<h2><strong><i class="icon-'+ ' ' +'"></i> '+weather.temp+'°'+weather.units.temp+'</strong></h2>';
html += '<h6 class="currently">'+ ' ' +'</h6>';
$("#location").html(loc);
$("#weather").html(html);
$(".today").css('background-color', conditionArr0[1]);
}
});
}
I just want to pull the weather.city from this function but I don't know how to really do that.
I'm trying to do it with this var currentLocation = document.getElementById("city-reading").innerHTML; but that doesn't work and I'm assuming it's because the code hasn't been generated yet for me to pull from? Is there an easier way to do this?
It's hard to say without a look at the larger context, but it looks like the function being defined here is a callback for $.simpleWeather(), so it sounds like you want to do something with the values returned. If you're putting the var currentLocation = document.getElementById("city-reading").innerHTML; somewhere else, it won't work since it runs immediately, before the callback has been made.
Can you just move whatever you want to do with the currentLocation into the body of the current callback? If not, you could think about defining another callback to run once this one completes, then your code should work.
Try putting your variable outside of the function and then setting it inside, like below. If you want to be able to access from html you could also go old school and store it in a hidden input from within the getsWeather function.
var currentLocation = '';
function getsWeather(city, unitMes) {
$.simpleWeather({
location: city,
woeid: '',
unit: unitMes,
success: function(weather) {
// ---- For testing the weather code ----
//alert(weather.code);
//alert(weather.currently);
//alert(weather.forecast[1].code);
var conditionArr0 = conditionsImage(weather.code);
var conditionArr1 = conditionsImage(weather.forecast[1].code);
var conditionArr2 = conditionsImage(weather.forecast[2].code);
var conditionArr3 = conditionsImage(weather.forecast[3].code);
currentLocation = weather.city;
loc = weather.city + ', ' + weather.region;
html = '<h3>Now</h3><p>'+returnsDate()+'</p><p id="city-reading">' + weather.city + ', ' + weather.region + '</p>';
html += '<div class="icon ' + conditionArr0[0] + '"></div>';
html += '<i class="icon-'+weather.code+'"></i><h2 id="temperature-reading">'+weather.temp+'°'+weather.units.temp+'</h2>';
html += '<h6 class="currently">'+weather.currently+'</h6>';
forecast1 = '<h4>' + weather.forecast[1].day + '</h4>';
forecast1 += '<div class="icon-sm ' + conditionArr1[0] + '"></div>';
forecast1 += '<h5>H: ' + weather.forecast[1].high + '</h5>';
forecast1 += '<h5>L: ' + weather.forecast[1].low + '</h5>';
forecast2 = '<h4>' + weather.forecast[2].day + '</h4>';
forecast2 += '<div class="icon-sm ' + conditionArr2[0] + '"></div>';
forecast2 += '<h5>H: ' + weather.forecast[2].high + '</h5>';
forecast2 += '<h5>L: ' + weather.forecast[2].low + '</h5>';
forecast3 = '<h4>' + weather.forecast[3].day + '</h4>';
forecast3 += '<div class="icon-sm ' + conditionArr3[0] + '"></div>';
forecast3 += '<h5>H: ' + weather.forecast[3].high + '</h5>';
forecast3 += '<h5>L: ' + weather.forecast[3].low + '</h5>';
//$("input[name=locSearch]").val(loc);
$("#weather").html(html);
$(".today").css('background-color', conditionArr0[1]);
$("#1").html(forecast1);
$("#2").html(forecast2);
$("#3").html(forecast3);
},
error: function(error) {
loc = '<h5><button id="search"><i class="fa fa-search" id="search-icon"></i></button></h5>';
html = '<p>Today</p><p><strong>'+returnsDate()+'</strong></p>';
html += '<div class="icon ' + ' ' + '"></div>';
html += '<h2><strong><i class="icon-'+ ' ' +'"></i> '+weather.temp+'°'+weather.units.temp+'</strong></h2>';
html += '<h6 class="currently">'+ ' ' +'</h6>';
$("#location").html(loc);
$("#weather").html(html);
$(".today").css('background-color', conditionArr0[1]);
}
});
}
A recursive function like the following will get the innerHTML for you once it is available.
inside the function check if you have the element with id city-reading yet, if not, set a timeout for 50ms then call yourself again to check if the element is ready. Until you get it, then you can set the innerHTML and call the function you need to continue the function chain.
var currentLocation;
function getCityReading() {
if (document.getElementById("city-reading")) {
currentLocation = document.getElementById("city-reading").innerHTML;
console.log('YES. currentLocation-->'+currentLocation);
//you got the dynamic content you need, call next function
nextFunction();
} else {
console.log('Not yet...');
setTimeout(function() {
getCityReading();
}, 50);
}
}
//init
getCityReading();
//add the id after 2 sec, simulate the situation of a dynamically added element.
setTimeout(function() {
console.log('update id now');
document.getElementsByClassName("test-container")[0].setAttribute("id", "city-reading");
}, 2000);
function nextFunction(){
console.log("I'm a function place holder, lol");
}
<div class="test-container" id="">
I'm city-reading content.
</div>