modal popup not showing on top of another modal popup - javascript

Updated
I am trying to use modal as confirmation prompt on another modal but confirmation modal is not vissible on onclick. Here is the modals properties I set.
Parent Modal.
I am calling my parent modal in my asmx file and then I am calling my child modal function in an asmx file as well.
<div id="ShowDetails" class="popup" tabindex="-1" style="position:absolute;" role="dialog">
<div class="panel panel-green">
<div class="panel-heading">Parchase Request Details</div>
<div class="panel-body">
<div class=" col-md-12">
<div class="form-inline">
<input id="pdid" style="display: none; width: 90PX; margin: 2px;" type="hidden" />
<%--<asp:HiddenField ID="PDId" runat="server" />--%>
<table class="table table-condensed">
<tr>
<td>
<input id="item" style="display: none; width: 90PX; margin: 2px;" /></td>
<td>
<input id="quantity" style="display: none; width: 90PX; margin: 2px;" />
</td>
<td>
<input id="eprice" style="display: none; width: 90PX; margin: 2px;" />
</td>
<td>
<input id="make" style="display: none; width: 90PX; margin: 2px;" />
</td>
<td>
<input id="discription" style="display: none; width: 90PX; margin: 2px;" />
</td>
<td>
<a id="DoneEditingbtn" role="button" onclick="DoneEditing()" style="color: #72c02c; display: none; width: 100PX; margin: 2px;">Update</a>
</td>
<td><a id="cancleediting" role="button" onclick="cancleeditingdetail()" style="color: #72c02c; display: none; width: 100PX; margin: 2px;">cancel</a>
</td>
</tr>
</table>
<table class="table table-condensed">
<thead>
<tr style="background-color: #01cc66;">
<th>Item Name</th>
<th>Quantity</th>
<th>Estimated Price</th>
<th>Make</th>
<th>Discription</th>
<th>Options</th>
</tr>
</thead>
<tbody id="tblgetdetails">
</tbody>
</table>
<div id="Alert"></div>
</div>
</div>
</div>
<span class="popup-btn-close" data-dismiss="modal">close</span>
</div>
</div>
Confirmation Modal.
<div id="ApproveMod" class="popup" style=" z-index:2; position:absolute; left: 50%; width: 40%; border: 10px solid #666;">
<div class="col-lg-6">
<i>Are you sure to Approve this data?</i>
</div>
<i id="pheadIdApp"></i>
<i id="pbdIdApp"></i>
<div class="col-lg-6">
<a class="btn-u btn-u-red" href="#" role='button' style="text-align: center; width: 45%;" onclick="Approve()">Yes </a>
<button class="btn-u btn-u-green-custom " style="text-align: center; width: 45%;" data-dismiss="modal">NO</button>
</div>
</div>
The Parent modal is showing properly but when I click on parent modal button which should toggle child modal, is not working, In ASMX I have defined my child modal function on onclick as following.
<a role='button' class='form-control' onclick='AppModal(PHId+","+PBDId)'>Approve</a>
Here is the child calling approach I used in script.
function AppModal(phid,pbdid) {
$("#pheadIdApp").val(phid);
$("#pbdIdApp").val(pbdid);
$("#ApproveMod").modal("show");
}
It should work properly I have used it many times but now I am stuck and have no idea where I might have missed the trick any kind of help is much much apriciated.


Its Really Funny Yesterday I got an answer to my problem by you which was about the same problem and now I find you stuck here.
Change your child modal position to relative and assign z-index value greater then 1040 which is for default layer.

Related

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.

Hiding a parent modal on click of a child div

