I am using a for data entry in asp.net core application
the Height of the textarea can be changed manually by the user , I want to read the new height in order to save it in the database at server side . My problem is reading that value .
using Javascript with style.width will return the original value not the new changed value
Can anyone give me a clue .
Thanx
you can try this,
HTML:
<textarea id="yourinputid"></textarea>
jQuery:
let areaHeight=$('#yourinputid').height();
On:
$("textarea").keyup(function(e) {
while($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) {
$(this).height($(this).height()+1);
};
});
Related
I am using Blazor Text Editor from source below.
Source - https://github.com/Blazored/TextEditor
I successfully integrated it with my create and edit form, however not able to bind-Value to it. Because of this my Data Annotation Validation is failing.
Internally blazor is using Quill Editor, I am not looking for javascript option.
Sample Code of editor
<BlazoredTextEditor #ref="#QuillNative" Placeholder="Enter non HTML format like centering...">
<ToolbarContent>Some editor stuff here</ToolbarContent>
<BlazoredTextEditor
Could anyone please help me. How to bind-Value or correct approach without javascript.
Vencovsky - thanks of you prompt response, I was already aware of these methods however was curious to know if anybody had tried different option.
Below is what I did..
FORM -- This is common form for create & edit. OnValidSubmit will call respective Create/Edit method.
<EditForm Model="Entity" class="contact-form" OnValidSubmit="OnValidSubmit">
//My form fields here
//Commented the validation from that particular field
#*<ValidationMessage For="#(() =>Entity.field)" />*#
<div class="col-sm-1">
<button type="submit" #onclick="***getEditorData***" class="btn"
style="border:2px solid #555555;"><span>Save</span></button>
</div>
</EditForm>
METHOD -- getEditorData() gets fired before OnValidSubmit()
public async void getEditorData()
{
Enity.field = await this.QuillNative.GetHTML();
}
So in my final Entity on OnValidSubmit() I receive all fields along with editor data..
Hope this help if anyone is trying to do so..
Apparently you can't bind a value to it, but you should use the provided methods
Methods
GetText - Gets the content of the editor as Text.
GetHTML - Gets the content of the editor as HTML.
GetContent - Gets the content of the editor in the native Quill JSON Delta format.
LoadContent (json) - Allows the content of the editor to be programmatically set.
LoadHTMLContent (string) - Allows the content of the editor to be programmatically set.
InsertImage (string) - Inserts an image at the current point in the editor.
To use these methods you need a reference of it
#* Getting the BlazoredTextEditor reference*#
<BlazoredTextEditor #ref="#BlazoredTextEditorRef">
#* rest of the code*#
</BlazoredTextEditor>
And in some code in your class you can do
void LoadData(){
//var html = BlazoredTextEditor.LoadHTML(SomeDataToLoad)
BlazoredTextEditor.LoadText(SomeDataToLoad)
}
void ValidateData(){
//var html = BlazoredTextEditor.GetHTML()
var text = BlazoredTextEditor.GetText()
// do something to validate text
}
You can call these methods and use the referece in other methods, this is just an example on how to do it.
here is how I did this:
1- to bind the value on load:
<BlazoredTextEditor #ref="#QuillHtml">
<EditorContent>
#((MarkupString)infoBlock.Description)
</EditorContent>
</BlazoredTextEditor>
to get value on submit
<EditForm Model="infoBlock" OnValidSubmit="LocalOnValidSubmit">
...
#code {
....
[Parameter] public EventCallback OnValidSubmit { get; set; }
BlazoredTextEditor QuillHtml = new BlazoredTextEditor();
private async Task LocalOnValidSubmit()
{
infoBlock.Description = await this.QuillHtml.GetHTML();
await OnValidSubmit.InvokeAsync(this);//to call event handler passed by parent after the HTML prepared for main bound class
}
}
I need way to display a "List" property with the option to add new elements to the list.
So Basically
Value 1
Value 2
Button: Add new
I created an editfor template for it, where I display all the values with a foreach loop. However, each item get's an index, so when I add a new input field with javascript, the index is wrong.
Any suggestions how to achieve this.
PS: the adding of new elemens mustbe done on the client, since it is a simple form
var abccounter = 1;
$("#abcbutton").click(function () {
$('#itemlist').append('<p><input class="text-box single-line" id="listofstringname_' + abccounter + '_" name="listofstringname[' + abccounter + ']" type="text" value=""></p>');
abccounter++;
});
<p>#Html.EditorFor(model => model.listofstringname)</p>
that is what I did and it worked. the only problem I'm having (and it may be solved eventually) is I want to wrap each element with a tag but I'm not sure how. this JS just adds a new "text box element" assuming 1 as the start as my model loads 1 example by default.
Hi I have a working FilteringSelect which reads from a URL. Entering names will query the database and return the appropriate JSON to populate the filtering select, I can select a value and it stores the ID.
<div data-dojo-type="ComboBoxReadStore" data-dojo-id="assignedUserIdstore"
data-dojo-props="url:'Welcome.do?call=JS&actionRefId=142',
requestMethod:'get'"></div>
<input id='assignedUserId' name='value(assignedUserId)'
data-dojo-type='dijit.form.FilteringSelect'
data-dojo-props="store:assignedUserIdstore, pageSize:5, labelAttr:
'label',queryExpr: '*${0}*', autoComplete: false" />
The issue comes with setting the default value. I have this
<script type='text/javascript'>dojo.ready(function(
{dijit.byId('assignedUserId').setValue('25');});
</script>
This appears to work after a fashion - it does call the server and the server returns this
{ "id":"25", "name":"John Smith" "label":"John Smith"}
However it does nothing to actually populate the filtering select with neither a display nor an actual value for the input. I tried to set the value to the name but that had no effect either. Having it return a collection instead of a single item does not help either.
The comboreadstore is defined as
<script type="text/javascript">
require([
"dojo/_base/declare",
"dojox/data/QueryReadStore",
"dojo/parser",
"dijit/form/FilteringSelect"],
function(declare, QueryReadStore){
declare("ComboBoxReadStore", QueryReadStore, {
fetch:function(request) {
// This results in a xhr request to the following URL (in case of GET):
// /url.php?q=<searchString>
request.serverQuery = {q:request.query.name};
return this.inherited("fetch", arguments);
}
});
}
);
</script>
Using dojo.ready doesn't guarantee that the data you're fetching is ready/loaded. It does fire when dojo is ready and all your required assets have been loaded. So i think you're trying to set the FilteringSelect to a value which doesn't exist in the store yet. You could solve this by waiting with setting the value untill the store is ready. How to do that depends on the store you are using which i can't really make up out of your code. I'm not familiar with ComboBoxReadStore. After some googling i found out it might be an extension of dojox.data.QueryReadStore, which is outdated and unfinished. If so i'de suggest you switch to using dojo.store if possible.
Furthermore: The setValue method on dijits is deprecated, you should be using set('key', val).
http://fiddle.jshell.net/kBFU7/2/
In the code, I have created a dynamic table through jQuery.
I also have a div for each table cell.
I wish to store and access data of this div, eg, the row and column for each of it.
I would hence like to ask for some recommendations on how I should go about storing this data.
I have tried creating a span for each div to store info in it following the suggestions from this link http://time2hack.blogspot.sg/2012/11/jquery-store-access-relative-info-within-HTML-element.html#axzz2Ee3iLxCt but it did not seem appropriate and I have failed at accessing back the info.
I would appreciate it if someone could just give me some recommendations which I could try out.
So basically you want to create a dynamic table and access each of the TDs and its data.
In order to do that, you don't need any div or span to place inside those TDs to access their content (if that is all that you want). The simplest way to do so is to assign an id to each of these TDs according to their Row and Column position. That way you can access each of them in a loop or directly or what not.
below I've written a super simple way to achieve it. Of course you can customize or enhance it according to your need. but then you should get the idea right?
(I am using ur code to do that)
$(document).ready(function() {
createTable($("#tb1"));
function createTable(tbody){
if (tbody == null || tbody.length < 1) return;
for(var r=0;r<5;r++){
var trow=$("<tr>");
for(var c=0; c<5;c++){
var tcol=$("<td>")
tcol.attr("id","row"+r+"col"+c); /// assign id to each td
var cellText = "row " +r + " col " +c
$("<div>")
.text(cellText)
.appendTo(tcol)
tcol
.appendTo(trow)
}
trow.appendTo(tbody);
}
}
});
so basically you did this:
<td id="row1col1"></td>
<td id="row1col2" ></td>
now whenever you want to access any of the cells do this
$('#row1col1').text();
or
$('#row1col1').html();
you can access the cells in a loop like
for(var r=0;r<5;r++){
for(var c=0;c<5;c++){
var cellValue= $('#row'+r+"col"+c).text() // or .html()
makeAjaxRequest(cellValue); /// send to server or whatever
}
}
when create a div add an unique id:
.attr("id","cell-" + r+ "-" + c)
try this code on a button with input:
$("#btn").bind("click", function(){
var r = $('#row').val();
var c = $('#column').val();
var data = $('#data').val();
$('#cell-' + r + '-' + c).text(data);
});
Try it on my fiddle:
http://jsfiddle.net/kBFU7/4/
you'll have to pass this value as array and have to receive it on back-end
go on this link
http://www.aspdotnet-suresh.com/2012/07/aspnet-save-dynamically-created-control.html
To access the data attributes in the elements; there can be two ways. the jQuery access that data by
$('#table_cell_div').data('info');
But this function only works if the DOM is created before
$(document).ready();
i.e the document elements created by JS are not accessible in data() function of jQuery
But to access those elements and attributes after the DOM has become ready; you can access that data by following code
$('#table_cell_div').attr('data-info');
i have an requierement where i need to fetch value from outerHTML using jquery. below is my js function
where event.outerHTML will contain
<INPUT id=307 onclick=addremoveartifact(this,4); CHECKED type=checkbox flag="false" stkrvwrqrd="" arttype="Other" docId="" ppArtId="1516" appBy="suman.sathyanandam#hp.com" status="Approved">
How to fetch the value of "status". some one please help
I had a similar problem with a project I was working on.
This is what I suggest:
var status = $($(event)[0]).attr('status');