Develop Reference

Use Single Button to select Multi option and Update or Insert On Ms Sql Server

Multi select option list image
I Use a multi select option list and create a save button. write a query like that is INSERT and UPDATE same action occur on single save button.My sql query like this below,
UPDATE Demo
SET ApprovalPathName=#ApprovalPathName,
LevelID=#LevelID
WHERE ProjectID=#ProjectID
and Ordering=#Ordering
IF ##ROWCOUNT = 0
insert into Demo(ApprovalPathName,LevelID,Ordering,ProjectID)
VALUES(#ApprovalPathName,#LevelID,#Ordering,#ProjectID)
As the picture, 3 data insert on my Demo table like this,
Database demo table image
The problem I faced an example like that from selected multi option list if i deleted or unselect or remove the last value and save it to database then upper selected 2 value updated but last value which one i remove on frontend and previously store in on DB not deleted.
So, i want to write a query like that "only selected value updated if which one not used also remove from frontend multi select option but previously its inserted , it's will deleted"
Here is FrontEnd code with script
function fab_editgrppath() {
setTimeout(function () {
for (var i = 0; i < pathnameval.length; i++) {
//var fab_pathname = pathname;
//var path_name = fab_pathname[i];
var fab_pathnameval = pathnameval;
var LevelID = fab_pathnameval[i];
ordering = i + 1;
var obj = new Object();
obj.LevelID = LevelID;
obj.ordering = ordering;
obj.ProjectID = $('#projectid').val();
obj.ApprovalPathName = fabapprovalpathname;
obj.Mode = 'FABPATHEDITGRPLEVEL';
var DBSP = new DB_SP_CONNECT();
DBSP.ProcedureName = "POMS_POApprovalLevelProc";
DBSP.obj = obj;
DBSP.isasync = false;
var o = DBSP.call_DB_Procedure();
o = o.data;
notify('Saved successfully.', 'GREEN');
}
fabricationpathlevelset();
}, 200);
}
<div class="sm-3"><div class="form-group"><div class="row"><label for="selectTo">Selected</label></div><div class="row"><select name="selectTo" id="selectTo" size="5" class="form-control input-medium" multiple="multiple">#Html.Raw(ViewData["GetSelectedGrpOnFabPath"])</select></div></div></div><button type="button" class="btn btn-default w-100" onclick="fab_editgrppath();">Save</button>

Updating listbox selected index

I have a google script which reads and writes between a google spreadsheet and a google form. It's basically a form to access a materials database.
When first accessing the form, it shows all the fields blank, a populated 'selector' listbox of material id's (CW_ID) and an option for "New" part in the selector listbox. If user stays on "New", the fields stay blank for user to populate them manually and appends it as a new item in the database. If user scrolls through the 'selector' listbox and selects a CW_ID, it will pull from the spreadsheet and populate the fields with data corresponding to the selected CW_ID, for the user to then edit (modify a detail about a part).
Because I am using a SQL structure for my database, I have a couple linked tables:
materials table (which holds most information about the part, including an ID for manufacturer [manufacturer_ID])
manufacturers table (which is linked to the materials.manufacturer_ID)
Right now, the form only uses the materials sheet to populate the fields, so in the field for 'manufacturer', it only shows the ID number. For user purposes, I want the script to check the manufacturer_ID shown in the materials sheet, go into manufacturers sheet, find a match and have the manufacturers listbox show it as the currently selected index. (Or just have the name of the manufacturer show up in the field)
This is part of my script so far:
(Scroll to bottom for "//****THIS IS THE PART I'M WORKING ON")
function doGet() {
var ss = SpreadsheetApp.openByUrl("https://docs.google.com/something")
var materialsSheet = ss.getSheetByName('materials');
var manufacturersSheet = ss.getSheetByName('manufacturers');
var vendorsSheet = ss.getSheetByName('vendors');
var usersSheet = ss.getSheetByName('users');
var projectApp = UiApp.createApplication();
projectApp.setTitle("Materials Form");
var activeEmail = Session.getActiveUser().getEmail();
//I create the vertical panel.
var panel = projectApp.createVerticalPanel().setId('face');
//Here is where I actually create the drop down menu, and assign the function "goSelection" to be activated whenever a selection is made.
var selector = projectApp.createListBox(true);
selector.setName('selectionBox').setId('selectionBox').addItem('New');
var materialsData = materialsSheet.getDataRange().getValues();
//do until row is less than length of
for (var i=0; i < materialsData.length; i++){
if (materialsData [i][1] == "Email"){
//if row in Column B does not equal gmail, skip to i++
continue;
}
//add Column C (CW_ID) of current row to the selector list
selector.addItem(materialsData [i][2]);
}
selector.setSelectedIndex(0);
var selectHandler = projectApp.createServerHandler('goSelection');
selectHandler.addCallbackElement(panel);
selector.addChangeHandler(selectHandler);
//Here is where I create the drop down menu to show list of manufacturers from manufacturers sheet
var manufSelectorLabel = projectApp.createHTML("<br><b>Manufacturer</b><br>").setWidth('100%');
var manufSelector = projectApp.createListBox(true);
manufSelector.setName('manufSelectionBox').setId('manufSelectionBox').addItem('New');
var manufacturersData = manufacturersSheet.getDataRange().getValues();
//do until row is less than length of
for (var i=0; i < manufacturersData.length; i++){
if (manufacturersData [i][1] == "Email"){
//if row in Column B does not equal gmail, skip to i++
continue;
}
//add Column C (Manufacturers) of current row to the selector list
manufSelector.addItem(manufacturersData [i][3]);
}
manufSelector.setSelectedIndex(0);
var manufSelected = manufSelector.SelectedItem;'
//**I am unsure whether this should have it's own function
//var manufSelectHandler = projectApp.createServerChangeHandler('goManuf');
//manufSelectHandler.addCallbackElement(panel);
//manufSelector.addChangeHandler(manufSelectHandler);
var gmailLabel = projectApp.createHTML("<br><b>Gmail:</b><br>").setWidth('100%');
var gmailField = projectApp.createTextArea().setSize('100%', '25px');
gmailField.setName('gmailArea').setId('gmailArea');
gmailField.setText(activeEmail);
var savedLabel = projectApp.createLabel('Thank you for your submission.');
savedLabel.setVisible(false).setId('sLabel');
//At this point, I'm actually declaring the variables for all the fields and text for the actual form.
var selectorLabel = projectApp.createHTML("<br><b>Select CW_ID from list.</b>").setId('selectLabel');
var descriptionLabel = projectApp.createHTML("<br><b>Description</b><br>").setWidth('100%');
var descriptionField = projectApp.createTextArea().setSize('100%', '100px');
descriptionField.setName('descriptionArea').setId('descriptionArea');
var manufacturerLabel = projectApp.createHTML("<br><b>Manufacturer</b></br>").setWidth('100%');
var manufacturerField = projectApp.createTextArea().setSize('100%x', '25px');
manufacturerField.setName('manufacturerArea').setId('manufacturerArea');
var manufacturerListLabel = projectApp.createHTML("<br><b>ManufacturerList</b></br>").setWidth('100%');
var manufacturerListField = projectApp.createTextArea().setSize('100%x', '25px');
manufacturerListField.setName('manufacturerListArea').setId('manufacturerListArea');
var modelnumberLabel = projectApp.createHTML("<br><b>Model Number</b><br>").setWidth('100%');
var modelnumberField = projectApp.createTextArea().setSize('100%', '25px');
modelnumberField.setName('modelnumberArea').setId('modelnumberArea');
//Next, i create the save button and assign the function "saved" to be activated whenever the button is pressed.
var saveButton = projectApp.createButton('Save');
var saveHandler = projectApp.createServerHandler('saved');
saveHandler.addCallbackElement(panel);
saveButton.addClickHandler(saveHandler);
//Now that all the componentes of the form have been declared and set up, I'm going to assemble them on the panel.
panel.setSpacing(6);
panel.add(nameLabel);
panel.add(nameField);
panel.add(gmailLabel);
panel.add(gmailField);
panel.add(selectorLabel);
panel.add(selector);
panel.add(descriptionLabel);
panel.add(descriptionField);
panel.add(manufSelectorLabel);
panel.add(manufSelector);
panel.add(manufacturerLabel);
panel.add(manufacturerField);
panel.add(modelnumberLabel);
panel.add(modelnumberField);
panel.add(saveButton);
panel.add(savedLabel);
projectApp.add(panel);
return projectApp;
}
//This function looks to see what has been selected in the drop down menu, and then pulls the appropriate data from the spreadsheet to display in the fields.
function goSelection(e){
var activeEmail = Session.getActiveUser().getEmail();
var app = UiApp.getActiveApplication();
var gmailField = app.getElementById('gmailArea');
var nameField = app.getElementById('nameArea');
var chosen = e.parameter.selectionBox;
var ss = SpreadsheetApp.openByUrl("https://docs.google.com/something")
var materialsSheet = ss.getSheetByName('materials');
var manufacturersSheet = ss.getSheetByName('manufacturers');
var vendorsSheet = ss.getSheetByName('vendors');
var materialsData = materialsSheet.getDataRange().getValues();
var manufacturersData = manufacturersSheet.getDataRange().getValues();
var vendorsData = vendorsSheet.getDataRange().getValues();
var panel = app.getElementById('face');
var standardpartField = app.getElementById('standardpartArea');
var descriptionField = app.getElementById('descriptionArea');
var manufacturerField = app.getElementById('manufacturerArea');
var manufacturerListField = app.getElementById('manufSelectionBox');
var modelnumberField = app.getElementById('modelnumberArea');
if (chosen != 'New') {
for (var i=1; i < materialsData.length; i++){
if (materialsData [i][1] == "Email"){
//if row in Column B does not equal gmail, skip to i++
continue;
}
if (materialsData [i][2] != chosen){
continue;
}
nameField.setText(materialsData [i][0]);
gmailField.setText(materialsData [i][1]);
standardpartField.setText(materialsData [i][3]);
descriptionField.setText(materialsData [i][4]);
//****THIS IS THE PART I'M WORKING ON
//set manufacturerField to manufacturer of current row
//loop through manufacturer sheet until row matches with manufacturersField
//when a match is found, selector box index to same row
manufacturerField.setText(materialsData [i][5]);
for (var i=1; i < manufacturersData.length; i++){
if (manufacturersData [i][1] == "Email"){
//if row in Column B does not equal Email, skip to i++
continue;
}
if (manufacturersData [i][2] != manufacturerField){
continue;
}
manufacturerListField.setSelectedIndex(i);
}
modelnumberField.setText(materialsData [i][6]);
}
}
This makes sense to me, but it doesn't work. I click on a part in the selector listbox, and all the info populates into the fields, as I want it to. However, the manufacturer listbox does not jump to the proper manufacturer (as populated in the manufacturer field), it just sits there and stays as is.
(See image to get an idea of what the form looks like)
http://oi61.tinypic.com/6h6tqp.jpg
Manufacturer listbox and field show up, but right now, only the manufacturer field changes to show the data when a part is selected)
Any help would be GREATLY appreciated! :)

