I have created a form with knockout that will allow the ability to give a product dynamic attributes: (i.e. size - small, med, lg). This is generated by input field and a multi select drop down.
When the fields have been filled out and the selection list which is the attribute values has been generated, I can add them to an observable attribute array.
The problem I can't see is I need to display these attributes and their array of values, but I also need them to be editable. I wasn't so keen on the idea of them be reloaded into the main form where it was created - but maybe that is the best way.
Maybe just listing the attributes as uneditable list of attributes
example:
Name: <span data-bind="text: attributeName"></span> <select height="5" data-bind="options: attributesValues"> <button data-bind="click: edit">Edit</button>
And if they click edit it loads it into the form that they created it from so it can be edited.
However, I wanted to see if there is a way to do inline editing and bind to the added Attributes and each of their array of attributeValues. So when they remove an attributeValue from the list, it would remove it from the array of that particular attribute.
Any thoughts?
So, I am not too confident I understood exactly what you are trying to do, and the one line of code you posted didn't really clarify it. I threw this fiddle together that has a multi-select for attributes, and lets you add new products with the select attributes. Once added, the new product has those attributes as select's of there own, which can still be edited. If this isn't what you are after, please try to clarify, and maybe post some more code.
Here is the fiddle
Related
The code im working on first makes a call to the database. Through this call, it is determined wether there are available workstations in the office or not.
If there are available workstations, "option" elements are added to a "select" element. This is achieved via jquery:
$('#idofselectelement').html(data)
Where "data" represents the markup to be inserted into the "select" element.
Now, my problem is that I'm trying to implement some code which checks wether your "favorite workstation" is available in the selected timeframe and then automatically preselects the respective workstation from the dropdownmenu in the "select" element. Everything is working so far, except for the selection of the workstation from the dropdown menu :/
The part of
I'm rather new to programming with javascript and the HTML DOM, so I'm not sure whether the fact that the options im trying to chose from are added during the runtime?
The code I've tried to manipulate the dropdown menu with is like this:
$('#idofselectelement').val(favoriteworkstation);
However, as I said, this doesn't work.
I've also already tried to output (console.log) the select element's length property right after the code which adds the markup with the available options has run.
But according to the output Im getting, the length is zero Oo
However, the dropdownmenu is definitely being created AND I can indeed manipulate it, but unfortunately not in the way I want to.
If I add an onclick event which sets the value of the respective select element, then the value in the select field indeed changes to the value specified in the event handler.
So I wonder why I can't have the favorite workstation preselected after the timeframe was chosen...
EDIT:
For further insight into the problem, I'm adding a bit more code here.
This is what the HTML Select element looks like BEFORE anything is added during the runtime:
<label for="#sitz">Sitz Nr.</label>
<select type="text" class="form-control" id="sitz" name="sitz" value="">
the markup which is added during the runtime
<option>workstationvalue</option>
<option>workstationvalue</option>
//and so on, depending on the situation...
This is a timing issue.
The js trying to find the element is faster than the actual add of the element to DOM.
Can you describe what you want to do? You might be able to do that before adding the element to DOM.
Editing before adding to DOM is possible if you convert your String to an jQuery object
var $jqueryObject = $(data);
$jqueryObject.find('.classYouSearch').val(value);
$('.whereToAd').html($jqueryObject);
I have an issue trying to add inputs dynamically.
I have this:
<button ng-click="operations.push({})">Add input</button>
which is adding inputs:
<div ng-repeat="operation in operations">
<input ng-model="operation.detailText">
</div>
I have 2 columns, where I have exactly the same due to an ng-repeat, so, in both columns I have the adding inputs button, When I click on the button Add input, I am adding the inputs to both columns, which I don't want, I need to add those inputs only to the current input where I am working on.
I made a video for you to see what I am talking about.
Here the video
Check here for the code: jsbin
I think you are using the same array for both the ng-repeat that is
operations
So when you click on add button it adds an empty object to operations and both the ng-repeat is affected since they both are using the same array.
You need to have different arrays, something like operations and operations1 and then write the second ng-repeat with operations1
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.
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/
I found this situation very interesting and I hope it is to you as well. I have an exhaustive data entry page with 50-70 form elements loaded with pre-populated values.
Now on submit, I need to show in the next page, the form elements that are changed. Values such as, Label, Old Value, New Value.
What will be an ideal way of going about this? I am looking for a generic impl since I would want to reuse it many times. My skills in playing with a HTML DOM is very limited but I can find a way if you can guide me with an approach.
You can add attribute to all <input /> to save the original value.
You can easily do that with jQuery:
$("input").each(function() {
$(this).attr("originalValue", $(this).val());
});
And then compare it with the new value when the user hit the Submit button.
Demo: http://jsfiddle.net/uUGrU/14/