SmartPhone(Iphone): Section not visible but visible in Desktop browser - iphone

We have a ASP.Net application that we use for SmartPhone devices. One of the screens has a section that is visible in a desktop browser but not on a smartphone browser(Iphone Safari browser). I have marked the section and
Would we know why?Any pointers would be welcome.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta content="yes" name="apple-mobile-web-app-capable" /><meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" /><meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;" /><link href="styles/StyleSheet.css" rel="stylesheet" type="text/css" /><title>
Floor Plan Details
</title>
<script type="application/x-javascript">
if (navigator.userAgent.indexOf('iPhone') != -1) {
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
}
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>
<script type="text/javascript">
function ColapseDetails() {
var elem2 = document.getElementById('divButton');
var details = document.getElementById('divDetails');
elem2.className = 'Show';
details.style.display = 'none';
}
function ExpandDetails() {
var elem2 = document.getElementById('divButton');
var details = document.getElementById('divDetails');
elem2.className = 'Hide';
details.style.display = 'block';
}
</script>
<style type="text/css">
a, .hdrGreen, .TxtAccent2, .itemList ul li
{
color: #b5985a;
}
#HeaderBar, #ftrCopyright
{
background-color: #f8cb30 !important;
}
#FtrNav, #HdrNav, .Separate, .SeparateSR, .smSeparate, .Button
{
background-color: #0068b3 !important;
}
a:hover, .hdrBlue, .TxtAccent1
{
color: #0068b3;
}
.Links a, .contents a
{
color: #b5985a !important;
}
.TitleLink
{
color: #0068b3 !important;
}
.PropGalThumb, .LargePhoto, .PhotoFrame
{
border-color: #f8cb30 !important;
}
</style>
<link href="/WebResource.axd?d=rYllaDxVV86L8uK7fm716DHtvUx7jEZl07Ni1bAwaCFyy83QnKp58MjumhwHTm3k5DeaG8uKyMP-a7NwOtgW5HQ2pq4UHdVEXH7SniWIwg9RO4oFHQ9Ox82H1rrwkiQS3YslSA2&t=634487606568630000" type="text/css" rel="stylesheet" class="Telerik_stylesheet" /><link href="/WebResource.axd?d=t9YDm8fMtH0CC5asMtMI4fYQLHf0MgrFPIjAybzYl__rRvUM4FsPvrIk2Je7ADAX9h_Y7xc4-kfkfmXrbForHb-JW0HpLzZPt9DexdRer9z0PQom39lb0-brKgkmrYByRaOt9nXhQsatKXhpIL2qfjQhGT81&t=634487606568630000" type="text/css" rel="stylesheet" class="Telerik_stylesheet" /><link href="/WebResource.axd?d=HnZfSQ00Unw9sodb1ZENEb8OCaQNYLMOL7UEoEroy1WahkY5iq6Kb-y9ve7XIVzS9OaCT9LmBYi7u4NjAWkkpgeFHkBbBszYstomcGDOiKzlHBwMuZmZNFVDxXkoO5fUAN-Z_w2&t=634487606568630000" type="text/css" rel="stylesheet" class="Telerik_stylesheet" /></head>
<body>
<form name="aspnetForm" method="post" action="FloorPlanDetails.aspx" id="aspnetForm">
<div>
<input type="hidden" name="ctl00_RadScriptManager1_TSM" id="ctl00_RadScriptManager1_TSM" value="" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPaA8FDzhjZTRiODM4M2EyMzRhNhgBBR5fX0NvbnRyb2xzUmVxdWlyZVBvc3RCYWNrS2V5X18WAgUdY3RsMDAkY3BoQ29udGVudCR0c0Zsb29ycGxhbnMFHmN0bDAwJGNwaENvbnRlbnQkbXB2Rmxvb3JwbGFuc9fXJq/1CrDWuJv8X3Ex07QdyIjs" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=UvkWM5HwgcL8L6uzzv8ClbaUMj56sSlOI0ToE3UrzfY6Jb13eC2SwwgMrrnYyKCI9Eh_8mDefDtQl4hVuuGtgtYRDWo1&t=634515435604257574" type="text/javascript"></script>
<script src="/Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_RadScriptManager1_TSM&compress=1&_TSM_CombinedScripts_=%3b%3bSystem.Web.Extensions%2c+Version%3d3.5.0.0%2c+Culture%3dneutral%2c+PublicKeyToken%3d31bf3856ad364e35%3aen-US%3afec40ae8-2c1f-4db6-96ca-d6c61af2dc7f%3aea597d4b%3ab25378d2%3bTelerik.Web.UI%2c+Version%3d2010.3.1109.20%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen-US%3a0b207b76-976c-4925-ba92-57c3001b0b77%3a16e4e7cd%3af7645509%3a24ee1bba%3ae330518b%3a1e771326%3a8e6f0d33%3a6a6d718d" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$RadScriptManager1', document.getElementById('aspnetForm'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
</script>
<div id="HeaderBar">
<div id="ctl00_Header1_Phlogo" class="Phlogo">
<img id="ctl00_Header1_imgLogo" src="http://crossfiremedia.realpage.com/palisadesatjaguarcity/logos/lg1029_h50.png" alt="Logo" style="border-width:0px;" />
</div>
</div>
<div id="HdrNav">
<a id="ctl00_Header1_hlApartmentSearch" class="item" href="Default.aspx">Property website</a>
<a id="ctl00_Header1_hlResidentLogin" class="item" href="https://property.onesite.realpage.com/mobile/login.aspx?w=palisadesatjaguarcity">Resident Login</a>
</div>
<div class="hdrGrad">
</div>
<div id="content">
<script type="text/javascript">
function showdetails() {
if (document.getElementById) {
var elemlbl = document.getElementById('divButton');
if (elemlbl.className == 'Hide') {
ColapseDetails();
}
else if (elemlbl.className == 'Show') {
ExpandDetails();
}
}
}
</script>
<ul class="pageitem">
<li class="PropInfo Details">
<span id="ctl00_cphContent_PropDetailHeader_lblPropName" class="hdrBlue" style="font-size:12pt;font-weight:bold;">The Palisades at Jaguar City</span>
</li>
<li class="Details">
<div style="float: left;">
<span id="ctl00_cphContent_PropDetailHeader_lblPhone" class="hdrGreen" style="font-size:12pt;font-weight:bold;">(866) 936-5544 (Phone)</span>
</div>
</li>
</ul>
<!--Not visible:Start-->
<ul class="pageitem">
<li class="Details">
</li>
<li class="Details">
<div class="SeparateSR"/>
</li>
<li class="Details">
<div class="BoldText TxtAccent1">
<span id="ctl00_cphContent_lblModel"></span>
</div>
</li>
<li class="Details">
</li>
<li class="paddedBox"><span class="BoldText">Bedrooms:
<span id="ctl00_cphContent_lblBeds">1</span></span><br />
<span class="BoldText">Bathrooms:
<span id="ctl00_cphContent_lblBaths">1</span></span>
<br />
<span class="BoldText">Sq/Ft: </span>
<span id="ctl00_cphContent_lblSqft">544</span>
<br />
<span class="BoldText">Price: </span>
<span id="ctl00_cphContent_lblRent">$779 - $779</span><br />
<span class="BoldText">Deposit: </span>
<span id="ctl00_cphContent_lblDeposit">$150</span><br />
</li>
<li class="Details">
<div id="ctl00_cphContent_tsFloorplans" class="RadTabStrip RadTabStrip_Default RadTabStripTop_Default">
<!-- 2010.3.1109.20 --><div class="rtsLevel rtsLevel1">
<ul class="rtsUL"><li class="rtsLI rtsFirst"><a class="rtsLink rtsBefore" href="#"><span class="rtsOut"><span class="rtsIn"><span class="rtsTxt">Amenities</span></span></span></a></li><li class="rtsLI rtsLast"><a class="rtsLink rtsSelected" href="#"><span class="rtsOut"><span class="rtsIn"><span class="rtsTxt">2D View</span></span></span></a></li></ul>
</div><input id="ctl00_cphContent_tsFloorplans_ClientState" name="ctl00_cphContent_tsFloorplans_ClientState" type="hidden" />
</div>
</li>
<li class="Details" style="margin-top: -1px;">
<div id="ctl00_cphContent_mpvFloorplans" style="border-color:#848284;border-width:1px;border-style:Solid;">
<div id="ctl00_cphContent_pvAmenities" class="rmpHiddenView">
<div class="paddedBox itemList">
<span class="TxtAccent2 BoldText ">Features</span>
<ul> <li><span> Private Bedrooms </span></li> <li><span> Fully-equipped Kitchen with Breakfast Bar </span></li> <li><span> Full-Sized Washer / Dryer </span></li> <li><span> Spacious Living Room </span></li> <li><span> High Speed Internet Connections in Each Bedroom </span></li> </ul>
</div>
</div><div id="ctl00_cphContent_pv2d">
<img id="ctl00_cphContent_img2DFP" src="http://crossfiremedia.realpage.com/palisadesatjaguarcity/floorplans/fp1014_w240.jpg" alt="2D Floorplan" style="border-width:0px;" />
</div><input id="ctl00_cphContent_mpvFloorplans_ClientState" name="ctl00_cphContent_mpvFloorplans_ClientState" type="hidden" />
</div>
</li>
</ul>
<!--Not visible:End-->
</div>
<ul id="ctl00_ctl06_ulFooterList" class="pageitem PropFooter">
<li class="Details">Floor Plans</li>
<li class="Details">About our Community</li>
<li class="Details">Contact Us</li>
<li class="Details">Photos & Videos</li>
<li class="Details">Amenities & Pet Policies</li>
<li id="ctl00_ctl06_listNeighbor" class="Details">Local Businesses</li>
</ul>
<div id="footer">
<div class="ftrGrad">
</div>
<div id="FtrNav">
<span class="item" style=" padding-top: 0;padding-right:0;">
<img id="ctl00_Footer1_imgDisability" src="images/disa_btn.png" alt="Handicap Accessible" style="border-width:0px;" />
<img id="ctl00_Footer1_imgEHO" src="images/eoh_btn.png" alt="Equal Housing Oportunity" style="border-width:0px;" /></span>
<div class="item ">
<span>©
2011
RealPage </span>
</div>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
Sys.Application.initialize();
Sys.Application.add_init(function() {
$create(Telerik.Web.UI.RadTabStrip, {"_selectedIndex":1,"_skin":"Default","clientStateFieldID":"ctl00_cphContent_tsFloorplans_ClientState","multiPageID":"ctl00_cphContent_mpvFloorplans","selectedIndexes":["1"],"tabData":[{"pageViewID":"ctl00_cphContent_pvAmenities"},{"pageViewID":"ctl00_cphContent_pv2d"}]}, null, null, $get("ctl00_cphContent_tsFloorplans"));
});
Sys.Application.add_init(function() {
$create(Telerik.Web.UI.RadMultiPage, {"clientStateFieldID":"ctl00_cphContent_mpvFloorplans_ClientState","pageViewData":[{"id":"ctl00_cphContent_pvAmenities"},{"id":"ctl00_cphContent_pv2d"}],"selectedIndex":1}, null, null, $get("ctl00_cphContent_mpvFloorplans"));
});
//]]>
</script>
</form>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Related