Here is some HTML that can get you started with the HTML Service:
Input Form HTML
<div>
<div>
Name:
<select>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
</select>
</div>
<br/>
<div>
Gmail:
<select>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
</select>
</div>
<br/>
<div>Select_CW_ID_From List:</div>
<select name="CW_ID" multiple>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
</select>
</div>
<br/>
<div>Standard Part</div>
<input type="text"/>
<br/>
<br/>
<div>Description</div>
<textarea rows="4" cols="50" name="comment" form="usrform">
Enter text here...</textarea>
</div>
<script>
function onSuccess(argReturnValue) {
alert('was successful ' + argReturnValue);
}
google.script.run.withSuccessHandler(onSuccess)
.nameOfFunctionInGS_File();
</script>
Download Notepad++: Notepad plus plus
And design your HTML in that. Then create an HTML file in your Apps Script project.
Your doGet() should just have the code that serves the HTML.
Code.gs
function doGet() {
return HtmlService.createTemplateFromFile('myHTML_File_Name_Here')
.evaluate() // evaluate MUST come before setting the NATIVE mode
.setTitle('Materials Form')
.setSandboxMode(HtmlService.SandboxMode.NATIVE);
};
Create another .gs file for dealing with the data. That's where all your code for writing data to the spreadsheet will go.
If you need to populate select boxes, you can do that with JavaScript in a script tag of the HTML.
With what I've given you, you should be able to create a Stand Alone Apps Script HTML Service app. Publish it, and run it. You probably did that with your current project.

