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>
Related
Any help massively appreciated as I am stuck!
In short, I have a filterable table on a Cordova build for Android. Works fine when testing on PC, but when build by Cordova into Android app, the filterable table does not work.
When a search input is entered, nothing happens.
The code is below, as you can see I think I have the correct META tags in place... really unsure why this isnt working within the build when other Javascript works no problme.
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black-translucent" name="apple-mobile-web-app-status-bar-style">
<meta content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover" name="viewport">
<meta http-equiv="Content-Security-Policy" content="default-src 'unsafe-inline' data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *">
<title>Officerr</title>
<link href="styles/bootstrap.css" rel="stylesheet" type="text/css">
<link href="styles/style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i|Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i,900,900i&display=swap" rel="stylesheet">
<link href="fonts/css/fontawesome-all.min.css" rel="stylesheet" type="text/css">
<link data-pwa-version="set_in_manifest_and_pwa_js" href="_manifest.json" rel="manifest">
<link href="app/icons/icon-192x192.png" rel="apple-touch-icon" sizes="180x180">
</head>
<body class="theme-light" data-gradient="body-default" data-highlight="highlight-red">
<div id="preloader">
<div class="spinner-border color-highlight" role="status">
</div>
</div>
<div id="page">
<div class="header header-fixed header-logo-center">
<a class="header-title" href="#">Categories</a> <a class="header-icon header-icon-1" data-back-button="" href="#"><i class="fas fa-arrow-left"></i></a>
</div>
<div id="footer-bar" class="footer-bar-1">
<i class="fa fa-search"></i><span>Search</span>
<i class="fa fa-gavel"></i><span>Categories</span>
<i class="fa fa-briefcase"></i><span>A-Z</span>
<i class="fa fa-user"></i><span>Directory</span>
<i class="fa fa-info"></i><span>Info</span>
</div>
<div class="page-content header-clear-medium">
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="What are you looking for?">
<table id="myTable">
<tr class="header1"><td>A</td></tr>
<tr>
<td><b>Aide Memoires</b>
</td>
</tr>
<tr>
<td><b>Animals</b>
</td>
</tr>
<tr>
<td><b>Armed Forces</b>
</td>
</tr>
<tr>
<td><b>Assault</b>
</td>
</tr>
<tr class="header1"><td>B</td></tr>
<tr class="header1"><td>C</td></tr>
<tr>
<td><b>Children</b>
</td>
</tr>
<tr>
<td><b>Criminal Damage</b>
</td>
</tr>
<tr class="header1"><td>D</td></tr>
<tr>
<td><b>Drugs</b>
</td>
</tr>
<tr class="header1"><td>E</td></tr>
<tr>
<td><b>Environment</b>
</td>
</tr>
<tr class="header1"><td>F</td></tr>
<tr>
<td><b>Firearms</b>
</td>
</tr>
<tr>
<td><b>Fireworks</b>
</td>
</tr>
<tr>
<td><b>Fraud</b>
</td>
</tr>
<tr class="header1"><td>G</td></tr>
<tr class="header1"><td>H</td></tr>
<tr>
<td><b>Harassment</b>
</td>
</tr>
<tr>
<td><b>Human Rights</b>
</td>
<tr class="header1"><td>I</td></tr>
<tr>
<td><b>Immigration</b>
</td>
</tr>
<tr class="header1"><td>J</td></tr>
<tr class="header1"><td>K</td></tr>
<tr class="header1"><td>L</td></tr>
<tr class="header1"><td>M</td></tr>
<tr>
<td><b>Mental Health</b>
</td>
</tr>
<tr class="header1"><td>N</td></tr>
<tr class="header1"><td>O</td></tr>
<tr class="header1"><td>P</td></tr>
<tr>
<td><b>PACE</b>
</td>
</tr>
<tr>
<td><b>Police & Courts</b>
</td>
</tr>
<tr>
<td><b>Public Order</b>
</td>
</tr>
<tr class="header1"><td>Q</td></tr>
<tr class="header1"><td>R</td></tr>
<tr>
<td><b>Railway Offences</b>
</td>
</tr>
<tr class="header1"><td>S</td></tr>
<tr>
<td><b>Sexual Offences</b>
</td>
</tr>
<tr>
<td><b>Sporting Offences</b>
</td>
</tr>
<tr>
<td><b>Stop & Search</b>
</td>
</tr>
<tr class="header1"><td>T</td></tr>
<tr>
<td><b>Terrorism</b>
</td>
</tr>
<tr>
<td><b>Theft</b>
</td>
</tr>
<tr>
<td><b>Traffic</b>
</td>
</tr>
<tr class="header1"><td>U</td></tr>
<tr>
<td><b>Use of Force</b>
</td>
</tr>
<tr class="header1"><td>V</td></tr>
<tr class="header1"><td>W</td></tr>
<tr>
<td><b>Weapons & Bladed Articles</b>
</td>
</tr>
<tr class="header1"><td>X</td></tr>
<tr class="header1"><td>Y</td></tr>
<tr class="header1"><td>Z</td></tr>
</table>
</div>
<!-- End of Page Content-->
<!-- All Menus, Action Sheets, Modals, Notifications, Toasts, Snackbars get Placed outside the <div class="page-content"> -->
<div class="menu menu-box-bottom menu-box-detached" id="menu-settings">
<div class="menu-title mt-0 pt-0">
<h1>Settings</h1>
<p class="color-highlight">Flexible and Easy to Use</p>
<a class="close-menu" href="#"><i class="fa fa-times"></i></a>
</div>
<div class="divider divider-margins mb-n2">
</div>
<div class="content">
<div class="list-group list-custom-small">
<a class="pb-2 ms-n1" data-toggle-theme="" data-trigger-switch="switch-dark-mode" href="#"><i class="fa font-12 fa-moon rounded-s bg-highlight color-white me-3"></i> <span>Dark Mode</span></a>
<div class="custom-control scale-switch ios-switch">
<input class="ios-input" data-toggle-theme="" id="switch-dark-mode" type="checkbox"> <label class="custom-control-label" for="switch-dark-mode"></label>
</div>
<i class="fa fa-angle-right"></i>
</div>
<div class="list-group list-custom-large">
<a data-menu="menu-highlights" href="#"><i class="fa font-14 fa-tint bg-green-dark rounded-s"></i> <span>Page Highlight</span> <strong>16 Colors Highlights Included</strong> <span class="badge bg-highlight color-white">HOT</span> <i class="fa fa-angle-right"></i></a> <a class="border-0" data-menu="menu-backgrounds" href="#"><i class="fa font-14 fa-cog bg-blue-dark rounded-s"></i> <span>Background Color</span> <strong>10 Page Gradients Included</strong> <span class="badge bg-highlight color-white">NEW</span> <i class="fa fa-angle-right"></i></a>
</div>
</div>
</div>
<!-- Menu Settings Highlights-->
<div class="menu menu-box-bottom menu-box-detached" id="menu-highlights">
<div class="menu-title">
<h1>Highlights</h1>
<p class="color-highlight">Any Element can have a Highlight Color</p>
<a class="close-menu" href="#"><i class="fa fa-times"></i></a>
</div>
<div class="divider divider-margins mb-n2">
</div>
<div class="content">
<div class="highlight-changer">
<a data-change-highlight="blue" href="#"><i class="fa fa-circle color-blue-dark"></i><span class="color-blue-light">Default</span></a> <a data-change-highlight="red" href="#"><i class="fa fa-circle color-red-dark"></i><span class="color-red-light">Red</span></a> <a data-change-highlight="orange" href="#"><i class="fa fa-circle color-orange-dark"></i><span class="color-orange-light">Orange</span></a> <a data-change-highlight="pink2" href="#"><i class="fa fa-circle color-pink2-dark"></i><span class="color-pink-dark">Pink</span></a> <a data-change-highlight="magenta" href="#"><i class="fa fa-circle color-magenta-dark"></i><span class="color-magenta-light">Purple</span></a> <a data-change-highlight="aqua" href="#"><i class="fa fa-circle color-aqua-dark"></i><span class="color-aqua-light">Aqua</span></a> <a data-change-highlight="teal" href="#"><i class="fa fa-circle color-teal-dark"></i><span class="color-teal-light">Teal</span></a> <a data-change-highlight="mint" href="#"><i class="fa fa-circle color-mint-dark"></i><span class="color-mint-light">Mint</span></a> <a data-change-highlight="green" href="#"><i class="fa fa-circle color-green-light"></i><span class="color-green-light">Green</span></a> <a data-change-highlight="grass" href="#"><i class="fa fa-circle color-green-dark"></i><span class="color-green-dark">Grass</span></a> <a data-change-highlight="sunny" href="#"><i class="fa fa-circle color-yellow-light"></i><span class="color-yellow-light">Sunny</span></a> <a data-change-highlight="yellow" href="#"><i class="fa fa-circle color-yellow-dark"></i><span class="color-yellow-light">Goldish</span></a> <a data-change-highlight="brown" href="#"><i class="fa fa-circle color-brown-dark"></i><span class="color-brown-light">Wood</span></a> <a data-change-highlight="night" href="#"><i class="fa fa-circle color-dark-dark"></i><span class="color-dark-light">Night</span></a> <a data-change-highlight="dark" href="#"><i class="fa fa-circle color-dark-light"></i><span class="color-dark-light">Dark</span></a>
<div class="clearfix">
</div>
</div>
<a class="mb-3 btn btn-full btn-m rounded-sm bg-highlight shadow-xl text-uppercase font-900 mt-4" data-menu="menu-settings" href="#">Back to Settings</a>
</div>
</div>
<!-- Menu Settings Backgrounds-->
<div class="menu menu-box-bottom menu-box-detached" id="menu-backgrounds">
<div class="menu-title">
<h1>Backgrounds</h1>
<p class="color-highlight">Change Page Color Behind Content Boxes</p>
<a class="close-menu" href="#"><i class="fa fa-times"></i></a>
</div>
<div class="divider divider-margins mb-n2">
</div>
<div class="content">
<div class="background-changer">
<a data-change-background="default" href="#"><i class="bg-theme"></i><span class="color-dark-dark">Default</span></a> <a data-change-background="plum" href="#"><i class="body-plum"></i><span class="color-plum-dark">Plum</span></a> <a data-change-background="magenta" href="#"><i class="body-magenta"></i><span class="color-dark-dark">Magenta</span></a> <a data-change-background="dark" href="#"><i class="body-dark"></i><span class="color-dark-dark">Dark</span></a> <a data-change-background="violet" href="#"><i class="body-violet"></i><span class="color-violet-dark">Violet</span></a> <a data-change-background="red" href="#"><i class="body-red"></i><span class="color-red-dark">Red</span></a> <a data-change-background="green" href="#"><i class="body-green"></i><span class="color-green-dark">Green</span></a> <a data-change-background="sky" href="#"><i class="body-sky"></i><span class="color-sky-dark">Sky</span></a> <a data-change-background="orange" href="#"><i class="body-orange"></i><span class="color-orange-dark">Orange</span></a> <a data-change-background="yellow" href="#"><i class="body-yellow"></i><span class="color-yellow-dark">Yellow</span></a>
<div class="clearfix">
</div>
</div>
<a class="mb-3 btn btn-full btn-m rounded-sm bg-highlight shadow-xl text-uppercase font-900 mt-4" data-menu="menu-settings" href="#">Back to Settings</a>
</div>
</div>
<!-- Menu Share -->
<div class="menu menu-box-bottom menu-box-detached" id="menu-share">
<div class="menu-title mt-n1">
<h1>Share the Love</h1>
<p class="color-highlight">Just Tap the Social Icon. We'll add the Link</p>
<a class="close-menu" href="#"><i class="fa fa-times"></i></a>
</div>
<div class="content mb-0">
<div class="divider mb-0">
</div>
<div class="list-group list-custom-small list-icon-0">
<a class="shareToFacebook external-link" href="auto_generated"><i class="font-18 fab fa-facebook-square color-facebook"></i> <span class="font-13">Facebook</span> <i class="fa fa-angle-right"></i></a> <a class="shareToTwitter external-link" href="auto_generated"><i class="font-18 fab fa-twitter-square color-twitter"></i> <span class="font-13">Twitter</span> <i class="fa fa-angle-right"></i></a> <a class="shareToLinkedIn external-link" href="auto_generated"><i class="font-18 fab fa-linkedin color-linkedin"></i> <span class="font-13">LinkedIn</span> <i class="fa fa-angle-right"></i></a> <a class="shareToWhatsApp external-link" href="auto_generated"><i class="font-18 fab fa-whatsapp-square color-whatsapp"></i> <span class="font-13">WhatsApp</span> <i class="fa fa-angle-right"></i></a> <a class="shareToMail external-link border-0" href="auto_generated"><i class="font-18 fa fa-envelope-square color-mail"></i> <span class="font-13">Email</span> <i class="fa fa-angle-right"></i></a>
</div>
</div>
</div>
<!-- Be sure this is on your main visiting page, for example, the index.html page-->
<!-- Install Prompt for Android -->
<div class="menu menu-box-bottom menu-box-detached rounded-l" id="menu-install-pwa-android">
<div class="boxed-text-l mt-4 pb-3">
<img alt="img" class="rounded-l mb-3" src="app/icons/icon-128x128.png" width="90">
<h4 class="mt-3">Add Sticky on your Home Screen</h4>
<p>Install Sticky on your home screen, and access it just like a regular app. It really is that simple!</p>
<a class="pwa-install btn btn-s rounded-s shadow-l text-uppercase font-900 bg-highlight mb-2" href="#">Add to Home Screen</a><br>
<a class="pwa-dismiss close-menu color-gray-dark text-uppercase font-900 opacity-60 font-10 pt-2" href="#">Maybe later</a>
<div class="clear">
</div>
</div>
</div>
<!-- Install instructions for iOS -->
<div class="menu menu-box-bottom menu-box-detached rounded-l" id="menu-install-pwa-ios">
<div class="boxed-text-xl mt-4 pb-3">
<img alt="img" class="rounded-l mb-3" src="app/icons/icon-128x128.png" width="90">
<h4 class="mt-3">Add Sticky on your Home Screen</h4>
<p class="mb-0 pb-0">Install Sticky, and access it like a regular app. Open your Safari menu and tap "Add to Home Screen".</p>
<div class="clearfix pt-3">
</div>
<a class="pwa-dismiss close-menu color-highlight text-uppercase font-700" href="#">Maybe later</a>
</div>
</div>
</div>
<script src="cordova.js" type="text/javascript">
</script>
<script>
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
<script type="text/javascript">
var deviceReady = function(){
if(window.MobileAccessibility){
window.MobileAccessibility.usePreferredTextZoom(false);
}
}
document.addEventListener('deviceready', deviceReady, false);
</script>
<script src="scripts/bootstrap.min.js">
</script>
<script src="scripts/custom.js">
</script>
</body>
</html>
I am trying to use check boxes in order to filter my results at an html page. Through a django view a pass my data in a list, and then through a loop like this:
</div>
{% for r in rows %}
<div class="res_show">
<div class="btitle">
<p style="text-align:left"><b>{{r.name}}</b></p>
</div>
<div class="baddress">
<p>{{r.address}}</p>
</div>
<div class="reviewstar">
{% if user.is_authenticated %}
<p style="text-align:left"><span class="fa fa-star checked"></span> {{r.stars}} ({{r.r_count}})</p>
{% else %}
<p style="text-align:left"><span class="fa fa-star checked"></span> {{r.stars}} ({{r.r_count}})</p>
{% endif %}
</div>
<div class="b_category">
<p style="text-align: left"> <b>{{r.category}}</b></p>
</div>
<div class="diraddress">
<p style="text-align:left">{{r.duration}}' {{r.distance}} χλμ <b>{{r.open}}</b></p>
</div>
<hr style="border:3px solid #333333">
</div>
i want to use this class for filtering:
<div class="b_category">
<p style="text-align: left"> <b>{{r.category}}</b></p>
</div>
Category has 4 possible values: cafe, bar, nigh_club, reastaurant
I have found the following code but i can't figure out what i should change in order to work in my code:
http://jsfiddle.net/x1av5809/
Category may contain more tha one values seperated by comma, for example
bar or cafe, bar
An example of use would be choosing the bar check box and showing only results that contain category bar. I i choose both bar and cafe check boxes i should show results that contain bar or cafe category
Thanks in advance
You can loop through your checked checkboxes and then using b:contains.. check the element have that checked values or not depending on this hide/show divs .
Demo Code :
$("input[name='filterStatus']").change(function() {
//check if the checkbox checked length is > 0
if ($("input[name='filterStatus']:checked").length > 0) {
$(".res_show").hide() //hide all divs
$("input[name='filterStatus']:checked").each(function() {
var values = $(this).val() //get valeu of checked checkboxess
$(".b_category b:contains(" + values + ")").closest(".res_show").show() //show same
})
} else {
$(".res_show").show()
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="b_category">
<input type="checkbox" name="filterStatus" value="Cafe" /><label>Cafe</label>
<input type="checkbox" name="filterStatus" value="Restaurant" /><label>Restaurant</label>
<input type="checkbox" name="filterStatus" value="Bar" /><label>Bar</label>
<input type="checkbox" name="filterStatus" value="Night club" /><label>Night club</label>
</div>
<div class="res_show">
<div class="btitle">
<a href="/show_business/{{r.b_id}}/">
<p style="text-align:left"><b>some1</b></p>
</a>
</div>
<div class="baddress">
<p>123,abc</p>
</div>
<div class="reviewstar">
<a href="/apply_review/{{r.b_id}}/">
<p style="text-align:left"><span class="fa fa-star checked"></span> 5 </p>
</a>
</div>
<div class="b_category">
<p style="text-align: left"> <b>Cafe</b></p>
</div>
<div class="diraddress">
<a href="/show_directions/{{r.id}}/">
<p style="text-align:left">123 χλμ <b>12:30</b></p>
</a>
</div>
<hr style="border:3px solid #333333">
</div>
<div class="res_show">
<div class="btitle">
<a href="/show_business/{{r.b_id}}/">
<p style="text-align:left"><b>somethins</b></p>
</a>
</div>
<div class="baddress">
<p>123,abc</p>
</div>
<div class="reviewstar">
<a href="/apply_review/{{r.b_id}}/">
<p style="text-align:left"><span class="fa fa-star checked"></span> 5 </p>
</a>
</div>
<div class="b_category">
<p style="text-align: left"> <b>Night club</b></p>
</div>
<div class="diraddress">
<a href="/show_directions/{{r.id}}/">
<p style="text-align:left">123 χλμ <b>12:30</b></p>
</a>
</div>
<hr style="border:3px solid #333333">
</div>
<div class="res_show">
<div class="btitle">
<a href="/show_business/{{r.b_id}}/">
<p style="text-align:left"><b>some4</b></p>
</a>
</div>
<div class="baddress">
<p>123,abc</p>
</div>
<div class="reviewstar">
<a href="/apply_review/{{r.b_id}}/">
<p style="text-align:left"><span class="fa fa-star checked"></span> 5 </p>
</a>
</div>
<div class="b_category">
<p style="text-align: left"> <b>Bar</b></p>
</div>
<div class="diraddress">
<a href="/show_directions/{{r.id}}/">
<p style="text-align:left">123 χλμ <b>12:30</b></p>
</a>
</div>
<hr style="border:3px solid #333333">
</div>
<div class="res_show">
<div class="btitle">
<a href="/show_business/{{r.b_id}}/">
<p style="text-align:left"><b>somes</b></p>
</a>
</div>
<div class="baddress">
<p>123,abc</p>
</div>
<div class="reviewstar">
<a href="/apply_review/{{r.b_id}}/">
<p style="text-align:left"><span class="fa fa-star checked"></span> 5 </p>
</a>
</div>
<div class="b_category">
<p style="text-align: left"> <b>Cafe</b></p>
</div>
<div class="diraddress">
<a href="/show_directions/{{r.id}}/">
<p style="text-align:left">123 χλμ <b>12:30</b></p>
</a>
</div>
<hr style="border:3px solid #333333">
</div>
<div class="res_show">
<div class="btitle">
<a href="/show_business/{{r.b_id}}/">
<p style="text-align:left"><b>somes</b></p>
</a>
</div>
<div class="baddress">
<p>123,abc</p>
</div>
<div class="reviewstar">
<a href="/apply_review/{{r.b_id}}/">
<p style="text-align:left"><span class="fa fa-star checked"></span> 5 </p>
</a>
</div>
<div class="b_category">
<p style="text-align: left"> <b>Restaurant</b></p>
</div>
<div class="diraddress">
<a href="/show_directions/{{r.id}}/">
<p style="text-align:left">123 χλμ <b>12:30</b></p>
</a>
</div>
<hr style="border:3px solid #333333">
</div>
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>
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++;
}
I'm trying to get the key attribute of the <td> tag from the below HTML code.
<td class="xedit editable editable-click editable-open" id="3" key="details" data-original-title="" title="">Javascript library </td>
<div class="popover fade top in editable-container editable-popup" style="top: 289px; left: 534px; display: block;">
<div class="arrow"></div>
<div class="popover-content">
<div>
<div class="editableform-loading" style="display: none;"></div>
<form class="form-inline editableform" style="">
<div class="control-group form-group">
<div>
<div class="editable-input" style="position: relative;">
<input type="text" class="form-control input-sm" style="padding-right: 24px;">
<span class="editable-clear-x">
</span>
</div>
<div class="editable-buttons">
<button type="submit" class="btn btn-primary btn-sm editable-submit">
<i class="glyphicon glyphicon-ok">
</i>
</div>
</div>
</div>
</form>
</div>
jQuery used :
var x = $(this).closest('div').find('.editable-container').closest('td').attr('key'); //Doesn't work
var x = $(this).closest('td').attr('key'); //Doesn't work
Try to use:
var x = $(this).closest('.editable-container').prev().attr('key');