In this table :
$('#listview-table tr').each(function() {
var status_id = $(this).find(".listViewEntryValue").$('[data-name~="cf_1525"]').text();
alert(status_id);
});
<table id="listview-table" class="table listview-table " style="table-layout: fixed;">
ass="overflow-y">
<tr class="listViewEntries" data-id="26322" data-recordurl="index.php?module=Liens&view=Detail&record=26322&app=INVENTORY" id="Liens_listView_row_1">
<td class="listViewRecordActions">
<!--LIST VIEW RECORD ACTIONS-->
<div class="table-actions">
<span class="input">
<input type="checkbox" value="26322" class="listViewEntriesCheckBox">
</span>
<span>
<a class="quickView fa fa-eye icon action" data-app="INVENTORY" title="Vue Rapide"></a>
</span>
<span>
<a class="markStar fa icon action fa-star-o" title=" Suivre"></a>
</span>
<span class="more dropdown action">
<span href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-ellipsis-v icon"></i>
</span>
<ul class="dropdown-menu">
<li>
<a data-id="26322" href="index.php?module=Liens&view=Detail&record=26322&mode=showDetailViewByMode&requestMode=full&tab_label=Liens Details&app=INVENTORY">Details</a>
</li>
<li>
<a data-id="26322" href="javascript:void(0);" data-url="index.php?module=Liens&view=Edit&record=26322&app=INVENTORY" name="editlink">Editer</a>
</li>
<li>
<a data-id="26322" href="javascript:void(0);" class="deleteRecordButton">Supprimer</a>
</li>
</ul>
</span>
<div class="btn-group inline-save hide">
<button class="button btn-success btn-small save" type="button" name="save">
<i class="fa fa-check"></i>
</button>
<button class="button btn-danger btn-small cancel" type="button" name="Cancel">
<i class="fa fa-close"></i>
</button>
</div>
</div>
</td>
<td class="listViewEntryValue" data-name="cf_1533" title="EAS-FO-26263-BRETAGNE" data-rawvalue="EAS-FO-26263-BRETAGNE" data-field-type="string">
<span class="fieldValue">
<span class="value"> EAS-FO-26263-BRETAGNE</span>
</span>
<span class="hide edit"></span>
</td>
<td class="listViewEntryValue" data-name="liens_tks_ip" title="185.169.242.136" data-rawvalue="185.169.242.136" data-field-type="string">
<span class="fieldValue">
<span class="value"> 185.169.242.136 </span>
</span>
<span class="hide edit"></span>
</td>
<td class="listViewEntryValue" data-name="cf_1525" title="0" data-rawvalue="0" data-field-type="string">
<span class="fieldValue">
<span class="value"> 0 </span>
</span>
<span class="hide edit"></span>
</td>
<td class="listViewEntryValue" data-name="cf_1529" title="" data-rawvalue="" data-field-type="string">
<span class="fieldValue">
<span class="value"></span>
</span>
<span class="hide edit"></span>
</td>
<td class="listViewEntryValue" data-name="cf_1543" title="40" data-rawvalue="40" data-field-type="integer">
<span class="fieldValue">
<span class="value">
<span align="right">40</span>
</span>
</span>
<span class="hide edit"></span>
</td>
</tr>
<tr class="listViewEntries" data-id="26284" data-recordurl="index.php?module=Liens&view=Detail&record=26284&app=INVENTORY" id="Liens_listView_row_2">
<td class="listViewRecordActions">
<!--LIST VIEW RECORD ACTIONS-->
<div class="table-actions">
<span class="input">
<input type="checkbox" value="26284" class="listViewEntriesCheckBox">
</span>
<span>
<a class="quickView fa fa-eye icon action" data-app="INVENTORY" title="Vue Rapide"></a>
</span>
<span>
<a class="markStar fa icon action fa-star-o" title=" Suivre"></a>
</span>
<span class="more dropdown action">
<span href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-ellipsis-v icon"></i>
</span>
<ul class="dropdown-menu">
<li>
<a data-id="26284" href="index.php?module=Liens&view=Detail&record=26284&mode=showDetailViewByMode&requestMode=full&tab_label=Liens Details&app=INVENTORY">Details</a>
</li>
<li>
<a data-id="26284" href="javascript:void(0);" data-url="index.php?module=Liens&view=Edit&record=26284&app=INVENTORY" name="editlink">Editer</a>
</li>
<li>
<a data-id="26284" href="javascript:void(0);" class="deleteRecordButton">Supprimer</a>
</li>
</ul>
</span>
<div class="btn-group inline-save hide">
<button class="button btn-success btn-small save" type="button" name="save">
<i class="fa fa-check"></i>
</button>
<button class="button btn-danger btn-small cancel" type="button" name="Cancel">
<i class="fa fa-close"></i>
</button>
</div>
</div>
</td>
<td class="listViewEntryValue" data-name="cf_1533" title="EAS-FO-640-EUROPE" data-rawvalue="EAS-FO-640-EUROPE" data-field-type="string">
<span class="fieldValue">
<span class="value"> EAS-FO-640-EUROPE </span>
</span>
<span class="hide edit"></span>
</td>
<td class="listViewEntryValue" data-name="liens_tks_ip" title="192.42.221.11" data-rawvalue="192.42.221.11" data-field-type="string">
<span class="fieldValue">
<span class="value"> 192.42.221.11 </span>
</span>
<span class="hide edit"></span>
</td>
<td class="listViewEntryValue" data-name="cf_1525" title="1" data-rawvalue="1" data-field-type="string">
<span class="fieldValue">
<span class="value"> 1 </span>
</span>
<span class="hide edit"></span>
</td>
<td class="listViewEntryValue" data-name="cf_1529" title="5424954" data-rawvalue="5424954" data-field-type="string">
<span class="fieldValue">
<span class="value"> 5424954 </span>
</span>
<span class="hide edit"></span>
</td>
<td class="listViewEntryValue" data-name="cf_1543" title="39" data-rawvalue="39" data-field-type="integer">
<span class="fieldValue">
<span class="value">
<span align="right">39</span>
</span>
</span>
<span class="hide edit"></span>
</td>
</tr>
</tbody>
</table>
I try to replace each field with data-name="cf_1525" containing 0 or 1, by Down or UP.
But I didn't know how can I select this and them replace it.
I tried this code, but it doesn't select :
$('#listview-table tr').each(function() {
var status_id = $(this).find(".listViewEntryValue").$('[data-name~="cf_1525"]').text();
alert(status_id);
});
Many thanks for your help !
That code you are trying to use to loop through the table rows, find a given element and do something with that data, should be more like this:
$('#listview-table tr').each(function() {
var status_id = $(this).find("[data-name~='cf_1525'].listViewEntryValue").text();
console.log(status_id);
});
The find() function will filter the children elements having those given conditions: the attribute data-name containing the word cf_1525 and the class listViewEntryValue.
Plus for diagnostics purposes, both original value and transformed value get printed on console for each single row processed. And I added a css class that will better highlight that table cell (of course just remove the css rule to style it as default)
Then following your words:
I try to replace each field with data-name="cf_1525" containing 0 or
1, by Down or UP.
That value gets transformed to Up if it was 1 and to Down if it was 1. Otherwise the value will remain untouched. Such value gets set both on the contents and on data-rawvalue attribute.
This is the whole demo (but using the required assets):
$('#listview-table tr').each(function() {
const el = $(this).find("[data-name~='cf_1525'].listViewEntryValue");
var status_id = el.text().trim();
let transformedValue = status_id;
if (status_id == '0')
transformedValue = 'Down';
else if (status_id == '1')
transformedValue = 'Up';
//updates the data-rawvalue attribute
el[0].dataset.rawvalue = transformedValue;
//updates the text content
el.find('.fieldValue > .value').text(transformedValue);
console.log(`original:"${status_id}" transformed:"${transformedValue}"`);
});
[data-name~='cf_1525'].listViewEntryValue {
color: red;
font-weight: 600;
border: solid 4px gray;
padding: 0 1rem;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<table id="listview-table" class="table listview-table " style="table-layout: fixed;">
<tr class="listViewEntries" data-id="26322" data-recordurl="index.php?module=Liens&view=Detail&record=26322&app=INVENTORY" id="Liens_listView_row_1">
<td class="listViewRecordActions">
<!--LIST VIEW RECORD ACTIONS-->
<div class="table-actions">
<span class="input">
<input type="checkbox" value="26322" class="listViewEntriesCheckBox">
</span>
<span>
<a class="quickView fa fa-eye icon action" data-app="INVENTORY" title="Vue Rapide"></a>
</span>
<span>
<a class="markStar fa icon action fa-star-o" title=" Suivre"></a>
</span>
<span class="more dropdown action">
<span href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-ellipsis-v icon"></i>
</span>
<ul class="dropdown-menu">
<li>
<a data-id="26322" href="index.php?module=Liens&view=Detail&record=26322&mode=showDetailViewByMode&requestMode=full&tab_label=Liens Details&app=INVENTORY">Details</a>
</li>
<li>
<a data-id="26322" href="javascript:void(0);" data-url="index.php?module=Liens&view=Edit&record=26322&app=INVENTORY" name="editlink">Editer</a>
</li>
<li>
<a data-id="26322" href="javascript:void(0);" class="deleteRecordButton">Supprimer</a>
</li>
</ul>
</span>
<div class="btn-group inline-save hide">
<button class="button btn-success btn-small save" type="button" name="save">
<i class="fa fa-check"></i>
</button>
<button class="button btn-danger btn-small cancel" type="button" name="Cancel">
<i class="fa fa-close"></i>
</button>
</div>
</div>
</td>
<td class="listViewEntryValue" data-name="cf_1533" title="EAS-FO-26263-BRETAGNE" data-rawvalue="EAS-FO-26263-BRETAGNE" data-field-type="string">
<span class="fieldValue">
<span class="value"> EAS-FO-26263-BRETAGNE</span>
</span>
<span class="hide edit"></span>
</td>
<td class="listViewEntryValue" data-name="liens_tks_ip" title="185.169.242.136" data-rawvalue="185.169.242.136" data-field-type="string">
<span class="fieldValue">
<span class="value"> 185.169.242.136 </span>
</span>
<span class="hide edit"></span>
</td>
<td class="listViewEntryValue" data-name="cf_1525" title="0" data-rawvalue="0" data-field-type="string">
<span class="fieldValue">
<span class="value"> 0 </span>
</span>
<span class="hide edit"></span>
</td>
<td class="listViewEntryValue" data-name="cf_1529" title="" data-rawvalue="" data-field-type="string">
<span class="fieldValue">
<span class="value"></span>
</span>
<span class="hide edit"></span>
</td>
<td class="listViewEntryValue" data-name="cf_1543" title="40" data-rawvalue="40" data-field-type="integer">
<span class="fieldValue">
<span class="value">
<span align="right">40</span>
</span>
</span>
<span class="hide edit"></span>
</td>
</tr>
<tr class="listViewEntries" data-id="26284" data-recordurl="index.php?module=Liens&view=Detail&record=26284&app=INVENTORY" id="Liens_listView_row_2">
<td class="listViewRecordActions">
<!--LIST VIEW RECORD ACTIONS-->
<div class="table-actions">
<span class="input">
<input type="checkbox" value="26284" class="listViewEntriesCheckBox">
</span>
<span>
<a class="quickView fa fa-eye icon action" data-app="INVENTORY" title="Vue Rapide"></a>
</span>
<span>
<a class="markStar fa icon action fa-star-o" title=" Suivre"></a>
</span>
<span class="more dropdown action">
<span href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-ellipsis-v icon"></i>
</span>
<ul class="dropdown-menu">
<li>
<a data-id="26284" href="index.php?module=Liens&view=Detail&record=26284&mode=showDetailViewByMode&requestMode=full&tab_label=Liens Details&app=INVENTORY">Details</a>
</li>
<li>
<a data-id="26284" href="javascript:void(0);" data-url="index.php?module=Liens&view=Edit&record=26284&app=INVENTORY" name="editlink">Editer</a>
</li>
<li>
<a data-id="26284" href="javascript:void(0);" class="deleteRecordButton">Supprimer</a>
</li>
</ul>
</span>
<div class="btn-group inline-save hide">
<button class="button btn-success btn-small save" type="button" name="save">
<i class="fa fa-check"></i>
</button>
<button class="button btn-danger btn-small cancel" type="button" name="Cancel">
<i class="fa fa-close"></i>
</button>
</div>
</div>
</td>
<td class="listViewEntryValue" data-name="cf_1533" title="EAS-FO-640-EUROPE" data-rawvalue="EAS-FO-640-EUROPE" data-field-type="string">
<span class="fieldValue">
<span class="value"> EAS-FO-640-EUROPE </span>
</span>
<span class="hide edit"></span>
</td>
<td class="listViewEntryValue" data-name="liens_tks_ip" title="192.42.221.11" data-rawvalue="192.42.221.11" data-field-type="string">
<span class="fieldValue">
<span class="value"> 192.42.221.11 </span>
</span>
<span class="hide edit"></span>
</td>
<td class="listViewEntryValue" data-name="cf_1525" title="1" data-rawvalue="1" data-field-type="string">
<span class="fieldValue">
<span class="value"> 1 </span>
</span>
<span class="hide edit"></span>
</td>
<td class="listViewEntryValue" data-name="cf_1529" title="5424954" data-rawvalue="5424954" data-field-type="string">
<span class="fieldValue">
<span class="value"> 5424954 </span>
</span>
<span class="hide edit"></span>
</td>
<td class="listViewEntryValue" data-name="cf_1543" title="39" data-rawvalue="39" data-field-type="integer">
<span class="fieldValue">
<span class="value">
<span align="right">39</span>
</span>
</span>
<span class="hide edit"></span>
</td>
</tr>
</tbody>
</table>
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>
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 working on a CRM system where I can only write javascript in onloadfunc. My intenton is get data-filename from newly added li tag to the DOM and send notifications. Please note that my targetNode is inside an IFRAME. I have many other upload fields besides this upload field. My code is working with no Iframe but it is not working in this situation.
var targetNode = document.getElementById('filelist_cf_1267610');
var config = {childList: true, subtree: true };
var ActiveDraftsCallback = function(mutationsList, observer) {
for(var mutation of mutationsList) {
if (mutation.type == 'childList') {
console.log('A child node has been added or removed.');
}
}
}
};
var observer = new MutationObserver(ActiveDraftsCallback);
observer.observe(targetNode, config);
<iframe name="win_lst" id="win_lst" src="fp_list.jsp?fieldid=1267609&codedid=QHJrJ0keIhgKFlALJGc1KgRXEAcuXRsTH2JcU0VNZl8~&uptype=0" frameborder="0">
<html lang="en">
<head>
<body style="background:#FFFFFF">
<div id="uploaded-filelist" class="uploaded-filelist">
<form action="fp_list.jsp" method="POST">
<input type="hidden" name="ss_formtoken" id="ss_formtoken" value="60B19CD9C086ED81DC1FC23B65D6E9942F94BEEEA96F60CAA533B8705E6D013A">
<input type="hidden" name="fieldid" value="1267609">
<input type="hidden" name="codedid" value="QHJrJ0keIhgKFlALJGc1KgRXEAcuXRsTH2JcU0VNZl8~">
<input type="hidden" name="uptype" value="0">
<input type="hidden" name="isanno" value="0">
<input type="hidden" name="delefile" id="delefile" value="">
<div id="updatedresult" style="display:none">
<div id="cf_1267609" style="display:inline-block"><button type="button" class="Button" name="iconbutton" aria-label="Upload" title="" onclick="x_uploadfolder(1267609,'QHJrJ0keIhgKFlALJGc1KgRXEAcuXRsTH2JcU0VNZl8~','File Manager')" data-original-title="Upload"><i class="fa fa-upload" style="cursor:pointer" data-original-title="" title=""></i></button><button type="button" class="Button" name="iconbutton" title="" aria-label="Merge Files" onclick="x_mergefile(1267609,-1,'QHJrJ0keIhgKFlALJGc1KgRXEAcuXRsTH2JcU0VNZl8~')" data-original-title="Merge Files"><i class="fa fa-clone" style="cursor:pointer" data-original-title="" title=""></i></button><button type="button" onclick="ssUploadedFileList.confirmDeleteFiles(1267609,1127956,80,null,'Delete File(s)','Are you sure you want to delete the following file(s)?')" class="btn btn-default faButton DisabledButton" id="delete_1267609" name="delete_1267609" data-original-title="Delete Selected Files" aria-label="Delete Selected Files" disabled=""><i class="fa fa-trash" style="cursor:pointer" data-original-title="" title=""></i></button></div>
<i class="fa fa-history fa-lg text-help Pointer" onclick="openinmwin('/s_cusfieldhistory.jsp?ismwin=1&appid=102946&objectid=1127956&fieldid=1267609');" id="his_1267609" title="" aria-label="History" data-original-title="History"></i>
<div class="toggleButtonGroup"><button type="button" onclick="ssUploadedFileList.toggleListView(1081636,1267609)" class="btn btn-default faButton buttonToggle active" id="gridviewbtn_1267609" name="gridviewbtn_1267609" data-original-title="Grid View" disabled=""><i class="fa fa-th-large" style="cursor:pointer" data-original-title="" title=""></i></button><button type="button" onclick="ssUploadedFileList.toggleListView(1081636,1267609)" class="btn btn-default faButton buttonToggle" id="listviewbtn_1267609" name="listviewbtn_1267609" data-original-title="List View"><i class="fa fa-list" style="cursor:pointer" data-original-title="" title=""></i></button></div>
<div class="ssUploadedFileList" data-orderby="date|desc">
<ul id="filelist_cf_1267609" class="">
<li class="ssUploadedFileList-listViewHeader"><span> </span><span data-sorttype="filename"><span>File Name</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span data-sorttype="size"><span>Size</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span data-sorttype="date"><span>Date</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span> </span></li>
<li data-filename="Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf" data-size="824" data-date="1540390632018">
<div class="ssUploadedFileList-checkbox"><input type="checkbox" name="uploadedFileSet1267609" id="uploadedFileSet1267609-0" data-fieldid="1267609" data-fileicon="fa fa-file-pdf-o" value="Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf"><span> </span><label for="uploadedFileSet1267609-0" class="fa fa-file-pdf-o"></label></div>
<span id="details_1127956_1267609_1" class="ssUploadedFileList-details" style="width:calc(100% - 75px)"><span id="span_file_1127956_1267609_1">Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf</span><span>824 KB - 2018-10-24 10:17am</span></span><span id="renamespan_1127956_1267609_1" class="renamespan" style="width:calc(100% - 136px); display:none"><input id="renamefile_1127956_1267609_1" value="Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf" class="ignoreChange" style="width:calc(100% - 15px)"><span>824 KB - 2018-10-24 10:17am</span></span><span class="ssUploadedFileList-size">824 KB</span><span class="ssUploadedFileList-date">2018-10-24 10:17am</span>
<div id="options_1127956_1267609_1" class="ssUploadedFileList-options">
<span aria-label="Options"><i class="fa fa-ellipsis-v" title="" data-original-title="Options"></i></span>
<ul>
<li onclick="ssUploadedFileList.confirmDeleteFiles(1267609,1127956,80,'Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf','Delete File(s)','Are you sure you want to delete the following file(s)?')">Delete</li>
</ul>
</div>
<span id="renamebut_1127956_1267609_1" class="renamebuttons" style="display:none"><span onclick="ssUploadedFileList.cancelRename(1267609,1127956,1)"><i class="fa fa-times" title="" data-original-title="Cancel"></i></span><span onclick="ssUploadedFileList.saveRename(1267609,1127956,80,1,'Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf')"><i class="fa fa-floppy-o" title="" data-original-title="Save"></i></span></span>
</li>
<li data-filename="111mergefile_180904.pdf" data-size="283" data-date="1536094080018">
<div class="ssUploadedFileList-checkbox"><input type="checkbox" name="uploadedFileSet1267609" id="uploadedFileSet1267609-1" data-fieldid="1267609" data-fileicon="fa fa-file-pdf-o" value="111mergefile_180904.pdf"><span> </span><label for="uploadedFileSet1267609-1" class="fa fa-file-pdf-o"></label></div>
<span id="details_1127956_1267609_2" class="ssUploadedFileList-details" style="width:calc(100% - 75px)"><span id="span_file_1127956_1267609_2">111mergefile_180904.pdf</span><span>283 KB - 2018-09-04 4:47pm</span></span><span id="renamespan_1127956_1267609_2" class="renamespan" style="width:calc(100% - 136px); display:none"><input id="renamefile_1127956_1267609_2" value="111mergefile_180904.pdf" class="ignoreChange" style="width:calc(100% - 15px)"><span>283 KB - 2018-09-04 4:47pm</span></span><span class="ssUploadedFileList-size">283 KB</span><span class="ssUploadedFileList-date">2018-09-04 4:47pm</span>
<div id="options_1127956_1267609_2" class="ssUploadedFileList-options">
<span aria-label="Options"><i class="fa fa-ellipsis-v" title="" data-original-title="Options"></i></span>
<ul>
<li onclick="ssUploadedFileList.confirmDeleteFiles(1267609,1127956,80,'111mergefile_180904.pdf','Delete File(s)','Are you sure you want to delete the following file(s)?')">Delete</li>
</ul>
</div>
<span id="renamebut_1127956_1267609_2" class="renamebuttons" style="display:none"><span onclick="ssUploadedFileList.cancelRename(1267609,1127956,2)"><i class="fa fa-times" title="" data-original-title="Cancel"></i></span><span onclick="ssUploadedFileList.saveRename(1267609,1127956,80,2,'111mergefile_180904.pdf')"><i class="fa fa-floppy-o" title="" data-original-title="Save"></i></span></span>
</li>
</ul>
<div class="ssUploadedFileList-footer"><span class="total">Total Files: 2</span></div>
</div>
</div>
<div id="updatedpdfresult" style="display:none"></div>
<div id="cf_1267609_container">
<div id="cf_1267609" style="display:inline-block"><button type="button" onclick="ssUploadedFileList.confirmDeleteFiles(1267609,1127956,80,null,'Delete File(s)','Are you sure you want to delete the following file(s)?')" class="btn btn-default faButton DisabledButton" id="delete_1267609" name="delete_1267609" data-original-title="Delete Selected Files" aria-label="Delete Selected Files" disabled=""><i class="fa fa-trash" style="cursor:pointer" data-original-title="" title=""></i></button></div>
<div class="toggleButtonGroup"><button type="button" onclick="ssUploadedFileList.toggleListView(1081636,1267609)" class="btn btn-default faButton buttonToggle active" id="gridviewbtn_1267609" name="gridviewbtn_1267609" data-original-title="Grid View" disabled=""><i class="fa fa-th-large" style="cursor:pointer" data-original-title="" title=""></i></button><button type="button" onclick="ssUploadedFileList.toggleListView(1081636,1267609)" class="btn btn-default faButton buttonToggle" id="listviewbtn_1267609" name="listviewbtn_1267609" data-original-title="List View"><i class="fa fa-list" style="cursor:pointer" data-original-title="" title=""></i></button></div>
<div class="ssUploadedFileList" data-orderby="date|desc">
<ul id="filelist_cf_1267609" class="">
<li class="ssUploadedFileList-listViewHeader"><span> </span><span data-sorttype="filename"><span>File Name</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span data-sorttype="size"><span>Size</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span data-sorttype="date" class="descending"><span>Date</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span> </span></li>
<li data-filename="Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf" data-size="824" data-date="1540390632018">
<div class="ssUploadedFileList-checkbox"><input type="checkbox" name="uploadedFileSet1267609" id="uploadedFileSet1267609-0" data-fieldid="1267609" data-fileicon="fa fa-file-pdf-o" value="Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf"><span> </span><label for="uploadedFileSet1267609-0" class="fa fa-file-pdf-o"></label></div>
<span id="details_1127956_1267609_1" class="ssUploadedFileList-details" style="width:calc(100% - 75px)"><span id="span_file_1127956_1267609_1">Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf</span><span>824 KB - 2018-10-24 10:17am</span></span><span id="renamespan_1127956_1267609_1" class="renamespan" style="width:calc(100% - 136px); display:none"><input id="renamefile_1127956_1267609_1" value="Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf" class="ignoreChange" style="width:calc(100% - 15px)"><span>824 KB - 2018-10-24 10:17am</span></span><span class="ssUploadedFileList-size">824 KB</span><span class="ssUploadedFileList-date">2018-10-24 10:17am</span>
<div id="options_1127956_1267609_1" class="ssUploadedFileList-options">
<span aria-label="Options"><i class="fa fa-ellipsis-v" title="" data-original-title="Options"></i></span>
<ul>
<li onclick="ssUploadedFileList.confirmDeleteFiles(1267609,1127956,80,'Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf','Delete File(s)','Are you sure you want to delete the following file(s)?')">Delete</li>
</ul>
</div>
<span id="renamebut_1127956_1267609_1" class="renamebuttons" style="display:none"><span onclick="ssUploadedFileList.cancelRename(1267609,1127956,1)"><i class="fa fa-times" title="" data-original-title="Cancel"></i></span><span onclick="ssUploadedFileList.saveRename(1267609,1127956,80,1,'Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf')"><i class="fa fa-floppy-o" title="" data-original-title="Save"></i></span></span>
</li>
<li data-filename="111mergefile_180904.pdf" data-size="283" data-date="1536094080018">
<div class="ssUploadedFileList-checkbox"><input type="checkbox" name="uploadedFileSet1267609" id="uploadedFileSet1267609-1" data-fieldid="1267609" data-fileicon="fa fa-file-pdf-o" value="111mergefile_180904.pdf"><span> </span><label for="uploadedFileSet1267609-1" class="fa fa-file-pdf-o"></label></div>
<span id="details_1127956_1267609_2" class="ssUploadedFileList-details" style="width:calc(100% - 75px)"><span id="span_file_1127956_1267609_2">111mergefile_180904.pdf</span><span>283 KB - 2018-09-04 4:47pm</span></span><span id="renamespan_1127956_1267609_2" class="renamespan" style="width:calc(100% - 136px); display:none"><input id="renamefile_1127956_1267609_2" value="111mergefile_180904.pdf" class="ignoreChange" style="width:calc(100% - 15px)"><span>283 KB - 2018-09-04 4:47pm</span></span><span class="ssUploadedFileList-size">283 KB</span><span class="ssUploadedFileList-date">2018-09-04 4:47pm</span>
<div id="options_1127956_1267609_2" class="ssUploadedFileList-options">
<span aria-label="Options"><i class="fa fa-ellipsis-v" title="" data-original-title="Options"></i></span>
<ul>
<li onclick="ssUploadedFileList.confirmDeleteFiles(1267609,1127956,80,'111mergefile_180904.pdf','Delete File(s)','Are you sure you want to delete the following file(s)?')">Delete</li>
</ul>
</div>
<span id="renamebut_1127956_1267609_2" class="renamebuttons" style="display:none"><span onclick="ssUploadedFileList.cancelRename(1267609,1127956,2)"><i class="fa fa-times" title="" data-original-title="Cancel"></i></span><span onclick="ssUploadedFileList.saveRename(1267609,1127956,80,2,'111mergefile_180904.pdf')"><i class="fa fa-floppy-o" title="" data-original-title="Save"></i></span></span>
</li> </ul>
</div>
</div>
</form>
</div>
</body></html>
</iframe>
Since you just watch the childList you don't need to filter mutations by type, because they are all going to be of type childList.
So just forEach through mutations and console.log the every first addedNodes
var targetNode = document.getElementById('filelist_cf_1267610');
var config = {
childList: true,
subtree: true
};
var ActiveDraftsCallback = function(mutations, observer) {
mutations.forEach(({
addedNodes
}) => {
const li = addedNodes[0];
if (li && li.nodeName == 'LI') {
console.log(li.getAttribute("data-filename"));
}
});
};
var observer = new MutationObserver(ActiveDraftsCallback);
observer.observe(targetNode, config);
// imitate adding a li in 2secs
const li = document.createElement("li");
li.setAttribute("data-filename", "test");
setTimeout(() => {document.getElementById("filelist_cf_1267610").appendChild(li)}, 2000);
<ul id="filelist_cf_1267610" class="listView">
<li class="ssUploadedFileList-listViewHeader"><span> </span><span data-sorttype="filename"><span>File Name</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span data-sorttype="size"><span>Size</span>
<i
class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span data-sorttype="date" class="descending"><span>Date</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title=""
title=""></i></span><span> </span></li>
<li data-filename="asif.pdf" data-size="74" data-date="1544642199018">
<div class="ssUploadedFileList-checkbox"><input type="checkbox" name="uploadedFileSet1267610" id="uploadedFileSet1267610-0" data-fieldid="1267610" data-fileicon="fa fa-file-pdf-o" value="asif.pdf"><span> </span><label for="uploadedFileSet1267610-0" class="fa fa-file-pdf-o"></label></div>
<span id="details_1127956_1267610_1" class="ssUploadedFileList-details" style="width:calc(100% - 75px)"><span id="span_file_1127956_1267610_1">asif.pdf</span><span>74 KB - 2018-12-12 2:16pm</span></span>
<span
id="renamespan_1127956_1267610_1" class="renamespan" style="width:calc(100% - 136px); display:none"><input id="renamefile_1127956_1267610_1" value="asif.pdf" class="ignoreChange" style="width:calc(100% - 15px)"><span>74 KB - 2018-12-12 2:16pm</span></span><span class="ssUploadedFileList-size">74 KB</span><span class="ssUploadedFileList-date">2018-12-12 2:16pm</span>
<div id="options_1127956_1267610_1" class="ssUploadedFileList-options">
<span aria-label="Options"><i class="fa fa-ellipsis-v" title="" data-original-title="Options"></i></span>
<ul style="display: none;">
<li onclick="ssUploadedFileList.confirmDeleteFiles(1267610,1127956,80,'asif.pdf','Delete File(s)','Are you sure you want to delete the following file(s)?')">Delete</li>
</ul>
</div>
<span id="renamebut_1127956_1267610_1" class="renamebuttons" style="display:none"><span onclick="ssUploadedFileList.cancelRename(1267610,1127956,1)"><i class="fa fa-times" title="" data-original-title="Cancel"></i></span><span onclick="ssUploadedFileList.saveRename(1267610,1127956,80,1,'asif.pdf')"><i class="fa fa-floppy-o" title="" data-original-title="Save"></i></span></span>
</li>
</ul>
I am trying to load my dynamic categories with owl carousel but it shows items closed.
Screenshots
first category **Notebook** is opened and others are closed
second category **PC** is opened and others are closed
I need all of them to be open and show items when page loads. it's working fine if i use html version but when i add my dynamic codes it broke as you see in images above.
Code
<div class="category-module" id="latest_category">
<h3 class="subtitle">{{$kis->title}} - <a class="viewall" href="category.tpl">view all</a></h3>
<div class="category-module-content">
<!-- tabs -->
<ul id="sub-cat" class="tabs">
#foreach($kis->childs->take(6) as $child)
<li>{{$child->title}}</li>
#endforeach
</ul>
<!-- items -->
#foreach($kis->childs->take(6) as $child)
<div id="tab-cat{{$child->id}}" class="tab_content">
<div class="owl-carousel latest_category_tabs">
#foreach($child->products->take(10) as $ki)
<div class="product-thumb">
<div class="image"><img src="image/product/samsung_tab_1-200x200.jpg" alt="Aspire Ultrabook Laptop" title="Aspire Ultrabook Laptop" class="img-responsive" /></div>
<div class="caption">
<h4>{{$ki->title}}</h4>
<p class="price"> <span class="price-new">{{number_format($ki->price,0)}}</span> <span class="price-old">$241.99</span> <span class="saving">-5%</span> </p>
</div>
</div>
#endforeach
</div>
</div>
#endforeach
</div>
</div>
Can anyone help me to find the issue?
PS: in case you wonder why my PHP codes are the way you see in my code
I am using laravel blade templates.
Update
here i share my full html version of code above maybe you can find some differences which i couldn't
<div class="category-module" id="latest_category">
<h3 class="subtitle">Electronics - <a class="viewall" href="category.tpl">view all</a></h3>
<div class="category-module-content">
<ul id="sub-cat" class="tabs">
<li>Laptops</li>
<!-- and more -->
</ul>
<div id="tab-cat1" class="tab_content">
<div class="owl-carousel latest_category_tabs">
<div class="product-thumb">
<div class="image"><img src="image/product/samsung_tab_1-200x200.jpg" alt="Aspire Ultrabook Laptop" title="Aspire Ultrabook Laptop" class="img-responsive" /></div>
<div class="caption">
<h4>Aspire Ultrabook Laptop</h4>
<p class="price"> <span class="price-new">$230.00</span> <span class="price-old">$241.99</span> <span class="saving">-5%</span> </p>
<div class="rating"> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span> </div>
</div>
<div class="button-group">
<button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
<div class="add-to-links">
<button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
</div>
</div>
</div>
<div class="product-thumb">
<div class="image"><img src="image/product/macbook_pro_1-200x200.jpg" alt=" Strategies for Acquiring Your Own Laptop " title=" Strategies for Acquiring Your Own Laptop " class="img-responsive" /></div>
<div class="caption">
<h4> Strategies for Acquiring Your Own Laptop </h4>
<p class="price"> <span class="price-new">$1,400.00</span> <span class="price-old">$1,900.00</span> <span class="saving">-26%</span> </p>
</div>
<div class="button-group">
<button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
<div class="add-to-links">
<button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
</div>
</div>
</div>
<div class="product-thumb">
<div class="image"><img src="image/product/macbook_air_1-200x200.jpg" alt="Laptop Silver black" title="Laptop Silver black" class="img-responsive" /></div>
<div class="caption">
<h4>Laptop Silver black</h4>
<p class="price"> <span class="price-new">$1,142.00</span> <span class="price-old">$1,202.00</span> <span class="saving">-5%</span> </p>
</div>
<div class="button-group">
<button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
<div class="add-to-links">
<button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
</div>
</div>
</div>
<div class="product-thumb">
<div class="image"><img src="image/product/macbook_1-200x200.jpg" alt="Ideapad Yoga 13-59341124 Laptop" title="Ideapad Yoga 13-59341124 Laptop" class="img-responsive" /></div>
<div class="caption">
<h4>Ideapad Yoga 13-59341124 Laptop</h4>
<p class="price"> $2.00 </p>
<div class="rating"> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span> </div>
</div>
<div class="button-group">
<button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
<div class="add-to-links">
<button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
</div>
</div>
</div>
<div class="product-thumb">
<div class="image"><img src="image/product/ipod_shuffle_1-200x200.jpg" alt="Hp Pavilion G6 2314ax Notebok Laptop" title="Hp Pavilion G6 2314ax Notebok Laptop" class="img-responsive" /></div>
<div class="caption">
<h4>Hp Pavilion G6 2314ax Notebok Laptop</h4>
<p class="price"> $122.00 </p>
</div>
<div class="button-group">
<button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
<div class="add-to-links">
<button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
</div>
</div>
</div>
<div class="product-thumb">
<div class="image"><img src="image/product/ipod_touch_1-200x200.jpg" alt="Samsung Galaxy S4" title="Samsung Galaxy S4" class="img-responsive" /></div>
<div class="caption">
<h4>Samsung Galaxy S4</h4>
<p class="price"> <span class="price-new">$62.00</span> <span class="price-old">$122.00</span> <span class="saving">-50%</span> </p>
</div>
<div class="button-group">
<button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
<div class="add-to-links">
<button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
</div>
</div>
</div>
</div>
</div>
<!-- and more -->
</div>
</div>
update 2
this is javascript of my carousels
$("#latest_category .owl-carousel.latest_category_tabs").owlCarousel({
itemsCustom : [[320, 2],[600, 2],[768, 3],[992, 5],[1199, 5]],
lazyLoad : true,
navigation : true,
navigationText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
scrollPerPage : true,
pagination: false,
});
$("#latest_category .tab_content").addClass("deactive");
$("#latest_category .tab_content:first").show();
//Default Action
$("#latest_category ul#sub-cat li:first").addClass("active").show(); //Activate first tab
//On Click Event
$("#latest_category ul#sub-cat li").on("click", function() {
$("#latest_category ul#sub-cat li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$("#latest_category .tab_content").hide();
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
If I understand you correctly, the issue is not with the carousel. It is with the tabs script.
So you are better off using a class as the selector.
It looks like you are using something like this https://gist.github.com/hong6/7372763 for your tabs.
Then you are better off removing the #latest_category and using a class. Then in your jquery, you can add a jquery context. Here is un-tested the code:
$(".category-module .owl-carousel.latest_category_tabs").owlCarousel({
itemsCustom : [[320, 2],[600, 2],[768, 3],[992, 5],[1199, 5]],
lazyLoad : true,
navigation : true,
navigationText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
scrollPerPage : true,
pagination: false,
});
$(".category-module").each(function() {
$(".tab_content", this).addClass("deactive");
$(".tab_content:first", this).show();
//Default Action
$("ul#sub-cat li:first", this).addClass("active").show(); //Activate first tab
});
//On Click Event
$(".category-module ul#sub-cat li").on("click", function() {
var parent = $(this).parents('.category-module')
$("ul#sub-cat li", parent).removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content", parent).hide();
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab, parent).fadeIn(); //Fade in the active content
return false;
});
Here is a fiddle that shows a similar situation.
Hello I have a App i'm working on in ionic and I am trying to load a mobile calculator that I did in html in the ionic page but when I load my app it looks like it's not loading the css or js code so how do I get to do that?
here's my code:
<ion-view title="Math">
<ion-content padding="true" class="has-header">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<!-- powerTouch -->
<script type="text/javascript" src="js/powertouch-js-1.5.js"></script>
<script type="text/javascript" src="js/core.js"></script>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/moz.css">
<!-- font -->
<link href="css/font.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/l10n.js"></script>
<link rel="resource" type="application/l10n" href="locales.ini">
<script>
$(function(){
var powerTouch = $.powerTouch();
powerTouch.attachTouch(".ui-el");
powerTouch.attachGesture(".ui-gesture", {"acceleration":0});
});
</script>
<div class="frame">
<div class="film">
<div class="calc">
<div class="result ui-gesture">
<div class="cwrap fontlight hide">
×
</div>
<div class="exp fontlight" id="exp">
<div class="string" id="string">
<div id="string-film">
<!--<div class="text-frame">
<span id="text"></span>
</div>-->
</div>
</div>
</div>
</div>
<div class="keys">
<table class="pulsanti">
<tbody>
<tr>
<td>
<a href="javascript:;" class="buttn insert ui-el par" data-val="(" data-long=")" data-longtap="1">
<span class="label rel">(
<span class="apice apM tohide">)</span>
</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn action ui-el third" data-action="M" data-longtap="1" id="btn-m">
<span class="label rel">M
<span class="apice apM">×</span>
</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn action ui-el third" data-action="Mr">
<span class="label rel">Mr</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el oper" data-val="+">
<span class="label">+</span>
</a>
</td>
</tr>
<tr>
<td>
<a href="javascript:;" class="buttn insert generic ui-el" data-val="7">
<span class="label">7</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert generic ui-el" data-val="8">
<span class="label">8</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert generic ui-el" data-val="9">
<span class="label">9</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el oper" data-val="-">
<span class="label">—</span>
</a>
</td>
</tr>
<tr>
<td>
<a href="javascript:;" class="buttn insert generic ui-el" data-val="4">
<span class="label">4</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert generic ui-el" data-val="5">
<span class="label">5</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert generic ui-el" data-val="6">
<span class="label">6</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el oper" data-val="*">
<span class="label">×</span>
</a>
</td>
</tr>
<tr>
<td>
<a href="javascript:;" class="buttn insert generic ui-el" data-val="1">
<span class="label">1</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert generic ui-el" data-val="2">
<span class="label">2</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert generic ui-el" data-val="3">
<span class="label">3</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el oper" data-val=":">
<span class="label">÷</span>
</a>
</td>
</tr>
<tr>
<td>
<a href="javascript:;" class="buttn insert generic ui-el" data-val="0">
<span class="label">0</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert generic ui-el" data-val=".">
<span class="label">,</span>
</a>
</td>
<td colspan="2">
<a href="javascript:;" class="buttn insert ui-el uguale">
<span class="label">=</span>
</a>
</td>
</tr>
</tbody>
</table>
<table class="pulsanti extra">
<tbody>
<tr>
<td>
<a id="close-tonda" href="javascript:;" class="buttn insert ui-el par" data-val=")">
<span class="label">)</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el par" data-val="[" data-long="]" data-longtap="1">
<span class="label rel">[
<span class="apice apM">]</span>
</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el par toshow" data-val="{" data-long="}" data-longtap="1">
<span class="label rel">{
<span class="apice apM">}</span>
</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el second" data-val="%">
<span class="label">%</span>
</a>
</td>
</tr>
<tr>
<td>
<a href="javascript:;" class="buttn insert mini ui-el second" data-val="sin(" data-alert="1">
<span class="label">sin</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert mini ui-el second" data-val="cos(" data-alert="1">
<span class="label">cos</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert mini ui-el second" data-val="tan(" data-alert="1">
<span class="label">tan</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el oper" data-val="e">
<span class="label">e</span>
</a>
</td>
</tr>
<tr>
<td>
<a href="javascript:;" class="buttn insert mini ui-el second" data-val="asin(" data-alert="1">
<span class="label">asin</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert mini ui-el second" data-val="acos(" data-alert="1">
<span class="label">acos</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert mini ui-el second" data-val="atan(" data-alert="1">
<span class="label">atan</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el oper" data-val="π">
<span class="label">π</span>
</a>
</td>
</tr>
<tr>
<td>
<a href="javascript:;" class="buttn insert ui-el second" data-val="^2">
<span class="label rel">x
<span class="apice">2</span>
</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el second" data-val="^">
<span class="label rel">y
<span class="apice">x</span>
</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert mini second ui-el" data-val="log(" data-alert="1">
<span class="label">log</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el second" data-val="!">
<span class="label">x!</span>
</a>
</td>
</tr>
<tr>
<td>
<a href="javascript:;" class="buttn insert second ui-el" data-val="sqrt(" data-alert="1">
<span class="label">√</span>
</a>
</td>
<td>
<a href="javascript:;" class="buttn insert ui-el second" data-val="root(" data-alert="1">
<span class="label rel">
<span class="apice rad">x</span>√</span>
</a>
</td>
<td colspan="2">
<button id="math-button1" ion-button="" class="buttn insert mini second ui-el" block="" href-inappbrowser="page7">
Tools
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="info-page scrollable">
<div class="page-content page">
<div class="section border">
<
<div class="clear"></div>
<h2 class="left">calculator</h2>
<div class="clear"></div>
<p class="subtitle" data-l10n-id="SubTitleApp">
Simple and powerful scientific calculator
</p>
</div>
<div class="section border">
<div class="speg">
<div class="row page-header">
<span data-l10n-id="TitleMemory">Memory</span>
</div>
<div class="row">M
<span class="ugul">=</span>
<span data-l10n-id="M-symbol">write into memory</span>
</div>
<div class="row">Mr
<span class="ugul">=</span>
<span data-l10n-id="Mr-symbol">read from memory</span>
</div>
<div class="row">M
<span class="apice_">×</span>
<span class="ugul">=</span>
<span data-l10n-id="M-symbol-cross">Tap&Hold, clear memory</span>
</div>
</div>
</div>
<div class="section border">
<div class="speg">
<div class="row page-header">
<span data-l10n-id="TitleHistory">History</span>
</div>
<div class="row">↑ ↓
<span class="ugul">=</span>
<span data-l10n-id="History-swipe">swipe up/down on calc bar</span>
</div>
</div>
</div>
<div class="section border">
<div class="speg">
<div class="row page-header">
<span data-l10n-id="TitleMath">Math</span>
</div>
<div class="row">
<span class="apice_">2</span>√
<span class="ugul">=</span> sqrt()</div>
<div class="row">
<span class="apice_">x</span>√
<span class="ugul">=</span>
<span class="pedice">x</span>root()</div>
<div class="row">x
<span class="apice_">y</span>
<span class="ugul">=</span> x^y</div>
</div>
</div>
<div class="section border">
<div class="speg">
<div class="row page-header">
<span data-l10n-id="TitleSymbols">Symbols</span>
</div>
<div class="row text">
) ] } =
<span data-l10n-id="TapAndHold">Tap&Hold</span> ( [ {
</div>
</div>
</div>
<div class="section ">
<div class="speg">
<div class="row text" data-l10n-id="DeleteAll">
Delete all = Tap&Hold delete button
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ion-content>
</ion-view>
Thank's in advance!!! :)