How do I set dropdown option selected by looking at MVC URL

Hello and thank you for making stackoverflow such a great resource for learning programmers like me. I've been reading lots of answers on here to help with my first MVC project, this is my first time asking.
Here is my dropdown HTML
<div class="dropdown">
<select id="assetSelect" onchange="location = this.options[this.selectedIndex].value;">
<option value="/History/Index/All">All Assets</option>
#foreach (var item in Model.NodeInfo)
{
<option value="/History/Index/#item.node.name">#item.node.name</option>
}
</select>
</div>
Once an item is selected from the dropdown, the url will look like this
http://web.site/History/Index/G0000106
Now I'm trying to grab that last part of the URL (in this case G0000106) and set the corresponding dropdown option to selected. Here is the javascript I have pieced together so far but it's not working.
$('#assetSelect').find('option').each(function () {
function getCurrentPageId() {
var params = window.location.href.split('/');
var i = params.length;
var pageId = params[i];
return pageId;
}
var currentPageId = getCurrentPageId();
var $this = $(this);
if ($this.text() == currentPageId) {
$this.attr('selected', 'selected');
return false;
}
});
Will this function work with the one that populates the dropdown list? Is this the best way or is there an HTML helper that can do it? Any help is appreciated, thanks!

Option 1. You can simplify your code significantly:
function getCurrentPageId() {
var params = window.location.href.split('/');
return params[params.length - 1];
}
var pageId = getCurrentPageId();
$('#assetSelect').find('option:contains(' + pageId + ')').prop('selected', true);
Anyway, your problem was in this line:
var i = params.length;
var pageId = params[i];
It should be params[i - 1], since you want to get the last array element.
Option 2. An even simpler approach which should also work for you is to use location.pathname:
$('#assetSelect').val(window.location.pathname);

