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);
});
}
});
})();
})
Related
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: ""
});
}
I generate item in owl carousel from JavaScript code but the item div in the carousel does not have active class here is my code:
for (var i = 0; i < data.length; i++) {
$(".owl-carousel").trigger('add.owl.carousel', [
'<div class= "item">' +
'<div class="flyout-content">' +
'<h5>' + data[i].firstName + '</h5>' +
'<h3>' + data[i].lastName + '</h3>' +
'</div>' +
'</div>'
]
}
as #Pedram said i did that and i add if statment to check first index and its work here is the code in case someone need it
for (var i = 0; i < data.length; i++) {
if(i == 0){
$(".owl-carousel").trigger('add.owl.carousel', [
'<div class= "item">' +
'<div class="flyout-content">' +
'<h5>' + data[i].firstName + '</h5>' +
'<h3>' + data[i].lastName + '</h3>' +
'</div>' +
'</div>'
]);
var owl = $('.owl-carousel');
owl.owlCarousel();
owl.trigger('refresh.owl.carousel');
}
}
I'm building a retail website using Bootstrap. For the products there is a thumbnail with a "More Info" button that loads a modal. Inside of the modals is an iframe with more information for the bike. When I load the page it loads every iframe (about 60). I'm trying to figure out how to load the iframe (var bike_modal_descriptions_giant) when the appropriate button is clicked.
I have the site up for testing here: Site
I'm using a javascript loop to populate the thumbnails.
Screenshot of thumbnails.
Script that reads from other file to populate thumbnails, just changed for each brand:
<script>
for (i = 0; i < num_items_giant; i++) {
if (i % 3 == 0) {
document.getElementById('catalogue').innerHTML += '<div class="row">';
}
document.getElementById('catalogue').innerHTML += '<div class="col-sm-6 col-md-4">'
+ '<div class="thumbnail">'
+ '<img src=' + bike_pics_giant[i] + '>'
+ '<div class="caption">'
+ '<h3>' + bike_titles_giant[i] + '</h3>'
+ '<p>' + bike_descriptions_giant[i] + '</p>'
+ '<p><button onclick="" type="button" class="btn btn-default" id="btn-giant' + i + '">More Info</button></p>'
+ '<div class="modal fade" id="modal-giant' + i + '" role="dialog">'
+ '<div class="modal-dialog">'
//<!-- Modal content-->
+ '<div class="modal-content">'
+ '<div class="modal-header">'
+ '<button type="button" class="close" data-dismiss="modal">×</button>'
+ '<h4 class="modal-title">' + bike_titles_giant[i] + '</h4>'
+ '</div>'
+ '<div class="modal-body">'
+ '<p>' + bike_modal_descriptions_giant[i] + '</p>'
+ '</div>'
+ '<div class="modal-footer">'
+ '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '</div>';
if (i % 3 == 0) {
document.getElementById('catalogue').innerHTML += '</div>';
}
}
</script>
Modal Script:
<script>
/* Giant */
for (i = 0; i < num_items_giant; i++) {
setupButton("btn-giant" + i, "modal-giant" + i);
}
/* Liv */
for (i = 0; i < num_items_liv; i++) {
setupButton("btn-liv" + i, "modal-liv" + i);
}
function setupButton(button, modal){
$(document).ready(function(){
$("#" + button).click(function(){
$("#" + modal).modal();
});
});
}
</script>
Truncated version of modal content file. Each section is an array and each row creates a new thumbnail:
var num_items_giant = 38;
var bike_pics_giant = ["pictures/bikes/2016/road/Propel/Propel-Adv-SL-0/Propel-Advanced-SL-0-Comp.jpg",
"pictures/bikes/2016/road/Propel/Propel-Adv-SL-Team/Propel-Adv-SL-Team.jpg"];
var bike_titles_giant = ["Giant Propel Advanced SL 0",
"Giant Propel Advanced SL Team"];
var bike_descriptions_giant = ["This pro peleton standout is the pinnacle of aero road. A killer in the sprints, with sublime overall ride quality.<br><strong>$9000</strong>",
"This pro peleton standout is the pinnacle of aero road. A killer in the sprints, with sublime overall ride quality.<br><strong>$6900</strong>";
var bike_modal_descriptions_giant = ["<iframe style=\"border:none\" width=\"710\" height=\"700\" src=\"https://www.giantretailacademy.com/go/?c=US&axid=600043\"></iframe>",
"<iframe style=\"border:none\" width=\"710\" height=\"700\" src=\"https://www.giantretailacademy.com/go/?c=US&axid=615001\"></iframe>";
I have a param called "exraData" which can be a string or array (depends on some conditions).
I have to display some content using java script.
in case "exraData" is a String the content is displayed well by the following code:
this.resulto = '<div class="avatarHeight">' +
'<div class="avatar">' + spanPic + '</div>' +
'<div class="info ' + company + '">' + item.show +
'<div class="tt-hint">' + exraData + '</div>' +
'</div>' +
'</div>';
In case it is array I use the following code but nothing is displayed:
this.resulto = '<div class="avatarHeight">' +
'<div class="avatar">' + spanPic + '</div>' +
'<div class="info ' + company + '">' + item.show
for(var i=0;i<exraData.length;i++){
+'<div class="tt-hint">' + exraData[i] + '</div>'
}
+'</div>' +
'</div>';
You can't have a for loop inline. Here is the for loop outside with the desired result.
var spanPic='tempPic';
var company='xyz';
var item={};
item.show='temp';
var exraData=['one','two','three'];
this.resulto = '<div class="avatarHeight">' +
'<div class="avatar">' + spanPic + '</div>' +
'<div class="info ' + company + '">' + item.show;
for(i=0;i<exraData.length;i++){
this.resulto +='<div class="tt-hint">' + exraData[i] + '</div>';
}
this.resulto+='</div>' + '</div>';
document.write(this.resulto);
I am using jQuery Mobile to display a table.
However when i append a new row using addMore button, the display is off! Why is it so? it is suppose to follow the first row. Ans also, it is displayed in black theme on my browser... but it is suppose to be white as in the fiddle. why?
Here is my fiddle: http://jsfiddle.net/BgxKW/1/
this is the code to add new row
var addmore = '<tr><td style="text-align: center">' + currentIndex + '</td>' +
'<td class="small">' +
'<div data-role="fieldcontain" class="ui-hide-label">' +
'<label for="number_' + currentIndex + '">Response Number</label>' +
'<input type="text" name="number_' + currentIndex + '" id="number_' + currentIndex + '" value="" placeholder="Response Number"/>' +
'</div></td><td>' +
'<div data-role="fieldcontain" class="ui-hide-label">' +
'<label for="label_' + currentIndex + '">Description</label>' +
'<input type="text" name="label_' + currentIndex + '" id="label_' + currentIndex + '" value="" placeholder="Description "/>' +
'</div></td></tr>';
Also, how can i remove the row?
You want to do $(".config").trigger("create"); at the final to resolve style problem.
Updated fiddle link is
http://jsfiddle.net/BgxKW/7/
$("#addMore").click(function () {
currentIndex = $(".config tr:last td:first").text()
if(currentIndex == ""){currentIndex = 0}
currentIndex = parseInt(currentIndex) + 1
var addmore = '<tr><td style="text-align: center">' + currentIndex + '</td>' +
'<td class="small">' +
'<div data-role="fieldcontain" class="ui-hide-label">' +
'<label for="number_' + currentIndex + '">Response Number</label>' +
'<input type="text" name="number_' + currentIndex + '" id="number_' + currentIndex + '" value="" placeholder="Response Number"/>' +
'</div></td><td>' +
'<div data-role="fieldcontain" class="ui-hide-label">' +
'<label for="label_' + currentIndex + '">Description</label>' +
'<input type="text" name="label_' + currentIndex + '" id="label_' + currentIndex + '" value="" placeholder="Description "/>' +
'</div></td></tr>';
++currentIndex;
$('#labels .config tr:last').after(addmore);
$(".config").trigger("create");
});
$("#remove").click(function(){
$(".config tr:last").remove();
});
Note: I fixed the style problem and remove function.