I have an Html Form in a Wizard Wrapper with 2 for loops to display the model. Each time the "Next button" is clicked, I need to save the specific unit.
Here is a part of the form (it is huge so I didn't want to post more than is necessary):
#using (Html.BeginForm("SaveAssessmentUnitScores", "Management", FormMethod.Post, new { id = "SaveUnitScores" }))
{
#Html.HiddenFor(x => x.AttemptId)
#Html.HiddenFor(x => x.AssessorId)
#Html.HiddenFor(x => x.EmployeeCompanyId)
#Html.HiddenFor(x => x.RequirementId)
for (var i = 0; i < Model.Units.Count(); i++)
{
var block = Model.Units[i];
<div class="kt-wizard-v2__content" id="CurrentUnit" data-value="#block.UnitId" data-ktwizard-type="step-content" #(i == 0 ? "data-ktwizard-state='current'" : "")>
I need the "data-value" from the "CurrentUnit" div.
I tried using the wizard atrributes, then I tried putting an id on the div and using "getAttribute", neither works:
var form2 = $('#SaveUnitScores');
wizard = new KTWizard('kt_wizard_v2', options);
wizard.on('beforeNext', function (wizardObj) {
let sec = form2.find('[data-ktwizard-state="current"]');
let curPg = sec.attr("value");
var curUnit = form2.find('#CurrentUnit');
var unitId = curUnit.attr('data-value');
I do not receive any javascript errors but "unitId" and "curPage" are both empty strings. Any assistance is greatly appreciated.
Related
My code is not working as intended. Marked <<<<here<<<< inside the code, I would like page navigation to be directed to a previous page break. This works for each iteration of the loop except the final one, and I am not sure why. Evidence of my issue is evidenced in the image.
At this rate, I would need to run my program and then manually change the last page break in each iteration when I would like to do it automatically.
Any help would be appreciated.
function prepareForm() {
const ssId = 'https://docs.google.com/spreadsheets/d/1gE0G40JJkprjvYWoeTFQQ38v79XxKCkogrHhUoWpQzw/edit#gid=1768893473'
const ss = SpreadsheetApp.openByUrl(ssId)
const ws = ss.getSheetByName('Set-Up')
const title = 'Sign-Up '
const parentForm = FormApp.create(title)
//clearForm(parentForm)
const data = ws.getDataRange().getDisplayValues().slice(1)
//FORM DATA FROM SPREADSHEET
const yearGroups = data.map((row) => row[0]).filter((row) => row != '')
const days = data.map((row) => row[1]).filter((row) => row != '')
const clubChoices = data.map((row) => row[2]).filter((row) => row != '')
//blank arrays for choices to be pushed into
const yearChoices = [];
//CREATE FORM QUESTIONS
//Temporarily hold question variables throughout loop
let yearGroupSection = ''
let daySection = ''
let questionTwo = ''
let questionThree = ''
let confirmation = ''
const formDesc = data[0][4]
parentForm.setDescription(formDesc).setTitle(title)
//QUESTION ONE
const questionOne = parentForm.addListItem()
questionOne.setTitle('Select your child year');
//CREATE FINAL PERSONAL DETAILS SECTION OF THE FORM
const personalDetails = parentForm.addPageBreakItem().setTitle(`Parent Details`)
parentForm.addTextItem().setTitle('Name of child');
parentForm.addTextItem().setTitle('Name of person collecting your child');
parentForm.addTextItem().setTitle('Your contact number');
confirmation = parentForm.addListItem();
confirmation.setTitle('I understand that I will be charged for all booked days.')
confirmation.setChoices([
confirmation.createChoice('Yes',FormApp.PageNavigationType.SUBMIT),
confirmation.createChoice('No',FormApp.PageNavigationType.SUBMIT)
])
// LOOP THROUGH YEAR GROUPS AND DAYS
yearGroups.forEach((year)=> {
const dayChoices = [];
//CREATE YEAR GROUP SECTION
yearGroupSection = parentForm.addPageBreakItem().setTitle(`${year}`)
questionTwo = parentForm.addListItem()
questionTwo.setTitle('Which day would you like to choose?')
days.forEach((day)=> {
// CREATE DAY SECTION FOR EACH YEAR GROUP
daySection = parentForm.addPageBreakItem()
daySection.setTitle(`${year} | ${day}`)
//CREATE ITEM CHOICE AND PUSH TO ARRAY
dayChoices.push(questionTwo.createChoice(`${day}`,daySection))
questionThree = parentForm.addListItem().setTitle('Which club would you like your child to attend?')
questionThree.setChoiceValues(clubChoices)
daySection.setGoToPage(personalDetails) <<<<<<<HERE<<<<<<<<<<<<
})
//CREATE QUESTION TWO CHOICES
questionTwo.setChoices(dayChoices)
yearChoices.push(questionOne.createChoice(`${year}`, yearGroupSection))
})
questionOne.setChoices(yearChoices)
parentForm.addPageBreakItem().setTitle('Thank you').setGoToPage(FormApp.PageNavigationType.SUBMIT)
}
Tuesday in this picture is the final iteration of the inner most loop. The page navigation continues to the next section (see picture). I would like it to be directed towards a given section as implemented in the code (at the very top of the image). marked <<<<here<<<<<
I have multiple charts in my home page and I have a search box to filter them by chart name.
when I filter particular chart I can delete that chart while it's begin filtered and it disappear from UI but some reason the chart that I just deleted still appear in the home page with the rest of the other charts when I unfiltered/removed all the text in the search box.
It got deleted in the backend but the deleted chart is still appearing in the front end. Also for some reason I can still search it again the one that I just deleted but this time I can not delete it again since it throw 404.
It only disappear completely when I refresh the browser. Any suggestion on how I can make the chart to disappear even after I unfiltered in the search box.
HTML
//Imported this component to display a list of chart
<ng-container *ngFor="let chart of charts">
<mc-chart-list [chart]="chart" [wsType]="workspace.type" (removeFromList)="onRemoveFromList($event)"></mc-chart-list>
</ng-container>
//I use this searchbar to filter by the name of the chart
<input class="input" matInput name="query" [formControl]="query" placeholder="Filter Workspace">
TS
#Input() chart: Chart;
workspace: Workspace;
private death$: Subject<void> = new Subject();
query: FormControl = new FormControl();
charts: Chart[] = [];
searchText: string;
ngOnInit(): void {
this.activatedRoute.paramMap.pipe(takeUntil(this.death$)).subscribe((paramMap) => {
const guid = paramMap.get('guid');
if (guid) {
this.workspaceService.getWorkspace(guid, this.isPublished).subscribe(ws => {
this.workspace = ws;
}, () => this.loading = false);
}
})
//For search bar
this.query.valueChanges
.pipe(takeUntil(this.death$))
.subscribe((value: string) => {
this.search(value);
});
}
search(searchText: string){
// reset
searchText = searchText.toLowerCase();
if (!searchText || searchText.length == 0) {
this.charts = this.workspace.charts;
}
// search
else {
this.charts = this.charts.filter(chart => chart.name.toLowerCase().indexOf(searchText) >= 0);
}
}
onRemoveFromList(id: number) {
const index = this.charts.findIndex(e => e.id === id);
if (index >= 0) {
this.charts.splice(index, 1);
}
I can do this.ngOnIt() inside the search funtion but I don't think that will be best way to do it so I'll be really appreciated if someone can help me fix this.
your workspace.charts have the all the charts.you are assigning value for charts from workspace.charts.In your onRemoveFromList function you only remove it from chart.but workspace.charts still have that removed value.then whenever you reset the search the removed values going in to the charts that is why you see those removed charts.
Solution: in your onRemoveFromList remove the chart from workspace.charts too.
onRemoveFromList(id: number) {
const index = this.charts.findIndex(e => e.id === id);
if (index >= 0) {
this.charts.splice(index, 1);
this.workspace.charts = this.workspace.charts.filter(e => e.id !== id);
}
I have uploaded an excel and need to read it and get the count of the number of rows in it.
I have tried the below codes but it doesn't seen to work out.
I have been getting so many errors like,"_fs.readFileSync is not a function" "f.slice is not a function" and currently I am stuck at "input.replace is not a function". Please let me know where am I going wrong or what actually needs to be done
Component.ts
<pre>
proceedUpload(){
if(this.file != null) {
var workbook = XLSX.read(this.file);
var firstSheet = workbook.SheetNames[0];
var excelRows = XLSX.utils.sheet_to_json(workbook.Sheets[firstSheet]);
var number = excelRows.length();
if( number > 0 )
{
this.uploadMessage = true;
}
else
{
this.uploadMessage = false;
}
let formData: FormData = new FormData();
formData.append('Files', this.file);
this.http.post("Url", formData).map(res => res.json())
.catch(error => Observable.throw(error))
.subscribe(
data => console.log('success'),
error => console.log(error)
)
}
else
{
alert("Please upload a file!")
}
</pre>
Component.html
<div *ngIf="uploadMessage">
<p>{{number}} uploaded!!</p>
</div>
const table = XLSX.readFile('mytable.xlsx');
const sheet = table.Sheets[table.SheetNames[0]];
var range = XLSX.utils.decode_range(sheet['!ref']);
console.log(range.e.r);
Source
let excelRowsObjArr = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[firstSheet]);
On this one you can do:
excelRowsObjArr.length
For more info you can go here: https://www.aspsnippets.com/Articles/Read-Parse-Excel-File-XLS-and-XLSX-using-JavaScript.aspx
I get dificulties passing the value of selected multiple option using vue js when I edit the post.
I use element ui for option selected.
PostController
return Post::with('category')->with('tag')->find($id);
Post.vue
<el-select v-model="form.tag_id" multiple placeholder="Select some">
<el-option v-for="tag in tags" :key="tag.id" :label="tag.name"
:value="tag.id">
</el-option>
</el-select>
<script>
data() {
return {
tags: [],
form: new Form({
tag: [],
tag_id: [],
}),
}
// fetch all tags list
axios.get('/' + this.$route.params.trans + '/adminGetTags')
.then(({data}) => this.tags = data)
//fetch post and tag which related to post
axios.get('/' + this.$route.params.trans + '/editPost/' +
this.$route.params.id)
.then(({data}) => {
//....
this.form.tag = data.tag
this.form.tag_id = data.tag
})
</script>
I need to call the id of selected multiple item like this
this.form.tag_id = data.tag.id
Buit it will give an error ( Cannot read property 'length' of undefined)
But if I use v-for it will work, unfortunately I can't use v-model and v-for in select tag. Any idea how to solve this problem?
Result
I just use looping for in script section, and it's working well for me.
var j = 0;
for(var i=1; i<= data.tag.length; i++)
{
this.form.tag_id[j] = data.tag[j].id
j += 1
}
return this.form.tag_id
I want to create selectlist dynamically by traversing child nodes with 'language' property. So, want to add this property value as a select list item only if it is not added previously.
I have following code.
#{
var litem = new List<SelectListItem>();
litem.Insert(0, new SelectListItem { Selected = true, Text = "All", Value = "" });
foreach (var i in Model.Content.Children.Where("Visible"))
{
//if (i.GetProperty("language").Value != "")
if (i.GetProperty("language").Value != "")
{
string langstr = i.GetProperty("language").Value.ToString();
SelectListItem item = new SelectListItem { Selected = false, Text = langstr, Value = langstr };
if ((!(litem.Contains(item))))
{
litem.Add(item);
}
}
}
var slang=new SelectList(litem);
#Html.DropDownList("drpLang", #slang, new { #class = "dropdown"})
}
But it is not able to check the same item present in list. What is going wrong?
if i understand you correctly, problem that litem contain duplicate,
this because you create new instance of object item and than check is list contain new instance (you not check for same property, you check for exactly same object).
change this line:
if ((!(litem.Contains(item))))
for something like this:
if (litem.All(i => i.Value != item.Value))
or if you need unique pair:
if (litem.All(i => i.Value != item.Value && i.Text!= item.Text))
also recommend move all login in controller and use viewbag for DropDownList