How do I correctly apply content mapping in TYPO3 cObjects?

I am new to TYPO3 and worked through this tutorial: https://docs.typo3.org/m/typo3/tutorial-sitepackage/master/en-us/Index.html. So far everything worked out, except the last step, the content mapping. I'm not quite sure what to post as a diagnostic, the source code looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--
This website is powered by TYPO3 - inspiring people to share!
TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
TYPO3 is copyright 1998-2017 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
Information and contribution at https://typo3.org/
-->
<title>Page 1</title>
<meta name="generator" content="TYPO3 CMS">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" media="all">
<link rel="stylesheet" type="text/css" href="/typo3conf/ext/site_package/Resources/Public/Css/website.css?1600015994" media="all">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link"
href="/index.php?id=8"
target=""
title="Page 1"
>
Page 1
</a>
</li>
<li class="nav-item ">
<a class="nav-link"
href="/index.php?id=9"
target=""
title="Page 2"
>
Page 2
</a>
</li>
<li class="nav-item ">
<a class="nav-link"
href="/index.php?id=10"
target=""
title="Page 3"
>
Page 3
</a>
</li>
</ul>
</div>
</nav>
<main role="main">
<div class="jumbotron">
<div class="container">
<h1 class="display-3">Hello, world!</h1>
<p> ... </p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/typo3conf/ext/site_package/Resources/Public/JavaScript/website.js?1600016007" type="text/javascript"></script>
</body>
</html>
The relevant template code looks like this:
<f:layout name="Default" />
<f:section name="Main">
<main role="main">
<f:render partial="Jumbotron" />
<div class="container">
<div class="row">
<div class="col-md-4">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '1'}" />
</div>
<div class="col-md-4">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '0'}" />
</div>
<div class="col-md-4">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '2'}" />
</div>
</div>
</div>
</main>
</f:section>
And the TypoScript source looks like this:
lib.dynamicContent = COA
lib.dynamicContent {
10 = LOAD_REGISTER
10 {
colPos.cObject = TEXT
colPos.cObject {
field = colPos
ifEmpty.cObject = TEXT
ifEmpty.cObject {
value.current = 1
ifEmpty = 0
}
}
pageUid.cObject = TEXT
pageUid.cObject {
field = pageUid
ifEmpty.data = TSFE:id
}
contentFromPid.cObject = TEXT
contentFromPid.cObject {
data = DB:pages:{register:pageUid}:content_from_pid
data.insertData = 1
}
wrap.cObject = TEXT
wrap.cObject {
field = wrap
}
}
20 = CONTENT
20 {
table = tt_content
select {
includeRecordsWithoutDefaultTranslation = 1
orderBy = sorting
where = {#colPos}={register:colPos}
where.insertData = 1
pidInList.data = register:pageUid
pidInList.override.data = register:contentFromPid
}
stdWrap {
dataWrap = {register:wrap}
required = 1
}
}
30 = RESTORE_REGISTER
}
And it's saved in site_package/Configuration/TypoScript/Helper/DynamicContent.typoscript. The setup.typoscript file has these includes:
#import 'EXT:fluid_styled_content/Configuration/TypoScript/setup.typoscript'
#import 'EXT:site_package/Configuration/TypoScript/Helper/DynamicContent.typoscript'
Any suggestions?
I can't find how you transfer pageUid to the typoscript. So the template should be something like this:
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Default" />
<f:section name="Main">
<main role="main">
<f:render partial="Jumbotron" />
<div class="container">
<div class="row">
<div class="col-md-4">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}',colPos: '1'}" />
</div>
<div class="col-md-4">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}',colPos: '0'}" />
</div>
<div class="col-md-4">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}',colPos: '2'}" />
</div>
</div>
</div>
</main>
</f:section>
</html>
Please not that, I put pageUid: '{data.uid}' in the data variable

