HtmlUnit: WebClient enabled JavaScript, but still got JavaScript load error - htmlunit

Tried to create a test using HTMLUnit for Confluence and had to login. But getting error that 'Javascript load error'. I am quite new to HTMLUnit and have only basic knowledge.
Tried for Chrome, Firefox.
Code:
WebClient webClient = new WebClient(BrowserVersion.FIREFOX_38);
webClient.getOptions().setCssEnabled(true);
webClient.getOptions().setJavaScriptEnabled(true);
webClient.getOptions().setThrowExceptionOnScriptError(false);
HtmlPage page = webClient.getPage("https://<domain>.atlassian.net");
webClient.waitForBackgroundJavaScript(30000);
System.out.println(page.asXml());
Part of the HTML page parsed:
<div id="root">
<noscript>
<div class="scriptLoadError"><div class="container"><h1 class="logo">Atlassian</h1><div class="heading">JavaScript is disabled</div><div class="content"><p>You should enable JavaScript to work with this page.</p></div></div></div>
</noscript>
<div id="javaScriptLoadError" style="display: block;">
<div class="scriptLoadError">
<div class="container">
<h1 class="logo">
Atlassian
</h1>
<div class="heading">
JavaScript load error
</div>
<div class="content">
<p>
We tried to load scripts but something went wrong.
</p>
<p>
Please make sure that your network settings allow you to download scripts from the following domain:
</p>
<p>
<b>
https://aid-frontend.prod.atl-paas.net/atlassian-id/front-end/5.0.392
</b>
</p>
</div>
</div>
</div>
</div>
</div>
<script nonce="OtVvyH6YLHv/RlgULCwPrLjIMu8=">
//<![CDATA[
window.onload=function(){document.getElementById("javaScriptLoadError")&&(document.getElementById("javaScriptLoadError").style.display="block")}
//]]>
When I tried using Selenium, it worked fine from the same system.
It would be of great help if someone could help me.

Related

Why embedding an iframe pushes down a sidebar?

I am building a simple static website. I am using Spring Boot, Thymeleaf Layout Dailect and Bootstrap 4. In my layout.html I have a row in which I have a content and a sidebar. I have 2 photos in my sidebar, in all of views they appear on the right side. However when I try to embed an iframe with a google map or with a facebook page the sidebar gets pushed down. I tried a few different things like changing the size of iframe to minimum etc. but I am unable to keep my sidebar on the right side. Please can anyone suggest a solution?
Below is my layout.html:
<body>
<div class="container-fluid" th:replace="fragments/navigation :: navigation"></div>
<div class="container-fluid" id="mainContent">
<div class="row">
<div class="col-md-8">
<div layout:fragment="content"></div>
</div>
<div class="col-md-4">
<div th:replace="fragments/sidebar :: sidebar"></div>
</div>
</div>
</div>
<div class="container-fluid" th:replace="fragments/footer :: footer"></div>
Below is my sidebar.html:
<body>
<div th:fragment="sidebar">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-body">
<img src="/img/ai-ki-do.png" alt="Logo" style="width: 330px;"></img>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<img src="/img/ueshiba-laughter.jpg" alt="Logo"
style="width: 330px;" ></img>
</div>
</div>
</div>
</div>
</body>
Below is my content:
<body>
<div layout:fragment="content">
<p>Thank you for your interest in Seishinkan. Please get in touch via our Facebook page. We look forward to hearing from you.</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FSeishinkan-Aikido-Dojo-389984175129276%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" data-adapt-container-width="true"></iframe>
</div>
</body>
Normal sidebar's behaviour - a white picture 'Ai Ki Do' and a dark picture on the right side :
The sidebar pushed down after embedding the iframe:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="row">
<iframe src="https://www.w3schools.com">
<p>Your browser does not support iframes.</p>
</iframe>
<div>
another one
</div>
</div>
For some reason when I remove the col classes from the divs and keep them in a row, the two pieces don't go below each other
Have you tried inspecting the element and editing your css classes in the browser while in developer mode?
I had the same problem before and all I did was mess around with the code in the console until it eventually moved the way I wanted it to.
Placing a new row and column within:
<div layout:fragment="content"></div>
worked for me.
<div layout:fragment="content">
<div class="row">
<div id="dojo-page" class="col-md-12">
<div id="fb-frame" class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" width="600" height="450"
frameborder="0" style="border: 0"
src="path-for-google-map-location"
allowfullscreen></iframe>
</div>
</div>
</div>

Spring: Not display image in thymeleaf

