I've this big form that is just native web stuff with jQuery. Its got a lot of fields, like 200, and periodically we add and remove fields. I have a request to make all the numbers show up with commas as a thousands separator, and also for dates to always show up in localized format.
As it is right now, now will just show up in the raw format: 10000000. The goal is to show 10,000,000 in the input.
I would love to not touch the server-side code for database updating, so keep all the logic on the client in JavaScript. Too have the user enter information normally, but once they are finished, it could show any numbers with the commas. toLocalizedString usually works for this. Then the issue arrises: when the form is submitted, I would need to remove all the commas from the numbers.
I started catching the input events, checking if there is a number in there, and adding the commas. Then on submit I'd need a routine to remove the commas, but only if they were put in by my program.
I feel like I've seen functionality like this before, but I haven't found a perfect solution. There needs to be some bifurcation between the source format of the data and the format displayed to the users. I'd love to be able to just show the user a representation of their data without actually changing the data in the cell. Not sure if its possible.
I was thinking there might be some elegant solution to this issue.
The generic way to do this is to have a model with the actual (typed) values, for example number, and a view model with formatted display strings.
Eg. (pseudocode):
class Model {
value: number
}
class ViewModel {
value: string
}
class ViewModelMapper {
toModelView(model: Model): ModelView {
}
toModel(modelView: ModelView): Model {
}
}
You will need to do transformations from model to view model when loading the data from the server and back before saving to server. You will use the view model to display the data in UI and the model to communicate with the backend.
You can use existing input mask libraries that are doing something along these lines already. See for example something like jQuery-Mask-Plugin.
The question is a little generic, maybe you would like to add some specific details.
Related
I was working on a website for which I was designing the conversation system (Post, comment, like, etc.) like what all social networking sites have.
I am trying to provide option for inserting smileys along with the normal text content in a textarea.
My Questions
How do I add images like smileys in a textarea (which accepts only text by default) as and when user selects one from the list or puts in the symbol
Once I have the textarea with smileys and normal text, what is the best way to store it in the MySQL database
When displaying the message with smileys, what is the best way to parse the message from the database
NOTE
I am aware of developing a conversation system with just plain text and files. I am just not sure how to add,store,display smileys.
I am already aware of plugins like Tinymce: http://www.tinymce.com/tryit/basic.php
But I want to know how to make my own.
textarea can't be used to display images,use a contenteditable div instead.
As for the backend,store data in the database regularly (ex: Store :) directly)
and maintain a common table/array where you replace these text with the image/smiley each time you display the data.
Wouldn't having some kind of inline notation help here? You could have something like [::smiley-XXX::] where that represents a particular smile. So long as it's something users are unlikely to type by accident it'll be fine.
Then you need a way of converting that from text into HTML, where you inline the appropriate image.
I am working on a business cards project with variable data printing done online. I need a rule I can use so that the fields that are not used or left blank will be suppressed.
At the moment I am getting a blank test field between two text fields if it is left blank. I am new to this so any help will be appreciated.
I'm assuming your situation involves a user typing data into an HTML form after which the information is displayed somehow on an HTML page. If any of that is false, we will need more information to answer your question. It sounds like you have already figured out how to send the information from form to display and you just want to not see empty lines of display. That is handled with CSS style.
First, you need to have some way to test whether the field contains user input. Since you didn't offer any code to build on, I'm going to assume for the moment that you can figure out how to do that.
Then you can use JavaScript to programmatically alter the CSS of a given element. It will go something like this:
if (field_modified === false) {
// cause an HTML element to not be displayed
// here, the value associated to whatever field
// you are testing is displayed in an HTML node with ID 'id_of_node_here'
// There are various other ways of accessing specific HTML nodes
// without giving them IDs. You can research that yourself.
document.getElementById('id_of_node_here').style.display = "none";
}
To test user input in a field, it's probably sufficient to test the length of the value or whether a form element has been changed from default.
I'm new to knockout and just starting to get my head around the framework. However, I've come into a problem whereby I'm trying to format large numbers with commas. I've been able to get the number to format to decimal places using the extenders API but this isn't what I want.
The number is stored in an array and an example of a number used in the app will be 5 million. So I need the values to print out 5,000,000 - is this possible? I'm guessing it has to be.
For the formatting, you can use the following regex (warning: it does not work with float): mystring.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
You can check out this example: http://jsfiddle.net/nyothecat/XgezN/1/
I think you'll want to create a custom binding. The easiest thing would probably be to use an existing jQuery formatter to format the display when the observable changes and then set up an event handler for the textbox to parse the textbox (removing the commas) when the users types something new.
Let's say that I have a select box in an html page. And the values in that select box come from a db query that returns a not so small list of options.
Now if I need to add another 4 select boxes showing the same list of options, would I have to duplicate the code and so send back to the browser 4*(select_box_result_size) or this is normally done differently?
Regardless of how you are managing the server-side code, the answer is that each select box needs its own group of options. That said, if all options are the same then you should only make one query to your database, and generate the all the select boxes you need with a single function. Simply get the options from the database, store them in a variable and then create your boxes.
Do note that in your HTML each box will have the values hardcoded into it, so your client-side code will have duplicate data, but that doesn't really matter. What is important is that the code that you'll have to maintain is clean, and that you put as little stress as possible on your database. One query + one function is all you need.
If performance was really an issue, you always have the possibility of dynamically-generating the combo boxes using JavaScript. You could essentially embed one and then copy it four more times. However there are two things you need to consider for this:
Do you really have a performance issue that is being caused by these combo boxes? (Probably not)
Is the combo box so big that it will actually take longer to load the HTML across a network connection than it will to copy the box four times with JavaScript? (Again, probably not... remember that the longer the box the longer it will take to copy.)
Unless you have 1000+ options, I would recommend to simply stick to generating the box four times. If you do have that many then do two things:
Benchmark. Create two pages, one with a single combo box and one with four and compare the size. Then compare the load times.
Consider improving your UI. Perhaps if you have 1000 options it would be better for the end user to implement some sort of filtering process to reduce the number of necessary elements... i.e. If you have a box containing all the cities of the world, have one box to select the country and then populate the city box with only the applicable cities by way of a JSON request.
And the values in that select box come from a db query that returns a
not so small list of options.
For user friendliness you could try autosuggest, there are libraries for that but you could try writing your own.
If same data is displayed multiple times (4 times) depending on your server side script it might be best to fetch the data in memory and generate the selects instead of querying 4 times.
would I have to duplicate the code
It's best not to duplicate, at the very least you can write a helper function to generate the select list. If you're serious about removing code from html markup you can look into using one of the many MVC frameworks out there that use templates and allow you to bind data to it.
I have a share point survey. When we responding to the survey, as we know, it will open NewForm.aspx. this page contains a ListFormWebpart in which questions from survey list will be displayed.
Now, i need to add few labels before the questions and these label values should be prepopulated from query string. What i am trying to achieve from this is, i wll created a link
with some values in query string and send to specific users. different users might have different values in query string. Whenever they click on the link, it should open the survey with prepopulated label values along with questions in list.
I am not sure, how to do it. I have tried to add some html control to web part(using share point designer) and through JavaScript i have tried to set query string values. Then i tried to put asp controls and trued. it didn't work. I am trying since last 2 days. No progress. I am using SharePoint 2003, WSS2.0
Can anybody, please help me to implement this solution.
You may find it easier to create a webpart with a custom form that enters data into the survey list.
The survey lists are useful as they are quite flexible, but your solution will likely make it hard to change your list in future. That means that a webpart specific for this survey may be a valid design decision for you.
An issue with your current implementation is that passing values specific to different users through the query string does not give you any guarantee that enterprising users will not change those values.
This may not really be an issue depending on your situation, but a custom control will allow you to query the current user and make decisions that way.
I have written some Java Script for reading query string, parsing and assigning values to controls based on their ControlID. I have used Content Editor Web Part to add this JavaScript to the Existing Survey page. Then this script has done job of prepopulating the fields.