What need is in script in panel body text to be shown in rows for every data in ng-repeat. On left to be data.name and right to be icon. With current code data is not showing on separate rows, it is messy.
<script type="text/ng-template" id="field_renderer.html">
<div class="col-md-6" ng-repeat-start="data in data.children">
<div class="row">
<label>
<input type="checkbox" value="{{data.name}}" ng-model="data.isSelected">
{{data.name}}
</label>
<span ng-if="data.children.length > 0">
<i class="pull-right glyphicon" data-ng-click="data.showDetails = !data.showDetails"
ng-class="{'pull-right glyphicon glyphicon-plus': !data.showDetails, 'pull-right glyphicon glyphicon-minus': data.showDetails}"></i>
</span>
</div>
</div>
<div ng-repeat-end ng-if="data.showDetails" ng-include="'field_renderer.html'"></div>
</script>
<div class="panel-group">
<div ng-repeat-start="data in reportsvm.filters" class="panel panel-default">
<div class="panel-heading clickable" data-ng-click="reportsvm.showDetails(data)">
<h4 class="panel-title">
{{data.name}}
<i ng-class="{'pull-right glyphicon glyphicon-plus': !data.showDetails, 'pull-right glyphicon glyphicon-minus': data.showDetails}"></i>
</h4>
</div>
</div>
<div class="panel-body small" ng-if="data.showDetails" ng-repeat-end ng-include="'field_renderer.html'"></div>
</div>
Here is screnshot of how it is looking.
As you can see for location that two checkboxes I need to be one after another in separate rows. Also in Program i need to be in separate rows and in each row that icon to be on right.
UPDATE - CURRENT SOLUTION
<table class="table">
<tbody>
<tr ng-if="data.name === 'Location'">
<td class="noBorder" colspan="2">
<button data-ng-click="reportsvm.changeLocation(data, true)" data-ng-class="" class="btn btn-default btn-sm">
Regions</button>
<button data-ng-click="reportsvm.changeLocation(data, false)" data-ng-class="" class="btn btn-default btn-sm pull-right">
State/Territory</button>
</td>
</tr>
<tr ng-repeat-start="data in data.children">
<td class="noBorder">
<label>
<input type="checkbox" value="{{data.name}}" ng-change="reportsvm.changeValue(data)" ng-model="data.isSelected">
{{data.name}}
</label>
</td>
<td class="noBorder">
<span ng-if="data.children.length > 0">
<i class="pull-right glyphicon" data-ng-click="data.showDetails = !data.showDetails"
ng-class="{'pull-right glyphicon glyphicon-plus': !data.showDetails, 'pull-right glyphicon glyphicon-minus': data.showDetails}"></i>
</span>
</td>
</tr>
<tr ng-repeat-end ng-if="data.showDetails">
<td class="noBorder" ng-include="'field_renderer.html'"></td>
</tr>
</tbody>
</table>
It makes sense. You try to create a new checkbox for every column.
Bootstrap tries to fill in the space for col-md-6 (2-column layout).
<div class="col-md-6" ng-repeat-start="data in data.children">
One solution would be to put the ng-repeat in the row element:
<div class="col-md-6">
<div class="row" ng-repeat-start="data in children>
<!--rest of the code ....-->
</div>
</div>
Related
I want to replace a string inside a template. It is already working, but I want to change it inside the importedNode and not inside the complete table.
I did not find a way to change the innerHTML of theimportTemplate.
let template = document.querySelector('#templateRow');
// add to document DOM
let importTemplate = document.importNode(template.content, true); // where true means deep copy
console.log(importTemplate);
table.appendChild(importTemplate);
console.log(table);
table.innerHTML = table.innerHTML.replaceAll("[i]", this.uid)
<template id="templateRow">
<tr id="row_[i]">
<td><i class="icon fa-sharp fa-solid fa-plus"></i></td>
<td id="name_[i]"></td>
<td id="mode_[i]"></td>
<td id="state_[i]"></td>
</tr>
<tr>
<td style="display: none;"></td>
<td style="display: none;" colspan="4">
<div id="columns_[i]" class="columns">
<div id="[i]_column_1" class="column"><button id="btnRemove_[i]" class="button is-danger is-small"><span
class="icon-is-small"><span><i
class="fa-solid fa-trash pr-2"></i></span><span>Remove</span></span></button></div>
<div id="[i]_column_2" class="column">
<button id="btnEnable_[i]" class="button is-success is-small"><span
class="icon-is-small"><span><i
class="fa-solid fa-play pr-2"></i></span><span>Enable</span></span></button>
<button id="btnDisable_[i]" class="button is-info is-small is-hidden"><span class="icon-is-small"><span><i
class="fa-solid fa-stop pr-2"></i></span><span>Disable</span></span></button>
</div>
<div id="[i]_column_3" class="column"><button id="btnDownload_[i]" class="button is-primary is-small"><span
class="icon-is-small"><span><i
class="fa-solid fa-download pr-2"></i></span><span>Download</span></span></button>
</div>
<div id="[i]_column_4" class="column">
<p id="[i]_p_1">Hash: <span id="hash_[i]"></span></p>
</div>
<div id="[i]_column_5" class="column">
<p id="[i]_p_2">Port: <span id="port_[i]"></span></p>
</div>
<div id="[i]_column_6" class="column">
<p id="[i]_p_3"><span id="rxbytes_[i]"></span></p>
</div>
</div>
</td>
</tr>
</template>
I have the following code which is hidden.
<div id="orderFields" style="display: none;">
<table class="table">
<tbody id="more-tr">
<tr>
<th style="font-weight: bold">Offer</th>
<td class="col-lg-6 col-md-6 col-sm-12">
<input type="text" class="form-control price" id="offer" placeholder="Offer title" value="" novalidate>
</td>
<th style="font-weight: bold">Image</th>
<td class="col-lg-4 col-md-4 col-sm-12">
<img src="" style="max-width:40%;max-height:20%" />
<input type="file" name="image[]" style="background: transparent;border: transparent">
</td>
<td class="col-lg-2 col-md-2 col-sm-12">
<a href="javascript:void(1);" style="width: 10%;">
<span class="voyager-trash remove-this btn-danger" style="padding: 10px; border-radius: 5px;"></span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
I have a code to a button that adds the tr field from the hidden field when being clicked.
<div class="col-md-12">
<a href="javascript:void(0)" class="btn btn-success btn-xs" id="addMore" style="float: right;">
<i class="fa fa-plus"></i> <span>Add offer(s)</span>
</a>
</div>
And the javascript is the following :
$("#addMore").on("click", function() {
$(".multipleDiv").after($('#orderFields #more-tr').html());
});
The button and tr work perfectly but while submitting a form I am getting data from the div that is hidden. So, I removed the attribute from the div which is hidden. Now, I want to add a name attribute to the input field that is just added after clicking the button. But, again I don't want to add an attribute to the input field of an input tag which is hidden.
How can I achieve that?
Also, Why am I not getting data coming from the <input type="file" name="image"> which is inside the form tag
You can use the clone() and then use the find() to get the input with id offer. Then use the attr() to set the attribute.
$("#addMore").on("click", function() {
let clone = $('#orderFields #more-tr').clone();
let offer = clone.find('input[type="text"]');
offer.attr('name', 'newOffer'); // replace with your value
offer.attr('id', new Date().getTime()); // ID needs to be unique
$(".multipleDiv").append(clone);
});
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div id="orderFields" style="display: none;">
<table class="table">
<tbody id="more-tr">
<tr>
<th style="font-weight: bold">Offer</th>
<td class="col-lg-6 col-md-6 col-sm-12">
<input type="text" class="form-control price" id="offer" placeholder="Offer title" value="" novalidate>
</td>
<th style="font-weight: bold">Image</th>
<td class="col-lg-4 col-md-4 col-sm-12">
<img src="" style="max-width:40%;max-height:20%" />
<input type="file" name="image[]" style="background: transparent;border: transparent">
</td>
<td class="col-lg-2 col-md-2 col-sm-12">
<a href="javascript:void(1);" style="width: 10%;">
<span class="voyager-trash remove-this btn-danger" style="padding: 10px; border-radius: 5px;"></span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<table class="multipleDiv"></table>
<div class="col-md-12">
<a href="javascript:void(0)" class="btn btn-success btn-xs" id="addMore" style="float: right;">
<i class="fa fa-plus"></i> <span>Add offer(s)</span>
</a>
</div>
I Have the following code cshtml
<div class="container-fluid" id="dvUserData">
<div class="tab-pane fade" id="documentos" role="tabpanel" aria-labelledby="documentos-tab">
#Html.Partial("Documentos")
<div class="col-md-3">
<button type="submit" class="btn btn-primary botao-vert" data-bind="click: editData">SALVAR</button>
</div>
</div>
and the following binding
ko.applyBindings(model, document.getElementById("dvUserData"));
But my data-bind="click: editData" does not work, the click is not performed. But if i put the div class="col-md-3" before the #Html.Partial("Documentos") the bindings work.
I have no idea why, I looked for posts here but could not find anything similar.
Thanks in advance for any help.
---EDITED
The Partial
<div class="row" id="dvDocument">
<form role="form">
<div class="row">
<div class="col-12">
<table class="table tabela-documentos">
<tbody data-bind="foreach: documentsReturn().documentTypes">
<tr class="bg-cinza">
<td>
<div class="aviso-sucesso" data-bind="visible : hasAllDocuments()"></div>
<div class="aviso-critica" data-bind="visible : !hasAllDocuments()"></div> <span data-bind="text: Description"></span>
</td>
<td>
<span class="d-none" data-bind="value: IdTypeDocument"></span>
<a class="btn btn-secondary" data-bind="click: function () { $parent.saveTypeDocument(IdTypeDocument); $('.alerta-form2').hide();}" data-toggle="modal" data-target="#modalDocumento">
ADICIONAR
</a>
</td>
</tr>
<!-- ko foreach: DocumentsArray() -->
<tr>
<td><i class="fa fa-file-text-o" aria-hidden="true"></i> Inclusão: <span data-bind="text: NewDate"></span></td>
<td>
<i class="fa fa-times pointer" data-toggle="modal" data-target="#modal-confirmation" aria-hidden="true" data-bind="visible : !frombase(),
, click: function(){ #*if (confirm('Deseja realmente deletar o documento?')) {*# $parent.savePath(Path); #*}*# }"></i>
</td>
</tr>
<!-- /ko-->
</tbody>
</table>
</div>
</div>
<div class="alert-button">
</div>
</form>
</div>
I forgot to mention that i have another javascript file that bindings the div document with a different model.
Press the F12 and check for any knockout js init (ko.applyBindings) error.
If there is any, fix it and try.
If no error exist, then make sure you have set a value to the model.Name() property by debugging the code.
and check your partial view and see whether you have narrow down the scope/ binding context to another complex property of you model which also has the Name property.
It would be better if you could give more info about partial view binding declaration and the how you are setting / loading the initial values to your model.
After looking for the solution and talk with some friends i found out what was the problem. I was binding the major div, that had the div id "documentos", and another information, and this was the problem.
I remove the binding of dvUserData, and put the binding in all the div that i had, including creating a new div just for the button.
This is how my div "documentos" is now.
<div class="tab-pane fade" id="documentos" role="tabpanel" aria-labelledby="documentos-tab">
#Html.Partial("Documentos")
<div class="alert-button mb-3">
<div id="dvDocumentValidate">
<button type="submit" class="btn btn-primary botao-vert" data-bind="click: editData">SALVAR</button>
</div>
</div>
</div>
And my bindings
ko.applyBindings(model, document.getElementById("dvLoading"));
ko.applyBindings(model, document.getElementById("personaldata"));
ko.applyBindings(model, document.getElementById("address"));
ko.applyBindings(model, document.getElementById("databank"));
ko.applyBindings(model, document.getElementById("dvDocumentValidate"));
ko.applyBindings(model, document.getElementById("corporatedata"));
My data in the table is coming from back-end or user can manually enter the values in the table. Now my question is 'how to map those values again into the form, from which user was able to enter values into the table using jquery'? This back mapping of data from table to form is done on click of edit link which is present in front of every entry of my data in the table.
<html>
<head>
<style>
.dropdown>a:after {
display: none;
}
.glyph-ok-size, .glyph-remove-size {
font-size: 15px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".add_edit_panel").hide();
$("#addNew").click(function() {
$(".add_edit_panel").slideToggle();
});
});
function edit(paramID){
$(".add_edit_panel").slideDown();
}
</script>
</head>
<body>
<cu:secured hasPermission="CORE_CUSTOMER_DATES_CREATE"
var="canCreateOrgDates"></cu:secured>
<cu:secured hasPermission="CORE_CUSTOMER_DATES_UPDATE"
var="canUpdateOrgDates"></cu:secured>
<cu:taskView taskFlowData="${taskFlowData}"
taskFlowDefinition="${taskFlowDefinition}" id="dateRange"
renderTasks="false"
title="task.title.organization.daterange"
tasks="${taskFlowData.availableTasks}">
</cu:taskView>
<div class="row">
<form action="save.action" method="post">
<div class="col-sm-6">
<div class="panel add_edit_panel">
<div class="panel-heading">${fmt:message('dateRange.panel.add.edit') }</div>
<core:text name="orgDateObj.periodName"
label="${fmt:message('org.daterange.name') }"
required="false"
maxlength="20"
placeholder="${fmt:message('org.daterange.name') }">
</core:text>
<div class="row">
<div class="col-sm-6">
<core:date id="startDate" name="orgDateObj.startDate" label="${fmt:message('org.daterange.startdate')}"
placeholder="${fmt:message('org.daterange.startdate')}"
primary="false" required="true" />
</div>
<div class="col-sm-6">
<core:date id="endDate" name="orgDateObj.endDate" label="${fmt:message('org.daterange.enddate')}"
placeholder="${fmt:message('org.daterange.enddate')}"
primary="false" required="true" />
</div>
</div>
<div class="row">
<div class="col-sm-12">
<label class="default" style="float=left"><core:checkbox
name="orgDateObj.isDefault" id="isDefault"
label="${fmt:message('org.daterange.defaultdate')}"
checked="true" indicator="true"
disabled="false"
title="${fmt:message('org.daterange.describe.defaultdate')}" />
</label>
<div class="btn-panel-margin">
<button id="save" type="submit" class="btn btn-ar btn-primary" data-allow-dirty="allow">
${fmt:message('button.save')}
</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="row">
<div class="col-sm-6">
<div class="panel">
<div class="panel-heading">${fmt:message('dateRange.panel.listing') }</div>
<div class="row">
<div class="col-sm-12" style="overflow-x: scroll">
<table data-grid-sortable class="table table-striped table-condensed table-responsive sort-display-table">
<thead>
<tr>
<th data-column-sortable class="column-md sorted"><fmt:message key="table.date.name"/>
<span class="caret column-sort-direction"/>
</th>
<th data-column-sortable class="column-md"><fmt:message key="table.startdate"/>
<span class="caret column-sort-direction"/>
</th>
<th data-column-sortable class="column-md"><fmt:message key="table.enddate"/>
<span class="caret column-sort-direction"/>
</th>
<th data-column-sortable class="column-sm"><fmt:message key="table.default"/>
<span class="caret column-sort-direction"/>
</th>
<th data-column-sortable class="column-sm"></th>
</tr>
</thead>
<tbody id="tbody">
<c:forEach var="orgDate" items="${orgDates}">
<tr>
<td class="column-md">${orgDate.periodName}</td>
<td class="column-md">${orgDate.startDate}</td>
<td class="column-md">${orgDate.endDate}</td>
<td class="column-sm">
<c:choose>
<c:when test="${orgDate.isDefault == '1'}">
<span class="glyphicon glyphicon-remove glyph-remove-size"></span>
</c:when>
<c:otherwise>
<span class="glyphicon glyphicon-ok glyph-ok-size"></span>
</c:otherwise>
</c:choose>
</td>
<td class="column-sm">
<div class="row">
<div class="col-sm-12">
<div class="dropdown">
Action<b class="caret"></b>
<ul class="pull-right dropdown-menu">
<li>
<a href="#" id="editButtonId" onclick="edit(${orgDate.orgDateId})" >
<i class="glyphicon glyphicon-pencil margin-right-5"></i>Edit
</a>
</li>
<li>
<a href="#" id="deleteButtonId${orgDate.orgDateId}"><i class="glyphicon glyphicon-trash margin-right-5"></i>Delete
</a>
</li>
</ul>
</div>
</div>
</div>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="btn-panel-margin">
<button id="addNew" type="button" class="btn btn-ar btn-primary" data-allow-dirty="allow">
${fmt:message('button.addnew')}
</button>
</div>
</div>
</div>
</body>
</html>
enter image description here
in edit button give the row index as class and get the value of that row by mapping array index value of 1st row of table equals to array[0] access the array[0] values and place the value of array in form text box i.e
$('#textbox1').val=array[0]['name'];
you can do stuff like this
$('#edit').onclick(function (){
$('#name').val=array[0]['name'];
$('#startDate').val=array[1]['S-Date'];
$('#endDate').val=array[2]['E-Date'];
$('#checkbox').val=array[3]['Checkval'];
});
I wanted to know how your data is formed from Database
In jquery use
x=0;
objectdata.forEach(function(value,indexname,arr), thisValue) {
tabledata['col'+x][indexname]=value;
x++;
}
Okay here I have a jsp page, in which I have used a jsp code in inflating elements in an HTML table using a loop...Now when i reload this table using AJAX...what happens simply is that it becomes unresponsive...ie...I'm unable to apply the onClick sorting and search bar which were working before reloading..
Here's my coding for the table
<div class="row-fluid sortable" id="tableRow">
<div class="box span12" id="teacherTableRow">
<div class="box-header" data-original-title>
<h2><i class="halflings-icon user"></i><span class="break"></span>STAFF TABLE</h2>
<div class="box-icon">
<i class="halflings-icon wrench"></i>
<i class="halflings-icon chevron-up"></i>
</div>
</div>
<div class="box-content">
<table class="table table-striped table-bordered bootstrap-datatable datatable">
<thead>
<tr>
<th>TN</th>
<th>TC</th>
<th>Actions</th>
</tr>
</thead>
<tbody >
<% while(resultset.next()) { %>
<tr>
<td> <%= resultset.getString(1) %> </td>
<td> <%= resultset.getString(2) %> </td>
<td class="center" >
<a class="btn btn-info" href="#">
<i class="halflings-icon white edit"></i>
</a>
<a class="btn btn-danger" href="deleteTeacherData.jsp?tc=<%=resultset.getString(2)%>" onclick="return deleteTeacher()" >
<i class="halflings-icon white trash" ></i>
</a>
</td>
</tr>
<% }%>
</tbody>
</table>
</div>
</div><!--/span-->
</div><!--/row-->
Here is my javascript code which I have tried so far to reload and get it active..
$('#teacherTableRow').load('HOD-page1.jsp #teacherTableRow');
I also tried this, but no avail...
$('#teacherTableRow').load('HOD-page1.jsp #teacherTableRow',function(){
$('#teacherTableRow').on("load",'HOD-page1.jsp #teacherTableRow'});