WKWebView Get DOM or Render HTML from Webpage

I have an app that is attempting to webscrape GHIN.com for golfers' handicaps. After prompting the user with a WKWebView page for login, the user opens the "followed" golfers page in order for the app to scrape the web page for handicap data. I am able to retrieve HTML from the webView using:
webView.evaluateJavaScript("document.documentElement.outerHTML.toString()", completionHandler: { (html: Any?, error: Error?) in
self.HTML = html as! String
print(self.HTML)
})
This code is called whenever the URL is detected to have changed (as the user logs in and navigates to the correct page). However, the HTML saved from that process includes JS code seen near the end of the string that is to be executed during the building of the page (entire HTML):
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
<meta name="apple-itunes-app" content="app-id=491796218" />
<meta name="google-play-app" content="app-id=com.advancedmobile.android.ghin" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="/manifest.json" />
<title>GHIN - United States Golf Association Service</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet" />
<link href="/static/css/2.c7bb94bc.chunk.css" rel="stylesheet" />
<link href="/static/css/main.6b12f9df.chunk.css" rel="stylesheet" />
<script async="" src="//www.googletagservices.com/tag/js/gpt.js"></script>
<script src="https://securepubads.g.doubleclick.net/gpt/pubads_impl_2020082401.js?21067294" async=""></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<div></div>
<div class="s-navigation" id="header" style="top: 0px;">
<header>
<div class="header__container">
<div class="menu-ham__container">
<button class="menu-ham__trigger"><span></span><span></span><span></span></button>
<div class="menu-ham__content">
<div class="menu__links__wrapper">
<ul class="menu__links">
<li class="hide-on-tablet-and-above">
<a class="menu__link" href="/post-score"><span>Post Score</span></a>
</li>
<li class="hide-on-tablet-and-above">
<a class="menu__link is-active" href="/golfer-lookup" aria-current="page"><span>Golfer Lookup</span></a>
</li>
<li class="hide-on-tablet-and-above">
<a class="menu__link" href="/stats"><span>Stats</span></a>
</li>
<li class="hide-on-tablet-and-above">
<a class="menu__link" href="/handicap-calculator/select-course"><span>Handicap Calculator</span></a>
</li>
<li class="hide-on-tablet-and-above">
<a class="menu__link" href="/profile-handicap-history"><span>Handicap History</span></a>
</li>
<li class="order-1">
<a class="menu__link" href="/my-card"><span>My Card</span></a>
</li>
<li class="order-2">
<a class="menu__link" target="_blank" href="https://www.usga.org/content/usga/home-page/handicapping.html"><span>WHS Changes</span></a>
</li>
<li class="order-3">
<a class="menu__link" href="/ghin-associations"><span>GHIN Associations</span></a>
</li>
<li class="order-4">
<a class="menu__link" href="/about-us"><span>About Ghin</span></a>
</li>
<li class="order-5">
<a class="menu__link" href="/contact-us"><span>Contact Us</span></a>
</li>
<li class="order-6">
<a class="menu__link" target="_blank" href="http://www.usga.org/handicapping/ghin-faqs.html"><span>FAQs</span></a>
</li>
</ul>
<ul class="menu__links hide-on-tablet-and-above">
<li>
<a class="menu__link" href="/?logout"><span>Log Out</span></a>
</li>
</ul>
</div>
</div>
</div>
<span role="button" tabindex="0" class="usga_logo">
golf handicap <br />
information network
</span>
<div class="user-menu__container">
<button class="user-menu__trigger"><span>username</span><i class="material-icons-outlined more">expand_more</i><i class="material-icons-outlined less">expand_less</i></button>
<div class="user-menu__content">
<ul class="menu__links compact">
<li>
<a class="menu__link" href="/?logout"><span>Log Out</span></a>
</li>
</ul>
</div>
</div>
</div>
</header>
<nav class="navigation">
<div class="container">
<ul class="nav__links">
<li><a class="nav__link" href="/post-score">Post Score</a></li>
<li><a class="nav__link is-active" href="/golfer-lookup" aria-current="page">Golfer Lookup</a></li>
<li><a class="nav__link" href="/stats">Stats</a></li>
<li><a class="nav__link" href="/handicap-calculator">Handicap Calculator</a></li>
<li><a class="nav__link" href="/profile-handicap-history">Handicap History</a></li>
</ul>
</div>
</nav>
</div>
<div class="s-navigation-placeholder" style="margin-top: 0px;"></div>
<div class="container has-adds">
<section class="golfer_lookup_section">
<div id="div-gpt-ad-1539376483266-0" class="promo_google_banner"><div style="width: 728px; height: 90px;"></div></div>
<div class="section_header">
<h3>Golfer Lookup</h3>
<ul class="tabs rounded">
<li>Following</li>
<li>My Clubs</li>
<li>All Golfers</li>
</ul>
</div>
<div class="panel">
<div style="display: flex; justify-content: center; align-items: center; padding-top: 30px; padding-bottom: 15px;"><div class="loader"></div></div>
</div>
</section>
</div>
<footer>
<div class="footer__container">
<div class="information__container">
<div class="partners">
<h4 class="partners__title">Usga Partners</h4>
<div class="partners__list">
<a class="partner__item american-express" href="https://global.americanexpress.com/entertainment/home/" target="_blank" rel="noopener noreferrer">
<img alt="logo_american_express" class="partner__logo" src="/img/logos/logo_american_express.png" />
</a>
<a class="partner__item cisco" href="https://www.cisco.com/" target="_blank" rel="noopener noreferrer"><img alt="logo_cisco" class="partner__logo fit-size" src="/img/logos/logo_cisco.svg" /></a>
<a
class="partner__item delloite"
href="https://www2.deloitte.com/us/en/pages/consulting/articles/united-states-golf-association.html?id=us:2pm:3pt:lookagain:awa:cons:060116:usga"
target="_blank"
rel="noopener noreferrer"
>
<img alt="logo_delloite" class="partner__logo fit-size" src="/img/logos/logo_delloite.svg" />
</a>
<a class="partner__item lexus" href="https://www.lexus.com/" target="_blank" rel="noopener noreferrer"><img alt="logo_lexus" class="partner__logo lexus" src="/img/logos/logo_lexus.png" /></a>
<a class="partner__item rolex" href="https://www.rolex.com/world-of-rolex/golf.html" target="_blank" rel="noopener noreferrer">
<img alt="logo_rolex" class="partner__logo" src="/img/logos/logo_rolex.svg" />
</a>
</div>
</div>
<div class="mobile__app">
<h4 class="app__title">Ghin Mobile App</h4>
<div class="app__details">
<span class="app__logo"></span>
<ul class="app__stores">
<li><a class="store app-store" rel="noopener noreferrer" target="_blank" href="https://itunes.apple.com/us/app/ghin-mobile/id491796218?mt=8"> </a></li>
<li><a class="store google-play" rel="noopener noreferrer" target="_blank" href="https://play.google.com/store/apps/details?id=com.advancedmobile.android.ghin&hl=en_US"> </a></li>
</ul>
</div>
</div>
</div>
<ul class="footer__links">
<li><a class="footer__link" href="https://www.usga.org/content/usga/home-page/handicapping.html" target="_blank" rel="noopener noreferrer">WHS CHANGES</a></li>
<li><a class="footer__link" href="http://www.usga.org/handicapping/ghin-faqs.html" target="_blank" rel="noopener noreferrer">FAQs</a></li>
<li><a class="footer__link" href="/contact-us">CONTACT US</a></li>
<li><a class="footer__link" href="https://www.usga.org/content/usga/home-page/Handicap-ghin/ghin-privacy-policy.html" target="_blank" rel="noopener noreferrer">PRIVACY POLICY</a></li>
<li><a class="footer__link" href="https://www.usga.org/content/usga/home-page/Handicap-ghin/ghin-terms-of-service.html" target="_blank" rel="noopener noreferrer">TERMS OF SERVICE</a></li>
</ul>
<div class="copyright__container"><p>© 2020 United States Golf Association. All Rights Reserved.</p></div>
</div>
</footer>
<button id="back-top-button" class="hidden" title="Go to top"></button>
</div>
<script async="" src="https://www.google-analytics.com/analytics.js"></script>
<script>
!(function (e) {
function r(r) {
for (var n, i, l = r[0], f = r[1], a = r[2], c = 0, s = []; c < l.length; c++) (i = l[c]), Object.prototype.hasOwnProperty.call(o, i) && o[i] && s.push(o[i][0]), (o[i] = 0);
for (n in f) Object.prototype.hasOwnProperty.call(f, n) && (e[n] = f[n]);
for (p && p(r); s.length; ) s.shift()();
return u.push.apply(u, a || []), t();
}
function t() {
for (var e, r = 0; r < u.length; r++) {
for (var t = u[r], n = !0, l = 1; l < t.length; l++) {
var f = t[l];
0 !== o[f] && (n = !1);
}
n && (u.splice(r--, 1), (e = i((i.s = t[0]))));
}
return e;
}
var n = {},
o = { 1: 0 },
u = [];
function i(r) {
if (n[r]) return n[r].exports;
var t = (n[r] = { i: r, l: !1, exports: {} });
return e[r].call(t.exports, t, t.exports, i), (t.l = !0), t.exports;
}
(i.m = e),
(i.c = n),
(i.d = function (e, r, t) {
i.o(e, r) || Object.defineProperty(e, r, { enumerable: !0, get: t });
}),
(i.r = function (e) {
"undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e, "__esModule", { value: !0 });
}),
(i.t = function (e, r) {
if ((1 & r && (e = i(e)), 8 & r)) return e;
if (4 & r && "object" == typeof e && e && e.__esModule) return e;
var t = Object.create(null);
if ((i.r(t), Object.defineProperty(t, "default", { enumerable: !0, value: e }), 2 & r && "string" != typeof e))
for (var n in e)
i.d(
t,
n,
function (r) {
return e[r];
}.bind(null, n)
);
return t;
}),
(i.n = function (e) {
var r =
e && e.__esModule
? function () {
return e.default;
}
: function () {
return e;
};
return i.d(r, "a", r), r;
}),
(i.o = function (e, r) {
return Object.prototype.hasOwnProperty.call(e, r);
}),
(i.p = "/");
var l = (this.webpackJsonpghin = this.webpackJsonpghin || []),
f = l.push.bind(l);
(l.push = r), (l = l.slice());
for (var a = 0; a < l.length; a++) r(l[a]);
var p = f;
t();
})([]);
</script>
<script src="/static/js/2.ee61cc35.chunk.js"></script>
<script src="/static/js/main.7596f1a6.chunk.js"></script>
</body>
I need to access the HTML that is ultimately displayed by the webView (following execution of the JS code?). Is there a term for that specific part of the HTML rendering? I'm looking to pull user data from the page. It is displayed in the app (WKWebView), but is not present in the HTML saved using the above code.

