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>
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 want to change input type from password to text.
What i have done:
1) In xml view:
<input type="Password" id="idPassword" showValueHelp="true" /> // enabling showValueHelp a button right corner in input text
2) In controller :
var oInput = this.getView().byId("idPassword");
oInput.attachValueHelpRequest(function(){
oInput.type = "Text"; //change input type as per documentation.
console.log(oInput); // I can see type="Text" in console
});
Actually It is not reflecting in browser.
There is not method called type.You should use
oInput.setType("Text");
or
oInput.setType(sap.m.InputType.Text);
Note:default type is Text.So you dont have to set it at all
I'm brand new to javascript, dojo and HTML and I've searched everywhere for examples of this and cannot find any.
I have a map with some feature points and a find task to highlight the feature points on the map, and display them in a grid with it's field attributes. This works great when I specify the search field as:
findParams.searchFields = ["LOCATION"];
But if I add:
findParams.searchFields = ["LOCATION", "MODEL_NUM"];
The grid displays results from multiple fields (ie. searching for attributes in LOCATION "A" would also find attributes in MODEL_NUM containing the letter "A"). So I decided to add a drop down menu select to specify which field to search in (one at a time) so the results are more precise.
So I added the following dijit:
<select id="fieldSelect" data-dojo-type="dijit/form/Select" name="fieldSelect">
<option value="" selected="selected">Select a field</option>
<option value="MODEL_NUM">Model Number</option>
<option value="LOCATION">Location</option>
<option value="NUM_DEFICIENCIES">Number of Deficiencies</option>
<option value="INSTALL_DATE">Install Date</option>
</select>
I then modified the search field statement to:
findParams.searchFields = "[" + "\"" + dom.byId("fieldSelect").value +
"\"" + "]";
When I click my search button I get an Uncaught TypeError: a.join is not a function (FindParameters.js:5)
I hope this is enough information. Does anyone have a solution or a recommendation?
UPDATE
After a suggestion to pass an array and not a string to the findParams.searchFields, I made the following changes:
findParams.searchFields = [];
findParmas.searchFields.push(dom.byId("fieldSelect").value);
This still gave me attribute results from multiple fields. After running a couple small tests:
var selectedField = document.getElementById('fieldSelect').value;
var index = selectedField.options[selectedField.selectedIndex].value;
And:
var selectedField = dom.byId('fieldSelect').value;
I'm finding that in the Chrome developer tools debugger, when I created a breakpoint at that line and executed the statement, both examples had the value of selectedField as 'undefined'.
Is this an issue of not getting the value from the drop down select dijit?
If no value is passed to findParams.searchFields, the API assumes all fields are valid, which is why I'm getting attribute results from multiple fields.
Thanks.
Use dijit.byId instead of dom.byId.
The following works for me:
var value = dijit.byId("fieldSelect").value;
if ("" != value) {
findParams.searchFields = [value];
} else {
findParams.searchFields = ["MODEL_NUM", "LOCATION", "NUM_DEFICIENCIES", "INSTALL_DATE"];
}
I found the problem.
Ultimately it was the registry.byId that led me to the answer, I had to rearrange some code after I realized the searchFields was in the wrong function and not in the function that is called when I click the search button.
But when accessing the dijit, the only thing that worked was registry.byId to access the dijit node and pass the value of the selected value into my searchFields.
Thanks.
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??
I am trying to make a page for my site where users can upload a game, give it a name then the file gets uploaded to a folder on my site and the file name and game name get added to my sql database but it gives an error saying: "System.ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection.
Parameter name: index" when i try to run it.
My code for this page is:
#{
var db= Database.Open("Games");
var sqlQ = "SELECT * FROM Games";
var data = db.Query(sqlQ);
}
#{
var fileName = "";
if (IsPost) {
var fileSavePath = "";
var uploadedFile = Request.Files[0];
fileName = Path.GetFileName(uploadedFile.FileName);
fileSavePath = Server.MapPath("~/App_Data/UploadedFiles/" +
fileName);
uploadedFile.SaveAs(fileSavePath);
}
var GameName="";
var GameGenre="";
var GameYear="";
if(IsPost){
GameName=Request["formName"];
var SQLINSERT = "INSERT INTO Games (Name, file_path) VALUES (#0, #1)";
db.Execute(SQLINSERT, GameName, fileName);
Response.Redirect("default.cshtml");
}
}
<h1 >Add a new game to the database</h1>
<form action="" method="post">
<p>Name:<input type="text" name="formName" /></p>
#FileUpload.GetHtml(
initialNumberOfFiles:1,
allowMoreFilesToBeAdded:false,
includeFormTag:true,
uploadText:"Add")
The error page says that the problem is with line 11 but i don't know what to change.
As Hightechrider has correctly said, your code should reside in Controllers, not in views. The exception you are getting is because Request.Files is an empty array, so when you're trying to access [0] element, you get an IndexWasOutOfRange error.
I'd recommend you reading the following article for uploading files in ASP.NET MVC. It presents an easier, more consistent and flexible model by putting the code in the controller action. Basically, all code boils down to this:
You create an upload form with submit button and file input.
You create an action that accepts HttpPostedFileBase variable.
You must set the proper enctype to your form if you want to upload files:
<form action="" method="post" enctype="multipart/form-data">