I am working on knockout with BreezeJs for retrieving and storing data from my local database. The problem I am facing here is the key value binding inside foreach binding. What I want to do, is to Display the 'Name' attribute into the text box and after retrieving the corresponding 'Id' attribute from my database.
"operator"[successfully accessed from breeze] is a attribute defined in database which have int value 1, hence my text box must display the corresponding value from "operators" [defined in my javascript file]
i.e.,"Subtraction" for one record
var operators = [
{id: 0, name: 'addition'},
{id: 1, name: 'subtraction'},
{id: 2, name: 'division'},
{id: 3, name: 'multiplication'}
];
My HTML bindings
<div data-bind="foreach: jobs">
<div>
<label>FirstNumber :</label>
<input data-bind="value: first_no" />
</div>
<div>
<label>operator :</label>
<input type="text" data-bind="text:operators.name, value: $root.operator"/>
</div>
<div>
<label>Second Number:</label>
<input data-bind="value: second_no" />
</div><div>
<label>Result :</label>
<input data-bind="value: result" />
</div></div>
These result,second_no,operator,first_no are the column names in my
database and jobs is an observableArray.
I know I am not correct but I need to find some way to figure out the above issue.
Note: I am using breezeJS to get & store data from database that's why I mentioned a tag of it, though the above problem is of knockout rather than breeze.
Without seeing the rest of the code, the biggest issue with your code is using a with binding instead of a foreach. Foreach is used to iterate, with is used to change the context.
<div data-bind="foreach: jobs">
<div>
<label>FirstNumber :</label>
<input data-bind="value: first_no" />
</div>
<div>
<label>operator :</label>
<input type="text" data-bind="text:operators.name, value: $root.operator"/>
</div>
<div>
<label>Second Number:</label>
<input data-bind="value: second_no" />
</div><div>
<label>Result :</label>
<input data-bind="value: result" />
</div>
</div>
Related
I have this code snippet:
<div>
<label for="requiredSize">Required Size 5 : </label>
<input type="text" name="requiredSize" id="requiredSize" class="required_size" minlength="5" />
</div>
I am doing a form validation exercise, and I need to have one of the requirements be based on required size. How can I call the minlength into my JavaScript file to be used, since it does change throughout the form?
I have tried document.querySelector("minlength") to try and save it as a variable, but it wasn't being recognized.
const input = document.querySelector("#requiredSize");
console.log(input.getAttribute('minlength'))
<div>
<label for="requiredSize">Required Size 5 : </label>
<input type="text" name="requiredSize" id="requiredSize" class="required_size" minlength="5" />
</div>
I have a drop down containing response data from a axios request
<multiselect v-model="order.orderJCname" id="orderJCname" name="orderJCname" :options="orderRCnameoptions" label="nicename"></multiselect>
On selection of the record form my response objects i want to then populate three addtional forms elements with extra data from the selected object?
<div class="row">
<label class="col-sm-12" for="orderACjobtitle">Job Title</label>
<div class="col-sm-12">
<input v-model="orderRCnameoptions.job_title" v-bind="orderRCnameoptions.job_title" name="orderACjobtitle" type="text" disabled class="form-control" id="orderACjobtitle"/>
</div>
</div>
I have tried V-Bind but not sure if im in the right ball park
First of all I'd make use of the select event of vue-multiselect:
<multiselect v-model="order.orderJCname" id="orderJCname" name="orderJCname" :options="orderRCnameoptions" label="nicename" #select="onSelect"></multiselect>
Then in your vue components you create the according method, which stores the selected value:
methods: {
onSelect(selectedOption, id) {
this.selectedOption = selectedOption;
}
}
Last part would be the binding to those 3 text boxes you mentioned. All of them should reference the same data field:
<input type="text" name="text1" v-model="selectedOption.key1" />
<input type="text" name="text2" v-model="selectedOption.key2" />
<input type="text" name="text3" v-model="selectedOption.key3" />
Cheers!
I am using an HTML5 jQuery Sortable library. Not jQuery UI Sortable but this one here http://farhadi.ir/projects/html5sortable/
I have used it on many projects in the past and generally I use AJAX to save the sort order as a string of ID's into a database field.
On my current project, I need to do things completely different though. I am not using AJAX to save the order this time.
Basically I have the Sortable library running on a Form edit screen which will have a list of DIV's, inside these div's will be form fields. At the bottom of the page is a save button that submits the form to save all the data on the page. So I would like to instead store the sort order of each DIV into a hidden form field for each item.
I have set up a demo to work with on CodePen.io here http://codepen.io/jasondavis/pen/ztirw?editors=101
I could use some help to update a Form filed under each Div to update the fields with the Sort order each time a Drop occurs. So instead of saving a string of ID's in the correct sorted order, I would instead like to update every record on a Drop event into a Form filed with the current sort position.
Any help please?
The demo HTML structure looks like this...
<div id="project_tasks" class="tasks_block sortable">
<div id="task_13" class="task_row">
<span class="handle"></span>
<input name="taskid_13" id="taskid_13" size="15" type="text" value="taskID 1">
<input name="projectid_13" id="projectid_13" size="15" type="text" value="917fdb60-96d7-346f-10b3-54175c9a2f34">
Sort Order: <input name="sort_order_19" id="sort_order_19" size="15" type="text" value="1">
<br style="clear:both;">
</div>
<div id="task_14" class="task_row">
<span class="handle"></span>
<input name="taskid_14" id="taskid_14" size="15" type="text" value="taskID 2">
<input name="projectid_14" id="projectid_14" size="15" type="text" value="917fdb60-96d7-346f-10b3-54175c9a2f34">
Sort Order: <input name="sort_order_19" id="sort_order_19" size="15" type="text" value="2">
<br style="clear:both;">
</div>
<div id="task_15" class="task_row">
<span class="handle"></span>
<input name="taskid_15" id="taskid_15" size="15" type="text" value="taskID 3">
<input name="projectid_15" id="projectid_15" size="15" type="text" value="917fdb60-96d7-346f-10b3-54175c9a2f34">
Sort Order: <input name="sort_order_19" id="sort_order_19" size="15" type="text" value="3">
<br style="clear:both;">
</div>
<div id="task_15" class="task_row taskheading">
<span class="handle"></span>
<h2>List Heading 1</h2>
Sort Order: <input name="sort_order_19" id="sort_order_19" size="15" type="text" value="4">
<br style="clear:both;">
</div>
<div id="task_16" class="task_row">
<span class="handle"></span>
<input name="taskid_16" id="taskid_16" size="15" type="text" value="taskID 4">
<input name="projectid_16" id="projectid_16" size="15" type="text" value="917fdb60-96d7-346f-10b3-54175c9a2f34">
Sort Order: <input name="sort_order_19" id="sort_order_19" size="15" type="text" value="5">
<br style="clear:both;">
</div>
</div>
A little JavaScript to start things off...
$( document ).ready(function() {
$('#project_tasks').sortable({
handle: '.handle',
onStartDrag: function() {},
onEndDrag: function() {},
onChangeOrder: function() {}
}).bind('sortupdate', function() {
$('.sortable div').each(function() {
// Update a HIDDEN Field under each DIV with the current sort order
// So when my Form is submitted/saved, it can save the sort order for
// each record into the database.
});
});
});
Ok - here you go:
http://codepen.io/anon/pen/IEKvA
$('.sortable div').each(function(idx) {
var inputField = $(this).find("[id^='sort_order']");
$(inputField).val(idx);
});
The idea is to everytime and item is dropped you run thru your divs, find all the input fields that start with the id sort_order and set the index accordingly.
I am currently creating a form for my employer which tracks individual employee statistics throughout a typical day, such as number of calls, revenue, items sold, etc. I would like to asynchronously update a database using a simple html form without necessarily having to use the entire jQuery library since all I would be using is the $.ajax method, which I do know is effective.
The trouble I'm running into is in finding a way to serialize a form using the form's <input type="submit"> button. My form's input fields are spatially organized using <div></div> tags between the <form> element itself and its <input /> fields themselves, as seen below:
<form name="tour_1" id="tour_1">
<div class="num_calls_cell">
<input type="text" value="3" name="total_calls" autocomplete="off" />
</div>
<div class="acw_cell">
<input type="text" value="24.35" name="acw" autocomplete="off" />
</div>
<div class="rev_cell">
<input type="text" value="125.34" name="revenue" autocomplete="off" />
</div>
<div class="env_cell">
<input type="text" value="0" name="envelopes" autocomplete="off" />
</div>
<div class="pen_cell">
<input type="text" value="1" name="pens" autocomplete="off" />
</div>
<div class="cal_cell">
<input type="text" value="0" name="other" autocomplete="off" />
</div>
<div class="comment_cell">
<input type="text" value="comment" name="comments" autocomplete="off" />
</div>
<div class="submit_cell">
<input type="submit" class="submit_tour" value="Submit Tour" />
</div>
</form>
There are a total of four of these forms that I have in one "day" (you may view the actual project here (http://ryanvold.com/prototype/prototype.php).
How could I most effectively transfer my form data into a PHP file that can easily update a MySQL database using my <input type="submit"> buttons?
You can serialize form like this:
document.getElementById('tour_1').addEventListener('submit', function(e) {
e.preventDefault();
var params = [];
for (var i = 0; i < this.elements.length; i++) {
params.push(this.elements[i].name + '=' + encodeURIComponent(this.elements[i].value));
}
params = params.join('&');
alert(params);
}, false);
This will give you params as follows:
total_calls=3&acw=24.35&revenue=125.34&envelopes=0&pens=1&other=0&comments=comment&=Submit%20Tour
Having constructed params string like this you can use it as ajax request POST parameters:
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(params);
This is just an example, remember to take care of IE if you need to support it (attachEvent).
Demo: http://jsfiddle.net/LnLaT/
I've got an HTML form that's built dynamically using templates at runtime - dictated by user action.
I need to set the tab index across the form based on the tabindexing specified within each of the pieces of the form.
Given this, is there a way in jQuery to order items within a set? For instance something that follows this pseudo structure would be awesome, but I can't figure out how to achieve it:
<div name="firstTemplate" templateIndex="0">
<input type="text" name="field0" tabIndex="1" />
<input type="text" name="field1" tabIndex="2" />
<input type="text" name="field2" tabIndex="3" />
</div>
<div name="firstTemplateRpt" templateIndex="1">
<input type="text" name="field0" tabIndex="1" />
<input type="text" name="field1" tabIndex="2" />
<input type="text" name="field2" tabIndex="3" />
</div>
<div name="secondTemplate" templateIndex="2">
<input type="text" name="field0" tabIndex="1" />
<input type="text" name="field1" tabIndex="2" />
<input type="text" name="field2" tabIndex="3" />
</div>
I could then use some variation of the following concept:
$("input, textarea, select, input:checkbox, input:radio").orderBy("templateIndex, tabIndex");
Where templateIndex would be the index of the template within the form and the tabindex would be the tabindex of the control within the template. A template could be added to the form multiple times at runtime, which is causing havoc on manually specified tabindexes.
When another template is added to the form, it would be assigned the templateIndex="3" with its manually set tabIndexes starting again at 1.
Collect the divs with a templateIndex attribute into an array, then sort them like:
divArray.sort(function(a, b) {
return a.getAttribute('templateIndex') - b.getAttribute('templateIndex');
});
Then iterate over those and sort the inputs inside the array using a very similar function:
inpArray.sort(function(a, b) {
return a.tabIndex - b.tabIndex;
});
Then move the elements in the required order in the document using something like node.parentNode.insertBefore(node, firstChild).