how to create side panel custom search for leaflet that search through geojson data?

I have a project using leaflet, but I want to do a custom search through GeoJSON data but I don't know how to do it. I have a side panel with search box and button. below is my design:.
<div
id="leaflet_search"
class="leaflet-control-search leaflet-control search-exp"
>
<input
class="search-input"
type="text"
autocapitalize="off"
placeholder="Search..."
id="searchtext10"
style="display: block; max-width: 634px;"
/>
<ul class="search-tooltip" style="display: none;"></ul>
<a class="search-cancel" href="#" title="Cancel" style="display: none;">
<span>⊗</span>
</a>
<a class="search-button" id="search" href="#" title="Search..." style=""></a>
<div class="search-alert" style="display: none;"></div>
</div>
var map = new L.map("myMAP_id", {
fullscreenControl: {
pseudoFullscreen: false,
position: "topright"
}
}).setView([10.392241, 124.98], 16.5);
var layer = new L.tileLayer(
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{
attribution:
'© OpenStreetMap contributors',
visible: false,
title: "OpenStreetMap"
}
);
map.addLayer(layer);
var poly = L.geoJson(slsu_bldg, {
style: function(feature) {
return bldg_style;
},
onEachFeature: function(feature, marker) {
marker.bindPopup(
"<div><b>SOUTHERN LEYTE STATE UNIVERSITY" +
"<br>" +
feature.properties.BLDG_NAME +
"<br><button id='" +
feature.properties.ID +
"' class='btn btn-xs btn-primary' style='height: 23px; font-size: 11px; padding: 3px 6px; letter-spacing: 0.02rem; margin-top: 5px;'>More Details <i class='fa fa-caret-right'></i></button></div"
);
}
});
var search_val;
$("#search").on("click", function() {
search_val = $("#searchtext10").val();
console.log(search_val);
var search = new L.Control.Search({
options: {
layer: poly,
zoom: 19,
initial: false,
filterData: search_val,
propertyName: "BLDG_NAME",
marker: {
icon: true,
animate: true,
circle: {
radius: 10,
weight: 4,
color: "#1BC500",
stroke: true,
fill: true
}
}
}
});
console.log(search);
});
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>SLSU Asset Management</title>
<link rel="shortcut icon" href="http://localhost/GIS-SLSU_AssetMgt/assets/img/slsu.png" />
<!-- offline bootstrap -->
<!-- online bootstrap -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- custom stylesheet -->
<link rel="stylesheet" href="http://localhost/GIS-SLSU_AssetMgt/assets/custom/style.css" />
<!-- leaflet offline connection -->
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet.css"
/>
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet.label/leaflet.label.css"
/>
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet-search.css"
/>
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet-sidebar.css"
/>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet.label/leaflet.label.js"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet-src.js">
integrity="sha512-eldJj3obVsCO9Tlrj/J8AFrrTFD4+sN8d9HdwKAqZuSgHloWOm6IzetLy1uQnwh9qLssrY3TAgIJQfjPfQJxHQ=="
crossorigin=""
</script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet-sidebar.js"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet-search.js"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/L.Conttol.Locate.min.js"></script>
<!-- leaflet full screen -->
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet.fullscreen.css"
/>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet.fullscreen.min.js"></script>
<!-- online maptiler mapboxGL map -->
<script src="https://cdn.maptiler.com/mapbox-gl-js/v0.53.0/mapbox-gl.js"></script>
<script src="https://cdn.maptiler.com/mapbox-gl-leaflet/latest/leaflet-mapbox-gl.js"></script>
<link rel="stylesheet" href="https://cdn.maptiler.com/mapbox-gl-js/v0.53.0/mapbox-gl.css" />
<!-- offline maptiler mapboxGL map -->
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/mapbox-gl/mapbox-gl.css"
/>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/mapbox-gl/leaflet-mapbox-gl.js"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/mapbox-gl/mapbox-gl.js"></script>
<!-- geojson coder -->
<link
rel="stylesheet"
href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"
/>
<script src="https://unpkg.com/osmtogeojson#2.2.12/osmtogeojson.js"></script>
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/osm/OSMBuildings.css"
/>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/osm/OSMBuildings.js"></script>
</head>
<body>
<!--- navigation bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand image" href="#">
<img
class="img img-responsive"
src="http://localhost/GIS-SLSU_AssetMgt/assets/img/LOGO.png"
alt=""
/>
<!-- SLSU-MC GIS MAP -->
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarColor01"
aria-controls="navbarColor01"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="http://localhost/GIS-SLSU_AssetMgt"
>Home <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/GIS-SLSU_AssetMgt/map">Map</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/GIS-SLSU_AssetMgt/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/GIS-SLSU_AssetMgt/#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/GIS-SLSU_AssetMgt/#">Help</a>
</li>
</ul>
</div>
</nav>
<!---map section -->
<div class="container-fluid">
<div class="row">
<div class="col-md-12 map_wrapper">
<div class="row">
<div class="col-md-4" style="padding-right: 0 !important;">
<div class="left-control">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<a class="leaflet-control-layers-toggle toggle" href="#"></a>
<button
class="btn btn-link"
type="button"
data-toggle="collapse"
data-target="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne"
>
BASE MAPS
</button>
</h2>
</div>
<div
id="collapseOne"
class="collapse show"
aria-labelledby="headingOne"
data-parent="#accordionExample"
>
<div class="card-body">
<div
class="leaflet-control-layers leaflet-control leaflet-control-layers-expanded"
aria-haspopup="true"
>
<section class="leaflet-control-layers-list">
<div class="leaflet-control-layers-base">
<label>
<div>
<input
type="radio"
id="basemaps"
value="OpenStreetMap"
class="leaflet-control-layers-selector"
name="leaflet-base-layers_264"
checked="checked"
/>
<span> Open Street Map</span>
</div>
</label>
<label>
<div>
<input
type="radio"
id="basemaps"
value="Maptiler"
class="leaflet-control-layers-selector"
name="leaflet-base-layers_264"
/>
<span> Maptiler</span>
</div>
</label>
<label>
<div>
<input
type="radio"
id="basemaps"
value="MapBox"
class="leaflet-control-layers-selector"
name="leaflet-base-layers_264"
/>
<span> MapBox</span>
</div>
</label>
<label>
<div>
<input
type="radio"
id="basemaps"
value="Google"
class="leaflet-control-layers-selector"
name="leaflet-base-layers_264"
/>
<span> Google</span>
</div>
</label>
<label>
<div>
<input
type="radio"
id="basemaps"
value="WorldImagery"
class="leaflet-control-layers-selector"
name="leaflet-base-layers_264"
/>
<span> World Imagery</span>
</div>
</label>
</div>
</section>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<a class="leaflet-control-layers-toggle toggle" href="#"></a>
<button
class="btn btn-link collapsed"
type="button"
data-toggle="collapse"
data-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo"
>
LAYER MAPS
</button>
</h2>
</div>
<div
id="collapseTwo"
class="collapse"
aria-labelledby="headingTwo"
data-parent="#accordionExample"
>
<div class="card-body">
<div
class="leaflet-control-layers leaflet-control leaflet-control-layers-expanded"
aria-haspopup="true"
>
<section class="leaflet-control-layers-list">
<div class="leaflet-control-layers-overlays">
<label>
<div>
<input
type="checkbox"
id="vector_layerBuilding"
value="Buildings"
class="leaflet-control-layers-selector"
checked=""
onclick="vector_layerBuilding()"
/>
<span> Buildings</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerRoads"
value="Roads"
class="leaflet-control-layers-selector"
onclick="vector_roads()"
/>
<span> Roads</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerBoundary"
value="Boundary"
class="leaflet-control-layers-selector"
onclick="vector_layerBoundary()"
/>
<span> Boundary</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerTrack"
value="Track/Oval"
class="leaflet-control-layers-selector"
onclick="vector_layerTrack()"
/>
<span> Track/Oval</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerField"
value="Field"
class="leaflet-control-layers-selector"
onclick="vector_layerField()"
/>
<span> Field</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerParking"
value="Parking Lot"
class="leaflet-control-layers-selector"
onclick="vector_layerParking()"
/>
<span> Parking Lot</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerPath"
value="Foot Path"
class="leaflet-control-layers-selector"
onclick="vector_layerPath()"
/>
<span> Foot Path</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerBleacher"
value="Bleacher"
class="leaflet-control-layers-selector"
onclick="vector_layerBleacher()"
/>
<span> Bleacher</span>
</div>
</label>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
<div
id="leaflet_search"
class="leaflet-control-search leaflet-control search-exp"
>
<input
class="search-input"
type="text"
autocapitalize="off"
placeholder="Search..."
id="searchtext10"
style="display: block; max-width: 634px;"
/>
<ul class="search-tooltip" style="display: none;"></ul>
<a class="search-cancel" href="#" title="Cancel" style="display: none;">
<span>⊗</span>
</a>
<a class="search-button" id="search" href="#" title="Search..." style=""></a>
<div class="search-alert" style="display: none;"></div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
<div id="myMAP_id"></div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="info" style="height: 28vh">
<div align="right"><button class="btn btn-default">IMPORT</button></div>
<table class="table table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Building Name</th>
<th>Assets</th>
<th>Counts</th>
<th>Unit</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>CCSIT Building</td>
<td>Computer Sets</td>
<td>100</td>
<td>PCS</td>
</tr>
<tr>
<td>2</td>
<td>CCSIT Building</td>
<td>MAC PC</td>
<td>25</td>
<td>PCS</td>
</tr>
<tr>
<td>3</td>
<td>CCSIT Building</td>
<td>Mga Gwapo</td>
<td>Gamay Ra Me!</td>
<td>Way Labot Jorton (by: Ranel)</td>
</tr>
<tr>
<td>4</td>
<td>CCSIT Building</td>
<td>Mga Panget</td>
<td>Gamay Ra Sila!</td>
<td>Labot Si Jorton (by: Ranel)</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<p>
<a href="https://leafletjs.com/" target="_blank">Leaflet ©</a
> | Developed by: darksidebug_09
</p>
</div>
</div>
</div>
<!--- scripts here -->
<!--- geojson data -->
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/new_bldg_data.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/slsu_boundary.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/road_network.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/track_oval.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/slsu_field.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/parking_lot.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/foot_path.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/bleacher.geojson"></script>
<!--- script -->
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/data_scripts.js"></script>
<!-- Bootstrap core JavaScript and JQuery-->
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/js/jquery.min.js"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

