Displaying dynamic text - javascript

I need to display some text but the text is going to change a lot and I need for it to be editable. I know I can use from input but is there any other way?

MDN has a nice example and MSDN - here for contenteditable
<div id="toEdit" contenteditable="true" onkeyup="doSomething(this.id);"></div>
doSomething function can manipulate the data (store/send whatever).

You can use ajax query and change the value of the text area.. using that.. hope this help

you can put a little button (or use even the text itself as a handler) so that when a user clicks, you add the input to change the text using ajax.

Related

How to insert tags inside a input or textarea in html

I am going to design a textarea for writing some formula. Since typing entire formula may cause mistake in formula, I think its is better that users drag and drop variables from another panel. I believe that stackoverflow's tag option could be usefull for this purpose.
How it is possible to design a text area like this?
You cannot directly convert the text box into tag. But you can make it look like a text box by giving a container to have the tag inside and a text box.
<div id="container"><span id="tagContainer"></span>
<input type="text" id="inputText" placeholder="input here.." />
</div>
Using keypress event, you can grab the value of textbox and append it into tagContainer. You can see the implementation here: JSFiddle
You can't.
However you can put another text block with highlight content at same position with that textarea or input.
Reference:
Visit https://codepen.io/lonekorean/pen/gaLEMR
This plugin might be helpful for you. http://aehlke.github.io/tag-it/

Angularjs bind data to span text box

I have following span that I am using as a text input.
<span ng-model="sampleText" style="width:100px; padding:20px, 100px;" class="TextBox"></span>
Reason why I am using span instead of "input" or "textarea" is so that I have one box which can keep adding rows as I hit enter. This is more elegant way than showing a big box of textarea.
But problem I am facing is how do i bind the text that has been entered to the ng-model.
Maybe using ng-init?
Please let me know how to bind the text that has been entered to the "sampleText"
Thanks
The ngModel directive itself doesn't do much. It provides a controller that is used by other directives, like input (yes, input is a directive). That means you have to write your own one.
But you are lucky, because the documentation for the ngModelController has an example that's almost identical to yours.

Kendo UI how to change dropDownList to text field?

Once I create dropdown list from existing text field input in Kendo UI - is there a way of changing it back to text field?
$('#myInput').kendoDropDownList({...});
I wish to have something like:
var kendolist = $('#myInput').kendoDropDownList({...});
kendolist.textField({....});
or
kendolist.destroy().textField({....});
at best without extensive jQuery shenanigans... :)
I am afraid it is not possible to turn it back into regular textbox. You can use the destoy method of the widget, however there will be some HTML left which you will not really need and you will need to do some manually cleaning with JavaScript.
Better destroy the widget and remove all the HTML then add regular textbox manually.

Filtering table data based on search keyword using jQuery

I want to accomplish one simple thing using jQuery. I want to filter some table data on a page and there is a search box on top of the same page.
On every keystroke, I want to hide each row that does not match the search field. I want to process only client side data. How can I accomplish this?
Can anyone please give some example code of this? Like, how can I grab each keystroke and hide the required elements? I want something like this.
You need to use onkeydown, then grab it's val(), then find out if what the value :contains, matches up against whatever elements your using to compare it against, then hide() whatever elements do not match this condition and voila.
HTML:
<input type = "text" id="theText">
JQuery to get it's current value and display it on the console:
$('#theText').onkeydown(function(){
var x = $('#theText').val();
console.log(x);
});
It's a little old now, but I've used this plug-in in a project before and it worked great:
https://github.com/riklomas/quicksearch

Getting HTML with the data using jQuery

I have a form which has many elements (e.g. textarea, input, select), after users have entered some data the states of these elements should change.
For example, an input[type="radio"] element will have the attribute checked="checked" if a user has checked it. The value attribute of an input[type="text"] element will contain the text entered by user.
The problem is that the html string returned by $('#form1').html() does not contain these data.
Feel free to take a look at this example:
http://jsfiddle.net/cmNmu/
You can see that no matter what your inputs are, the html returned is still the same (having no attribute data).
Is there any easy way to collect the html including their states?
Thanks in advance.
use below code getting the value of input type text via jQuery
alert($("input:text").val())
Maybe you could use the 'onblur' event handler to set the value of the element when you leave it
You should get the value using :
$('#form1').find(':input').val();
$('#form1').find(':radio[name=gender]:checked').val();
if you have multiple input then you can filter them bu their name or class or even id. Then you will need to select input using .find(':input[name=input_field_name]'). My Suggestion is : use name property instead of other property if you want to use form.
People usually use $('#form1').serialize() to get the values. If html() doesn't return both the source and data, I don't think that there is something you can other than manually constructing the full html by looking at the data.
Live demo: http://jsfiddle.net/cmNmu/6/
By using the jQuery formhtml plugin written by gnarf:
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
The changes in the input elements can be reflected in the html string returned by formhtml().
Thank you very much everyone.

Categories