Adding many dropbox choosers with different extensions option does not work - javascript

I would like to put different choosers to one page with different extensions options. So I inserted a <div class="dropbox-chooser"></div> to the different positions in my site. Then I wrote the following function to my head(for testing):
window.onload = function() {
if (document.getElementsByClassName("dropbox-chooser")) {
for(var i = 0; i < document.getElementsByClassName("dropbox-chooser").length; i++){
if (i === 0) {
options.extensions = ['.zip','.exe','.rar','.7zip','.php','.html','.css','.js'];['.3gp','.3gpp','.3gpp2','.avi','.mov','.mp4','.wmv','.m4v','.mpg','.mkv','.mpeg','.vob','.flv','.mts','.m2t','.ts','.dv'];
button = Dropbox.createChooseButton(options);alert(options.toSource());
document.getElementsByClassName("dropbox-chooser")[i].appendChild(button);
}
if (i === 2) {
options.extensions = ['.3gp','.3gpp','.3gpp2','.avi','.mov','.mp4','.wmv','.m4v','.mpg','.mkv','.mpeg','.vob','.flv','.mts','.m2t','.ts','.dv'];
button = Dropbox.createChooseButton(options);alert(options.toSource());
document.getElementsByClassName("dropbox-chooser")[i].appendChild(button);
}
}
}
}
and the two choosers are rendered in the right place but when I click one of the chooser buttons, the extensions option is always the last one (.3gp...) although the options.toSource() function shows the right object content for every button.
Can you please help me?
Thanks a lot!
Dennis

I believe the Chooser doesn't look at the options object until the Chooser is actually opened.
You should just pass in a different object each time.
EDIT
Here's what I would suggest:
var choosers = document.getElementsByClassName('dropbox-chooser');
for (var i = 0; i < choosers.length; i++) {
var options = {
// ...
};
if (i === 0) {
options.extensions = ['.zip', '.exe' /* ... */];
} elif (i === 2) {
options.extensions = ['.3gp', '.3gpp' /* ... */];
}
choosers[i].appendChild(Dropbox.createChooseButton(options));
}

Related

Code Working in Console BUT NOT From Script

I have a script that I'm running to detect a line break in a flex-wrapped UL.
I have this javascript function at the top of my scripts.js file outside of the $(document).ready call.
var detectWrap = function(className) {
var wrappedItems = [];
var prevItem = {};
var currItem = {};
var items = document.getElementsByClassName(className);
for (var i = 0; i < items.length; i++) {
currItem = items[i].getBoundingClientRect();
if (prevItem && prevItem.top < currItem.top) {
wrappedItems.push(items[i]);
}
prevItem = currItem;
};
return wrappedItems;
}
Inside of a $(document).ready call, I have this:
$( ".menu-item-has-children" ).click(function() {
var wrappedItems = detectWrap('menu-item-object-practice-area');
for (var k = 0; k < wrappedItems.length; k++) {
wrappedItems[k].className = "wrapped";
}
});
If I load the page and click the "Practice Areas", I get nothing. If I open up the console and drop in the following it works fine:
var wrappedItems = detectWrap('menu-item-object-practice-area');
for (var k = 0; k < wrappedItems.length; k++) {
wrappedItems[k].className = "wrapped";
}
I'm assuming this has something to do with the timing and/or what is loaded up but I'm not adding content into the DOM...I'm just adding a class.
For reference, here is the site: https://myersbrierkelly.djykrmv8-liquidwebsites.com/
When you click the drop-down menu, two separate event handlers respond:
Yours, to measure for wrapped items
The library you're using, to toggle the display of the submenu
However, as there is nothing to manage the order of these, what ends up happening is that your wrap-detector runs before the submenu is shown, and if the submenu isn't shown yet then you can't measure getBoundingClientRect() since it doesn't exist. A simple console.log(currItem) would have revealed this.
If you can't guarantee the order of events (which may well be the case when using a library), then you should delay your code by a frame.
$(".menu-item-has-children").click(function() {
requestAnimationFrame(function() {
var wrappedItems...
});
});

Selecting a drop-down box option does not affect page

I'm trying to make an extension that selects facilitates filling out info on checkout page of a website (you'll probably have to add to cart before you can go to the checkout page). Currently I'm just setting the "selected" value of a certain option tag to be true, but it seems not to affect the page as intended. I'm talking about the Country and State selection on the checkout page (I want it to be Canada and BC). Would prefer vanilla Javascript
Here's my code:
var checkoutSelects = document.querySelectorAll("select:not([type=hidden])");
for(var i = 0; i < checkoutSelects.length; i++) {
if(checkoutSelects[i].getAttribute("id").toLowerCase().includes('country')) {
var countryOptions = checkoutSelects[i].querySelectorAll('option');
for(var a = 0; a < countryOptions.length; a++) {
if(countryOptions[a].value.toLowerCase().includes("canada")) {
countryOptions[a].selected = true;
}
}
}
}
Can you try countryOptions.selectedIndex = a;
instead of
countryOptions[a].selected = true;