I have a tr onclick of which I have a modal. Also there is a button is one of the columns in tr on click of which I have another modal opening. But when I click on the button both the modals open. I want to hide the parent modal. I have used modal.(hide) which doesnt work
$(document).ready(function(e){
$(".roundButton").click(function(e){
$('#caseModal').modal('hide');
});
$(".ticketTable").delegate("tr.rows", "click", function(){
var p=$(this).position();
var t=p.top+10;
$(".contentModal").css("top",t,"important");
});
});
#dropDownNote{
background-color: white;
color: black;
border-color: black;
width: 45%;
}
.dropdown-menu{
position: relative!important;
border-radius: 0px;
float:none !important;
width: 45%;
margin-left: 27.5%;
}
.modal-header{
background-color: #4378B8;
color: white;
font-weight: 10%;
}
.contentModal{
border-radius: 0px;
background-color: #adc4e1;
height: 125px;
}
#type,#commentForm{
text-align: left;
margin-left: 27.5%;
}
#cancelLink{
margin-right: 10px;
text-decoration:underline;
}
.modal-footer{
border-top:none;
}
.modal-footer-content{
width: 63%
}
#comment{
width: 62%;
border-color: black;
}
.table tr{
cursor: pointer;
}
#caseModal table td{
text-align: left;
width: 70%;
}
#tlist{
text-align:center;
}
.roundButtonList{
border-radius: 25px;
border-width: 0.1px;
border-color: #3b3b3b;
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ticket List</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<!--Modal Start-->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">ADD NOTE OR ESCALATE TICKETS</h4>
</div>
<div class="modal-body">
<p>Fill in the information below and submit your note</p>
<br>
<div id="modal-body-content">
<p id="type">Select type of note</p>
<div class="dropdown">
<button id="dropDownNote" class="btn btn-primary dropdown" type="button" data-toggle="dropdown">Add Note
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Escalate Tier 1</li>
<li>Escalate Tier 2</li>
</ul>
</div>
<br>
<div id="commentForm" class="form-group">
<p>Add Comments</p>
<textarea class="form-control" rows="4" id="comment"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<div class="modal-footer-content">
<a id="cancelLink" data-toggle="tab" href="#" data-dismiss="modal">CANCEL</a>
<button type="button" class="btn btn-primary">SUBMIT</button>
</div>
</div>
</div>
</div>
</div>
<!--Modal End-->
<!--Case Modal Start-->
<div id="caseModal" class="modal fade">
<div class="modal-dialog listModalDialog modal-lg">
<div class="modal-content contentModal">
<div class="col-lg-6">
<table id="tlist">
  <tr>
    <th>Service/Device</th>
    <th>Status</th>
  </tr>
<tr>
<td>Service 12345</td>
<td>Critical</td>
</tr>
<tr>
<td>Service 12345</td>
<td>Critical</td>
</tr>
<tr>
<td>Device 12345</td>
<td>Critical</td>
</tr>
</table>
</div>
<div class="col-lg-6"><button type="button" class="roundButtonList">View Location Details</button></div>
</div>
</div>
</div>
<!--Case Modal End-->
<div>
<ul class="nav nav-tabs">
<li class="active"><a class="tabsInactive" data-toggle="tab" href="#home">OPEN TICKETS</a></li>
<li ><a class="tabsInactive" data-toggle="tab" href="#menu1">CLOSED TICKETS</a></li>
<li ><a class="tabsInactive" data-toggle="tab" href="#menu2">ALL TICKETS</a></li>
</ul>
</div>
<br>
<div>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-filter"></span>
</button>No Filter Selected
<span class="download">
<u>Download</u>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-download-alt"></span>
</button>
</span>
</div>
<br>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div class="table-responsive">
<table class="table table-hover ticketTable">
<thead>
<tr>
<th>Ticket ID</th>
<th>Cust Loc ID</th>
</tr>
</thead>
<tbody>
<tr id="tkt1" class="clickable-row rows" data-href="#" data-toggle="modal" data-target="#caseModal">
<td>12321443-Open</td>
<td>ABC-12321443</td>
<td>Technical Tickets</td>
<td>Remote Ticket</td>
<td>Open-Dispatch</td>
<td>Critical</td>
<td>Cable</td>
<td><div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
</div>
</div>
</td>
<td>0.5</td>
<td> <button type="button" class="roundButton" data-toggle="modal" data-target="#myModal">Add Note/Escalate</button></td>
</tr>
<tr id="tkt2" class="clickable-row rows" data-href="#" data-toggle="modal" data-target="#caseModal">
<td>12321444-Open</td>
<td>ABC-12321444</td>
<td>Technical Tickets</td>
<td>Remote Ticket</td>
<td>Open-PAM Case</td>
<td>Critical</td>
<td>Fiber</td>
<td>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:60%">
</div>
</div>
</td>
<td>1.5</td>
<td> <button type="button" class="roundButton" data-toggle="modal" data-target="#myModal">Add Note/Escalate</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>

you should use event.stopPropagation() in order to stop the event from bubbling.
change your button click event to this
$(".roundButton").click(function(e){
e.stopPropagation();
$('#caseModal').modal('hide');
});
source: https://api.jquery.com/event.stoppropagation/

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.

how to create some divs which has the same stylesheet?

This is my code. I want to get a dynamic div content list in my 'content1' div.
For example. When this page started loading, I would do an ajax request to get some info. According the info, create some divs (the number of divs is from info array's count) which has the same stylesheet as 'accountContent' div but has different content.
<div class="main">
<br>
<div id="content1" style=" border-radius: 8px; width: 100%;margin: auto; background-color: white;-webkit-box-shadow: 3px 3px 3px;-moz-box-shadow: 3px 3px 3px;box-shadow: 3px 3px 3px; ">
<br>
<div class="accountContent">
<div style="width: 95%;margin: auto; background-color: rgb(245,245,245);height: 40px;border-radius: 10px">
<div class="col-md-4" style="padding-top: 10px;">
<p style="width:95%; margin: auto">公众号名称</p>
</div>
<div class="col-md-4" style="padding-top: 10px;">
<p style="width:95%; margin: auto">接入状态：</p>
</div>
<div class="col-md-4" style="padding-top: 5px; ">
<button type="button" class="button button-small button-plain button-borderless" data-toggle="tooltip" data-placement="left" title="删除" style="float:right;"><i class="fa fa-times" style=" color: #101010"></i></button>
</div>
</div>
<div style="width: 95%;margin: auto; background-color: white;height: 50px;border-radius: 10px">
<div class="col-md-4" style="padding-top: 10px;">
<img src="images/default.jpg" style="width: 40px;height: 40px;border-radius: 20px;float: left">
<div style="margin-left: 10px; padding-top: 10px;float: left"><p>物管助手</p></div>
</div>
<div class="col-md-4" style="padding-top: 20px;">
<p style=" margin-left: 12px;float: left">接入成功</p><i class="fa fa-check" style="padding-top: 2px; padding-left: 2px;"></i>
</div>
<div class="col-md-4" style="padding-top: 10px;">
<i class="fa fa-pencil" style="padding-top: 11px;"></i> 编辑
<i class="fa fa-wrench" style="padding-top: 11px;"></i> 功能管理
</div>
</div>
<br>
</div>
<br>
<br>
</div>
It shows as in this screenshot:

Any markup you add to your page will be styled with the CSS rules already applied to the page. In your case it sounds like you simply need to apply .accountContent to those new DIVs.
You do not have to create a stylesheet for them. If they have different styles than those already on the page, simply add the CSS selector that you've applied to those new DIVs in your current CSS file. When the Ajax adds the new DIVs to the page they will by styled according to the selectors they match.

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

Categories

Resources