Bootstrap form always showing horizontal scroll

I'm designing a system which uses all bootstrap controls. on every page, an horizontal scroll is displayed. however there seems to be no control that is causing this. I give you the example of one of my pages. I think I have something wrong in the head, but I can not find it.
<!DOCTYPE html>
<?error_reporting(0);?>
<? include_once "include/checkSession.inc"; ?>
<? include_once "include/conexion.inc"; ?>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Clínica 25 de Mayo</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="styles/bootstrap_flatly.css"/>
<script type="text/javascript" src="include/jquery.js"></script>
<script type="text/javascript" src="include/bootstrap.min.js"></script>
<script type="text/javascript" src="include/bootstrap-datepicker.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="bienvenido.php?login=<?=$textLogin;?>">Clínica 25 de Mayo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Inicio</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Mis Turnos <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Reservar Turno</li>
<li>Ver Turnos Reservados</li>
<li>Anular Turno</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Mi Cuenta<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Ingreso de mis Datos y/o de Otra persona.</li>
<li>Datos Propios</li>
<li>Cambiar Contraseña</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Cerrar Sesión</li>
</ul>
</div>
</div>
</nav>
<form class="form-horizontal" name="formPwd" method="post" action="contraseniaGuardar.php">
<h4 class="text-center text-primary">Complete el formulario para cambiar la contraseña de acceso al sistema del Usuario<br><b><?=$_SESSION["nombreUsr"]; ?> <?=$_SESSION["apellidoUsr"]; ?></b></h4>
<input type="hidden" name="login" value="<?=$textLogin;?>">
<h2 class="text-center text-primary">Ingrese su nueva contraseña</h2>
<div class="form-group">
<label class="col-sm-3 control-label">Contraseña anterior:</label>
<div class="col-sm-6">
<input class="form-control" type="password" name="textAnterior" size="35" maxlength="50">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Nueva contraseña:</label>
<div class="col-sm-6">
<input class="form-control" type="password" name="textNueva" size="35" maxlength="50">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Confirme la contraseña:</label>
<div class="col-sm-6">
<input class="form-control" type="password" name="textConfirma" size="35" maxlength="50">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-6">
<input type="button" value="Guardar" class="btn btn-lg btn-success btn-block" onClick="javascript:modificar();">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-6">
<input type="button" value="Cancelar" class="btn btn-lg btn-primary btn-block" onClick="javascript:cancelar();">
</div>
</div>
</form>
</body>

