SendKeys in JavaScript HTML page using selenium VBA - excel
I have a page with too much Javascript and there is a search box where I would like to use SendKeys to put some text. The search box id is ctl00_ContentPlaceHolder1_txtSearch but when trying to use it directly, I encountered an error.
.FindElementByXPath("//*[#id='ctl00_ContentPlaceHolder1_txtSearch']").SendKeys "1111"
Here's the HTML
<html xmlns="http://www.w3.org/1999/xhtml" style="" class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title> البرامج الرقمية للتمكين المهني</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="الأكاديمية المهنية للمعلمين , مركز تميز محلي وإقليمي ودولي ، يضمن جودة منظومة التنمية المهنية المستدامة لأعضاء هيئة التعليم ، بشراكة فاعلة مع كليات التربية والمدارس والمؤسسات الأخرى ذات الصلة.">
<meta name="keywords" content="الأكاديمية المهنية للمعلمين, منصة التدريب عن بعد, البرامج الرقمية للتمكين المهني, كادر المعلم, ترقي المعلمين, نظام كادر المعلم, وزارة التربية والتعليم, تدريب اون لاين">
<meta name="author" content="pat.edu.eg">
<!-- Facebook and Twitter integration -->
<meta property="og:title" content="">
<meta property="og:image" content="">
<meta property="og:url" content="">
<meta property="og:site_name" content="">
<meta property="og:description" content="">
<meta name="twitter:title" content="">
<meta name="twitter:image" content="">
<meta name="twitter:url" content="">
<meta name="twitter:card" content="">
<!-- <link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet"> -->
<!-- Animate.css -->
<link rel="stylesheet" href="assets/css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="assets/css/icomoon.css">
<!-- Themify Icons-->
<link rel="stylesheet" href="assets/css/themify-icons.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.css">
<!-- Magnific Popup -->
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<!-- Owl Carousel -->
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<link rel="stylesheet" href="assets/css/owl.theme.default.min.css">
<!-- Flexslider -->
<link rel="stylesheet" href="assets/css/flexslider.css">
<!-- Theme style -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- Modernizr JS -->
<script src="assets/js/modernizr-2.6.2.min.js"></script>
<!-- FOR IE9 below -->
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->
<!-- أكواد حماية -->
<script type="text/javascript">
function mischandler(){
return false;
}
function mousehandler(e){
var myevent = (isNS) ? e : event;
var eventbutton = (isNS) ? myevent.which : myevent.button;
if((eventbutton==2)||(eventbutton==3)) return false;
}
document.oncontextmenu = mischandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;
var isCtrl = false;
document.onkeyup=function(e)
{
if(e.which == 17)
isCtrl=false;
}
document.onkeyup=function(e)
{
if(e.which == 83)
isCtrl=false;
}
document.onkeydown=function(e)
{
if(e.which == 17)
isCtrl=true;
if((e.which == 85) || (e.which == 67) && isCtrl == true)
{
return false;
}
}
</script>
<script>
document.addEventListener("keydown", function(e) {
if (e.keyCode == 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
e.preventDefault();
}
}, false);
</script>
<script type="text/javascript">
shortcut={all_shortcuts:{},add:function(a,b,c){var d={type:"keydown",propagate:!1,disable_in_input:!1,target:document,keycode:!1};if(c)for(var e in d)"undefined"==typeof c[e]&&(c[e]=d[e]);else c=d;d=c.target,"string"==typeof c.target&&(d=document.getElementById(c.target)),a=a.toLowerCase(),e=function(d){d=d||window.event;if(c.disable_in_input){var e;d.target?e=d.target:d.srcElement&&(e=d.srcElement),3==e.nodeType&&(e=e.parentNode);if("INPUT"==e.tagName||"TEXTAREA"==e.tagName)return}d.keyCode?code=d.keyCode:d.which&&(code=d.which),e=String.fromCharCode(code).toLowerCase(),188==code&&(e=","),190==code&&(e=".");var f=a.split("+"),g=0,h={"`":"~",1:"!",2:"#",3:"#",4:"$",5:"%",6:"^",7:"&",8:"*",9:"(",0:")","-":"_","=":"+",";":":","'":'"',",":"<",".":">","/":"?","\\":"|"},i={esc:27,escape:27,tab:9,space:32,"return":13,enter:13,backspace:8,scrolllock:145,scroll_lock:145,scroll:145,capslock:20,caps_lock:20,caps:20,numlock:144,num_lock:144,num:144,pause:19,"break":19,insert:45,home:36,"delete":46,end:35,pageup:33,page_up:33,pu:33,pagedown:34,page_down:34,pd:34,left:37,up:38,right:39,down:40,f1:112,f2:113,f3:114,f4:115,f5:116,f6:117,f7:118,f8:119,f9:120,f10:121,f11:122,f12:123},j=!1,l=!1,m=!1,n=!1,o=!1,p=!1,q=!1,r=!1;d.ctrlKey&&(n=!0),d.shiftKey&&(l=!0),d.altKey&&(p=!0),d.metaKey&&(r=!0);for(var s=0;k=f[s],s<f.length;s++)"ctrl"==k||"control"==k?(g++,m=!0):"shift"==k?(g++,j=!0):"alt"==k?(g++,o=!0):"meta"==k?(g++,q=!0):1<k.length?i[k]==code&&g++:c.keycode?c.keycode==code&&g++:e==k?g++:h[e]&&d.shiftKey&&(e=h[e],e==k&&g++);if(g==f.length&&n==m&&l==j&&p==o&&r==q&&(b(d),!c.propagate))return d.cancelBubble=!0,d.returnValue=!1,d.stopPropagation&&(d.stopPropagation(),d.preventDefault()),!1},this.all_shortcuts[a]={callback:e,target:d,event:c.type},d.addEventListener?d.addEventListener(c.type,e,!1):d.attachEvent?d.attachEvent("on"+c.type,e):d["on"+c.type]=e},remove:function(a){var a=a.toLowerCase(),b=this.all_shortcuts[a];delete this.all_shortcuts[a];if(b){var a=b.event,c=b.target,b=b.callback;c.detachEvent?c.detachEvent("on"+a,b):c.removeEventListener?c.removeEventListener(a,b,!1):c["on"+a]=!1}}},;
</script>
<script language="JavaScript">
window.onload = function () {
document.addEventListener("contextmenu", function (e) {
e.preventDefault();
}, false);
document.addEventListener("keydown", function (e) {
//document.onkeydown = function(e) {
// "I" key
if (e.ctrlKey && e.shiftKey && e.keyCode == 73) {
disabledEvent(e);
}
// "J" key
if (e.ctrlKey && e.shiftKey && e.keyCode == 74) {
disabledEvent(e);
}
// "S" key + macOS
if (e.keyCode == 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
disabledEvent(e);
}
// "U" key
if (e.ctrlKey && e.keyCode == 85) {
disabledEvent(e);
}
// "F12" key
if (event.keyCode == 123) {
disabledEvent(e);
}
// "print" key
if (event.keyCode == 80) {
disabledEvent(e);
}
// "back" key
if (event.keyCode == 16) {
disabledEvent(e);
}
}, false);
function disabledEvent(e) {
if (e.stopPropagation) {
e.stopPropagation();
} else if (window.event) {
window.event.cancelBubble = true;
}
e.preventDefault();
return false;
}
}
//edit: removed ";" from last "}" because of javascript error
</script>
<!-- نهاية أكواد الحماية -->
</head>
<body onbeforeprint="onbeforeprint()" onafterprint="onafterprint()" onselectstart="return false" oncontextmenu="return false" onkeydown="return true;" onmousedown="return true;"><i></i><div id="gtco-offcanvas"><ul>
<li>خروج</li>
</ul></div>
<!-- أكواد حماية -->
<!-- نهاية أكواد الحماية -->
<!-- jQuery -->
<script src="assets/js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="assets/js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="assets/js/jquery.waypoints.min.js"></script>
<!-- Carousel -->
<script src="assets/js/owl.carousel.min.js"></script>
<!-- countTo -->
<script src="assets/js/jquery.countTo.js"></script>
<!-- Flexslider -->
<script src="assets/js/jquery.flexslider-min.js"></script>
<!-- Magnific Popup -->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<script src="assets/js/magnific-popup-options.js"></script>
<!-- Main -->
<script src="assets/js/main.js"></script>
<div class="gtco-loader" style="display: none;"></div>
<div id="page">
<!-------------------------------------------------------- Content Here ------------------------------------------->
<form name="aspnetForm" method="post" action="search.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="aspnetForm">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="">
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTExNDI3MTk4MDRkZMiC3ceJDBMSb/hvOzfoo1Ps81e/">
</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=ft_DCi-yGXrSm5-RC0zWVdeA5nhykesM_HFiFg9Bdn9rUthWc0jbZpTp5HdlmUge2tXyj_sn-_9j8ZpflhpUQ40fHBg1&t=636284381597151108" type="text/javascript"></script>
<script src="/WebResource.axd?d=zZ7eInuoGtXVXhG436dX9AySvq4rdhbrhYzcgxr10UDlZ0USkDe6DoY1HPcsXhPUj6kKnwkfxeJDPnwBmBkYnsou7IE1&t=636284381597151108" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
//]]>
</script>
<div>
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="5D3B39A4">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwLlr+XcAwKnpt8nAve684YCAX7xuYxu9gxA+eUqV0T9dl+AfGk=">
</div>
<nav class="gtco-nav" role="navigation">
<div class="gtco-container">
<div class="row">
<div class="col-sm-2 col-xs-12">
<div id="gtco-logo"><img src="assets/images/logo-up.png" alt="منصة البرامج الرقمية للتمكين المهني بالأكاديمية المهنية للمعلمين"></div>
</div>
<div class="col-xs-10 text-right menu-1 main-nav">
<ul>
<li>خروج</li>
</ul>
</div>
</div>
</div>
</nav>
<!-------------------------------------------------------- نموذج البحث ------------------------------------------->
<div id="gtco-subscribe">
<div class="gtco-container" dir="rtl">
<div class="row" align="center">
<div>
<p></p>
<h2 style="color:#990000">.</h2>
<h2 style="color:#FFFFFF">يمكنكم البحث بكود المعلم المرشح للترقي 2019-2020</h2>
</div>
<table align="center" style="width:300px">
<tbody><tr>
<td>
<input name="ctl00$ContentPlaceHolder1$txtSearch" type="text" id="ctl00_ContentPlaceHolder1_txtSearch" class="form-control" placeholder="ادخل كود المعلم هنا">
<span id="ctl00_ContentPlaceHolder1_RequiredFieldValidator5" style="color:Red;visibility:hidden;">*</span>
</td>
</tr>
<tr>
<td>
<input type="submit" name="ctl00$ContentPlaceHolder1$btnSearch" value="بحث" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$btnSearch", "", true, "", "", false, false))" id="ctl00_ContentPlaceHolder1_btnSearch" class="btn btn-danger btn-block" style="background-color:#FF9900;border-color:#FF9900;font-size:20pt;font-weight:bold;height:60px;width:300px;">
<br>
<span id="ctl00_ContentPlaceHolder1_RegularExpressionValidator1" style="color:White;font-weight:bold;visibility:hidden;">أدخل الكود بأرقام انجليزية</span>
</td>
</tr>
</tbody></table>
</div>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
var Page_Validators = new Array(document.getElementById("ctl00_ContentPlaceHolder1_RequiredFieldValidator5"), document.getElementById("ctl00_ContentPlaceHolder1_RegularExpressionValidator1"));
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var ctl00_ContentPlaceHolder1_RequiredFieldValidator5 = document.all ? document.all["ctl00_ContentPlaceHolder1_RequiredFieldValidator5"] : document.getElementById("ctl00_ContentPlaceHolder1_RequiredFieldValidator5");
ctl00_ContentPlaceHolder1_RequiredFieldValidator5.controltovalidate = "ctl00_ContentPlaceHolder1_txtSearch";
ctl00_ContentPlaceHolder1_RequiredFieldValidator5.errormessage = "RequiredFieldValidator";
ctl00_ContentPlaceHolder1_RequiredFieldValidator5.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
ctl00_ContentPlaceHolder1_RequiredFieldValidator5.initialvalue = "";
var ctl00_ContentPlaceHolder1_RegularExpressionValidator1 = document.all ? document.all["ctl00_ContentPlaceHolder1_RegularExpressionValidator1"] : document.getElementById("ctl00_ContentPlaceHolder1_RegularExpressionValidator1");
ctl00_ContentPlaceHolder1_RegularExpressionValidator1.controltovalidate = "ctl00_ContentPlaceHolder1_txtSearch";
ctl00_ContentPlaceHolder1_RegularExpressionValidator1.errormessage = "أدخل الكود بأرقام انجليزية";
ctl00_ContentPlaceHolder1_RegularExpressionValidator1.evaluationfunction = "RegularExpressionValidatorEvaluateIsValid";
ctl00_ContentPlaceHolder1_RegularExpressionValidator1.validationexpression = "\\d*";
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
ValidatorOnLoad();
}
function ValidatorOnSubmit() {
if (Page_ValidationActive) {
return ValidatorCommonOnSubmit();
}
else {
return true;
}
}
//]]>
</script>
</form>
<!-------------------------------------------------------- End of Content ------------------------------------------->
<!-------------------------------------------------------- الفوتر ------------------------------------------->
<footer id="gtco-footer" dir="rtl" role="contentinfo">
<div class="gtco-container">
<div class="row copyright">
<div class="col-md-12">
<p class="pull-left">
<small class="block">جميع الحقوق محفوظة للأكاديمية المهنية للمعلمين - الإدارة العامة للمعلومات بالأكاديمية © 2020</small>
<small class="block">الموقع الرسمي للأكاديمية المهنية للمعلمين : www.pat.edu.eg</small>
</p>
<p class="pull-right">
</p><ul class="gtco-social-icons pull-right">
<li><img src="assets/images/suport.png" width="240" height="40" alt="إضغط هنا للتواصل مع الدعم الفني في حال واجهتك أي مشكلة"></li>
</ul>
<p></p>
</div>
</div>
</div>
</footer>
</div>
<div class="gototop js-top">
<i class="icon-arrow-up"></i>
</div>
</body></html>
This is the code till now. I am stuck at entering a ID at the search box
Const sURL As String = "http://pat.edu.eg/platform/"
Dim bot As New WebDriver, sCode As String, r As Long
With bot
'.AddArgument "--headless"
For r = 2 To 2 'Cells(Rows.Count, 1).End(xlUp).Row
sCode = Cells(r, 1).Value
.Start "Chrome", sURL
.Get "/"
.Wait 3000
.FindElementByXPath("/html/body/div[2]/button").Click
.SwitchToNextWindow
Next r
End With
I am sure the pop-up window is the focused window as I used Debug.Print .Title and the window's title is already the same ..
Majority of the elements on the webpage are JavaScript enabled element so to interact with the elements you have to induce a waiter for the desired element to be interactable and you can use either of the following Locator Strategies:
Using FindElementByCss:
newHour = Hour(Now())
newMinute = Minute(Now())
newSecond = Second(Now()) + 10
waitTime = TimeSerial(newHour, newMinute, newSecond)
driver.Wait waitTime
driver.FindElementByCss("input.form-control[id$='ContentPlaceHolder1_txtSearch'][name*='ContentPlaceHolder1']").SendKeys "1111"
Using FindElementByXPath:
newHour = Hour(Now())
newMinute = Minute(Now())
newSecond = Second(Now()) + 10
waitTime = TimeSerial(newHour, newMinute, newSecond)
driver.Wait waitTime
driver.FindElementByXPath("//input[#class='form-control' and contains(#id, 'ContentPlaceHolder1_txtSearch')][contains(#name, 'ContentPlaceHolder1')]").SendKeys "1111"
Reference
You can find a couple of relevant discussions in:
Trying to fill text in input box with dynamic drop down
Need help to fill number into Chrome input box with Selenium
How to send text to some HTML elements?
Instead of using ".FindElementByXPath" you might try using ".FindElementByName".
Also make sure your SeleniumWrapper library is installed in addition to the SeleniumBasic core package. Once installed, it has to be enabled in the VB window by navigating to Tools > References > SeleniumWrapper Type Library and checking that box.
Below is an example of some code that runs correctly for me and inputs text into some text box elements.
'Opens a new Chrome window and navigates to login page'
Dim obj As New WebDriver
obj.Start "chrome", ""
obj.Get "https://exampleloginpage.com"
'Pastes credentials into appropriate fields and logs in'
Dim email As String
Dim password As String
Dim keys As New SeleniumWrapper.keys 'MUST have SeleniumWrapper.exe installed locally'
email = "testemail#test.com" 'login credentials [1/2]'
password = "G3ner!cPas$word" 'login credentials [2/2]'
obj.FindElementByName("email").SendKeys (email)
obj.FindElementByName("password").SendKeys (password)
obj.SendKeys keys.Enter
Related
Crawling a given URL w/ BeautifulSoup (Python3)
Halp!
I'm trying to write a web-crawler in python. The goal is to (eventually) loop through a list of domains, crawl all local-URLs within those domains, and dump all of the HTML content back to my host.
For now, I'm handing the script a single domain (http://www.scrapethissite.com). I've defined a queue, as well as sets for new/processed/local/foreign/broken-URLs. Based on the output, it looks like the script is reading in HTML of the page, grabbing the first local_URL ('https://scrapethissite.com/lessons/'), but failing to process that URL by adding it to the queue.
Ideally, the script would spit out each input URL's output into its own directory, preserving the DOM of the TLD. But I'd be happy just to get the queue working.
Here's my code:
from bs4 import BeautifulSoup
import requests
import requests.exceptions
from collections import deque
from urllib.parse import urlsplit, urlparse
from urllib.request import Request, urlopen
import requests
from html.parser import HTMLParser
import lxml
#set targets
url = 'https://scrapethissite.com'
new_urls = deque(([url]))
processed_urls = set()
local_urls = set()
foreign_urls = set()
broken_urls = set()
#process urls until we exhaust queue
while len(new_urls):
url = new_urls.popleft()
processed_urls.add(url)
print("processing %s..." % url)
try:
response = requests.get(url).text
print(response)
print(new_urls)
except(requests.exceptions.MissingSchema, requests.exceptions.ConnectionError, requests.exceptions.InvalidURL, requests.exceptions.InvalidSchema):
broken_urls.add(url)
print(("this %s failed") % url)
continue
##get base URL to differentiate local and foreign addresses
###not working
print("differentiating addresses...")
parts = urlsplit(url)
base = "{0.netloc}".format(parts)
strip_base = base.replace("www.","")
base_url = "{0.scheme}://{0.netloc}".format(parts)
path = url[:url.rfind('/')+1] if '/' in parts.path else url
#initialize soup
print("initializing soup...")
response = requests.get(url).text
soup = BeautifulSoup(response, 'lxml')
#get links in HTML
for link in soup.find_all('a'):
anchor = link.attrs["href"] if "href" in link.attrs else ''
#scrape page for links
print("scraping links...")
if anchor.startswith('/'):
local_link = base_url + anchor
local_urls.add(local_link)
elif strip_base in anchor:
local_urls.add(anchor)
elif not anchor.startswith('http'):
local_link = path + anchor
local_urls.add(local_link)
else:
foreign_urls.add(anchor)
print(forieng_urls)
print(local_urls)
#to crawl local urls
#...and add them to sets
for i in local_urls:
if not i in new_urls and not i in processed_urls:
new_urls.append(i)
#to crawl all URLs
#for i in local_urls:
#if not link in new_urls and not link in processed_urls:
#new_urls.append(link)
print("new urls: %s" % new_urls)
print("processed urls: %s" % processed_urls)
print("broken urls: %s" % broken_urls)
And here's the output:
(base) $ crawler % python3 bsoup_crawl.py
processing https://scrapethissite.com...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Scrape This Site | A public sandbox for learning web scraping</title>
<link rel="icon" type="image/png" href="/static/images/scraper-icon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A public sandbox for learning web scraping">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="/static/css/styles.css">
</head>
<body>
<nav id="site-nav">
<div class="container">
<div class="col-md-12">
<ul class="nav nav-tabs">
<li id="nav-homepage">
<a href="/" class="nav-link hidden-sm hidden-xs">
<img src="/static/images/scraper-icon.png" id="nav-logo">
Scrape This Site
</a>
</li>
<li id="nav-sandbox">
<a href="/pages/" class="nav-link">
<i class="glyphicon glyphicon-console hidden-sm hidden-xs"></i>
Sandbox
</a>
</li>
<li id="nav-lessons">
<a href="/lessons/" class="nav-link">
<i class="glyphicon glyphicon-education hidden-sm hidden-xs"></i>
Lessons
</a>
</li>
<li id="nav-faq">
<a href="/faq/" class="nav-link">
<i class="glyphicon glyphicon-flag hidden-sm hidden-xs"></i>
FAQ
</a>
</li>
<li id="nav-login" class="pull-right">
<a href="/login/" class="nav-link">
Login
</a>
</li>
</ul>
</div>
</div>
</nav>
<script type="text/javascript">
var path = document.location.pathname;
var tab = undefined;
if (path === "/"){
tab = document.querySelector("#nav-homepage");
} else if (path.indexOf("/faq/") === 0){
tab = document.querySelector("#nav-faq");
} else if (path.indexOf("/lessons/") === 0){
tab = document.querySelector("#nav-lessons");
} else if (path.indexOf("/pages/") === 0) {
tab = document.querySelector("#nav-sandbox");
} else if (path.indexOf("/login/") === 0) {
tab = document.querySelector("#nav-login");
}
tab.classList.add("active")
</script>
<div id="homepage">
<section id="hero">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<img src="/static/images/scraper-icon.png" id="townhall-logo" />
<h1>
Scrape This Site
</h1>
<p class="lead">
The internet's best resource for learning <strong>web scraping</strong>.
</p>
<br><br><br>
<a href="/pages/" class="btn btn-lg btn-default" />Explore Sandbox</a>
<a href="/lessons/" class="btn btn-lg btn-primary" />
<i class="glyphicon glyphicon-education"></i>
Begin Lessons →
</a>
</div><!--.col-->
</div><!--.row-->
</div><!--.container-->
</section>
</div>
<section id="footer">
<div class="container">
<div class="row">
<div class="col-md-12 text-center text-muted">
Lessons and Videos © Hartley Brody 2018
</div><!--.col-->
</div><!--.row-->
</div><!--.container-->
</section>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha256-Sk3nkD6mLTMOF0EOpNtsIry+s1CsaqQC1rVLTAy+0yc= sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pnotify/2.1.0/pnotify.core.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/pnotify/2.1.0/pnotify.core.min.css" rel="stylesheet" type="text/css">
<!-- pnotify messages -->
<script type="text/javascript">
PNotify.prototype.options.styling = "bootstrap3";
$(function(){
});
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<!-- golbal video controls -->
<script type="text/javascript">
$("video").hover(function() {
$(this).prop("controls", true);
}, function() {
$(this).prop("controls", false);
});
$("video").click(function() {
if( this.paused){
this.play();
}
else {
this.pause();
}
});
</script>
<!-- insert google analytics here -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41551755-8', 'auto');
ga('send', 'pageview');
</script>
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '764287443701341');
fbq('track', "PageView");</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=764287443701341&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
<!-- Google Code for Remarketing Tag -->
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 950945448;
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/950945448/?guid=ON&script=0"/>
</div>
</noscript>
<!-- Global site tag (gtag.js) - Google AdWords: 950945448 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-950945448"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'AW-950945448');
</script>
</html>
deque([])
differentiating addresses...
initializing soup...
scraping links...
new urls: deque(['https://scrapethissite.com/lessons/', <a class="btn btn-lg btn-primary" href="/lessons/"></a>])
processed urls: {'https://scrapethissite.com'}
broken urls: set()
API GET Request - <array> - to table
I want to turn the array that I get from the following link https://httpbin.org/get and turn it into a table.
My code already works but the output comes in one piece in an array. it supposed to fill the table with keys and values .
The output should look something like this :
KEY | VALUE
"origin" | "178.115.129.85"
(string) (string)
function loadDoc(url) {
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
document.getElementById('data').innerHTML = this.responseText;
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
<script src="script.js" type="text/javascript"></script>
<title>GET Request</title>
</head>
<body>
<button id="submit" onclick="loadDoc('https://httpbin.org/get')" type="button" class="btn btn-success">Get Request</button>
<div class="container">
<table id="tableHead" class="table table-dark">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody id="data">
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>
In order to fill the table with keys and values, we can append 'tr' and 'td' child elements to the existing table body by replacing the line
document.getElementById('data').innerHTML = this.responseText;
function loadDoc(url) {
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
eval("a = "+this.responseText)
tb = document.getElementById('data')
for (k in a)
{
tr = document.createElement('tr')
for (d of [k, JSON.stringify(a[k])])
{
td = document.createElement('td')
td.appendChild(document.createTextNode(d))
tr.appendChild(td)
}
tb.appendChild(tr)
}
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
<script src="script.js" type="text/javascript"></script>
<title>GET Request</title>
</head>
<body>
<button id="submit" onclick="loadDoc('https://httpbin.org/get')" type="button" class="btn btn-success">Get Request</button>
<div class="container">
<table id="tableHead" class="table table-dark">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody id="data">
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>
There is one more question, How can I access the second level, I mean all the data that is inside the "headers" will be listed separately each as a new or row ...
Here's a variant which recursively expands a data object.
function tabulate(tb, a)
{ for (k in a)
{ tr = document.createElement('tr')
for (d of [k, a[k]])
{ if (d instanceof Object) { tabulate(tb, d); continue }
td = document.createElement('td')
td.appendChild(document.createTextNode(JSON.stringify(d)))
tr.appendChild(td)
}
tb.appendChild(tr)
}
}
function loadDoc(url) {
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
tabulate(document.getElementById('data'), eval("a="+this.responseText))
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
<script src="script.js" type="text/javascript"></script>
<title>GET Request</title>
</head>
<body>
<button id="submit" onclick="loadDoc('https://httpbin.org/get')" type="button" class="btn btn-success">Get Request</button>
<div class="container">
<table id="tableHead" class="table table-dark">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody id="data">
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>
popup.html view not updating the newly assigned values of $scope variables in controller in popup.js
I'm trying to build an extension that scrapes email IDs from a webpage. The problem is that...
The popup.html view is not updating the new values of $scope.emailList and $scope.count in the controller in popup.js. However, when I do Inspect Popup it displays the new values attached to the $scope variables but I see no errors that I can look into and work on.
popup.js
var app = angular.module('emailScraper',[]);
app.controller('AppCtrl', ['$scope', '$http', function($scope, $http) {
//Fetch URL of current Tab open in Chrome
chrome.tabs.query({
active: true,
currentWindow: true
}, function(tabs) {
// and use that tab to fill in out title and url
var tab = tabs[0];
$scope.cpUrl = tab.url;
console.log($scope.cpUrl); //I SEE ONLY THIS LINE WHEN I INSPECT POPUP
});
$scope.appLoaded = false;
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
console.log("Message received: ", request); //I SEE ONLY IN Inspect Popup BUT NOT IN popup.html view
$scope.emailList = request;
$scope.count = Object.keys($scope.emailList).length;
console.log("Emails found: " + $scope.count); //I SEE ONLY IN Inspect Popup BUT NOT IN popup.html view
$scope.appLoaded = true;
sendResponse({status: "Received JSON data!"});
});
}]);
content script - relevant portion
var jsonData = scrape(); // scrape() is included in the Content Script which I've chosen to leave out here.
console.log(jsonData);
chrome.runtime.sendMessage(jsonData, function(response) {
console.log(response);
});
background.js
var background = {
injectScript: function() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.executeScript(tabs[0].id, {file: "myscript.js"});
});
}
};
background.injectScript();
popup.html
<!DOCTYPE html>
<html ng-app="emailScraper">
<head>
<!--
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<link rel="stylesheet" href="css/lib/concise-v3.4.0-UI-dist/concise.min.css">
-->
<link rel="stylesheet" href="css/lib/materialize/materialize.min.css" media="screen,projection">
<link rel="stylesheet" href="css/app/popup.css">
</head>
<body ng-controller="AppCtrl">
<div id="popWindow">
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<h5 class="brand-logo">Email Scraper</h5>
<span class="badge">
<a># found </a>
<a>{{count}}</a>
</span>
</div>
</nav>
</div>
<div class="progress" ng-hide="appLoaded">
<div class="indeterminate"></div>
</div>
<div class="progress" ng-show="appLoaded">
<div class="determinate" style="width: 100%"></div>
</div>
<div class="collection" ng-if="count > 0">
<h6>{{email}}</h6>
</div>
<div ng-if="count === 0">
<p class="flow-text"> Sorry, No Email IDs found.</p>
</div>
</div>
<script type="text/javascript" src="js/lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/lib/angular_1.5.6/angular.min.js"></script>
<script type="text/javascript" src="js/lib/materialize/materialize.min.js"></script>
<script type="text/javascript" src="js/app/popup.js"></script>
</body>
</html>
monaca inmobi ads blank
i have signed up at inmobi,have made a banner ad and tried my best to get it working to no avail,seems like the ad div appears,but not the ad itself
here is my code.as yoU CAN see my property id provided by inmobi for ad has been entered.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="components/loader.css">
<script src="js/cssua.min.js"></script>
<script src="js/inmobi.js"></script>
<script>
var inmobi_conf = {
siteid : "48a58302dd214f5ea5483a3f9d95a28e", // your Property ID
slot: 15,
test: true,
manual: true,
autoRefresh: 20,
targetWindow : "_top", // default "_top"
onError : function(code){
if(code == "nfr"){
console.log("Error getting the ads!");
}
if(code!=="nfr"){
console.log("getting the ads!");
}
}
};
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady(){
console.log('device is ready');
showAds();
}
function showAds(){
var adsElement = document.getElementById('ads');
_inmobi.getNewAd(adsElement);
}
</script>
</head>
<body>
<div data-role="page">
<header data-role="header" data-position="fixed" data-theme="c">
<h1>Inmobi Client</h1>
</header>
<div data-role="content">
<img src="images/logo.png" width="300px">
</div>
<div data-role="header" data-position="fixed">
<div id="ads"></div>
</div>
</div>
</body>
</html>
YUI3 find current tab in TabView
I'm using YUI3 TabView component, and I'd like to be able to get the index of the currently selected tab. I've been looking through the api docs, but can't seem to find the relevant way to do this. http://developer.yahoo.com/yui/3/api/module_tabview.html Thanks!
"indexOf" actually works if you use the "tabview.get('selection')" as the argument.
Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript" charset="utf-8"
src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js">
</script>
</head>
<body>
<body class="yui3-skin-sam">
<p id="msg"></p>
<input type='button' value='Button' id='button'/>
<div id="demo">
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
<div>
<div id="foo">foo content</div>
<div id="bar">bar content</div>
<div id="baz">baz content</div>
</div>
</div>
<script>
var YUI;
YUI().use('event', 'node', 'tabview', function (Y) {
Y.one('#msg').set('innerHTML', 'message area');
var tabview = new Y.TabView({srcNode: '#demo'});
tabview.render();
var displayIndex = function (tabview) {
var sel = tabview.get('selection');
var idx = tabview.indexOf(sel);
Y.one('#msg').set('innerHTML', 'Selected Tab Index = ' + idx);
}
displayIndex(tabview);
Y.after('click', function(e) {
displayIndex(this);
},'body',tabview);
});
</script>
</body>
</html>