I am trying to get the text of one of the elements and show it up on an alert but its not working for me. The element in question is <h5 class="title">. Here is my html code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="styling.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<title>Example</title>
</head>
<body>
<div data-iconpos="none" data-role="collapsibleset" data-theme="a" data-content-theme="a">
<div data-role="collapsible" data-collapsed="false">
<h2><img src="today_calendar.png" style="height: 60px; vertical-align:middle;"> Today's Events</h2>
<div id="todayCollapsible">
<div id="event1" data-role="collapsible" data-collapsed="true">
<h5 class="title">Event Title One</h5>
<ul data-role="listview" id="today_events">
<li class="event"><a href="#">
<table><tr><td>Date</td>
<td class="date" style="padding: 10px;">01/01/2014</td>
</tr><tr>
<td> Time </td>
<td class="time" style="padding: 10px;">1 hour</td>
</tr><tr>
<td> Venue </td>
<td class="venue" style="padding: 10px;">One Plaza</td>
</tr></table></a></li>
<li style="background-color: #CADECC;">
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-calendar" style="width: 170px; float: right; position: relative;">Add to calendar</button>
</li></ul>
</div>
<div id="event2" data-role="collapsible" data-collapsed="true">
<h5 class="title">Event Title Two</h5>
<ul data-role="listview" id="today_events">
<li class="event"><a href="#">
<table><tr><td>Date</td>
<td class="date" style="padding: 10px;">02/02/2014</td>
</tr><tr>
<td> Time </td>
<td class="time" style="padding: 10px;">2 hours</td>
</tr><tr>
<td> Venue </td>
<td class="venue" style="padding: 10px;">Two Plaza</td>
</tr></table></a></li>
<li style="background-color: #CADECC;">
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-calendar" style="width: 170px; float: right; position: relative;">Add to calendar</button>
</li></ul>
</div>
</div>
</div>
<script>
(function() {
"use strict";
$("body").on('click','button',function(){
var title = $(this).closest("div").find(".title").text();
var date = $(this).closest("div").find("table .date").text();
//var time = $(this).parents().find(".time").text();
//var venue = $(this).parents().find(".venue").text();
alert(title+date);
});
})();
</script>
</body>
</html>
Your issue is that since you are using jQuery mobile, it is restructuring the DOM and wrapping an extra <dv> around your <ul>
Thus the closest('div') is different than the one in your source.
Try This:
Add data-title to your h5
<h5 class="title" data-title="Event Title Two">Event Title Two</h5>
And change JS to:
$("body").on('click','button',function(){
var title = $(this).closest("div").siblings('h5.title').data("title");
var date = $(this).closest("div").find("table .date").text();
//var time = $(this).parents().find(".time").text();
//var venue = $(this).parents().find(".venue").text();
alert(title+date);
});
DEMO
Apparently, jQuery mobile will wrap some elements with a div, in this case, the <ul data-role="list-view">. Therefore, running .closest('div') will refer to the generated div, instead of the one that contains the h5.
To fix this, add your own class to the div.
<div id="event1" class="event-wrapper" data-role="collapsible" data-collapsed="true">
<!-- ^ Here -->
Then, use your class to refer to it.
jQuery mobile adds a further complication: it adds extra text that will be read by the .text() function. We need to store the text we need first before jQuery mobile adds text to the page.
$(document).one('pagebeforecreate', function(){
$('h5').each(function(){this.dataset.text = this.innerHTML;});
});
Then, we need to read the text we need from a data attribute instead of using .text().
var title = $(this).closest(".event-wrapper").find(".title").data('text');
var date = $(this).closest(".event-wrapper").find("table .date").text();
I've updated my answer. your code works fine. my bad. hehehe.
$("body").on('click','button',function(){
var title = $(this).closest("div").find(".title").text();
var date = $(this).closest("div").find("table .date").text();
//var time = $(this).parents().find(".time").text();
//var venue = $(this).parents().find(".venue").text();
alert(title+date);
}
Related
I was following a YouTube tutorial and I encountered this error while make a cart page, does anyone know how to fix this?
<!------- js for toggle menu -------->
var MenuItems = document.getElementById("MenuItems");
MenuItems.style.maxHeight = "0px";
function menutoggle() {
if (MenuItems.style.maxHeight == "0px") {
MenuItems.style.maxHeight = "200px";
} else {
MenuItems.style.maxHeight = "0px";
}
}
var removeCartItemsButton = document.getElementsByClassName('remove-danger')
console.log(removeCartItemsButton)
for (var i = 0; i < removeCartItemsButton.length; i++) {
var button = removeCartItemsButton[i]
button.addEventListener('click', function(event) {
var buttonClicked = event.target
buttonClicked.parentElement.parentElement.remove()
updateCartTotal()
})
}
function updateCartTotal() {
var cartItemContainer = document.getElementsByClassName('cart-items')[0]
var cartItems = cartItemContainer.getElementsByClassName('cart-info')
for (var i = 0; i < cartItems.length; i++) {
var cartItems = cartItems[i]
var priceElement = cartItems.getElementsByClassName('cart-price')[0]
var quantityElement = cartItems.getElementsByClassName('cart-quantity-input')[0]
var price = priceElement.innerText
console.log(price)
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cart | Fritz PC's</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="cart.js" async></script>
</head>
<body>
<div class="container">
<div class="navbar">
<div class="logo">
<img src="images/fritzpclogo.png" width="150px" alt="logo">
</div>
<nav>
<ul id="MenuItems">
<li><b>Home</b></li>
<li><b>Products</b></li>
<li><b>About</b></li>
<li><b>Contact</b></li>
<li><b>Account</b></li>
</ul>
<a href="cart.html">
<img src="images/cart.png" width="30px" height="30px">
</a>
<img src="images/menu.png" class="menu-icon" onclick="menutoggle()">
</nav>
</div>
</div>
<!------- cart item details ------->
<div class="small-container cart-page">
<div class="cart-items">
<table>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Subtotal</th>
</tr>
<tr>
<td>
<div class="cart-info">
<img src="images/r5-3600.jpg">
<div>
<p>Ryzen 5 3600 6C/12T</p>
<small>$69.9</small>
<br>
<button type="button" class="remove remove-danger">Remove</button>
</div>
</div>
</td>
<td><input class="cart-quantity-input" type="number" value="1"></td>
<td class="cart-price">$231.16</td>
</tr>
<tr>
<td>
<div class="cart-info">
<img src="images/r5-3600.jpg">
<div>
<p>Ryzen 5 3600 6C/12T</p>
<small>$99.9</small>
<br>
<button type="button" class="remove remove-danger">Remove</button>
</div>
</div>
</td>
<td><input class="cart-quantity-input" type="number" value="1"></td>
<td class="cart-price">$99.9</td>
</tr>
<tr>
<td>
<div class="cart-info">
<img src="images/r5-3600.jpg">
<div>
<p>Ryzen 5 3600 6C/12T</p>
<small>$49.9 KWD</small>
<br>
<button type="button"class="remove remove-danger">Remove</button>
</div>
</div>
</td>
<td><input class="cart-quantity-input" type="number" value="1"></td>
<td class="cart-price">$49.9</td>
</tr>
<tr>
<td>
<div class="cart-info">
<img src="images/r5-3600.jpg">
<div>
<p>Ryzen 5 3600 6C/12T</p>
<small>$19.9 KWD</small>
<br>
<button type="button" class="remove remove-danger">Remove</button>
</div>
</div>
</td>
<td><input class="cart-quantity-input" type="number" value="1"></td>
<td class="cart-price">$19.9</td>
</tr>
</table>
</div>
<div class="total-price">
<table>
<tr>
<td>Subtotal</td>
<td>239.6 KWD</td>
</tr>
<tr>
<td>Shipping</td>
<td>3 KWD</td>
</tr>
<tr>
<td>Total</td>
<td>242.6 KWD</td>
</tr>
</table>
</div>
</div>
<!------- footer ------->
<div class="footer">
<div class="container">
<div class="row">
<div class="footer-col-1">
<h3>Join our discord server</h3>
<p>Join our discord server if you have any
<br>
doubts or questions :)</p>
<div class="discord-logo">
<img src="images/discord-logo.png">
</div>
</div>
<div class="footer-col-2">
<img src="images/fritzpclogo.png">
<p>Our goal is to make and sell high quality
<br>
Gaming/Streaming PC's with minimum profit</p>
</div>
<div class="footer-col-3">
<h3>Useful links</h3>
<ul>
<li>Coupons</li>
<li>Blog</li>
<li>Return Policy</li>
<li>Join Affiliate</li>
</ul>
</div>
<div class="footer-col-3">
<h3>Follow Us</h3>
<ul>
<li>YouTube</li>
<li>Instagram</li>
<li>Twitter</li>
<li>Discord</li>
</ul>
</div>
</div>
<hr>
<p class="copyright">Copyright 2021 - Fritz PC's</p>
</div>
</div>
</body>
</html>
The line var cartItems = cartItems[i] is overwiting the cartItems variable locally. You probably meant to write var cartItem = cartItems[i].
With that being said, The reason for the error is that <td class="cart-price"> is not inside <div class="cart-info">. cartItems is a 'reference' to the cart-info div and cartItems.getElementsByClassName will look for all elements with the passed class name INSIDE the cartItems element. To fix the problem, you simply need to put the cart-price div inside the cart-info div like so:
<div class="cart-info">
<img src="images/">
<div>
<p>...</p>
<small>...</small>
<br>
<button type="button" class="remove remove-danger">Remove</button>
</div>
<input class="cart-quantity-input" type="number" value="1"></td>
<div class="cart-price">...</div>
</div>
Also: remember that <td tags should only go inside a table, not a div so if you move them inside the cart-info div, you should change the tag. Alternatively, you could look for the element inside cart-items div instead.
I'm stumped. As far as I can see from other posts the following should work to replace the contents of the p tags:
<p id="activateSubMenuIcons">.</p>
<script type="text/javascript">
window.onload = function() {
document.getElementById("activateSubMenuIcons").innerHTML = "hello";
}
</script>
but no dice. Also, no indication of an error comes up in the console. Would anyone be kind enough to tell me what I'm doing wrong??
EDIT
Ok here's the whole HTML as rendered by Umbraco:
<!DOCTYPE html>
<html>
<head>
<title>WSHA</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/css/wsha-style.css">
<link rel="stylesheet" type="text/css" href="/css/wsha-style-mobile.css">
<link href="https://fonts.googleapis.com/css?family=Encode+Sans" rel="stylesheet">
</head>
<body>
<nav>
<img id="logo" src="/media/1042/wshalogo.png">
<ul>
<li class="current">Home
<span id="mainMenuIcon" class="fa fa-bars menuIcon"></span>
</li>
<li class="mainMenuItem">
About us
<span id="1259" class="fa fa-caret-down menuIcon subMenuOpener"></span>
<ul>
<li>Our People</li>
<li>Who we were and are</li>
<li>Our Houses</li>
<li>Annual Reports</li>
</ul>
</li>
<li class="mainMenuItem">
Being a Tenant
<span id="1293" class="fa fa-caret-down menuIcon subMenuOpener"></span>
<ul>
<li>Asbestos</li>
<li>Being Safe & Secure</li>
</ul>
</li>
<li class="mainMenuItem">
News
<span id="1305" class="fa fa-caret-down menuIcon subMenuOpener"></span>
<ul>
<li>Community Garden</li>
<li>Football Team</li>
<li>Health Centre</li>
</ul>
</li>
</ul>
<br class="clear">
</nav>
<p id="activateSubMenuIcons">.</p>
<script type="text/javascript">
window.onload = function() {
document.getElementById("activateSubMenuIcons").innerHTML = "hello";
}
</script>
<div id="banner" style="background-image: url('/media/1035/houses-banner.jpg');">
<div id="bannerTitle">
<h1>Whiteinch & Scotstoun Housing Association</h1>
</div>
</div>
<div id="bannerMobile">
<div id="bannerTitle">
<h1>Whiteinch & Scotstoun Housing Association</h1>
</div>
</div>
<div id="subTitle">
<h4 class="text-centre">A Charity Registered in Scotland No. SC035633.</h4>
<h2 class="text-centre">Aiming for High Quality Homes in a Desirable Environment</h2>
</div>
<div id="homeContent-container">
<div id="homeContent">
<p><p>Welcome to our website. Please let us know if there is any information you would like to see included which we haven't thought of.</p>
<p>The modules are designed to help you navigate the site, and by clicking on the 'keys' on the left hand side of the module home pages, you will, hopefully, find the infomation you need.</p>
<p>You can opt for a text only version (see top of page), and there is the facility to download Adobe Reader is you want to print off any information and don't have this facility already (see below).</p>
<p>Please contact us using the link at the bottom of the page.</p></p>
</div>
</div>
<div id="footerContent">
<div class="footerContentBlock" id="first">
<h4>Quick Links</h4>
<ul>
<li>
<a href="http://www.banskorental.co.uk/about-us/our-people/" target="_blank">
<p>Our People</p>
</a>
</li>
</ul>
<ul>
<li>
<a href="http://www.banskorental.co.uk/news/" target="_blank">
<p>News</p>
</a>
</li>
</ul>
<ul>
<li>
<a href="http://www.banskorental.co.uk/about-us/annual-reports/" target="_blank">
<p>Annual Reports</p>
</a>
</li>
</ul>
<ul>
</ul>
<ul>
</ul>
</div>
<div class="footerContentBlock" id="middle">
<h4>Opening Hours</h4>
<table border="0" height="79" style="width: 272.583px;">
<tbody>
<tr>
<td style="width: 144px;">Monday to Thursday</td>
<td style="width: 108.583px;">9am to 5pm</td>
</tr>
<tr>
<td style="width: 144px;">Friday</td>
<td style="width: 108.583px;">9am to 3pm</td>
</tr>
<tr>
<td style="width: 144px;">Saturday, Sunday</td>
<td style="width: 108.583px;">Closed</td>
</tr>
</tbody>
</table>
</div>
<div class="footerContentBlock" id="last" >
<p style="text-align: right;"><strong>Whiteinch and Scotstoun Housing Association</strong></p>
<p style="text-align: right;">The Whiteinch Centre</p>
<p style="text-align: right;">1 Northinch Court</p>
<p style="text-align: right;">Glasgow</p>
<p style="text-align: right;">G14 0UG</p>
<p style="text-align: right;"> </p>
<p style="text-align: right;">Phone: 0141 959 2552</p>
<p style="text-align: right;">Fax: 0141 950 4432</p>
<p style="text-align: right;">email: wsha_admin#wsha.org.uk</p>
</div>
</div>
<div id="googleTranslateContainer">
<p>Translate this page.</p>
<p id="closeButton" onclick="translateClose()">x</p>
<div id="googleTranslate"></div>
</div>
<script type="text/javascript">
function translateClose() {
document.getElementById("googleTranslateContainer").style.visibility = "hidden";
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'googleTranslate');
}
</script>
<script type="text/javascript" src="/scripts/template2Javascript.js"></script>
</body>
</html>
And the javascript in template2Javascript.js:
document.getElementById("mainMenuIcon").onclick = function () {
var x = document.getElementsByClassName("mainMenuItem");
var numberOfMenuItems = x.length;
for ( i=0 ; i < numberOfMenuItems ; i++ ) {
if (x[i].style.display === "none") {
x[i].style.display = "block";
} else {
x[i].style.display = "none";
}
}
};
if you print something in console you have to write cosole.log() like
console.log(document.getElementById("activateSubMenuIcons1").innerHTML);
and also you prevent p tag value than += concat with old value
window.onload = function() {
document.getElementById("activateSubMenuIcons").innerHTML = "hello";
document.getElementById("activateSubMenuIcons1").innerHTML += "hello";
console.log(document.getElementById("activateSubMenuIcons1").innerHTML);
}
<p id="activateSubMenuIcons">.</p>
<p id="activateSubMenuIcons1">.</p>
I apologise for wasting everyone's time. I now realise that I had misunderstood how innerHTML works. I was looking for a change in the source code, not the change in the browser. The reason I didn't spot that it was working was the text was displaying white on white. When I changed the css to make it purple and 200% it showed up and I could see that it does work after all.
I just need to rethink what I'm trying to do - see comment on Bhargav's answer below.
I use chrome browser.
I use this row:
<td><a href = '/'; >Home</a></td>
To go back to home page.
For example:
If I have this URL in address bar:
http://localhost:1234/#reportPage
After I press Home,I get this URL in address bar:
http://localhost:1234/
The reportPage is ID of the div tha has data-role="page".
The address bar is changes but the view not changes(the old view remain in the same place,the view of HTML page not changes).
But if use FF or IE browser it works perfect,when I press Home button the address bar changes and also the view changes to the Home page. Any idea why I have problems the the code above in google chrome?
Here my HTML code:
<!DOCTYPE html>
<html ng-app="muni">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=medium-dpi" />
<title>Review</title>
<link href="css/ol.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/themes/rtl/rtl.jquery.mobile-1.4.0.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="scripts/libs/angular.min.js"></script>
<script src="scripts/libs/angular-touch.min.js"></script>
<script src="scripts/libs/angular-route.min.js"></script>
<script src="scripts/libs/angular-sanitize.min.js"></script>
<script type="text/javascript" src="scripts/libs/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function () {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
$.mobile.pushStateEnabled = false;
$.mobile.defaultPageTransition = 'slide';
$.mobile.buttonMarkup.hoverDelay = 0;
$.mobile.allowCrossDomainPages = true;
});
</script>
<script type="text/javascript" src="scripts/libs/rtl.jquery.mobile-1.4.0.js"></script>
</head>
<body ng-controller="mainController as main">
<div data-role="page" id="home">
<div data-role="header">
<h2>{{vm.config.customer.name}}</h2>
</div>
<div data-role="main" class="ui-content">
<img style="display: block; margin: 10px auto 30px auto;max-width: 90%; max-height: 90%;" ng-src="{{vm.config.customer.logo}}" alt="{{vm.config.customer.name}}" />
<div data-role="controlgroup">
Sites Mapping
Messages
On Cnostruction
Profile
</div>
</div>
</div>
<div data-role="page" id="reportPage" ng-controller="reportController">
<div data-role="header">
<h2>{{vm.config.customer.name}}</h2>
</div>
<div data-role="main" class="ui-content">
<div ng-show="stage=='map'">
<div>
<table class="button-panel">
<tr>
<td><img src="images/mail-sent.png" ng-click="goNextStage()" /></td>
<td class="big" ng-style="{'background': 'url('+ report.Photo +') no-repeat center', 'background-size': '200px'}"><img src="images/photo-large.png" ng-click="takePhoto()" /></td>
<td><img src="images/home-large.png" ng-click="goPreviousStage()" /></td>
<td><a href='/#'>Home</a></td> <----this Home link!!!
</tr>
</table>
</div>
<div style="clear:both"></div>
<select id="reportType" ng-model="viewModel.reportType" ng-options="reportType.Text for reportType in reportTypes"></select>
<div id="addressForm">
<table style="width: 100%">
<tr>
<td style="width:200px">
<input ng-model="search.addressSearch" placeholder="Enter address" />
</td>
<td style="width:auto">
<button ng-click="searchForAddress()" class="ui-btn ui-btn-inline ui-btn-icon-right ui-icon-search ui-corner-all"></button>
</td>
<td style="text-align: left">
<button ng-click="gotoMyLocation()" class="ui-btn ui-btn-inline ui-corner-all ui-btn-icon-notext ui-icon-location"></button>
</td>
</tr>
</table>
</div>
<div id="map"></div>
</div>
<div ng-show="stage=='success'">
<div>
<table class="button-panel">
<tr>
<td></td>
<td class="big"><img src="images/home-large.png" ng-click="goPreviousStage()" /></td>
<td></td>
</tr>
</table>
</div>
<div class="ui-body ui-body-a ui-corner-all" style="margin: 20px 10px;">
<img src="images/success.png" style="float: right; width: 100px; margin: 5px;" />
<h3>Site saved</h3>
<p>
Saved.<br />
Number: <span id="reportId">{{reportId}}</span>
<br />
Thank you for coorparating
</p>
</div>
</div>
<div ng-show="stage=='error'"></div>
</div>
<div id="addressPanel" data-role="panel" data-position="left" data-display="overlay">
<ul data-role="listview">
<li ng-repeat="address in search.results">
<a href ng-click="setAddress(address)">{{address.formatted_address}}</a>
</li>
</ul>
</div>
</div>
<div data-role="page" id="messages" ng-controller="messagesController">
<div data-role="header">
<h2>Masseges</h2>
</div>
<div data-role="main" class="ui-content">
<div>
<table class="button-panel">
<tr>
<td></td>
<td class="big"><img src="images/home-large.png" ng-click="goBackPlease()" /></td>
<td></td>
</tr>
</table>
</div>
<ul id="messageList" data-role="listview" data-inset="true">
<li ng-repeat="message in messages | orderBy:'-Date' track by $index">
<h2>{{message.Title}}</h2>
<p ng-bind-html="message.Body | wrapphones"></p>
<p style="text-align: left">{{message.Date | date:'dd/MM/yyyy'}}</p>
</li>
</ul>
</div>
</div>
<div data-role="page" id="underConstruction">
<div data-role="header">
<h2>On construction</h2>
Back
</div>
<div data-role="main" class="ui-content">
<img style="width: 95%; display: block; margin: 10px auto;" src="images/Under-Construction.gif" alt="Under Construction" />
</div>
</div>
<div data-role="page" id="logPage">
<div data-role="header">
<h2>LOG</h2>
</div>
<div data-role="main" class="ui-content">
<ul id="log"></ul>
</div>
</div>
z
<script src="phonegap.js"></script>
<script type="text/javascript" src="scripts/libs/ol.js"></script>
<script src="scripts/index.js"></script>
<script src="scripts/app/config.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/app/filters/wrapphones.js"></script>
<script src="scripts/app/services/coordinateSerivce.js"></script>
<script src="scripts/app/services/reportService.js"></script>
<script src="scripts/app/services/mapService.js"></script>
<script src="scripts/app/services/pushService.js"></script>
<script src="scripts/app/controllers/mainController.js"></script>
<script src="scripts/app/controllers/reportController.js"></script>
<script src="scripts/app/controllers/messagesController.js"></script>
</body>
</html>
One approach could be to include an input element as first child of body element, with tabindex set to 1 ; using history.replaceState()
<!DOCTYPE html>
<html>
<head>
<style>
#abc {
position: relative;
top: 800px;
}
</style>
<script>
function home(e) {
e.preventDefault();
history.replaceState({}, "home", location.pathname);
document.getElementById("home").focus()
}
</script>
</head>
<body>
<h1>Hello Plunker!</h1>
<input tabindex="1" type="button" id="home" style="opacity:0;width:0;height:0" />
<table>
<tbody>
<tr>
<td>abc
</td>
</tr>
<tr>
<td id="abc">Home
</td>
</tr>
</tbody>
</table>
</body>
</html>
plnkr http://plnkr.co/edit/sRyoc4uR2N4F8sbzD4zZ?p=preview
You basically don't go to another page, or reload it. You stay on the same page, just trying to jump to the top. #reportPage takes you to an element with the id reportPage, removing the id doesn't necessary mean "scroll to top". As you seem to get to the top of the page, just change it to:
<td><a href='/#'>Home</a></td>
It'll function correctly, by explicitly taking you to the top.
If it doesn't work still, the suggestion is to set the location to / and reload the page with javascript:
<td><a href='javascript:location.href="/";location.reload();'>Home</a></td>
The location.reload() sentence may be excess (for me it does work without it), but as you say you have problems with reloading, you can also try with this sentence.
To be sure of all, add this line of JS in your pages:
$('a[href="/"]').off();
jQuery off Remove an event handler, .off() with no arguments removes all handlers attached to the elements.
Your code will works! Just use the correct xHtml:
<td>Home</td>
or, to remain in the same folder
<td>Home</td>
If you have www.yoursite.com/ciao/#apage href="./" will return www.yoursite.com/ciao/ while href="/" will return www.yoursite.com
I'm currently designing a UI for an automated parking system. One of the pages (garage status) has a table which contains spot numbers and their corresponding ticket numbers. The valet has to be able to type in either a spot number or ticket number into the search box and as he types each letter, the options in the table are filtered according to what he types. I'm using List.js for this, however, I also need to have an onscreen keypad for the valet to input the numbers, which for that I use jQuery Keypad plugin. Unfortunately, filtering is only performed if I directly input from my laptop keyboard, not when I use the keypad plugin. I would be very grateful if someone could give some input on how to solve this problem.
<!DOCTYPE html>
<html>
<title>Garage Status</title>
<head>
<!-- Import materialize.css -->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="css/menu.css"/>
<!--Import Material Design icons-->
<link href="font/material-design-icons/material.css" rel="stylesheet" />
<!--Import jQuery before materalize.js-->
<script src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<!--Import jQuery Keypad CSS-->
<link type="text/css" href="css/jquery.keypad.aps.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.plugin.js"></script>
<script type="text/javascript" src="js/jquery.keypad.js"></script>
<!--Touchscreen keypad for ticket num input just in case ticket scanner doesn't work or they want to edit the ticket number (e.g.ticket scanner makes mistake)-->
<script>
$(document).ready(function(){
$('#grgKeypad').keypad({target: $('.search'),layout: ['789'+ $.keypad.CLEAR,'456' + $.keypad.BACK,'1230-']
});
});
</script>
</head>
<body>
<!--Page Title Panel-->
<div class="card-panel">
<h4>GARAGE STATUS</h4>
<!--Options button, reveals dropdown menu with options to switch to other pages-->
<a id="optionsbtn" class='dropdown-button btn-large' href='#' data-activates='dropdown1' data-constrainwidth='false'>Options</a>
<!--Quick access buttonss to inpark and outpark menus-->
<a id="quick_outpark_btn" class="waves-effect waves-light btn-large" href="outmenu.html">OUTPARK</a>
<a id="quick_inpark_btn" class="waves-effect waves-light btn-large" href="inmenu.html">INPARK</a>
</div>
<!--Dropdown menu structure and it's items-->
<ul id="dropdown1" class="dropdown-content">
<li>Dashboard</li>
<li class="divider"></li>
<li>Inpark</li>
<li class="divider"></li>
<li>Outpark</li>
<li class="divider"></li>
<li>Shuffle</li>
<li class="divider"></li>
<li>Outpark Queue Menu</li>
<li class="divider"></li>
<li>Transactions</li>
</ul>
<!--Dashboard Button, press to return to dashboard-->
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
<a class="btn-floating btn-large waves-effect waves-light" href="dashmenu.html">
<!--Home icon-->
<i class="material-icons" style="font-size: 48px"></i>
</a>
</div>
<!--Form that takes ticket number or spot number and searches for that car's ticket number and spot number-->
<!--Note that the search form shouldn't be sending data back to the server to search for the car, the data should already be loaded onto the page and the search should be performed with the already loaded data or something like that idk if you want to change-->
<div id="locations">
<div class="row">
<form class="col s7" style="margin: 0px; padding: 0px;">
<div class="row">
<div class="input-field col s9">
<input placeholder="Enter ticket or spot number" id="search" type="search" class="search">
<label for="search"><i class="material-icons" id="searchicon"style="font-size: 48px"></i></label>
</div>
</div>
</form>
</div>
<!--Table that displays cars in the garage-->
<!--Data will be dynamically displayed, currently these are just placeholder data-->
<div class="table" id="searchtable">
<table class="centered striped bordered scroll">
<thead>
<tr>
<th>Spots</th>
<th>Ticket Number</th>
</tr>
</thead>
<tbody class="list">
<tr>
<td class="spot">1-22-35</td>
<td class="ticketnum">696969</td>
</tr>
<tr>
<td class="spot">1-22-34</td>
<td class="ticketnum">696968</td>
</tr>
<tr>
<td class="spot">6-22-33</td>
<td class="ticketnum">696967</td>
</tr>
<tr>
<td class="spot">1-22-32</td>
<td class="ticketnum">696966</td>
</tr>
<tr>
<td class="spot">8-22-31</td>
<td class="ticketnum">696965</td>
</tr>
<tr>
<td class="spot">8-22-30</td>
<td class="ticketnum">696964</td>
</tr>
<tr>
<td class="spot">1-22-39</td>
<td class="ticketnum">696953</td>
</tr>
</tbody>
</table>
</div>
<!--Div containing the keypad-->
<div id="grgKeypad"></div>
<!--Import List.js-->
<script src="list.js"></script>
<script>
var options = {
valueNames: ["spot","ticketnum"]
};
var userList = new List("locations",options);
</script>
</body>
</html>
This piece of html is loaded by an ajax call. There are plenty of such sets of html. This is only 1 set:
print '<div id="'.$row['Event ID'].'" data-role="collapsible" data-collapsed="true">';
print '<h5 class="title">'.$row['Title'].'</h5>';
print '<ul data-role="listview" id="today_events">';
print '<li class="event"><a href="#">';
print '<table><tr><td>Date</td>';
print '<td class="date" style="padding: 10px;">'.$row['Date'].'</td>';
print '</tr><tr>';
print '<td> Time </td>';
print '<td class="time" style="padding: 10px;">'.$row['Time_Duration'].'</td>';
print '</tr><tr>';
print '<td> Venue </td>';
print '<td class="venue" style="padding: 10px;">'.$row['Venue'].'</td>';
print '</tr></table></a></li>';
print '<li style="background-color: #CADECC;">';
print '<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-calendar" style="width: 170px; float: right; position: relative;">Add to calendar</button>';
print '</li></ul>';
print '</div>';
I am trying to give an alert when the button is clicked. The alert should contain the title and date of the specific $row of data.
This is my jQuery code (BUT its not working. I see a blank alert):
$("body").on('click','button',function(){
var title = $(this).closest("div").find(".title").text();
var date = $(this).closest("table").find(".date").text();
//var time = $(this).parents().find(".time").text();
//var venue = $(this).parents().find(".venue").text();
alert(title+date);
});
Your line getting the title is fine. The line getting the date is looking for an ancestor element of the button that's a table, but the button isn't in the table, it's just in the div that the table's in. So:
var date = $(this).closest("div").find("table .date").text();
Live Example:
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<meta charset="utf-8">
<title>Example</title>
</head>
<body>
<div id="event1" data-role="collapsible" data-collapsed="true">
<h5 class="title">Event Title One</h5>
<ul data-role="listview" id="today_events">
<li class="event"><a href="#">
<table><tr><td>Date</td>
<td class="date" style="padding: 10px;">01/01/2014</td>
</tr><tr>
<td> Time </td>
<td class="time" style="padding: 10px;">1 hour</td>
</tr><tr>
<td> Venue </td>
<td class="venue" style="padding: 10px;">One Plaza</td>
</tr></table></a></li>
<li style="background-color: #CADECC;">
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-calendar" style="width: 170px; float: right; position: relative;">Add to calendar</button>
</li></ul>
</div>
<div id="event2" data-role="collapsible" data-collapsed="true">
<h5 class="title">Event Title Two</h5>
<ul data-role="listview" id="today_events">
<li class="event"><a href="#">
<table><tr><td>Date</td>
<td class="date" style="padding: 10px;">02/02/2014</td>
</tr><tr>
<td> Time </td>
<td class="time" style="padding: 10px;">2 hours</td>
</tr><tr>
<td> Venue </td>
<td class="venue" style="padding: 10px;">Two Plaza</td>
</tr></table></a></li>
<li style="background-color: #CADECC;">
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-calendar" style="width: 170px; float: right; position: relative;">Add to calendar</button>
</li></ul>
</div>
<script>
(function() {
"use strict";
$("body").on('click','button',function(){
var title = $(this).closest("div").find(".title").text();
var date = $(this).closest("div").find("table .date").text();
//var time = $(this).parents().find(".time").text();
//var venue = $(this).parents().find(".venue").text();
alert(title+date);
});
})();
</script>
</body>
</html>
IF you want to go up to your ancestor element I would prefer .parents instead of .closest, so it would be like this:
var title = $(this).parents("div").find(".title").text();
var date = $(this).parents("div").find("table .date").text();