How can I generate a list of links based on dropdown menu choices?

So I've got a bunch of information for a bunch of different countries, and I'm trying to get it sorted like so:
Dropdown menu to choose a country -> Dropdown menu to choose information type -> here's a link to that information
I'm not so great with javascript, but I found this solution that allows me to change the content of the second dropdown based on the selection chosen from the first dropdown:
<script type="text/javascript">
function configureDropDownLists(ddl1, ddl2) {
var albania = new Array('History', 'Legal Guides');
var andorra = new Array('Country Overview', 'Demographics', 'Legal Guides');
switch (ddl1.value) {
case 'Albania':
document.getElementById(ddl2).options.length = 0;
for (i = 0; i < albania.length; i++) {
createOption(document.getElementById(ddl2), albania[i], albania[i]);
}
break;
case 'Andorra':
document.getElementById(ddl2).options.length = 0;
for (i = 0; i < andorra.length; i++) {
createOption(document.getElementById(ddl2), andorra[i], andorra[i]);
}
break;
}
}
function createOption(ddl, text, value) {
var opt = document.createElement('option');
opt.value = value;
opt.text = text;
ddl.options.add(opt);
}
</script>
And then the dropdown boxes, in the HTML:
<select id="ddl" onchange="configureDropDownLists(this,'ddl2')">
<option value=""></option>
<option value="Albania">Albania</option>
<option value="Andorra">Andorra</option>
</select>
<select id="ddl2">
</select>
So now I'm wondering how I can take that secondary choice and use it to generate a list of links for someone to choose from--say, within a new paragraph of text or something.
First time asking a question here, sorry if confusing.

