im totally new when it comes to trying to make HTML code. I was wondering if its possible to make certain rows/columns in a HTML chart modifiable by random users that view the page.
And if so is it possible to make it so that once modified they click a button and it changes some other rows like a calculator does, based on what i have preset (numbers)
hopefully that makes sense...
thks
btw im using a Google site i made
You can use <input> elements for allowing people to input text, and javascript for any computation involving their contents, or for changing what's on the page.
See https://developer.mozilla.org/en/HTML/Element/Input and https://developer.mozilla.org/en/JavaScript for more info on each of these.
HTML tables are columns and rows of static data, not modifiable. One solution would be using javascript and do an .onClick method on each <td>. That method would convert text in to something like <input type="text" name="cell_x_y" value="original_value" /> and then another method which would handle ENTER key or leaving that text field and would submit value to server.
Related
So I have Create & an Update view with Django. Both use the same template for the form. (It doesn't seem to be a Django problem perse, but in case it turns out relevant...)
With the CreateView, I can easily click into a textarea widget and edit its value. With the UpdateView however, I seem to need to use a bunch of click before somehow I manage to edit the content of the area. I have compared the html/css in both cases & they are exactly the same.
Upon further inspection, it seems that the imported data contains tabs in some empty fields (hence why it only appends in the UpdateView). So the issue appears to be that when I click anywhere in the input/textarea, the tabs make it hard to actually focus/select the cell. That may be why random clicks (or double-clicks to select the tab?) appear to allow me to edit properly.
I'm unsure if the tabs originate from the source data somehow, or just got added along the way. Of course I'll probably figure out a way to clean out that data.
Is there a quick css/jquery fix for this? Some sort of $('input').on("click"...) handler I could use? Of course one option would be to clean up the source data. However if for whatever reason they've been living fine with those in their previous system, I might just leave it & go for a quick fix, should one exists.
Something like this:
<textarea name="descfr2" cols="40" rows="10" maxlength="60" id="id_descfr2"> </textarea>
https://codepen.io/logikonabstractions/pen/GRWPROO
You could use the focus() method from jquery (https://api.jquery.com/focus/).
Try to add the event on your cells so that the input inside became focused on click:
$('.cells').click(function(){
$(this).find('input').focus();
}
I would do something like that (if you can select all your cells with some class attributes)
I have a rather stupid question, but I would like some input on the issue.
On some websites you have a date input field, which has a placeholder in the form of mm/dd/yyyy.
However, when you start typing, the characters are getting replaced one by one, like 02/3d/yyyy.
So its not a placeholder but some sort of dynamic input already. My question is, how is this generated? Is this a javascript library (jquery, angularjs etc.) or any other feature im not aware of?
Thanks for your help, I tried finding appropriate code online but nothing did the function described above.
I mean of course you could program in JS an event listener on keypress, and depending on the input you adjust the field accordingly, but I wonder if there is an easier way to do so!
You can create the mask by following this guide: https://github.com/RobinHerbots/Inputmask
Good Morning everyone.
I'm working on a html page where i need a form similar with the one from the image. It will start from one section of fields and using jquery i will add more and more as needed.
My problem is that i'm not sure how should i design it, i'm thinking using a div that will hold three input fields and from there when i press tab key another div should be added using JavaScript.
I need an advice or example how should i do it.
HTML form has some text boxes and a drop down box.
Drop down has huge values, and takes lot of time to fetch from database.
So I want to load the page first and while the user fills the form (text boxes) I want to load the drop down box (without his knowledge :-) ).
But without any event trigger, how do I make call to database again ?
I am using JSF with RichFaces, Servlet.
The following code is not working
<h:selectOneMenu value="#{obj.selectedValue}">
<f:selectItems value="#{obj.allValues}" />
<a4j:support selfRendered="true" action="#{bean.action}"/>
</h:selectOneMenu>
Thanks,
+1 for using Ajax - but if you have a very large number of values,t hen you might want to consider using an auto completion dropdown - where the the user starts typing what they need and after they have typed a few characters, you kick off your ajax reqeuest and just load those requests that match.
have a look at "google suggest" if you want to see this in action
-Ace
As already mentioned you can use AJAX to load the dropdown items asynchronously, but I would suggest redesigning the form so that the huge dropdown is not required. Perhaps let the user search for the correct value on a previous or subsequent screen? Long dropdowns are not easy to use as they require lots of scrolling and it can be hard to find the correct value on a large list.
At the bottom of your page put the following:
<a4j:jsFunction name="yourJsFunction" action="#{bean.fetchSelectItems}"
reRender="yourDropdown" />
window.onload = yourJsFunction();
You will have to use AJAX. When the page loads display a empty select box. Then write some JavaScript that will call some URL on your server that will return the options for the select box. And when you get that just populate the select box with those values.
Be advised that your form will be useless to those without JavaScript.
I have an HTML table with rows (20 rows).
Every row has a listbox of countries (about 250 countries) that are filled using a single dataset from the database.
Loading time is quick enough, but rendering time is really a mess.
Is there any way I can speed the rendering of those listboxes?
You could load it only once, and then copy the DOM element everywhere you need it...
I'm not sure if this would improve a lot since it would rely more on the user's computer, but I guess it's worth trying if it's too slow the way it is right now.
edit: here's how I'd do it. Use with caution, I haven't tested it and there is most likely tons of errors with this code, it's just to give you an idea of what I was saying.
<mylistbox id="listboxtemplate"> ... </>
<div class="thisPlaceNeedsAListbox"></div>
<div class="thisPlaceNeedsAListbox"></div>
<div class="thisPlaceNeedsAListbox"></div>
on document ready, using jquery:
jQuery(".thisPlaceNeedsAListbox").append( jQuery("#listboxtemplate").clone() )
You could try to add next select box only after user has selected previous one (using JavaScript).
I'm quite sure that you can rethink the form or the process, but I can't suggest anything specific since you haven't given enough information. For example depending on situation you could use multi-select or some fancy JavaScript widget.
EDIT based on your comment:
Then how about serving the table without selects. And if user double clicks on a country field you change the text element to select element using javascript. And once user has selected the country you can change back to text element. You can submit results back to server using Ajax (after user has selected the country) or using hidden fields a submit button. This way DOM will never contain more then 1 select element.
You can pass countries to javascript using inline JSON object/array (in script tags). To make things even more faster after user has edited the first element, just hide (css: display: none;) the first build select element and clone/move it around each time user wants to edit a row.
As you can see there are a lot of paths you can take using this approach, it all depends how much you want to optimize/work on it.