I have a bunch of elements (divs) and they represent items. I can delete them by clicking a link and its done through ajax. I had the divs store the value in id however it appears that even though it does work the standard says id names must start with a letter. So i could start it with a letter and remove it when i use ajax or i can store the value another way.
What are ways i can store values in html? I don't think inputs are legal outside of forms but i am rethinking what are good ways to store values.
Best way is to use the new HTML 5 spec to store data in the data-[name] in the div elements
ie
<div data-yourfield="value">
Text
</div>
Then using jQuery find the divs with the selector (reference http://api.jquery.com/category/selectors/)
div[data-yourField=""]
You can store it as text inside the div if you like. You also can use inputs, just add the form tag around everything. Just because it's a form doesn't mean it has to "submit". Inputs or textboxes would probably be the best way to store them actually.
Related
I have an html page with an option list where the user will choose to display information related to an event. As such, I want each option in the drop down list to show a date and X happened to Y. Within the option list, I'd like to have the dates left-aligned, then the "X's" aligned among the different options, then the "Y's" aligned with each other (I believe it will make it easier for people to see the differences when scanning the list).
Basically (as best as I can render here), this is what I'd like to do:
1/1/2000 This thing shipped to Anywhere, KS
12/18/2003 The other thing installed at Nowhere, NV
3/22/2007 The darned thing failed in Roswell, NM
^ 2nd block aligned ^ 3rd block aligned
I've tried div's within the option entries, but that made no difference.
I have searched exhaustively for something along these lines, but I haven't found anything even close (only questions on how to center align the entire option text, etc.). Is something like this even possible?
A select is not way to do this if you want formatting like that. HTML is not allowed in an option tag. According to the MDN, permitted content of an option tag is:
Text with eventually escaped characters (like é).
If you want to keep the "look" you'll need to find a different approach, like a table with a radio button in the first column of each row.
I have the following div in UIWebView:
<div contenteditable="true"></div>
If the user inserts new line (using the return key in the visual keyboard), and when he is done he clicks on done in the previous/next/done grey visual keyboard, it combines the lines to one line.
How can I avoid it?
Perhaps this JSFiddle can shed some light onto what's happening within your application. If you type some lines in the top DIV (gray background color), the HTML code that you get as the return value of its innerHTML property will first display in a textarea field below it (including HTML tags formatting). As you will soon see it's not merely what you'd expect to handle in your application ('line one' + CRLF + 'line two'...), but it also contains HTML elements separating lines one from another. That's how browsers are able to display contenteditable DIVs as if they're 'memo' type controls - by parsing their HTML (that's what browsers do). This HTML formatted text is also how your application receives user submitted text, and there you have to decide what to do with this formatting. You can either strip them away (which is, I suspect, how you set that object's property and it deals with that for you) replacing HTML elements like <DIV></DIV> and so on with a space character, or choose (with your control's property, or in code) to handle this formatting whichever way you'd like them to be handled. I'm not familiar with UIWebView though, and you'll have to find on your own how to retrieve complete HTML formatted values that you want to apply to the next DIV element that you're displaying (or same one that you're assigning new values to).
UPDATE: After searching the web for UIWebView reference, I've actually stumbled across one related thread on SO that shows how to retrieve innerHTML value of an element in your underlying HTML document:
//where 'wView' is your UIWebView
NSString *webText = [wView stringByEvaluatingJavaScriptFromString:#"document.getElementById('inputDIV').innerHTML"];
This way you'd be able to retrieve the whole innerHTML string contained within the contenteditable DIV that you use in a webText string variable and parse its HTML formatted text to whatever suits your needs better. Note though, that different browsers format contenteditable DIVs differently when Enter Key is pressed and some will return the next line enclosed in a new DIV, while others might enclose it in paragraph P and/or end the line with a break <BR> or <BR />, when shift+enter were used together to move to the next line. You will have to account for all these possibilities when processing your input string. Refer to the JSFiddle script I wrote using your UIWebView component to check what formatting applies.
Of course, in your case, it might be simpler to replace your contenteditable DIV with a textarea that will return more commonly formatted \n end-of-line (CR+LF). DIVs however are easier to design, so choose whichever suits your needs better.
Cheers!
I don't believe there's a solution to this from the objective-c side of the stack. The standard HTML- element only delivers a single string. It might be possible to achieve through some javascript magic or similar on the web-end of things.
My HTML-skills are not up to scratch but if you also control that end perhaps changing the to a textArea might help?
How do I create a label that is editable? I am displaying data in a table, and would like to provide in place editing for the displayed data. What CSS styles can I use for it?
Put a text input box there and make its background same as the background of its container and put 0 border on it and use same font style and color as other items in the table
What CSS styles can I use for it ?
It's not really a matter of CSS (unless your questions pertains solely to achieving a particular style).
You can:
Make all table cells contain inputs. This has the (potentially significant) downside that all data will be submitted to the server if the form is POSTed. I wouldn't recommend this approach unless the table is small or you are never fully submitting the whole page.
Change the label to an input on click. When the form is submitted, this value will now be a part of the request.
Change the label to an input in response to an action elsewhere (e.g. focusing the row, clicking an edit button next to the row, etc.)
Set contenteditable="true" on the element. This allows rich formatting but also requires that you keep track of the changes the user has made; they will not be submitted to the server unless they are placed into a form field.
You will likely want/need a snippet of JavaScript to change the label to an input (#2 and #3). You will need JavaScript to get the data to the server with approach #4.
i'd like to set and retrieve 2 values for a div and span
1. text (displayed on screen)
2. value (for backend purposes)
what's the correct way to do this?
there's innerhtml, value, val(), text, html....i'm confused
do these serve different purposes? they seem interchangeable
One correct way to accomplish this is to set a "data attribute" of the div to the internal or server value, with the user-visible value being inside the div:
<div data-info="internal">visible</div>
This shows it done statically. You can also create and set the attributes of a DIV DOM node in JavaScript. Ask me if you want an example.
Sorry for the 8-year delay in answering.
See:
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*
I would like to know if there is anyway I can divide an item on two line inside a select box.
One of the values of my select box is two long to fit in my div.
No, this is impossible.
You can consider using a javascript widget, like this jQuery plug-in.
May I also say that what you are trying to do is uncommon - even in desktop applications users don't expect to find wrapped text in a drop-down box and may get confused if they do see one. It would be better to try a different control or try to limit the text.
It is impossible, but if it's simply a matter of avoiding that the element gets too wide you could just define a width (eg. <select style="width:100px;">). This will cause text to be cut off when the box is "closed", but as soon as you "open" it the entire text will be shown.
As far as I know, it's impossible. However, I'd look at jQuery for options. Specifically, there are jQuery plugins that allow for select box customization.
Select Box Factory 2.0 is one option. I believe it extends the functionality of the select box to allow text wrapping among other features.
You could simple add an option disabled in blank
<option disabled selected value> </option>
Divide an item that's on two lines in a select box.
Why would you want to do that? If you're using a JQuery plugin to make HTML display inside an option tag, then there would be no reason to ask this question, I don't think, as you would be already able to add a tag.
What you can do to make spacing in select elements, is to create a blank option tag, that has an empty value and name. You would then have to validate the submission to detect if a blank value was submitted.
If you are really in need, a hacky solution would be to take a screenshot of the text on two lines, and use images in your select box.
http://www.jquerybyexample.net/2012/05/how-to-add-images-in-dropdown-list.html
Just be sure to set the alt tag on the images for accessibility.