Develop Reference

Hide div on click with Javascript (a click that already show other div)

I've built a feedback function to be used on the bottom of pages on our company website. The visitor can vote YES or NO on the question, "Was this information useful to you?" The click show a div (feedbackDiv1/feedbackDiv2) via Javascript.
The function works, but I want the question and the answer buttons to disappear after the visitor has voted, I.e. hide the div #pagefeedback.
I've tried all my tools, but I cant get this to work.
Help would be very much appreciated!
This is the JavaScript used:
function showFeedback1() {
document.getElementById('feedbackDiv1').style.display = "block";
function showFeedback2() {
document.getElementById('feedbackDiv2').style.display = "block";}
This is the HTML used:
<div class="greycontentbox">
<div id="pagefeedback">
<h4 style="text-align: center;">Was this information useful to you?</h4>
<table align="center" width="70%" border="0" cellspacing="2" cellpadding="5">
<tbody>
<tr>
<td align="center"><a class="knappfeedbackyes knappsmall" href="#" onclick="showFeedback1()"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>YES</a></td>
<td align="center"><a class="knappfeedbackno knappsmall" href="#" onclick="showFeedback2()"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>NO</a></td>
</tr>
</tbody>
</table></div>
<div align="center"><div id="feedbackDiv1" style="display:none;" class="negativefeedback answer_list">POSITIVE FEEDBACK</div></div>
<div align="center"><div id="feedbackDiv2" style="display:none;" class="positivefeedback answer_list">NEGATIVE FEEDBACK</div></div>
</div>
Kind regards,
Pete

Based on Robert's answer, you could do a simple function which receive the ID of the element that has to be shown.
function showFeedback(feedback) {
document.getElementById(feedback).style.display = "block";
document.getElementById('options').style.display = "none";
}
<div class="greycontentbox">
<div id="pagefeedback">
<h4 style="text-align: center;">Was this information useful to you?</h4>
<table align="center" width="70%" border="0" cellspacing="2" cellpadding="5">
<tbody id="options">
<tr>
<td align="center"><a class="knappfeedbackyes knappsmall" href="#" onclick="showFeedback('feedbackDiv1')"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>YES</a></td>
<td align="center"><a class="knappfeedbackno knappsmall" href="#" onclick="showFeedback('feedbackDiv2')"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>NO</a></td>
</tr>
</tbody>
</table></div>
<div align="center">
<div id="feedbackDiv1" style="display:none;" class="negativefeedback answer_list">POSITIVE FEEDBACK</div></div>
<div align="center"><div id="feedbackDiv2" style="display:none;" class="positivefeedback answer_list">NEGATIVE FEEDBACK</div>
</div>
</div>

If you give your table an ID it's fairly easy to just change it's display css to none. Also you can accomplish the same with 1 function and simply pass an argument to it that you can use in a conditional statement to show your appropriate feedback.
function showFeedback(feedback) {
if (feedback == 'yes') {
document.getElementById('feedbackDiv1').style.display = "block";
} else {
document.getElementById('feedbackDiv2').style.display = "block";
}
document.getElementById('options').style.display = "none";
}
<div class="greycontentbox">
<div id="pagefeedback">
<h4 style="text-align: center;">
Was this information useful to you?
</h4>
<table align="center" width="70%" border="0" cellspacing="2" cellpadding="5">
<tbody id="options">
<tr>
<td align="center">
<a class="knappfeedbackyes knappsmall" href="#" onclick="showFeedback('yes')">
<i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>YES
</a>
</td>
<td align="center">
<a class="knappfeedbackno knappsmall" href="#" onclick="showFeedback('no')">
<i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>NO
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<div id="feedbackDiv1" style="display:none;" class="negativefeedback answer_list">
POSITIVE FEEDBACK
</div>
</div>
<div align="center">
<div id="feedbackDiv2" style="display:none;" class="positivefeedback answer_list">
NEGATIVE FEEDBACK
</div>
</div>
</div>

Filter a table with text and button inputs using javascript?

Is it possible to filter the same table with more than one input? If so- can it be done with both text and button based inputs?
Is it possible to add filtering buttons to this for example? (my apologies if it breaks. I tried trimming back the code as much as possible..):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Albion Next Generation Arming Swords</title>
</head>
<body>
<div class="wrapper">
<header>
<nav style="z-index: 999; float: right; width: 100%;>
<div style="width: 25%; float: right; margin-top: 1%; margin-right: 1%;
font-family: Centaur; font-size: 16px" data-tip="Exe. 'Laird', 'Type
XII' or 'Scottish'">
<input style="margin-left: 0%; width: 100%; " type="text" id="myInput"
onkeyup="myFunction()" placeholder=" Filter by name or bladetype or key-
term" title="Type in a name"></div>
</nav>
</header>
<body>
<section style="padding-top: 11%; float: left; width: 90%; z-index:
999999999999999">
<table id="SwordTable" style="z-index: 999999999999999999999999; width:
100%; height: 100%; margin-right: 15%; padding-left: 2%; font-size: 80%"
cellpadding="2">
<tbody>
<tr>
<td style="width: 100%">
<td style="width: auto"></td>
</tr>
<tr>
<td style="padding-bottom: 5%">
<div class="dropdown">
<a href="Albion Front Page.html">
<img style="float: right" src="images/NORMAN.png" width="95%"
height="auto" alt=""/></a>
<div class="dropdown-content">
<div class="desc">
<p style="text-align: left; font-family: Centaur; font-size: 100%">The
Norman<br>Type Xa<br>$880</p>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td style="padding-bottom: 5%">
<div style="width: 100%" class="dropdown">
<a href="Albion Front Page.html">
<img style="float: right" src="images/SENLAC.png" width="100%"
height="auto" alt=""/></a>
<div class="dropdown-content">
<div class="desc">
<p style="text-align: left; font-family: Centaur; font-size: 100%">The
Senlac<br>Type Xa<br>$880</p>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td style="padding-bottom: 5%">
<div style="width: 100%" class="dropdown">
<a href="Albion Front Page.html">
<img style="float: right" src="images/Templar.png" width="98%"
height="auto" alt=""/></a>
<div style="float: right" class="dropdown-content">
<div class="desc">
<p style="text-align: left; font-family: Centaur; font-size: 100%">The
Templar<br>Type Xa<br>$880</p>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td style="padding-bottom: 5%"><div class="dropdown"><a href="Albion
Front Page.html"><img style="float: right" src="images/REEVE.png"
width="100%" height="auto" alt=""/></a><div class="dropdown-content">
<div class="desc"><p style="text-align: left; font-family: Centaur;
font-size: 100%">The Reeve<br>Late Anglo-Saxon sword<br>Type
X<br>$840</p></div> </div>
</div></td>
</tr>
<tr>
<td style="padding-bottom: 5%"><div class="dropdown"><a href="Albion
Front Page.html"><img style="float: right" src="images/BAYEUX.png"
width="93%" height="auto" alt=""/></a><div class="dropdown-content"><div
class="desc"><p style="text-align: left; font-family: Centaur; font-
size: 100%">The Bayeux<br>Type X<br>$880</p></div> </div>
</div></td>
</tr>
<tr>
<td style="padding-bottom: 5%"><div class="dropdown"><a href="Albion
Front Page.html"><img style="float: right" src="images/VIGIL.png"
width="93%" height="auto" alt=""/></a><div class="dropdown-content"><div
class="desc"><p style="text-align: left; font-family: Centaur; font-
size: 100%">The Vigil<br>Type X<br>$1,210</p></div> </div>
</div></td>
</tr>
<tr>
<td style="padding-bottom: 5%"><div class="dropdown"><a href="Albion
Front Page.html"><img style="float: right" src="images/Oakshott.png"
width="98%" height="auto" alt=""/></a><div class="dropdown-content"><div
class="desc"><p style="text-align: left; font-family: Centaur; font-size:
100%">The Oakeshott<br>Type Xa<br>$1,210</p></div> </div>
</div></td>
</tr>
</tbody>
</table>
<script>
function myFunction() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("SwordTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
</section>
<div class="push" style="padding-bottom: 20%"></div>
</div>
</body>
</html>
Basically, I want to add a number of search buttons beneath the search-bar that will filter products based on various traits.

With Firebug i am able to see HTML<Div>section inside the parent, when i use Selenium to fetch the html source based <div id>, i cannot see the child

Using Firebug i am able to see the HTML section inside the parent ,
<div id="tabstop_1_ElementForTabStop" class="treeContainer" style="visibility: visible; height: 100%; overflow: auto;" tabindex="0">
<div style="width: 0px; height: 0px; overflow: hidden; position: absolute; z-index: 1;">
<div id="tree1462947337992_children">
<div id="tree1462947337992$virtual_root" class="treeNode">
<div id="tree1462947337992$virtual_root_children" class="treeChildContainer" style="margin-left: 0px; display: block;">
<div id="tree1462947337992$/users/npatel" class="treeNode" style="display: block;">
<div id="tree1462947337992$/shared" class="treeNode" style="display: block;">
<span class="masterTreeLine treeLine" style="display: block;">
<div id="tree1462947337992$/shared_children" class="treeChildContainer" style="display: block;">
<div id="tree1462947337992$/shared/Components" class="treeNode">
<div id="tree1462947337992$/shared/Sales Home" class="treeNode">
<div id="tree1462947337992$/shared/Sample Lite" class="treeNode">
<div id="tree1462947337992$/shared/Skill Portal" class="treeNode">
<div id="tree1462947337992$/shared/Trainings & Skills" class="treeNode">
</div>
</div>
</div>
</div>
</div>
</div>
but when i use Selenium using Java to fetch the html source based on the parent , i cannot see the child section of the root div
Here is my selenium code snippet:
WebElement ele = driver.findElement(By.id("tabstop_1_ElementForTabStop"));
System.out.println(ele.getAttribute("innerHTML"));
Thread.sleep(4000);
String x = (String) jse.executeScript("return arguments[0].innerHTML", ele);
String div_id = x.substring(x.indexOf("id=\"tree") + 4, x.indexOf("_children\""));
System.out.println(div_id);
ele = driver.findElement(By.id(div_id + "$/shared_children"));
System.out.println(ele.getAttribute("textContent"));
System.out.println(jse.executeScript("return arguments[0].textContent", ele));
Output of the above code gives this
Single Select Tree. . Currently selected values are , Folder. My Folders. , , The cursor node is , , Available commands. Use the up and down arrow keys to move the node cursor. Use the right arrow to expand a subtree. Use the left arrow to close an expanded subtree. Use spacebar and enterkey to select values. Use home and end keys to move to the first or last node. My FoldersShared Folders
tree1462948179598
The Complete html source as extracted from firebug is below
<!DOCTYPE html>
<html lang="en" dir="ltr" style="visibility: visible;">
<head>
<body class="masterOBIEE HTMLBody">
<div class="HeaderContainer">
<a id="idSkipContentLink" class="HeaderSkipLink" tabindex="-1" href="javascript:saw.header.skipToContent()">Skip to content</a>
<table class="masterBrandingArea HeaderTopBar" cellspacing="0" cellpadding="0" border="0" role="presentation">
<div class="HeaderBarSeparator"></div>
<table class="masterGlobalLayer HeaderSecondBar HeaderSecondBarPadding" cellspacing="0" cellpadding="0" border="0" role="presentation">
<tbody>
<tr>
<td class="HeaderTitleBarCell">
<td class="HeaderNavBarCell">
<div align="right">
<table cellspacing="0" cellpadding="0" border="0" role="presentation">
<tbody>
<tr>
<td class="HeaderAlerts">
<td class="HeaderNavMenubarCell">
<div class="HeaderMenubar" style="padding-right: 0px;">
<table cellspacing="0" cellpadding="0" border="0" role="presentation">
<tbody>
<tr>
<td title="Home">
<td>
<td>
<td>
<td title="Favorites">
<td>
<td title="Dashboards">
<span id="dashboard" class="masterMenuButton masterMenuButtonGlobal uberBarTextMenuButtonSpan" aria-haspopup="true" role="button" aria-label="Dashboard drop down menu" tabindex="0">
<span class="HeaderMenuBarText HeaderMenuNavBarText" role="presentation">
<span role="presentation">Dashboards</span>
</span>
<span class="HeaderMenuBarDropdown" role="presentation">
</span>
</td>
<td>
<td title="New">
<td>
<td title="Open">
<td>
<td>
<td title="npatel">
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td class="PageOuterBodyTopRightTd">
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
< form style = "position: absolute; top: -1000px; display:none;" >
< script src = "/analytics/res/v-0YH2UYTNo3k/b_mozilla/common/componentheader.js"
type = "text/javascript" >
< span id = "sawruler"
style = "display:none;visibility:hidden;white-space:nowrap;" > < /span>
<div class="masterGlobalLayer ComponentHeader ComponentHeaderNoSecondaryTabbar">
<div id="idSummarySectionDiv" class="masterPrimaryLayer masterComponentHeaderSummaryDiv ComponentHeaderSummaryDiv">
<table class="masterPrimaryLayer ComponentHeaderTable ComponentHeaderTableEmptyUberbar ComponentHeaderTableEmptyTabBar ComponentHeaderTableSummary" cellspacing="0" cellpadding="0" border="0">
<table class="masterPrimaryLayer PrimaryTabTable" cellspacing="0" cellpadding="0" border="0" style="table-layout:fixed;width:100%">
<tbody>
<tr>
<td class="PrimaryTabbarLeftBorder" style="width:4px"></td >
< td >
< div id = "PageContentOuterDiv"
class = "masterSecondaryLayer PageContentOuterDiv PageContentBodyDiv CatalogPageContentOuterDiv"
style = "height: 237px;" >
< table cellspacing = "0"
cellpadding = "0"
border = "0"
style = "width:100%;table-layout:fixed;" >
< tbody >
< tr >
< td class = "SecondaryTabbarLeftBorder" > < /td>
<td style="width:100%">
<div id="idCatalog" style="height: 237px;">
<div id="idCatalogSplitter" class="SplitterContainer" style="overflow: hidden; visibility: inherit; width: 1326px; height: 235px;">
<div class="SplitterContentPane" sizeshare="220px" layouttype="contentPane" style="position: relative; top: 0px; left: 0px; width: 220px; height: 235px;">
<div id="idCatalogFoldersAccordion" class="masterAccordionBottomContentAreaPanel PrimaryAccordion" style="width: 220px; height: 232px;">
<div class="AccordionPane" panename="folders" maintainstate="true" expanded="true" style="display: block;">
<div class="masterAccordionHeader masterAccordionTopHeader AccordionFirstPaneHead" style="width: 218px; position: relative; top: 0px; left: 0px;">
<div class="masterAccordionContentAreaPanel AccordionPaneBody" style="width: 214px; height: 77px; position: relative; top: 0px; left: 0px; padding: 2px;">
<div id="tree1462947337992" style="overflow: hidden; width: 214px; height: 75px;">
<div id="tabstop_1_ElementForTabStop" class="treeContainer" style="visibility: visible; height: 100%; overflow: auto;" tabindex="0">
<div style="width: 0px; height: 0px; overflow: hidden; position: absolute; z-index: 1;">
<div id="tree1462947337992_children">
<div id="tree1462947337992$virtual_root" class="treeNode">
<div id="tree1462947337992$virtual_root_children" class="treeChildContainer" style="margin-left: 0px; display: block;">
<div id="tree1462947337992$/users / npatel " class="
treeNode " style="
display: block;
">
<div id="
tree1462947337992$ / shared " class="
treeNode " style="
display: block;
">
<span class="
masterTreeLine treeLine " style="
display: block;
">
<div id="
tree1462947337992$ / shared_children " class="
treeChildContainer " style="
display: block;
">
<div id="
tree1462947337992$ / shared / Components " class="
treeNode ">
<div id="
tree1462947337992$ / shared / Sales Home " class="
treeNode ">
<div id="
tree1462947337992$ / shared / Sample Lite " class="
treeNode ">
<div id="
tree1462947337992$ / shared / Skill Portal " class="
treeNode ">
<div id="
tree1462947337992$ / shared / Trainings & Skills " class="
treeNode ">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="
overflow: auto;
display: none;
"></div>
<div style="
overflow: auto;
display: none;
"></div>
</div>
</div>
<div class="
AccordionPane " sizeshare="
170px " panename="
tasks " maintainstate="
true " expanded="
true " style="
display: block;
">
</div>
</div>
<div class="
HorizSplitter " collapsenextpane="
" layouttype="
splitter " style="
position: relative;
top: -235px;
left: 220px;
width: 7px;
height: 235px;
">
<div class="
SplitterContentPane " layouttype="
contentPane " style="
position: relative;
top: -470px;
left: 229px;
width: 1097px;
height: 235px;
">
</div>
</div>
</td>
<td class="
SecondaryTabbarRightBorder "></td>
</tr>
</tbody>
</table>
<table cellspacing="
0 " cellpadding="
0 " style="
width: 100 % ;
table - layout: fixed;
">
</div>
</td>
<td class="
PageOuterBodyCenterRight "></td>
</tr>
</tbody>
</table>
<table cellspacing="
0 " cellpadding="
0 " style="
width: 100 % ;
table - layout: fixed;
">
</div>
</body>
</html>
**Please help me on where i am going wrong or i am missing something?
Any lead will be very helpful**
Thanks in advance

I am not 100% sure what you're asking honestly, but I do see what might be causing you some issue if you are expecting innerHTML and textContent to function correctly.
this line:
System.out.println(ele.getAttribute("innerHTML"));
Will almost never print anything because innerHTML is a property, not an attribute. Is it bound ONLY within the browser. Same goes for textContent, it is NOT and attribute, it is a property and is only present in the browser.
If you want the visible text of an element from WebDriver once you have located it, call:
ele.getText()
Which will give you the equivalent of the textContent property. As far as innerHTML, you really just have to execute the script the way you are now by calling executeScript() and using the "magic" arguments[] array to pass in the WebElement, then return the value of innerHTML. I have done this before and had no issue getting the HTML for all children as well.

Some of your HTML is not properly structured,
<script type="text/javascript">
< form style = "position: absolute; top: -1000px; display:none;" >
< script src = "/analytics/res/v-0YH2UYTNo3k/b_mozilla/common/componentheader.js"
type = "text/javascript" >
Once I added closing tags for the opening <script> and <form> tags and changed the above to the HTML below, the ele.getAttribute("innerHTML") instruction returned the inner-html of that element.
<script type="text/javascript"></script>
<form style = "position: absolute; top: -1000px; display:none;"></form>
<script src = "/analytics/res/v-0YH2UYTNo3k/b_mozilla/common/componentheader.js" type = "text/javascript"></script>
Firebug might be more forgiving when it comes to incorrectly structured HTML.

Google Map Places Auto-complete blocked by jQuery Mobile popup

It is easier to see what I mean by looking at this image:
http://postimg.org/image/fcmo6pbvp/
I am trying to let the user input the address using the google maps places auto-complete JS function like this example.
It works, but the autocomplete text field, is blocked by the jQuery Mobile popup, just like the picture shown.
The HTML Look something like this:
<li>
<a href="#popupLocation" data-rel="popup" data-position-to="window"
class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a" data-transition="pop">
<h3>Location</h3>
<p id="locationSelectionString">London, UK</p>
</a>
<div data-role="popup" id="popupLocation" data-theme="a" class="ui-corner-all">
<div style="padding:10px 20px;">
<h3 style="margin-top: 0px; margin-bottom: 0px;">Location</h3>
<hr>
<table width="100%">
<tr>
<input id="locationSelectionInput" onFocus="geolocate()" type="text" name="location" value="" placeholder="Enter a location" data-theme="a" style="margin-top: 0px; margin-bottom: 0px;">
</tr>
<tr>
<td width="50%">
<button style="margin-top: 0px; margin-bottom: 0px;" onclick="changeLocationCanceled();">Cancel</button>
</td>
<td width="50%">
<button style="margin-top: 0px; margin-bottom: 0px;" onclick="changeLocation();">OK</button>
</td>
</tr>
</table>
</div>
</div>
</li>
I will be so happy if someone can tell me what went wrong.
BTW, don't laugh at my code, this is my first JS app :p

It's too late for Christina. I hope to help other people struggling this issue.
My solution is just in you css file add code.
.pac-container{
z-index: 9999 !important;
}

Unable to get HTML DOM element using jQuery

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);
}