I'm doing Spring project use Spring Boot, Spring MVC, Spring Data. Now I have a problem maybe with thymeleaf
This is my index page
Logo Bonfire and room picture is image and save in folder src/main/resource/static/images in eclipse .
When I use Search function, it will display Search page like this picture
I don't know why it's not display logo image and room image although I use one template for my index page and search page... And it's still happened with detail page too, images is not displayed. Only index page displayed images
I think the problem is not by code... I don't know why
This is my room.html (index page and search page)
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="Header :: head">
</head>
<body>
<div th:replace="Header :: header" class="header"></div>
<div class="container">
<div class="products">
<h2 class=" products-in">AVAILABLE ROOM</h2>
<div class=" top-products">
<span th:each="room,iterStat : ${room}">
<div class="col-md-3 md-col">
<div class="col-md">
<a th:href="#{/room/{id}/detail(id=${room.id})}" class="compare-in"><img th:src="#{'images/'+${room.image}}" alt="" />
</a>
<div class="top-content">
<h5><a th:href="#{/room/{id}/detail(id=${room.id})}"><tr th:text="${room.name}"></a></h5>
<div class="white">
<a th:href="#{/room/{id}/book(id=${room.id})}" class="hvr-shutter-in-vertical hvr-shutter-in-vertical2">BOOK</a>
<p class="dollar"><span class="in-dollar">$</span><span>2</span><span>0</span></p>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</span>
<div class="clearfix"></div>
</div>
</div>
</div>
<div th:replace="Header :: footer" class="footer"></div>
</body>
</html>
Pleased help me
Use this approach to set the image :--
<div th:style="'background-image:url('+ ${room.image}+');'"></div>
Use something like this.
<img th:src="${'images/'+ room.image}" />

Enabling Inline Installation For Google Sheets Add On

I have devloped a Google Spreadsheet Add On. I am trying to add Inline Installation option on my website. But my addon is being added as a Google Chrome Extension rather a normal add on installation.
Expected outcome: Installation of Add-On on user's account.
Here is gist of code:
<html>
<head>
<title>Inline Installtion</title>
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/jjkkhnadaddgofdoapkbdemklgkcnmld">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="section">
<div class="row">
<div class="col-sm-2">
<div class="">
<h5 class=""></h5>
</div>
</div><!-- left div/column -->
<div class="col-sm-8 form_div">
<br>
<br>
<br>
<br>
<div class="form-group main_button">
<div class="col-lg-10 col-lg-offset-2">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<button type="submit" class="btn btn-primary" id="install-button">Add to Chrome</button>
</div>
<div class="col-lg-4"></div>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="">
<h5 class="center"></h5>
</div>
</div><!-- right div/column -->
</div><!-- row -->
</div><!-- section -->
</div><!-- container -->
<script>
$(document).ready(function() {
function successCallback(e)
{
console.log("Success");
console.log(e);
}
function failureCallback(e)
{
console.log("Failure");
console.log(e);
}
$("#install-button").click(function(event) {
chrome.webstore.install("https://chrome.google.com/webstore/detail/jjkkhnadaddgofdoapkbdemklgkcnmld", successCallback, failureCallback);
});
});
</script>
</body>
</html>
So my question is: Is it possible to do it? If yes, how do I enable inline installation for Google Spreadsheet AddOn?
Help is much appreciated. Thank You.
No, Google doesn't allow this to embed add-on in your website.
there is another way to show your Google Apps Add-on in your website.
Just show the Marketplace Links or Snapshots on the website like Survey Monkey did.
LINK
OR
Scrap the data from marketplace in the HTML format and show it on the website.
Follow the Publishing an Add-on which details the necessary steps to publish this as Add-on. Add-ons are cannot be found in Chrome Webstore as the webstore is for Apps and Extensions. Add-ons are harbored in Google Marketplace.
If you want to use it, just go to Google Marketplace and type the name of the Add-on you created. You will be asked to install it, allow permission and finally be able to use it. You can check if it's successfuly installed by checking the Add-ons menu button in the spreadsheet.

Fancy box will not work

here is my codepen:
`
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
<div class="container">
<div class="row">
<div class="col-sm-9" id="mainContent">
<a class="fancybox" rel="group" href="img/1.jpg"><img src="img/1a.jpg" alt="" /></a>
<a class="fancybox" rel="group" href="img/me2.jpg"><img src="img/me3.jpg" alt="" /></a>
</div>
</div>
</div>
`
http://codepen.io/anon/pen/gMbmzZ
I can't get this fancy box to work for the life of me. I have checked the file path for the css and the javascript and those should be good. I have also made sure to import jquery into my html file.
no matter what i do i can't get it to work. any help is appreicated.

How to create a dialog within page with jquery mobile?

Here is my code. I build 20 questions dynamically. So I need to create a dialog for each of them. It's a mobile application, built using jquery mobile. So I prefer to use the jquery mobile dialog functionality.
I know for sure it can be done, just not sure how.
<div data-role="page" id="Survey">
<div class="quest">
#Html.DisplayFor(modelItem => item.Text)<div class="quest_com">
Comments</div>
</div>
<div data-role="page" id="dialog">
<div data-role="header">
<h1>
Dialog</h1>
</div>
<div data-role="content">
<div class="center-wrap">
<textarea style="width: 320px" title="Comments">
</textarea><a data-rel="dialog" data-role="button">Save</a>
</div>
</div>
</div>
</div>
You cannot have a page nested in another page for it to work. Your 20 questions should each be setup as their own jQuery Mobile page elements.
<div data-role="page" id="Survey">
...
<a data-rel="dialog" href="question-dialog-1">Question 1</da>
</div>
<div data-role="page" id="question-dialog-1">
...
</div>
Here is a live example of it in action: http://jsfiddle.net/shanabus/ZfBvB/
That should solve what you are looking to do.
Here is the documentation on jQuery Mobile dialogs.

Resources