I have a dropdown menu/textbox which is used for when users are typing in something to save. Also, if it is saved it will load on the page here as well.
<tbody data-ng-repeat="(wholesalerIndex,wholesaler) in wholesalers" >
<tr >
<td >
<label class="control-label">{{wholesaler.ORDER}}</label>
</td>
<td class="col-md-3">
<div>
<input type="text" class="form-control dropdown-toggle" data-toggle="dropdown" data-ng-disabled="formReadOnly" data-ng-model="wholesaler.WHSLE_NAME" data-ng-keyup="comboWholesalerBoxOptions(wholesaler.WHSLE_NAME, 'wholeSalerNameOptions')" />
<ul>
<li data-ng-repeat="wholeSalerOption in wholeSalerNameOptions | unique: 'NAME'" style="width:100%"><a data-ng-click="changeWholesalerData(wholeSalerOption, wholesaler)">{{wholeSalerOption.NAME}}</a></li>
</ul>
</div>
</td>
<td >
<button data-ng-click="upWholesaler(wholesaler)">Up</button>
<button data-ng-click="downWholesaler(wholesaler)">Down</button>
</td>
</tr>
</tbody>
There is an order of these rows being created below and it can be moved up or down. {{wholesaler.ORDER}} is the current order of the row. I want the input dropdown to be populated with {{wholesaler.NAME}} when a button is pressed.
I can't figure out how to get it to populate. Putting it next to {{wholeSalerOption.NAME}} just makes the name add onto the end of the dropdown search results. value="wholeSalerOption.NAME" also doesn't do anything.
How do I get this field to update like other ones without interfering with its ability to do it's search?
Related
I have html table whose columns are dynamically generated, where each column is a textbox. I am struggling to work out is how to validate these textboxes.
Here is my jsfiddle:
https://jsfiddle.net/aman1981/4djn2zee/
So on the save button click I want to validate user input.
The requirement is:
I want to make all but one column required field.
I want to apply regex to certain columns (based on column name) as some columns are chars only whereas some only numbers.
Here is my construct of the texbox:
<tbody data-bind="foreach: { data: valuesData, as: 'rowData'}">
<tr data-bind="foreach: { data: $parent.columns, as: 'column' }">
<!-- NEW: bind to the corresponding property/observable in ValuesData -->
<td><input type="text" class="form-control textbox" data-bind="textInput: rowData[column.Property]" /> </td>
</tr>
<tr>
<td>
<input type="button" value="Remove Row" data-bind="click: $parent.removeRow" class="btn btn-danger" />
</td>
</tr>
</tbody>
Its a little complex requirement and have been struggling to gets head up on this.
Any pointers to this ?
Anyone/??
Is there a way to read through an HTML page and return the value of the dynamic checkboxes which are clicked?
Now, I know how to get values from static check boxes even without using JS but since I am generating the below check boxes using data from Database I am not sure how to pin point each one and know which one the user checked,
When I went through developer tools in chrome I can see that the value of the generated check boxes changes but when I refer to them it still does not work.
<!DOCTYPE html>
<html lang="en">
<form action="/test" method="post">
<button type="submit" id="exporst-btn" class="btn btn-primary">Import Test Data <span class="glyphicon glyphicon-import"></span></button>
<br>
<br>
<div id="table">
<table class="table table-condensed">
<thead>
<tr>
<th>Selection</th>
<th>Slno</th>
<th>Region</th>
</tr>
</thead>
<tbody>
{% for obj in TD %}
<tr>
<td>
<input type="checkbox" name="chb[]" > {{obj.OEHR_Mtest_Slno}}
</td>
<td>
{{obj.OEHR_Mtest_Slno}}
</td>
<td>
{{obj.OEHR_Mtest_SF_Part_Number}}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<!--<p id="export" name="test"></p>-->
<input type="hidden" id="exp" name="test">
<button type="submit" id="export-btn" class="btn btn-success">Execute <span class="glyphicon glyphicon-play"></span></button>
</form>
</body>
<script type="text/javascript"><!--
$('#export-btn').click(function () {
alert($('#mytable').find('input[type="checkbox"]:checked').length + ' checked');
});
</script>
</html>
I can use the above JS to know how many checkboxes have been checked, I want to know the value of the ones checked and I am not able to get that.
If I'm not mistaken,
var foo = $('#mytable').find('input[type="checkbox"]:checked')
will return an array of html elements which are checkboxes, and are checked. You can then do:
var bar = [];
foo.each(function (index) {
var baz = this.parentNode.textContent || this.parentNode.innerText;
if (baz && baz.length > 0)
bar.push(baz);
});
console.log(bar);
That will make bar an array of the values which were checked. It gets the checkboxes which were checked, finds their parents (<td> tags), and gets the text inside (which skips the <input> tags). This will do it client-side.
Because you're dynamically generating the checkboxes, it's helpful to also dynamically generate the values for the checkboxes. That way, when you POST the request via the submit button, Flask can determine which checkboxes were checked by reading the values. I would change your HTML to:
{% for obj in TD %}
<tr>
<td>
{# Assuming obj.OEHR_Mtest_Slno is a unique value #}
<input type="checkbox" name="chkbox" value="{{obj.OEHR_Mtest_Slno}}"> {{obj.OEHR_Mtest_Slno}}
</td>
<td>
{{obj.OEHR_Mtest_Slno}}
</td>
<td>
{{obj.OEHR_Mtest_SF_Part_Number}}
</td>
</tr>
{% endfor %}
Then in your backend, you can access the values via:
# Use .getlist if you are using HTML form elements with the same name
chkbox_values = request.form.getlist('chkbox') # returns a list of values that were checked
I've got a weird bug going on in my App and hope someone might know a solution.
My Problem: I've a movie table with different rows, I use the jquery tablesorter plugin from Mottie to sort my items and filter them. Each row also has it's own Edit button, where when you click on it the the td's get editable, now the problem is that when I edit lets say the movie title, then click on the movie director to change his name, the whole row jumps down and it does that all the time until the row is at the bottom. When I remove the tablesorter function everything works correctly, but when it's active, it does this weird bug. Now I tried to just disable the tablesorter on click (following this solution), but that also didn't help me. The sorting and the filter got disabled, but it still pushed my whole row down. Here's a gif to visualize the problem:
Note: The movie title, date, director and runtime are all < p > and < input > tags, on click on the edit button the < p > tags get hidden and the < input >'s get visible. I used this method because I need to give my new data to my django model somehow, maybe thats part of the problem.
Also I have a hidden row, that shows up when I click on the Description, don't know if thats important as well.
I'd like to provide a jsfiddle, but I didn't manage to reproduce this bug in jsfiddle, it only appears in my app :/
Here's the important code of the app:
HTML
<table id="movieTable" class="table-hover tablesorter">
<thead class="table-head">
<tr>
<th data-sorter="false"></th>
<th>TITLE</th>
<th class="gen">GENRE</th>
<th>RELEASE DATE</th>
<th>DIRECTOR</th>
<th>DESCRIPTION</th>
<th>RUNTIME</th>
<th>STATUS</th>
<th>IMDB</th>
<th data-sorter="false" id="buttons-head-bottom"></th>
</tr>
</thead>
<tbody>
<td>
<a href=“/myapp/evil-dead/">
<input class="input-title hide" value="Evil Dead" form="movie1" name="title"/> <!— hidden on default —>
<p class="movie-title">Evil Dead</p>
</a>
</td>
<td>
<select class="hide input-genre-select" form="movie1" name="genre"> <!— hidden on default —>
<!— options code —>
</select>
<p class="movie-genre">Horror</p>
</td>
<td>
<input class="hide input-release" value="25.04.2013" form="movie1" name="date" size="10"/> <!— hidden on default —>
<p class="movie-release">25.04.2013</p>
</td>
<td>
<input class="hide input-director" value="Fede Alvarez" form="movie1" name="director"/> <!— hidden on default —>
<p class="movie-director">Fede Alvarez</p>
</td>
<td class="desc-pointer toggle" data-toggle="collapse" data-target=".description1"> <!— collapse and shows a hidden table row when clicked —>
Description <i class="fa fa-caret-right"></i>
</td>
<td>
<input class="hide input-runtime" value="91" form="movie1" name="runtime" maxlength="4" size="4"/> <!— hidden on default —>
<p class="movie-runtime">91 min</p>
</td>
<td>
<select class="hide input-status-select" form="movie1" name="status"> <!— hidden on default —>
<!— options code —>
</select>
<p class="movie-status">Bought and watched</p>
</td>
<td>6,5</td>
<td>
<!— edit button, is hidden when clicked on it —>
<button type="button" class="edit-btn">
<i class="fa fa-pencil-square"></i>
</button>
<!— hidden on default, shows up when clicked on edit-btn —>
<button type="submit" form="movie1" class="save-btn">
<i class="save-btn fa fa-save"></i>
</button>
<!-- delete button -->
<button id="del-btn1" type="button" class="delete-btn btn btn-default" data-toggle="modal" data-target="#deleteModal1">
<i class="fa fa-remove"></i>
</button>
</td>
</tbody>
</table>
I only provided one table row here, but every other row is build the same.
Javascript
// table sorter
$(function(){
const $table = $("#movieTable").tablesorter({
dateFormat: "ddmmyyyy",
headers: {
2: { sorter: "select" },
3: { sorter: "shortDate" },
7: { sorter: "select" },
},
widgets: ["filter"],
widgetOptions : {
filter_columnFilters: false,
}
});
$.tablesorter.filter.bindSearch( $table, $('.search') );
});
// edit button
$(".edit-btn").click(function() {
$('table')
.unbind('appendCache applyWidgetId applyWidgets sorton update updateCell')
.removeClass('tablesorter')
.find('thead th')
.unbind('click mousedown')
.removeClass('header headerSortDown headerSortUp');
const parent = $(this).parent().parent()
parent.find(".input-director, .input-runtime, .input-release, .input-title").addClass("highlight");
parent.find(".movie-title, .movie-genre, .movie-release, .movie-director, .movie-runtime, .movie-status").addClass("hide");
parent.find(".input-title, .input-genre-select, .input-release, .input-director, .input-runtime, .input-status-select").removeClass("hide");
parent.find(".edit-btn").hide();
parent.find(".save-btn").show();
$(".gen").addClass("genre-padding");
$(".title-link").bind("click", function(e) {
e.preventDefault();
})
})
If needed I can provide more code, but I hope this is enough for someone to find a solution to this bug. Like I said before, the only solution I had found was to remove the tablesorter plugin, disabling it didn't help.
Thanks to anyone who is trying!
It's not a bug, it's a feature! :D
Internally the plugin is set up to automatically resort when an update is triggered; although, I don't see it being used in the code that was shared. To get around this "feature", set the resort option to false.
<tr ng-repeat="dr in vm.funds" style="cursor: move;"
ng-drag="true"
ng-drag-data="dr"
ng-drop="true"
ng-drop-success="vm.onDropComplete($index, $data, $event)">
<td>{{dr.fundName}}</td>
<td>{{dr.tickerId}}</td>
<td>{{dr.assetClassName}}</td>
<td>{{$index + 1}}</td>
<td>
<select class="form-control" ng-disabled="false" ng-model="dr.action" ng-options="v as v.actionDescription for v in dr.actions track by v.actionId"></select>
</td>
</tr>
I'm unable to select item from dropdown on draggable row. It looks like ng-drag prevents the click events, even if we put input text which is also not allowing to enter any text.
Kindly help me to resolve this
I know this is a common question, and I've read many of the solutions to it. However, none of them (as far as how I've interpreted and tested them) have worked quite right yet.
The use case, which seems like would be pretty common, is to allow the user to select one or multiple rows in the table, and then perform one of the actions in the dropdown list. So the Action method in the Controller needs to both receive the form as well as know what action to execute.
I have been able to get multiple buttons to work ("work" meaning submit a form and distinguish between which link/button was used to submit the form), and style them to look like links, but with the solutions I've tried, I haven't been able to retain the look of the dropdown list styling, so dropdowns where I need to do this would have a slightly inconsistent look compared to the default dropdowns that I can use regular href links with Action calls via #Html.ActionLink.
This is how I need the dropdown to look (default bootstrap styling with Href links):
Here is the markup where this dropdown lives:
<div class="col-sm-4 m-b-md" >
<h4 class="dashhead-subtitle">Project Members</h4>
#using (Html.BeginForm("EditProjectMembers", "Project", FormMethod.Post, new { name = "formEditMembers", id = "formEditMembers" }))
{
#Html.AntiForgeryToken()
#Html.HiddenFor(item => item.ProjectModelId)
#Html.HiddenFor(item => item.CompanyModelId)
<div class="btn-toolbar-item">
<div class="btn-group">
<button class="btn btn-primary-outline">
Actions
</button>
<button data-toggle="dropdown" class="btn btn-primary-outline dropdown-toggle ">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
Do Action 1 <!--REFERRING TO HERE-->
</li>
<li>
Do Action 2<!--AND HERE-->
</li>
</ul>
<div class="btn-toolbar-item input-with-icon">
<input type="text" class="search form-control" placeholder="Search..." />
</div>
</div>
</div>
<p></p>
<table class="table table-hover table-condensed table-responsive" data-height="5000" >
<tr>
<th>
Name
</th>
<th>
Company
</th>
<th>
Selected
</th>
</tr>
<tbody class="list">
#for (int i = 0; i < Model.ProjectMembers.Count(); i++)
{
<tr>
<td class="username">
#Html.DisplayFor(item => item.ProjectMembers[i].FirstLastName)
#Html.HiddenFor(item => item.ProjectMembers[i].CompanyName)
</td>
<td class="companyname">
#Html.DisplayFor(item => item.ProjectMembers[i].CompanyName)
#Html.HiddenFor(item => item.ProjectMembers[i].CompanyName)
</td>
<td>
#Html.CheckBoxFor(item => item.UserSelected, new { #class = "big-checkbox" })
#Html.HiddenFor(item => item.ProjectMembers[i].Id)
</td>
</tr>
}
</tbody>
</table>
}
</div>
#stephen.vakil , thanks for your suggestion, it appears to be working. Here's what I did.
The hidden element and dropdown menu snippet from above:
Hidden element:
#Html.HiddenFor(item => item.FlagFormEditMembers)
And the markup using href's to call the javascript
<ul class="dropdown-menu">
<li>
Add a New Project Member
</li>
<li>
Remove Selected Project Members
</li>
</ul>
And the function that submits the form, as well as sets the value of the hidden element that you suggested adding:
<script>
function submitFormNewMember() {
$("#FlagformEditMembers").attr({
"value": "AddNewMember"
});
$('#formEditMembers').submit();
}
function submitFormRemoveMember() {
$("#FlagformEditMembers").attr({
"value": "RemoveMembers"
});
$('#formEditMembers').submit();
}
</script>
Thanks!!!