First add somewhere this link list could go.
I'd put it in a unordered list (<ul></ul>). But you could just as well put it in a paragraph or a div.
I assume you know about objects and the for / in loop.
If not, this should help you get it:
https://javascriptweblog.wordpress.com/2011/01/04/exploring-javascript-for-in-loops/
Here is the code I made for you. I have commented it along the way.
Just ask if something is unclear :)
Albania
Andorra
<select id="ddl2" onchange="configureDropDownLists('ddl2')">
</select>
<ul id='linkList'></ul>
<script type="text/javascript">
function configureDropDownLists(ddlBeingChanged) {
var ddl = document.getElementById('ddlBeingChanged');
var ddl1ChosenValue=document.getElementById('ddl1').value;
var linkLists = {
albania: {
"history": ['http://albania.example.com/history', 'http://albania.example.com/historyTwo'],
"legal guides": ['http://albania.example.com/guide', 'http://albania.example.com/guideTwo'],
},
andorra: {
"country overview": ['http://andorra.example.com/country', 'http://andorra.example.com/overview'],
"demographics": ['http://andorra.example.com/demographics', 'http://andorra.example.com/demographicsTwo'],
"legal guides": ['http://andorra.example.com/guide', 'http://andorra.example.com/guideTwo'],
}
};
if (ddlBeingChanged == "ddl1") {
console.log(ddl1ChosenValue);
for (var ddl2 in linkLists[ddl1ChosenValue]){
console.log(ddl2);
// Here the ddl2 variable will contain the first level of the object 'linkLists'. I.E. the country names.
createOption(document.getElementById('ddl2'), ddl2, ddl2);
}
} else if (ddlBeingChanged == "ddl2") {
var ddl2ChosenValue=document.getElementById('ddl2').value;
var linkArray=linkLists[ddl1ChosenValue][ddl2ChosenValue];
// The linkArray:
// Let's say someone chose andorra and demographics
// then linkLists[ddl1ChosenValue][ddl2ChosenValue] would be equivalent to linkLists.andorra.demographics
var linkListHTML="";
for (var i in linkArray){
var URL=linkArray[i];
linkListHTML+="<li><a href='"+URL+"'>"+URL+"</a></li>";
}
document.getElementById('linkList').innerHTML=linkListHTML;
}
}
function createOption(ddl, text, value) {
var opt = document.createElement('option');
opt.value = value;
opt.text = text;
ddl.options.add(opt);
}
</script>
Edit: Fixed code bugs

javascript code doesn't work in IE8

i have two drop-down menus. On the selection of one menu the value of other changes. But in IE it doesn't work and my drop-down appears empty. here is my code
<div style="position:absolute; bottom:95px; right:631px;">
<select id='Country' name='Country' style="width: 148px;background-color:white;">
<option selected='selected'>All Countries</option>
<option>Australia</option>
<option>Cambodia</option>
<option>China</option>
<option>India</option>
<option>Indonesia</option>
<option>Hong Kong</option>
</select>
<select id='Airport' name='Airport' style="width: 148px;background-color:white;"></select>
</div>
JavaScript code
<script type="text/javascript">
(function(){
var bOptions = {"All Countries":["All Airports"], "Australia":["Sydney","Brisbane","Melbourne","Perth"], "Cambodia":["Phnom Penh"], "China":["Beijing","Guangzhou","Hangzhou","Kunmimg","Shanghai Pudong","Shanghai Hongqiao"],
"India":["Bangalore","Mumbai","Delhi"],"Indonesia":["Jakarta","Bali"],"Hong Kong":["Hong Kong"],"Japan":["Osaka","Narita","Haneda"],"Korea":["Seoul Gimpo","Seoul Incheon"],
"Macau":["Macau"],"Malaysia":["Kuala Lumpur"],"New Zealand":["Auckland"],"Philippines":["Manila"],"Singapore":["Singapore"],"Taiwan":["Taipei","Kaohsiung","Songshan"],"Thailand":["Bangkok","Phuket"],
"Vietnam":["Hanoi","Ho Chi Minh City"]};
var A = document.getElementById('Country');
var B = document.getElementById('Airport');
//on change is a good event for this because you are guarenteed the value is different
A.onchange = function(){
//clear out B
B.length = 0;
//get the selected value from A
var _val = this.options[this.selectedIndex].value;
//loop through bOption at the selected value
for ( var i in bOptions[_val]){
//create option tag
var op = document.createElement('option');
//set its value
op.value = bOptions[_val][i];
//set the display label
op.text = bOptions[_val][i];
//append it to B
B.appendChild(op);
}
};
//fire this to update B on load
A.onchange();
})();
</script>
anyone help?

Try to use op.innerText = bOptions[_val][i]; for old versions of IE because it doesn't supports op.text
Change your code like,
if(IE8)// use user_agent to get browser version and browser type
{
op.innerText = bOptions[_val][i];
}
else
{
op.text = bOptions[_val][i];
}
Read browser compalibilty and innerText

Here is a link which will sove your problem : http://jehiah.cz/a/firing-javascript-events-properly