How do I connect to a remote URL in Scala which requires authentication?

I am using the following code --
val url = new URL(LoginUrl)
val connection = url.openConnection()
val userpass = login + ":" + passwd
val auth = "Basic " + new String(new Base64().encode(userpass.getBytes()))
connection.setRequestProperty ("Authorization", auth)
val page = connection.getInputStream()
Logger.debug("Page " +page )
But the only thing I am getting is --
[debug] application - Page sun.net.www.protocol.http.HttpURLConnection$HttpInputStream#33f13d38
EDIT: Based on the comments I read the stream, I get the page. But I get the login page. I want the page which I get after log-in. What else needs to be done?
var writer = new StringWriter()
IOUtils.copy(page, writer, "UTF-8")
var htmlString = writer.toString()
Logger.debug("Page " + htmlString)
The login URL is "https://affiliate-program.amazon.in/gp/associates/network/main.html"
The html page I get --
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<title>
Amazon Sign In
</title>
<link type="text/css" href="https://images-na.ssl-images-amazon.com/images/G/31/x-locale/common/errors-alerts/error-styles-ssl._CB138362389_.css" rel="stylesheet" />
<link type="text/css" href="https://images-na.ssl-images-amazon.com/images/G/31/authportal/common/css/ap_global._CB350157780_.css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body id="amzn_associates_in" class="ap-locale-en_IN" >
<!--[if lte IE 5]>
<div class="ie">
<![endif]-->
<!--[if IE 6]>
<div class="ie ie6">
<![endif]-->
<!--[if IE 7]>
<div class="ie ie7">
<![endif]-->
<!--[if IE 8]>
<div class="ie ie8">
<![endif]-->
<div id="headerbanner">
</div>
<div id="wrapper">
<div id="navbarTopSlots">
</div>
<div id="topSlots">
<div id="top-0"></div>
<div id="top-1">
<div id="ap_header" class="ap_header">
<img src="https://images-na.ssl-images-amazon.com/images/G/31/x-locale/common/amazon-logo._CB138360615_.gif" height="36" alt="Amazon Logo" width="126" border="0"/>
</div>
</div>
<div id="top-2"></div>
<div id="top-3"></div>
<div id="top-4"></div>
<div id="top-5"></div>
<div id="top-6"></div>
<div id="top-7"></div>
<div id="top-8"></div>
<div id="top-9"></div>
<div id="top-10"></div>
</div>
<div id="leftSlots">
<div id="left-0"></div>
<div id="left-1"></div>
<div id="left-2"></div>
<div id="left-3"></div>
<div id="left-4"></div>
<div id="left-5"></div>
<div id="left-6"></div>
<div id="left-7"></div>
<div id="left-8"></div>
<div id="left-9"></div>
<div id="left-10"></div>
</div>
<div id="centerSlots">
<div id="center-0"></div>
<div id="title-slot">
<!--[if lte IE 5]>
<div class="ie">
<![endif]-->
<!--[if IE 6]>
<div class="ie ie6">
<![endif]-->
<!--[if IE 7]>
<div class="ie ie7">
<![endif]-->
<!--[if IE 8]>
<div class="ie ie8">
<![endif]-->
<div id="ap_title_pagelet">
</div>
<!--[if lte IE 8]>
</div>
<![endif]-->
</div>
<div id="message-box-slot">
<div id="message_warning" class="message warning" style="display:none">
<span></span>
<h6>Please Enable Cookies to Continue</h6>
<p>
To continue shopping at Amazon, please enable cookies in your Web browser.
</p>
<p>
<a href="/gp/help/customer/display.html/ref=ap_cookie_error_help??nodeId=200168080" target="AmazonHelp" onclick="return amz_js_PopWin(this.href,'AmazonHelp','width=700,height=800,resizable=1,scrollbars=1,toolbar=1,status=1');return false;" >
Learn more
</a>
about cookies and how to enable them.
</p>
</div>
<script type="text/javascript">
function setCookie(c_name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=");
if (c_start!=-1)
{
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(";",c_start);
if (c_end==-1) c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return "";
}
function deleteCookie ( cookie_name )
{
var cookie_date = new Date ( ); // current date & time
cookie_date.setTime ( cookie_date.getTime() - 1 );
document.cookie = cookie_name += "=; expires=" + cookie_date.toGMTString();
}
function checkCookieEnabled(nodeId)
{
setCookie('amznTest','1',null);
if(getCookie('amznTest')){
deleteCookie('amznTest');
}else{
document.getElementById(nodeId).style.display = 'block';
}
}
checkCookieEnabled('message_warning');
</script>
</div>
<div id="center-1"></div>
<div id="signin-slot">
<script>
function cf() {
if (typeof window.uet === 'function') {
uet('cf');
}
if (window.embedNotification &&
typeof window.embedNotification.onCF === 'function') {
embedNotification.onCF();
}
}
</script>
<!--[if lte IE 5]>
<div class="ie">
<![endif]-->
<!--[if IE 6]>
<div class="ie ie6">
<![endif]-->
<!--[if IE 7]>
<div class="ie ie7">
<![endif]-->
<!--[if IE 8]>
<div class="ie ie8">
<![endif]-->
<form name="signIn" method="POST" id="ap_signin_form" novalidate="novalidate" action="https://www.amazon.in/ap/signin"
onsubmit="var test1 = apCheckRequiredFields('ap_signin_form', ['ap_email','ap_password']);
return (apValidateEmail('ap_email') && test1);"
>
<input type="hidden" name="appActionToken" value="scIhj2FOCtxr39z7eUIj2FWeNOWxtIwj3D" /><input type="hidden" name="appAction" value="SIGNIN" />
<input type="hidden" name="openid.pape.max_auth_age" value="ape:MA==" />
<input type="hidden" name="openid.ns" value="ape:aHR0cDovL3NwZWNzLm9wZW5pZC5uZXQvYXV0aC8yLjA=" />
<input type="hidden" name="openid.ns.pape" value="ape:aHR0cDovL3NwZWNzLm9wZW5pZC5uZXQvZXh0ZW5zaW9ucy9wYXBlLzEuMA==" />
<input type="hidden" name="prevRID" value="ape:MEhOWlBQUjQ3Rzg0U1QwREJTRVo=" />
<input type="hidden" name="pageId" value="ape:YW16bl9hc3NvY2lhdGVzX2lu" />
<input type="hidden" name="openid.identity" value="ape:aHR0cDovL3NwZWNzLm9wZW5pZC5uZXQvYXV0aC8yLjAvaWRlbnRpZmllcl9zZWxlY3Q=" />
<input type="hidden" name="openid.claimed_id" value="ape:aHR0cDovL3NwZWNzLm9wZW5pZC5uZXQvYXV0aC8yLjAvaWRlbnRpZmllcl9zZWxlY3Q=" />
<input type="hidden" name="openid.mode" value="ape:Y2hlY2tpZF9zZXR1cA==" />
<input type="hidden" name="openid.assoc_handle" value="ape:YW16bl9hc3NvY2lhdGVzX2lu" />
<input type="hidden" name="openid.return_to" value="ape:aHR0cHM6Ly9hZmZpbGlhdGUtcHJvZ3JhbS5hbWF6b24uaW4vZ3AvYXNzb2NpYXRlcy9uZXR3b3JrL21haW4uaHRtbD9pZT1VVEY4JipWZXJzaW9uKj0xJiplbnRyaWVzKj0w" />
<div id="ap_signin1a_pagelet" class="ap_table ap_pagelet">
<div id="ap_signin1a_pagelet_title" class="ap_row ap_pagelet_title">
<h1>Sign In</h1>
</div>
<div id="ap_signin1a_email_section_title" class="ap_row ap_section_title">
<h2>
What is your e-mail address?
</h2>
</div>
<div id="ap_signin1a_email_row" class="ap_row">
<span class="ap_col1 ap_bold ap_right ap_no_collapse">
<label for="ap_email">
My e-mail address is:
</label>
</span>
<span class="ap_col2 ap_left">
<input id="ap_email" name="email" value="" type="email" size="30" maxlength="128" tabindex="1" autocorrect="off" autocapitalize="off" />
</span>
</div>
<div id="ap_signin_custom_message" class="center clear-both" >
</div>
<div id="ap_signin1a_password_section_title" class="ap_row ap_section_title">
<h2> Do you have an Amazon password? </h2>
</div>
<div id="ap_signin1a_new_cust_radio_row" class="ap_row">
<span id="" class="ap_col1 ap_right ap_no_collapse">
<input type="radio" onclick="setElementAvailability('ap_password', false);jQuery('#ap_captcha_table').hide();" name="create" id="ap_signin_create_radio" value="1" tabindex="6" />
</span>
<span id="" class="ap_col2 bold ap_radio_label">
<label for="ap_signin_create_radio">I am a new customer.</label>
<div class="small">(you'll create a password later)</div>
</span>
</div>
<div id="ap_signin1a_exist_cust_radio_row" class="ap_row">
<span class="ap_col1 ap_right" >
<input type="radio" name="create" onclick="setElementAvailability('ap_password', true);jQuery('#ap_captcha_table').show();" id="ap_signin_existing_radio" value="0" tabindex="7" checked="checked" />
</span>
<span class="ap_col2 bold ap_radio_label"><label for="ap_signin_existing_radio">I am a returning customer, <br>and my password is:</label></span>
</div>
<div id="ap_signin1a_password_row" class="ap_row">
<span class="ap_col1"> </span>
<span class="ap_col2">
<input id="ap_password" name="password" type="password" maxlength="1024" size="20" tabindex="2" onkeypress="displayCapsWarning(event,'ap_caps_warning', this);" class="password"/>
</span>
<span id="ap_caps_warn_span">
<div id="ap_caps_warning" class="ap_caps_warn ap_col3_caps_warn" style="visibility:hidden;">
<!--[if lt IE 7]>
<style type="text/css">
.ap_caps_warn {
display: none;
}
</style>
<![endif]-->
<b>Caps Lock is on.</b> <font color="black">This may cause you <br>to enter your password incorrectly.</font>
</div>
</span>
</div>
<!--[if IE]><![if !IE]><![endif]-->
<div id="ap_small_forgot_password_link">
<!--[if IE]><![endif]><![endif]-->
<!--[if lte IE 6]>
<div id="ap_small_forgot_password_link_ie_old" class="ie_old">
<![endif]-->
<!--[if gte IE 7]>
<div id="ap_small_forgot_password_link_ie_new" class="ie_new">
<![endif]-->
<span class="small" id="ap_small_forgot_password_span">
</span>
</div>
<div id="ap_signin1a_signin_button_row" class="ap_row">
<span class="ap_col1"> </span>
<span class="ap_col2">
<input type="image" src="https://images-na.ssl-images-amazon.com/images/G/31/x-locale/common/buttons/sign-in-secure._CB138348554_.gif" id="signInSubmit" height="22" onload="cf()" alt="Continue" width="201" tabindex="5" value="Continue" border="0" />
</span>
<div class="ap_csm_marker" style="display:none;">
<script type="text/javascript">if (typeof uet == 'function') { uet('af'); }</script>
</div>
</div>
<div id="ap_signin1a_forgot_password_row" class="ap_row">
<span class="ap_col1"> </span>
<span class="ap_col2">
<a href="https://www.amazon.in/ap/forgotpassword?openid.pape.max_auth_age=0&openid.ns=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0&openid.ns.pape=http%3A%2F%2Fspecs.openid.net%2Fextensions%2Fpape%2F1.0&prevRID=0HNZPPR47G84ST0DBSEZ&pageId=amzn_associates_in&openid.identity=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select&openid.claimed_id=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select&openid.mode=checkid_setup&openid.assoc_handle=amzn_associates_in&openid.return_to=https%3A%2F%2Faffiliate-program.amazon.in%2Fgp%2Fassociates%2Fnetwork%2Fmain.html%3Fie%3DUTF8%26*Version*%3D1%26*entries*%3D0">
Forgot your password?
</a>
</span>
</div>
<div id="ap_signin1a_cnep_row" class="ap_row">
<span class="ap_col1"> </span>
<span id="ap_signin1a_cnep_row_col2" class="ap_col2">
Has your e-mail address changed since your last order?
</span>
</div>
</div>
</form>
<!--[if lte IE 8]>
</div>
<![endif]-->
</div>
<div id="center-2"></div>
<div id="center-3"></div>
<div id="center-4"></div>
<div id="center-5"></div>
<div id="center-6"></div>
<div id="center-7"></div>
<div id="center-8"></div>
<div id="center-9"></div>
<div id="center-10"></div>
</div>
<div id="rightSlots">
<div id="right-0"></div>
<div id="right-1"></div>
<div id="right-2"></div>
<div id="right-3"></div>
<div id="right-4"></div>
<div id="right-5"></div>
<div id="right-6"></div>
<div id="right-7"></div>
<div id="right-8"></div>
<div id="right-9"></div>
<div id="right-10"></div>
</div>
<div id="bottomSlots">
<div id="bottom-1">
<div id="ap_privacy" class="ap_privacy_footer">
<p class="tiny" align="center">
<a id="footer_conditions_of_use_URL_link" href="/gp/help/customer/display.html/ref=ap_footer_condition_of_use?ie=UTF8&nodeId=200545940" onclick="return amz_js_PopWin(this.href+'&pop-up=1','AmazonHelp','width=340,height=340,resizable=1,scrollbars=1,toolbar=1,status=1');" target="AmazonHelp" >Conditions of Use</a>
<a id="footer_privacy_notice_URL_link" href="/gp/help/customer/display.html/ref=ap_footer_privacy_notice?ie=UTF8&nodeId=200534380" onclick="return amz_js_PopWin(this.href+'&pop-up=1','AmazonHelp','width=340,height=340,resizable=1,scrollbars=1,toolbar=1,status=1');" target="AmazonHelp" >Privacy Notice</a>
<br>
<span id="ap_footer_copyright">© 1996-2015, Amazon.com, Inc. or its affiliates</span>
</p>
</div>
</div>
<div id="bottom-2"></div>
<div id="bottom-3"></div>
<div id="bottom-4"></div>
<div id="bottom-5"></div>
<div id="bottom-6"></div>
<div id="bottom-7"></div>
<div id="bottom-8"></div>
<div id="bottom-9"></div>
<div id="bottom-10"></div>
</div>
<div id="footerSlots">
<div id="footer-1"></div><!-- footer-1 -->
<div id="footer-2"></div><!-- footer-2 -->
<div id="footer-3"></div><!-- footer-3 -->
<div id="footer-4"></div><!-- footer-4 -->
<div id="footer-5"></div><!-- footer-5 -->
<div id="footer-6"></div><!-- footer-6 -->
<div id="footer-7"></div><!-- footer-7 -->
<div id="footer-8"></div><!-- footer-8 -->
<div id="footer-9"></div><!-- footer-9 -->
<div id="footer-10"></div><!-- footer-10 -->
</div><!-- footerSlots -->
<div id="navbarBottomSlots">
</div>
<script type="text/javascript">
(function() {
try {
if ( ue && ue.tag && window.performance.getEntriesByType ) {
var t = window.performance.getEntriesByType('resource');
if ( t ) {
var d = 0;
for ( var i = 0; i < t.length; i++ )
if ( t[i].duration > d ) d = t[i].duration;
ue.tag('ap-rt-' + Math.ceil(d / 100) * 100);
}
}
}
catch (e) {}
})();
</script>
<div id="javascriptSlots">
<div id="javascript-slot-0">
<script type="text/javascript" src="https://images-na.ssl-images-amazon.com/images/G/31/javascripts/lib/jquery/jquery-1.2.6.min._CB166146506_.js"></script>
</div>
<div id="javascript-slot-1"></div>
<div id="javascript-slot-2"></div>
<div id="javascript-slot-3"></div>
<div id="javascript-slot-4"></div>
<div id="javascript-identity">
<script type="text/javascript" src="https://images-na.ssl-images-amazon.com/images/G/31/authportal/common/js/ap_global-1.1._CB309255203_.js"></script>
</div>
<div id="javascript-slot-5"></div>
<div id="js-trms">
<script id="fwcim-script" type="text/javascript" src="https://images-na.ssl-images-amazon.com/images/G/31/x-locale/common/login/fwcim._CB342129342_.js"></script>
<script type="text/javascript">
fwcim.useMercury('https://images-na.ssl-images-amazon.com/images/G/31/x-locale/common/login/mercury9._CB372126299_.swf')
fwcim.profile();
</script>
</div>
<div id="cache-1"></div>
<div id="cache-2"></div>
</div><!-- javascriptSlots -->
</div> <!-- end div wrapper -->
<!--[if lte IE 8]>
</div>
<![endif]-->
</body>
</html>
connection.getInputStream() returns an InputStream. So you need to read from the InputStream. A good way to read from the InputStream and convert it to string would be
val page = connection.getInputStream()
val pageString = scala.io.Source.fromInputStream(page).getLines().mkString("\n")