Issues in setting cookies for store form input values in javascript

I took below code from online,
var myValues = [];
for(i=0;i<inputs.length;i++) {
validateEmail(inputs[i]);
myValues.push(inputs[i].value);
}
// Save them fot later use
localStorage.myValues = JSON.stringify(myValues);
// After clicking the button you can retrieve them back
var oldValues = JSON.parse(localStorage.myValues);
I created simple asp page,
Now, If i click the next after after enter some input value, it will go to next page, and again i click back, it doesn't show entered input values.
I need to show that values, may i know, how can i achieve this one thanks in advance.
Here is the worked jsfiddle
I need to add with my existing javascript code for achieving my need.
But i just confused, how to add code?
Can anyone help me? Thanks in advance.
On page load, you must add the following code:
var $inputs = $(".input");
var myValues = localStorage.getItem("myValues") ? JSON.parse( localStorage.getItem("myValues") ) : [];
for(var i = 0; i < myValues.length; i++) {
$inputs[i].value = myValues[i];
}
This will make sure that on page load, if any data is present in the localStorage it will be populated in the respective input fields.
Now when you click on next button:
$("#nextbutton").click(function () {
var myValues = [],
$inputs = $('.input');
for (i = 0; i < $inputs.length; i++) validateEmail($inputs[i]);
if ($('.invalid').length !== 0) return false;
for (i = 0; i < $inputs.length; i++) {
myValues.push($inputs[i].value)
}
localStorage.myValues = JSON.stringify(myValues);
});
This is used to store the data into the localStorage after validation.

How to dynamically check/uncheck html checkbox by JavaScript in asp.net

I know that several questions about this topic have been asked, but I was unable to find an answer for my case.
I have gridview. In that Checkbox.
Here, I want to do functionality like When I check on exp_id 1515001101 then others all exp_id 1515001101 get automatically check.
function checkUncheckHeaderCheckBoxforSubmit(obj)
{var checkboxCell;var expidCell;
var grid = document.getElementById("<%=grdViewLocalConvence.ClientID %>");
for (i = 1; i < grid.rows.length - 2; i++)
{ for (i = 1; i < grid.rows.length - 2; i++)
{ checkboxCell = grid.rows[i].cells[8];
expidCell = grid.rows[i].cells[0];
var exp_id = expidCell.innerText;
for (j = 0; j < checkboxCell.childNodes.length; j++)
{if (checkboxCell.childNodes[j].type == "checkbox")
{ if (checkboxCell.childNodes[j].checked == true)
{ var exp_id = expidCell.innerText;
GridVwHeaderChckbox.rows[i].cells[8].getElementsByTagName("INPUT")[0].checked =
exp_id.checked;
}}}}
Please help me.
Thanks.
try this
$(".checkboxid").change(function() {// the first checking checkbox
if(this.checked) {
$('.checkboxid').attr('checked', true);// here put change checkbox details that are checked automatically
}
});
If you want to fix the state of these check boxes remains same then best idea is save data to db and retrieve each time the page load happends

How can I select all elements with the same class name?

I have a Boolean variable. It is stored in a hidden input field. Basically, if the user is signed in, it is false, if not, it is true.
There are download buttons which will link to a file download. My aim is to make it so that, if they aren't signed in, the button will not show, and the link will not work (it would be nice to have an alert saying they need to sign in or something, but that would probably be more effort than it's worth).
I have a function that performs onload of body:
function hide_download_btns(){
if (document.getElementById('download_btn_var_input').value == "true") {
document.getElementsByClassName('project_download_btn').item(0).hidden = true
}
}
My problem is where it asks for the nth term .item(0). This is where it selects the div on which to perform the function, however, I want the function to affect all divs with the class name 'project_download_btn'.
I'm not a fan of jQuery, so it would be great to avoid that if possible.
You can simply loop through the elements instead of just taking the 0th.
var buttons = document.getElementsByClassName('project_download_btn');
for(var i=0; i< buttons.length; i++){
buttons[i].hidden = true;
}
if (document.getElementById('download_btn_var_input').value == "true") {
var el = document.getElementsByClassName('project_download_btn');
for (var i = 0; i < el.length; i++) {
el[i].hidden = true;
}
}
document.getElementsByClassName returns array so what you are interested is :
document.getElementsByClassName('project_download_btn')[0]
Loop through each div that contains your download button and set hidden to true:
if (document.getElementById('download_btn_var_input').value == "true") {
var button_divs_array = document.getElementsByClassName('project_download_btn');
for (var i = 0; i < button_divs_array.length; i++) {
button_divs_array[i].hidden = true;
}
}

Categories