I have a program that has multiple dropdown menus and I am running it as a chrome unpacked extension but I cannot get any of the dropdown menus to save after I reopen the app. How can I achieve this? I have already attempted some solutions but they have not worked. The dropdowns are in a table format.(Note: This is not all of my code but to make it more simple I only included two of my dropdowns). Thanks!
<!-- <head>
<link rel="stylesheet" href="styles.css">
<script src="java.js"></script>
</head> -->
<body>
<div class="imgcontainer">
<img src="images.jpeg" alt="Avatar" class="image">
</div>
<table id="t01">
<tr>
<th>Name</th>
<th>ID</th>
<th>In Use</th>
<th>Quantity</th>
<th>Connected to...
*Based on OUTPUT*</th>
<th>Comment</th>
</tr>
<tr><td id="master01">1/4 Inch Audio Cables</td>
<td>1-2</td>
<td>--</td>
<td>2</td>
<td><select align="center" id="master01dropdown">
<option value="option01">option01</option>
<option value="option02">option02</option>
<option value="option03">option03</option>
<option value="option04">option04</option>
<option value="option05">option05</option>
<option value="option06">option06</option>
<option value="Null">Null</option>
<option value="Not Defined">Not Defined</option>
<option value="Not in Use">Not in Use</option>
</select></td>
<td></td>
</tr>
<tr><td align="center" id="cable01">6 feet</td>
<td>1</td>
<td><input align="center" checked type="checkbox" name="void" value="In use"><br></td>
<td>1</td>
<td><select id="cable01dropdown">
<option value="option01">option01</option>
<option value="option03">option02</option>
<option value="option03">option03</option>
<option value="option04">option04</option>
<option value="option06">option05</option>
<option value="option07">option06</option>
<option value="Null">Null</option>
<option value="Not Defined">Not Defined</option>
<option value="Not in Use">Not in Use</option>
</select></td>
<td></td>
I added the suggested code and it still will not work. *Note: I am not very good with JavaScript.*
chrome.storage.sync.set({ items: 'master01,cable01,cable02'});
chrome.storage.sync.get('items', function(data) {
var items = data.items.split(',');
items[0] => (master01)
items[1] => (cable01)
items[2] => (cable02)
});
Store items in chrome storage:
Suppose you save comma separated items
chrome.storage.sync.set({ items: 'item1,item2,item3,item4'});
fetch it using:
chrome.storage.sync.get('items', function(data) {
var items = data.items.split(',');
// items[0] => item1
// items[1] => item2
});
I'll detail how to save and load an example options menu, containing a textbox and a checkbox. In your example, you'll want to use document.getElementById('master01dropdown').value in your save.
Setting up
First, create a file options.html in the root of the project, containing your form.
Next, make sure this options page is registered in your manifest.json:
"options_ui": {
"page": "options.html",
"chrome_style": true
}
At the bottom of your options.html, before </body>, include a JavaScript file:
<script src="js/options.js"></script>
Your form should also include a Save button somewhere with id save:
<button id="save">Save</button>
Saving
Inside your /js/options.js file, register the save() function to run when your save button is clicked:
document.getElementById('save').addEventListener('click', save);
Your save() function should use Chrome Storage to save every element from your form. For example, to save a textbox and a tickbox:
function save() {
var sitesToSave = document.getElementById('sites').value;
var displayPopup = document.getElementById('popup').checked;
chrome.storage.sync.set({
sites: sitesToSave,
popup: displayPopup
}, displaySavedMessage);
}
Loading
Inside your /js/options.js file again, register the load() function when your form is loaded:
document.addEventListener('DOMContentLoaded', load);
Now set those form fields from earlier with the saved values (and provide default values), again using Chrome Storage:
function load() {
chrome.storage.sync.get({
sites: 'supersecretsite.com',
popup: false
}, function(items) {
document.getElementById('sites').value = items.sites;
document.getElementById('popup').checked = items.popup;
});
}
Done! Settings can now be saved and loaded.
All code in this answer is from a very simple example Chrome Extension I made, which also has an accompanying detailed tutorial.
Related
I have a form input field loaded by jquery based on user selection but the HTML form validation and even jquery form validation not working for the input field loaded by jquery.
<tr>
<td colspan="2">
<select name="usdtnetwork" required="required" id="usdtnetwork" onChange="getaddressForm()" title="Please select your USDT Network">
<option>::: Choose your USDT Network :::</option>
<option value="ERC20">ERC20 (ETH)</option>
<option value="TRC20">TRC20 (TRON)</option>
<option value="BEP20">BEP20 (BNB)</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<div align="left">
<span id="showinputfield"></span>
</div>
</td>
</tr>
This is my jquery (Noticed I tried e.preventDefault() but can't figure what am doing wrong so I commented it out)
<script>
/*$('.thisbuyUSDT').click(function (e) {
var myForm = jQuery( "#catalog_formusdt" );
// html 5 is doing the form validation for us,
// so no need here (but backend will need to still for security)
if ( ! myForm[0].checkValidity() )
{
// bonk! failed to validate, so return true which lets the
// browser show native validation messages to the user
return true;
}
e.preventDefault(); */
function getaddressForm() {
//e.preventDefault();
$("#loaderIcon").show();
jQuery.ajax({
url: "usdt_form_field.php",
data:'usdtnetwork='+$("#usdtnetwork").val(),
type: "POST",
success:function(data){
$("#showinputfield").html(data);
$("#loaderIcon").hide();
},
error:function (){}
});
}
//}
</script>
you have to reset validation on form after add some element (after $("#showinputfield").html(data);) by :
myForm.removeData("validator").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse(myForm );
if it doesn't work please share complete html and jquery code
I have the following HTML/Twig structure
<select name="herstellerSelect" class="categoryElement" id="herstellerDropdown" style="display: block;">
<option class="preselect" value="" style="display: block;">Hersteller wählen</option>
{{ _self.cpitems0(categories.categories, categories.categories_info, parts, oop_display, oop_opened) }}
</select>
The Twig macro "cpitems0" generates elements for the
This is the jQuery Code that should, amongst other things, output a text to the console once children (<option> elements of the <select>) are clicked.
$(document).ready(function() {
console.log('CATEGORY SELECTOR TEST');
$("#herstellerDropdown").children().click(function(e) {
e.preventDefault();
console.log('CATEGORY SELECTOR TEST 2');
...
I have also tried
$(document).ready(function() {
console.log('CATEGORY SELECTOR TEST');
$("#herstellerDropdown").on('click', '> *', function(e) {
e.preventDefault();
console.log('CATEGORY SELECTOR TEST 2');
...
Only Firefox (private mode and cleared browser cache) displays the second console.log output, all the other tested Browsers (Brave, Chromium, Opera Developer in private mode with cleared Browser cache on Ubuntu 20.4) only display the first console.log output
Does anyone know why this happens?
Upate 14.10.2021 14:20 -> I have to use $("#herstellerDropdown").on("change" ... ) instead of .$("#herstellerDropdown").click because it's a element.
Generally, I have to use "AJAX Cascading Dropdowns" for what should be realized. I thought I could avoid AJAX and load the server generated content into the DOM and copy the respective elements with $("selectElement").html( elements) but I guess that results in poor performance and bad design so I have to go with the Cascading Dropdowns!
Use on("change" instead of click
Options do not need ID
Why display:block?
Why preventDefault() ?
This works in Chrom(e/ium) and Fx
$(function() {
$("#herstellerDropdown").on("change", function(e) {
console.log(this.value)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="herstellerSelect" class="categoryElement" id="herstellerDropdown">
<option class="preselect" value="" style="display: block;">Hersteller wählen</option>
<option data-val-one="Key0" data-val-two="" data-val-three="" value="entry0">categories_info[keyZero].elementid 0</option>
<option data-val-one="Key1" data-val-two="" data-val-three="" value="entry1">categories_info[keyZero].elementid 1</option>
<option data-val-one="Key2" data-val-two="" data-val-three="" value="entry2">categories_info[keyZero].elementid 2</option>
</select>
Not sure what I am doing wrong here but the on change function is not hitting for some reason. I hope someone here can point me in the right direction.
I have a view that has some bootstrap tabs, inside one of those tabs I have a dropdown list. What I want to happen is, when the user selects a year, it make an ajax call to controller, gets the json data and populates a table with the data. Here is my code:
In the View:
<div id="StatementsTab" class="tab-pane fade">
<div class="text-left dash-left-padding dash-right-col-content-billing">
<select class="form-control edi-blue" id="ddlStatements">
<option value="0">VIEW STATEMENTS</option>
<option value="#DateTime.Now.Year">#DateTime.Now.Year STATEMENTS</option>
<option value="#DateTime.Now.AddYears(-1).Year">#DateTime.Now.AddYears(-1).Year STATEMENTS</option>
<option value="#DateTime.Now.AddYears(-2).Year">#DateTime.Now.AddYears(-2).Year STATEMENTS</option>
<option value="#DateTime.Now.AddYears(-3).Year">#DateTime.Now.AddYears(-3).Year STATEMENTS</option>
<option value="#DateTime.Now.AddYears(-4).Year">#DateTime.Now.AddYears(-4).Year STATEMENTS</option>
<option value="#DateTime.Now.AddYears(-5).Year">#DateTime.Now.AddYears(-5).Year STATEMENTS</option>
</select>
<br />
<table id="statementtbl">
<tr>
<td></td>
</tr>
</table>
and the jquery:
$("#ddlStatements").change(function () {
console.log("change function yes");
var yr = $("#ddlStatements").val();
if (yr > 0){
$.ajax({
//var url = '../LabOrder/DeletePatientNoteAttachment?PatientNotes=' + JSON.stringify(yr);
url: '..Members/GetStatements',
data: 'Year=' + yr, // Send value of the drop down change of option
dataType: 'json', // Choosing a JSON datatype
success: function (data) {
console.log("success");
// Variable data contains the data you get from the action method
},
error: function (ex) {
console.log(ex);
}
});
}
});
I am not sure why but the console log is not being hit. Please help...
Currently developing a new website and looking to use jQuery's load() function to load content from different html pages into my main page.
load() works fine. Here's my current code.
Main.html page in which content is loaded:
<div id="answer"></div>
Javascript with the load() function:
$(document).ready(function() {
$("#answer").load( "game1content.html #p1Answer");
game1content.html content to load:
<div id="p1Answer">
<p>Some text</p>
<form id="answer1Form">
<select name="answer1" id="answer1">
<option value=""></option>
<option value="1">Website 1</option>
<option value="2">Website 2</option>
<option value="3">Website 3</option>
<option value="4">Website 4</option>
</select>
<button id="submitButton">SUBMIT</button>
</form>
</div>
So it loads html correctly into the answer div. Perfect.
Now the challenge is that when I submit the form that's loaded, it refreshes the page. When I have the game1content content in the main.html file, instead of using the load() it doesn't reload and works fine. But if I use the load() function, it does reload and also changes the url.
Here's my function on submit:
$( "#answer1Form" ).submit(function(e) {
e.preventDefault();
console.log ("clicked");
});
I've tried Googling this issue, but can't find much. Also, tried changing .submit to onclick etc, but same result. Any ideas?
That's because when you call .load, it fetch the page content and adds DOM elements but not bind them to events, so the form behave like it should, refresh the page.
In order to prevent the form from refreshing you should listen to .submit() exactly like you do in game1content.html after the DOM elements are added.
Like this:
$("#answer").load( "game1content.html #p1Answer", function() {
$( "#answer1Form" ).submit(function(e) {
e.preventDefault();
console.log("clicked");
});
});
I am trying to have a list box populate based on the selection from another list box. It works fine on a simple html/js page loaded on an Apache server, but when I try to put it into html services in Google App Script, only the first list box appears: Nothing happens in the second box. I feel I am missing some basic concept in GAS.
In code.gs I have:
function hardCode() {
var html = HtmlService.createHtmlOutputFromFile('hardcode.html')
.setWidth(600).setHeight(425);
SpreadsheetApp.getUi().showModalDialog(html, 'Why doesn't this work');
}
Then on the html side I have:
<form name="classic">
<select name="countries" size="4" onChange="updatecities(this.selectedIndex)" style="width: 150px">
<option selected>Select A City</option>
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
</select>
<select name="cities" size="4" style="width: 150px" onClick="alert(this.options[this.options.selectedIndex].value)">
</select>
</form>
<script type="text/javascript">
var countrieslist=document.classic.countries
var citieslist=document.classic.cities
var cities=new Array()
cities[0]=""
cities[1]=["New York|newyorkvalue", "Los Angeles|loangelesvalue", "Chicago|chicagovalue", "Houston|houstonvalue", "Austin|austinvalue"]
cities[2]=["Vancouver|vancouvervalue", "Tonronto|torontovalue", "Montreal|montrealvalue", "Calgary|calgaryvalue"]
cities[3]=["London|londonvalue", "Glasgow|glasgowsvalue", "Manchester|manchestervalue", "Edinburgh|edinburghvalue",
"Birmingham|birminghamvalue"]
function updatecities(selectedcitygroup){
citieslist.options.length=0
if (selectedcitygroup>0){
for (i=0; i<cities[selectedcitygroup].length; i++)
citieslist.options[citieslist.options.length]=new Option(cities[selectedcitygroup][i].split("|")[0],
cities[selectedcitygroup][i].split("|")[1])
}
}
</script>
The standard mode that HtmlService is either NATIVE or EMULATED (the latter being triggered by older browsers). Each brings with it security pre-parsing using Caja which can break certain functionality.
If you change the sandbox to IFRAME it should allow your code to function.
function hardCode() {
var html = HtmlService.createHtmlOutputFromFile('hardcode.html')
.setWidth(600).setHeight(425)
.setSandboxMode(HtmlService.SandboxMode.IFRAME); // ADD THIS LINE
SpreadsheetApp.getUi().showModalDialog(html, 'Why doesn't this work');
}
Caveat
Bear in mind that the IFRAME sandbox mode while it brings greater functionality, its scope of supported browsers is lower.
There is every likelihood that support for that mode will be expanded over time.