I have a name picker attached to the input but also want to allow type-ahead in a second field attached to the name picker, and then add the selected entry in the type-ahead control to the dojo name text box control.
In the typeahead onchange event, I can get the value of it and I can get the values in the Name Text Box control, but each entry in the NameTextBox is a spanned link like this:
<SPAN tabIndex=0 val="**abbreviatedNotesName**"><A class=lotusFilter tabIndex=-1 href="javascript:;">**commonNotesName**<SPAN class=lotusClose>x</SPAN></A></SPAN>
Do I need to re-write the innerHTML of the NameTextBox, and guess at the commonname from the typeahead result? Or, is there a better way? Thanks for any help/suggestions.
Here's the code:
<div id="copyToRow">
<div class="namePickerContainer">
<xe:namePicker id="namePicker1" for="fld_copyto_recipients">
<xe:this.dataProvider>
<xe:namePickerAggregator>
<xe:this.dataProviders>
<xe:dominoNABNamePicker addressBookSel="all"
nameList="peopleAndGroups">
</xe:dominoNABNamePicker>
<xe:dominoViewNamePicker labelColumn="$1"
viewName="($VIMPeople)" databaseName="#{javascript:viewScope.personalNAB;}"
label="#{javascript:viewScope.personalNABTitle;}">
</xe:dominoViewNamePicker>
</xe:this.dataProviders>
</xe:namePickerAggregator>
</xe:this.dataProvider>
</xe:namePicker>
<xp:div id="copyToContainer" styleClass="addresseeContainer">
<xe:djextNameTextBox id="fld_copyto_recipients"
value="#{sendFilesDoc.file_CopyToRecipients}" multipleSeparator=","
style="min-height:1.5em;" multipleTrim="true">
</xe:djextNameTextBox>
<xp:inputTextarea id="copyto_typeahead">
<xp:typeAhead mode="partial" minChars="1"
preventFiltering="true">
<xp:this.valueList><![CDATA[#{javascript:getComponent("namePicker1").getTypeAheadValue(this)}]]></xp:this.valueList>
</xp:typeAhead>
<xp:eventHandler event="onchange" submit="true"
refreshMode="partial" refreshId="copyToRow">
<xp:this.script><![CDATA[var copyTo = XSP.getElementById("#{id:copyto_typeahead}");
var result = XSP.getElementById("#{id:copyToTA}");
var newEntry = '<SPAN tabIndex=0 val="' + copyTo.value + '"><A class=lotusFilter tabIndex=-1 href="javascript:;">' + copyTo.value + '<SPAN class=lotusClose>x</SPAN></A></SPAN>';
//Format: <SPAN tabIndex=0 val="<abbreviated NotesName>"><A class=lotusFilter tabIndex=-1 href="javascript:;">common NotesName<SPAN class=lotusClose>x</SPAN></A></SPAN>
result.value = copyTo.value;
var copyToRecipients = XSP.getElementById("#{id:fld_copyto_recipients}");
//<INPUT style="MIN-HEIGHT: 1.5em" id=view:_id1:include1:fld_copyto_recipients type=text name=view:_id1:include1:fld_copyto_recipients dojoType="extlib.dijit.NameTextBox">
var copyToValue = copyToRecipients.innerHTML;
alert('copytorecipients innerHTML = ' + copyToValue);
alert('copytorecipients value = ' + document.getElementById("#{id:fld_copyto_recipients}").value); <-- undefined
var copyToArray = new Array();
var a = document.getElementsByName("#{id:fld_copyto_recipients}");
copyToArray = (a[0].value.split(','));
copyToArray.push(result.value);
//copyToRecipients.value = copyToArray.join(','); <-- this does not work
alert('copyToArray value = ' + copyToArray.join(','));
result.value = copyToArray.join(',');
copyTo.value = "";
return;]]></xp:this.script>
</xp:eventHandler>
</xp:inputTextarea>
</xp:div>
<xp:inputText id="copyToTA">
</xp:inputText>
</div></div>
What I think was tripping me up was required validation on the NameTextBox seemed to prevent the onchange event in the typeahead from firing. Who knows? Went through a lot of iterations ... I ended up adding Tommy Valand's JS function to control when validation is triggered & that seemed to fix things.
Bound the NameTextBox to the datasource field. Bound the typeahead to a requestScope variable. The typeahead onchange event code below also does a partial refresh on a container panel that wraps the 2 inputs.
/* append the typeahead name to those already selected */
var curVals:java.util.Vector = sendFilesDoc.getItemValue("file_SendToRecipients");
curVals.addElement(requestScope.sendToTypeAhead);
sendFilesDoc.replaceItemValue("file_SendToRecipients",curVals);
requestScope.sendToTypeAhead = null;
Then in the NameTextBox onChange event that also partial refreshes the container panel:
/*
remove duplicates that can be picked if the format of the displayed name in the right panel of the
name picker dialog doesn't match the column returned from the picker -- for instance, this will
happen on internet-style names stored in the user's personal names.nsf
e.g. FName LName <user#somecompany.com>
*/
var thisField:javax.faces.component.UIInput = getComponent("fld_sendto_recipients");
var theNames = #Unique(thisField.getValue());
thisField.value = theNames;
So you end up with something similar to how MSN hotmail works. Just have one final issue to try to resolve and that's how to get the cursor to return to the typeahead field after either using the namepicker or making a typeahead choice. Added this code as per this post on the client onchange event of the NameTextBox but the cursor just jumps into the typeahead field but then immediately jumps out:
/* set focus back on the typeahead input -- the input is a child of the typeahead dojo widget */
/* matches any <input> that is a child of the .dijitInputField class of the <div> for the typeahead */
var el = dojo.query('div[widgetid*="sendto_typeahead"] .dijitInputField > input').at(-1)[0].focus();
Any help??? Or, suggestions for solution improvement??
Related
I have a requirement to provide placeholder for all controls in my TPC form. I wanted to know if there is a way to do so. I have tried placing placeholder in Template like:
<input id='#Html.GetUniqueId(Model.Name)_input' data-tpc-role="lookup-input" name="#Model.MetaField.FieldName" data-tpc-default-value="#Model.GetLookupValue()" data-tpc-value="#Model.GetLookupValue()"
placeholder ="myplaceholdertext" type="text" #MvcHtmlString.Create(#Model.ValidationAttributes) data-tpc-custom-validation="lookup"/>
and through script
$(document).on("tpc:ready", function(){
var picklistName = "mypicklistname";
//Set Text to Placeholder Value
tpc.forms[0][picklistName].get_kendoInput().text("Please select an option.");
});
None of these work.
Let me know if this is the correct forum to ask TPC related questions
TIA
You have the kendo control but the value you want to set is the first item in its dataSource. Don't forget to refresh the control to make it show:
$(document).on("tpc:ready", function(){
var picklist = tpc.forms[0]["mypicklistname"];
//Set Text to Placeholder Value
picklist.get_kendoInput().dataSource.data()[0].Label = "Please select an option.";
picklist.get_kendoInput().refresh();
});
I'm building a list of v-checkboxes using this code
<div class="row form-group" v-for="(author, key) in authorData" :key="key">
<v-layout row wrap>
<v-flex xs1 sm1 md1 text-xs-center>
<div>
<v-checkbox
label
:key="author.PmPubsAuthorID"
v-model="authorData[key].checked"
v-bind:id="author.PmPubsAuthorID.toString()"
color="success"
#change="authorCBClicked(authorData[key])"
></v-checkbox>
</div>
The PmPubsAuthorID is a number like 1047602 and is a sequential number in the entire database, no 2 records are the same. When I run the code to build the list it works fine and shows a checkbox if the value is true. What I am trying to do is when a checkbox is checked in the
authorCBClicked(author) {
//PmPubsAuthorID = 1047602
// alert(author.PmPubsAuthorID + " " );
// author.checked = false; does not work
this.authorData[author.PmPubsAuthorID].checked = false; does not work
this.authorData["1047602"].checked = false; does not work
this.authorData[1047602].checked = false; does not work
this.authorData[2].checked = false; does work
},
As you can see I have tried various ideas and the only one that seems to work is passing in an ordinal but I have no way of knowing that. Do I need to use an index when building the checkboxes?
The reason: I have a checkbox then when checked calls a dialog box that asks " Are you sure you want to "Add this item to the list" if they say yes I want the original checkbox to be checked but if they say no then the original checkbox needs to be false. I have found that if I try to set the checked status of the calling checkbox to false it does not work but works fine once outside that method. I have passed the key and author information to the new dialog and let it change the checkbox to false if needed
Thanks for the help.
Just pass the key instead of the whole item to your method :
#change="authorCBClicked(key)"
and on your method :
authorCBClicked(key) {
this.authorData[key].checked = !this.authorData[key].checked;
}
Or :
you can do it directly on the template :
#change="author.checked = !author.checked"
I am using PrimeNG in my angular app, I have issue with p-dropdown
Question
I have two dropdowns for country and caste_category, I provide caste_reservation for only India , in case of other country selection , the OPEN option from caste_category needs to get selected and make the disable that dropdown.
If I have well understood your need, you have to set onChange event on country dropdown. This event will call a method that will trigger disabled property on caste dropdown depending on the country selected. It will also select OPEN option on this dropdown if the country is not India.
HTML
<p-dropdown [options]="countries" [(ngModel)]="applicant.country" (onChange)="updateCountry()"></p-dropdown>
<p-dropdown [options]="castes" [(ngModel)]="caste" [disabled]="disableCasteDropdown"></p-dropdown>
TS
updateCountry() {
if(this.applicant.country!=='India') {
this.disableCasteDropdown = true;
this.caste = 'o';
} else {
this.disableCasteDropdown = false;
this.caste = null;
}
}
See Plunker
Is it what you're looking for ?
If you are using Directive form controls you can disable the input, dropdown etc... by adding disabled: true in the form control
Using disabled attribute in html results to this message in console :
It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true
when you set up this control in your component class, the disabled attribute will actually be set in the DOM for
you. We recommend using this approach to avoid 'changed after checked' errors.
Example:
form = new FormGroup({
first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
last: new FormControl('Drew', Validators.required)
});
I am trying to implement an short bio form where each user could edit and update its bio. Based on the fact that if the user has filled the form before or not, the previous text or nothing, gets returned as an initial text in the Textarea.
Here is the block I have for taking the username from the keyboard, searching the dbase for a value and trying to output it on the textarea before the form gets submitted by the user.
A kind of profile memory if you like.
#{
Validation.RequireField("currentuser");
Validation.Add("bioprint", Validator.StringLength(3000, 0, "Your bio should not exceed 3000 characters"));
var init = "";
var currentuser = Request["currentuser"];
var db = Database.Open("ResearchA");
var cbio = db.QuerySingle("SELECT bios FROM usernamesb WHERE username = #0",currentuser); //get current bio string
if (cbio == null) {init = cbio;} //check if string is NULL
else {init = "Tell us about you...";}
if(IsPost && Validation.IsValid()) {
var userbio = #Request["Bio"];
var insertbio = "UPDATE usernamesb SET bios = #0 WHERE username = #1";
db.Execute(insertbio, userbio, currentuser); //Update database with a new entry.
}
}
And here is how I have my controls setup in the HTML block:
<input type="text" name="currentuser" id="currentuser" value="#Request.Form["currentuser"]"/>
<textarea name="Bio" rows="10" cols="50" placeholder ="#cbio"></textarea>
However I dont get the already existing string output.
Thanks a lot for the interest guys!!
Your cbio variable is currently being loaded with a single row from the database. You need to get one of the fields from that row. Two ways of doing that, either change your database query to be:
var cbio = db.QueryValue("SELECT bios FROM usernamesb ...
which will return just the string. Or leave your database query the same, and change your way of accessing the field from the row by changing the html part:
<textarea name="Bio" rows="10" cols="50">#cbio.bios</textarea>
If you want to set the text in a <textarea> you put the value to be displayed between the opening and closing tags:
<textarea name="Bio" rows="10" cols="50">#cbio</textarea>
I hover over the button and it hopefully outputs the value of the radio button into a paragraph below. I tried the below code but it's not working. I was hoping 'this' as the ID would mean the ID of what element activated the event.
function showDegree() {
var classInput = document.getElementById(this).value;
document.getElementById('classOutput').innerHTML = classInput;
}
In your posted code, "this" refers to the current scope, which would be the function showDegree. If you want to have a reference back to the element that threw the event:
Try this:
function showDegree(evt) {
var event = window.event || evt;
var source = event.target || event.srcElement;
document.getElementById('classOutput').innerHTML = source.value;
}
Then your event listener can be called like so:
<input type="radio" name="degree" value="some value" onmouseover="showDegree(event)" />