How to apply Formatted Mask to a input filed - javascript

I want to apply Formatted Mask to my input box. Here I have jsFidle for Doller currency, But instead of doller I need to change Soles(S/.), For that I have overriden the $locale.
this is the code i have overiden in jsfidle.
$locale.NUMBER_FORMATS.CURRENCY_SYM = S/.
Soles symbol is visible but while entering number amount there is a problem.
Here is the fidel. I dont know how to post fidle link. There is condition to post jsfidle. Here I am posting url. Please find it. http://jsfiddle.net/ExpertSystem/xKrYp/
UPDATE:-
My requirement is I want a soles symbole before my value that is I achieved through annoop answer.Even ng-model is not effecting for the first time,But The problem I am facing with that is if I edit the existing value it is effecting to my ng-model.
My second problem is I am having two text boxes.In one text box I need to show doller and second I need to show soles symbol. If I apply this script in my jsp page I am only getting soles, Not soles. If I Remove that script from jsp I am getting only soles not doller.
<script src="//code.angularjs.org/1.5.4/i18n/angular-locale_es-pe.js"></script>

You don't need to override, just include the necessary locale and then try.
See this fiddle. I've tried with different directive, hope it helps :)
Include locale :
<script src="//code.angularjs.org/1.5.4/i18n/angular-locale_es-pe.js"></script>
Updated Fiddler link.

Related

Display Some Lables in Jqgrid add/edit form

I want to add some label in my Jqgrid form in ADD mode....so is there any way to add some text which is not belong to any Control of the form
so what should I written for this funcnality...does it possible or not?
please show me some example regarding this
Thankyou
One way around the problem is to use your own editing form, instead of the one built into jqGrid. You will have full control over the form content, but at the price of having to write the code specifically for your application.
Alternatively, you can specify Form Options for any column which can add text or HTML content before or after a field, as well as other options. For example:
colModel: [
...
{name:'price', ...,
formoptions:{elmprefix:'(*)', rowpos:1, colpos:2....},
editable:true },
...
]
The options you may be most interested in are:
elmprefix - string - If set, a text or html content appears before the input element
elmsuffix - string - If set, a text or html content appears after the input element
Although these options are specified for each column, you might be able to make some creative use of this to make it appear a label does not belong to a column. For example, by inserting HTML <br /> elements or such.

HTML- Altering Input Value

I recently posted a similar question, but after some discussion, the question turned out to be quite a bit different than it was originally stated, so I thought it best to post this as a new question. I am trying to use an input field to show a total (I would consider using another element type, but I need to do the same thing in other places where an input field is actually required, so I may as well fix the problem now). The problem is that the HTML of the table containing these fields needs to be reloaded on occasion, i.e. in table creation, I use the Jquery $('#table1').html($('#table1').html() + <next_table_line>);. This causes the input field to revert to the value displayed in its value attribute, which doesn't change when I use the $('#input1').val(<some_value>); setter or when I enter data manually. Does anyone know of a solution to my problem? I need to be able to add rows to the table without loosing my data, but I can't figure out how to do this.
You're reloading your entire table with the line $('#table1').html($('#table1').html() + <next_table_line>);. You should be appending to your table instead. Take the following sample small table:
<table id="test">
<tr><td>test</td></tr>
</table>
Now, to add a new row, dont re-write the entire table HTML, just append!
$("#test").append("<tr><td>See im new!</td></tr>");
Demo: http://jsfiddle.net/uB2Rq/1/

How do I set a dropdown option by value using jquery?

I have a fiddle that has some slight demo code: http://jsfiddle.net/mwoods98/MHrJJ/
I have a request that is being sent via ajax and it's returning some values via JSON.
With that, I'm taking what is returned and filling in a form. I'm filling in the form
with the other values but I can't quite figure out how to set the dropdown to a value that is returned.
$('#PosTitle').find('option:eq(PosVar)').val().prop('selected', true);
I have tired this and it doesn't work. PosVar is a variable that I'm setting to a number that is returned from ajax.
UPDATE: Thanks for both of the answers, I have discovered something.
I'm using this code to make the drop downs look better but also I need a drop down that can have multimple lines of HTML.
http://www.marghoobsuleman.com/jquery-image-dropdown
When I remove this js, the form fills in.
I'm open to using another library that gives me the ability to use multiple rows in a select dropdown and pass HTML to it.
Thanks for the answers.
All you need is:
var PosVar = 9;
$('#PosTitle').val(PosVar);
jsFiddle example
Remove the .val()
$('#PosTitle').find('option:eq(PosVar)').prop('selected', true);
.val() will not return this object .. So you cannot chain it further..
jsFiddle

How to hide a field in SharePoint Display Form based on the field name (jQuery)?

I have a SharePoint list with the following single line of text fields: Title, Year and Type or Location. I want to be able to hide the Type or Location table row in the default display form. I know that I should create a JavaScript script and put it in Content Editor web part inside DispForm.aspx.
I am not fluent with jQuery syntax, thus I need help with the code, i.e. I don't know how to reference the table row which contains Type or Location field and its value. Here's what I've done so far, but it doesn't work:
jQuery(document).ready(function($) {
$("input[title='Type or Location']").closest("tr").hide();
});
I know that the "input[title='Type or Location']" part is incorrect; at least I think it's that. Could anyone help me out? Thank you.
Try:
jQuery(document).ready(function($) {
$("h3.ms-standardheader:contains('Type or Location')").closest("tr").hide();
});
I am not sure why you want to use jQuery for that. In SharePoint, you can choose to make a field required, optional or hidden. In most cases, just switching to hidden will address your issue.
For the record, I would also try to avoid as much as possible the use of jQuery(document).ready, it might conflict with the SharePoint out of the box onload event. In your case it is not needed.
Update: here is a way to do this with jQuery:
$("td.ms-formlabel:contains('Type or Location')").parent().hide();
Try it this way:
jQuery(document).ready(function($) {
$("input[title='Type'],input[title='Location']").closest("tr").hide();
});
It depends what type of column Type ior Location is. If it's a Single line of text, then you're close. You should use a DOM inspector like IE's Developer Tools or Firebug to see what the actual title of the input element is.
If the column is a different type, then it's likely not an input element. Using the DOM inspector again, you can look at what elements make up the field control and decide on your selector from that.
Finally, remember that hiding things in script is not secure. A savvy user can turn off the script or otherwise change the script so that they can edit it. It all depends on your requirements.
// UPDATE //
Ah, you said DispForm. As was pointed out in another answer, there aren't any input elements in a DispForm. You need to correct your selector.
If its just the Default Display Form, How about just creating a view and making it default?
The syntax should be like this:
$("input[title='Type']").closest("tr").hide();
$("input[title='Location']").closest("tr").hide();
It will work.

Allow only one value in jquery ui autocomplete

I followed this tutorial to to achieve hotmail-style items but I want one more thing,
I want to allow the users to select only one value
How to Use the jQuery UI Autocomplete Widget
The demo page
Thanks in advance,
my problem was solved.
i changed in
select:,
and before insert new span, i was remove all existing sapn like this.
$("#<%=divP.ClientID%> span").remove();
after this line use
span.insertBefore("#<%=tbO.ClientID%>");
to insert current selected item.

Categories

Resources