I created a method and pass the element type, id, and any inner text that instantiates a new html element. The last statement: Me.Controls.Add(element) adds it to the end of the page, but I would like it to be inserted in a specific position (between 2 divs within a form). What I am describing is very similar to this post on SO here, although it was for javascript.
Perhaps look at using a PlaceHolder control..
Related
I essentially want the same functionality in a "single" select as in a "multiple" select. In the multiple select, the original element is also the search box:
In single select, there is a separate span for the result (in the example below it displays ProfitLoss) and the search box (newsearch).
Is there a way to collapse those two elements into one, where one simply edits the original element (in the example, one would edit the element containing "profitloss")?
I tried setting minimumResultsForSearch to -1, that did not do anything. ChatGPT also did not come with any useful answers.
It's possible to customize HTML in handling events
First, You have to implement "multiple" select (Design the select field the same like the single one)
After then, you can do some customize in HTML by capturing the event
1. selecting
2. change
So, when the user selects the option, the selecting and select events are fired where you do your logic to customize the HTML, remove the item, OR add the item. It work like single select
I hope you got the idea
In one of my pages, I am using an example of editable html table from this link: http://mrbool.com/how-to-create-an-editable-html-table-with-jquery/27425, which works without any issues and when I click on a cell in the table, it changes it to text box.
However, I had to change the layout of my page where, I had to place the sample mentioned above within another html table (nested).
Now the problem is when I click on the cell, it does not identify the child table, which has the data and I want to click but it clicks on the cell of the parent table, which in this case is the parent table, and holds 2 different tables.
So, what I want you help with is:
Get a method to identify the cell of the child table when it is clicked
Or
Some way so align two tables on my page to be aligned side by side. Currently I am using the parent table to align my other 2 tables to sit side by side.
if the second option is easier to achieve then, I don't have to change much.
Any suggestions?
If you're using a parent table element to layout elements on your page, just know that this is a deprecated unsemantic practice, as table elements are for tabulating data. You should use the CSS float property, which is the convention, see CSS Floats 101 ยท An A List Apart Article and w3schools.com
Refactoring out that parent table should fix your problem. Otherwise you can fix it through modifying the selector in your JavaScript and by assigning the edittable td elements with a class (eg. edittable-cell) so you're not assigning event listeners to other tables' td elements unnecessarily and causing unwanted behaviour elsewhere.
JavaScript
// Instead of the 'td' selector
$("td").dblclick(function() {
// .. your code here
});
// Use a more specific selector, eg.:
$('.edittable-cell').dblclick(function() {
// .. your code here
});
If you are semantically nesting tables of data and/or still have this issue, you can try preventing the event from bubbling up to its parent elements.
JavaScript
$(".edittable-cell").dblclick(function(event) {
event.stopPropagation();
// .. your code here
});
I was working on a page and noticed they had an element bound to document (ex. document.formNameId). I was thinking it must be the JavaScript and not being able to find a place where it was set, I removed all the JavaScript on the page. I still found the element name set on the document.
After playing with it, it seems form elements that have a name attribute set are added to document. Are there any other elements that are by default bound like that?
EDIT:
Upon further inspection, you can even find elements inside that form element by the same API.
So if I do something like this to get an input element: document.formName.inputName
Check this example out.
Yes, these are called (in HTML5) Named Properties
The description in the spec says:
The Document interface supports named properties. The supported
property names at any moment consist of the values of the name content
attributes of all the applet, exposed embed, form, iframe, img, and
exposed object elements in the Document that have non-empty name
content attributes, and the values of the id content attributes of all
the applet and exposed object elements in the Document that have
non-empty id content attributes, and the values of the id content
attributes of all the img elements in the Document that have both
non-empty name content attributes and non-empty id content attributes.
The supported property names must be in tree order, ignoring later
duplicates, with values from id attributes coming before values from
name attributes when the same element contributes both.
So these happens for a number of elements. There is also a description at the above link of how the values of such properties are determined, including how for forms, it becomes the list of controls on the form.
https://developer.mozilla.org/en-US/docs/Web/API/document has a good overview over all properties and methods of the document object.
[obsolete: document.formNameId is missing there and I could not find it on this website, so it seems it is not a default property but was added by a script (a quick google search for "document.formnameid" lists only this stackoverflow question).]
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?
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.