I have a textarea field like this :
<textarea id="user_about" maxlength="500" name="about"
ng-model="foo.bar"></textarea>
Now, using this a user an update his info - problem is i need to escape html so stuff like
$amp;
doesnt show, but instead i get a normal &.
I tried using ng-bind-html, however i need two way data binding,
What would be the best way to do this ?
The browser does the best job converting html entities to text
Before you pass data to view can convert to text by doing:
$scope.foo.bar = angular.element('<div>').html($scope.foo.bar).text()
Related
I want to format a number from 10000 to 10,000.00 is there any way to do it in HTML alone(without controller file) with ng-Model directive?
I tried to do it in controller file with a logic and bind it to HTML file. But the controller logic always return a number in "10,000.00" String format. Is there any way to convert "10,000.00"(String) to 10,000.00 (number) and bind it to HTML?...(I want 10,000.00 in type number).
My .html file is something like this
div ng-repeat="array in arrayList"><input type="text" ng-Model="array.amount" </div
and my controller file is something like this
var arrayList=[{"amount":3000},{"amount":4000},{"amount":5000}];
(I apologize for not formatting the html file properly)
Thanks
Explanation:
Use type="text" and pattern validation like
pattern="[0-9]+([\.,][0-9]+)*" to limit what the user may enter while
automatically formatting the value as you do in your example.
Put an overlay on top of the input field that renders the numbers how
you want and still allows the user to use the custom type="number"
input controls, like demonstrated here.
The latter solution uses an additional <label> tag that contains the current value and is hidden via CSS when you focus the input field.
In input type: "number" case ngModel type is number and in input type:"text", ngModel is string
Demo of one use-case: JSFiddle
What is the best way to pass HTML data to server.
I have a htmlPage which has a div.I want to pass the innerHTML of this div to the server so that I can save it in session and recreate that div later during the edit flow.
I have created a hidden field:
<input type="hidden" name="selectedTemplateHtml" id="selectedTemplateHtml" />
In this hidden field I want to set the HTML of that div and post to server.
Please suggest.
I tried simple passing the html from div using $("#divName").html() but when in edit flow we retrieve the stored value it gives exception since it is not able to store the html in the javascript variable as the HTML spans many lines.
Please suggest.
In my case I am able to post the request with newlines and I am able to get back the html which I had posted but when I try to store it back in a javascript variable due to new line characters and double quotes it gives error
#Alexander
Following code is used to display html in edit flow:
cdHtml="${postAdBean.cdHtml}";
templateId="${postAdBean.templateId}";
$("#"+templateId).html(cdHtml);
It gives exception in browser console on the first line ie.:
cdHtml="${postAdBean.cdHtml}";
This is because it is not able to convert the html returned from server to a javascript string.
Okay I got it to work thus:
From client before setting the html in hidden field I encode it :
selectedTemplateHtml=encodeURIComponent(selectedTemplateHtml);
$("#selectedTemplateHtml").val(selectedTemplateHtml);
This is neccessary to escape certain characters like & in the HTML which may otherwise cause issues.
In java:
String
cdHtml=URLDecoder.decode((request.getParameter("selectedTemplateHtml")),"UTF-8");
cdHtml=cdHtml.replace("\n"," ").replace("\r", " ").replace("\t", " ");
cdHtml=cdHtml.replace("\"", "\\\"");
ie. first i decode the html then replace all the newline characters and escape the double codes. Then i send the html back to browser and it is readily assignable as in javascript without any issues.
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.
I found it really hard to come up with a question title for this one so I apologise that it's fairly cryptic but I'll try explain better there.
Basically part of an app I'm developing involves placing 'placeholders' in a textarea and then modifying those placeholders outside of the textarea.
For example:
This is the <first> placeholder. This is the <second> placeholder.
This is the <first> placeholder again.
Basically i have JS that detects these placeholders and creates input boxes to hold the text. So there would be an input text box for first and one for second.
What I want to achieve is when I type a value into the textbox it changes the placeholder in the textarea to the content being typed into the textbox. Think sublime text editor's snippets for a textarea.
I'm trying to figure out how I can track the placeholders in the text area. For example if a placeholder was <first_name> and i started typing into the placeholders textbox 'Billy'. I could easily change the placeholder by using a string replace function. However now the placeholder <first_name> doesn't exist in the textarea and so now I can't go back and change it. I need to have a way of tracking these placeholders whilst they are changing.
I hope that makes sense.
If you're not bound to a <textarea> element, you can try with a simple div with the attribute contenteditable="true". This way you can use some <span> to mark all the placeholders.
I set up a demo on jsfiddle, try it.
Using an element with contenteditable="true" would be easier for that task, because you could represent placeholders as span elements and you would then only have to retrieve them by id or any other unique attribute to update their content.
If you have to use a textarea and the users can only modify it's content using external inputs, maybe you could initially track the index of each placeholers and their length and keep those synchronized as values are changed.
You could then easily replace content in the textarea. For example, if the placeholder starts at 15 and has a length of 13.
var string = 'this is a test {placeholder} bla bla bla',
placeHolderIndex = 15,
placeHolderLength = 13;
string =
string.substring(0, placeHolderIndex)
+ 'new value'
+ string.substring(placeHolderIndex + placeHolderLength);
//update indexes of every placeholders that comes after this
//one and update the content length of this placeholder.
Obviously, you don't want to hardcode any values and you will want to handle this process in a dynamic way, but that's just an example.
NOTE: I guess users can modify the textarea content if you're using one. In that case, it would make things a bit more complicated, because you would have to update the index of the placeholders for every modifications the user does and you would also have to prevent them from editing the placeholders-mapped text directly.
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.