I am trying to build a .net core project that will use the google places api to autocomplete an address. To test the process I copied the demo code from google and put it in the .net core template generated by visual studio 2017. The autocomplete doesn't work, but if I change the .cshtml to .html and navigate to it manually it works fine.
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete Address Form</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<style>
#locationField, #controls {
position: relative;
width: 480px;
}
#autocomplete {
position: absolute;
top: 0px;
left: 0px;
width: 99%;
}
.label {
text-align: right;
font-weight: bold;
width: 100px;
color: #303030;
}
#address {
border: 1px solid #000090;
background-color: #f0f0ff;
width: 480px;
padding-right: 2px;
}
#address td {
font-size: 10pt;
}
.field {
width: 99%;
}
.slimField {
width: 80px;
}
.wideField {
width: 200px;
}
#locationField {
height: 20px;
margin-bottom: 2px;
}
</style>
</head>
<body>
<br />
<br />
<br />
<br />
<div id="locationField">
<input id="autocomplete" placeholder="Enter your address"
onFocus="geolocate()" type="text"></input>
</div>
<table id="address">
<tr>
<td class="label">Street address</td>
<td class="slimField">
<input class="field" id="street_number"
disabled="true"></input>
</td>
<td class="wideField" colspan="2">
<input class="field" id="route"
disabled="true"></input>
</td>
</tr>
<tr>
<td class="label">City</td>
<!-- Note: Selection of address components in this example is typical.
You may need to adjust it for the locations relevant to your app. See
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
-->
<td class="wideField" colspan="3">
<input class="field" id="locality"
disabled="true"></input>
</td>
</tr>
<tr>
<td class="label">State</td>
<td class="slimField">
<input class="field"
id="administrative_area_level_1" disabled="true"></input>
</td>
<td class="label">Zip code</td>
<td class="wideField">
<input class="field" id="postal_code"
disabled="true"></input>
</td>
</tr>
<tr>
<td class="label">Country</td>
<td class="wideField" colspan="3">
<input class="field"
id="country" disabled="true"></input>
</td>
</tr>
</table>
<script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
var placeSearch, autocomplete;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};
function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')),
{ types: ['geocode'] });
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', fillInAddress);
}
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=MYAPIKeythat works in html&libraries=places&callback=initAutocomplete"
async defer></script>
</body>
</html>
This issue was that the wrong API was activated on google. I enabled it in google and it works in the project now. I have no idea why it worked in the plain html.
Related
At the core, I am trying to generate a table with links that can be clicked on a reload of a PartialView. Everything is working except I cannot get the page to stop refreshing. What I would like to do is only load the PartialView inside of the researchDiv. I do have <add key="UnobtrusiveJavaScriptEnabled" value="true" /> in the web.config.
I've changed the view and partialview to now use ajax, but the same issue is occurring and I'm not entirely sure of what to do. If I click a link the entire page refreshes instead of just the htmlContainer.
In my _LayoutDashboard I do have the unobtrusive jscripts, and when the page renders there are 0 Console errors.
<script src="~/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript">
This is the view
#model Stocks.BLL.ExecutingTrades.Model.WatchList.ExeTradesWatchList
#{
ViewBag.Title = "WatchList";
Layout = "~/Views/Shared/_LayoutDashboard.cshtml";
}
<style>
#customers {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 20%;
border: 1px solid black;
}
#customers td, #customers th {
border: 1px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(even) {
background-color: #f2f2f2;
}
#customers tr:hover {
background-color: #ddd;
}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #04AA6D;
color: white;
}
.float-container {
border: 3px solid #fff;
padding: 20px;
}
.float-childsmall {
float: left;
}
.float-child {
width: 80%;
float: left;
height: 1000px;
}
</style>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<p>Last Update: #Html.Label(DateTime.UtcNow.ToString()) - Time in UTC</p>
<div class="float-container">
<div class="float-childsmall">
#foreach (var watchList in Model.ViewExecutingTradesUserWatchListFollowShort)
{
<table id="customers">
<caption class="text-center"><h2>#watchList.WatchListName</h2></caption>
<caption class="text-center"><p style="font:10px;">#watchList.WatchListDescription</p></caption>
<tr>
<th>Ticker</th>
</tr>
#foreach (var ticker in Model.ViewUserWatchListTickerModel.Where(y => y.UserWatchListId == watchList.UserWatchListId).ToList())
{
<tr>
<td><a target="_blank" href="https://finviz.com/quote.ashx?t=#ticker.Ticker">#ticker.Ticker </a></td>
<!--<td>
#{
<button type="button" class="btn" id='wlButton_#watchList.WatchListName+#watchList.UserWatchListId+#ticker.Ticker'>
#Html.DisplayFor(modelItem => #ticker.Ticker)
</button>
}
</td>-->
<div class="btnB" id='div_#watchList.WatchListName+#watchList.UserWatchListId+#ticker.Ticker'>
<p class="category-title">#ticker.Ticker</p>
</div>
</tr>
}
</table>
}
</div>
<div class="float-child" id="researchDiv">
<div id="htmlContainer">
#Html.Partial("_Research", new ExecutingTrades.Models.TickerInMem() { Ticker = "META" });
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(".btnB").click(function () {
$.ajax({
url: '#Url.Action("_Research", "Dashboard")',
type: "GET",
data: { ticker: this.id.substring(this.id.lastIndexOf('+')) },
cache: false,
async: true,
success: function (data) {
$("#htmlContainer").html(data);
}
});
});
})
</script>
_Research which is the partialview
#model ExecutingTrades.Models.TickerInMem
<!-- TradingView Widget BEGIN -->
<style>
.tradingview-widget-container {
border: 3px solid #fff;
padding: 20px;
height: 650px;
}
</style>
<div class="tradingview-widget-container">
<div class="tradingview-widget-copyright"><span class="blue-text">#Model.Ticker</span> by TradingView</div>
<script type="text/javascript">
alert(#Model.Ticker);
</script>
<script type="text/javascript">
new TradingView.widget(
{
"autosize": true,
"symbol": "NASDAQ:#Model.Ticker",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "light",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"container_id": "tradingview_37810"
}
);
</script>
</div>
And the Controller
public ActionResult _Research(string ticker)
{
if (string.IsNullOrWhiteSpace(ticker))
return View();
var model = new TickerInMem();
model.Ticker = ticker.Split('+').Last();
model.Exchange = "NASDAQ";
return PartialView("_Research", model);
}
When I debug - everything works, i can hit the partial view being called and the model is correct.
When the page loads:
When clicking on a link:
All I really want to do is load the 2nd graph which I click it to where the partial view in rendered on the view.
So my MVC and Ajax are correct, the real issue was inside of the tradingview control, I had removed the div it was referencing in the container.
"container_id": "tradingview_37810"
I need to create like this model in PDF :
In html works great like this :
But when i loaded to pdf(barryvdh dompdf) I got this result? i'don't know why some content changes his place
This my html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
table{
width: 100%;
}
table tr td{
text-align: left;
border:1px solid;
display: inline-block;
width: 45%;
height:150px;
margin-top: 2px;
}
</style>
</head>
<body>
<table>
<tr>
#foreach($colisenattent as $coli)
<td>
{{$coli->data}}
</td>
#endforeach
</tr>
</table>
</body>
</html>
The issue lied in your css, At first glance though it looks ok.
At first display: inline-block; this css breaks the dompdf code so you will end up in some dompdf error,
Dompdf\Exception
The row #1 could not be found, please file an issue in the tracker with the HTML code
So you need to remove that.
use vertical-align: top; instead.I have added my own styling as well to make it close to ideal.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css" media="all">
table{
width: 100%;
border-collapse: separate;
border-spacing: 5px 0px 1px 0px;
}
th, td{
text-align: left;
vertical-align: top;
border: 3px solid;
border-radius: 5px;
width: 45%;
height: 150px;
margin: 2px 2px 2px 2px;
padding: 2px 2px 2px 2px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>Text Text</td>
<td>Text Text</td>
</tr>
</thead>
<tbody>
<tr>
<td>Text Text</td>
<td>Text Text</td>
</tr>
<tr>
<td>Text Text</td>
<td>Text Text</td>
</tr>
</tbody>
</table>
</body>
</html>
DEMO Image
The HTML is currently creating a single row with n columns. Do you instead want to create n/2 rows with two columns?
If so, try something like this:
<table>
#for($i = 0; $i < count($colisenattent); $i += 2)
<tr>
<td>
{{ $colisenattent[$i]->data }}
</td>
<td>
#if (isset($colisenattent[$i + 1]))
{{ $colisenattent[$i + 1]->data }}
#endif
</td>
</tr>
#endfor
</table>
I am working with pdf-reactor and cannot make the header and footer to be in every page. I can, if I have only those two elements, header and footer, they are showing, but soon as I enter a single letter, footer disappears.
<div class="header">
<table class="header header-footer">
<tr>
<td class="invoicetext">header</td>
</tr>
</table>
</div>
<div class="footer">
<table class="footer header-footer">
<tr>
<td class="pagecounter">footer1</td>
</tr>
</table>
</div>
And this is the css:
#page {
margin: 2cm 2.5cm 3cm 2.5cm;
#top-left {
content: element(headerIdentifier);
vertical-align: bottom;
}
#bottom-left {
content: element(footerIdentifier);
vertical-align: top;
width: 100%;
}
#bottom-right {
content: element(companyIdentifier);
vertical-align: top;
margin-top: 4mm;
width: 100%;
}
}
div.spacing {
margin-top: 1.2em;
}
div.footer, div.header {
font: 9pt arial, sans-serif;
width: 100%;
}
div.footer {
position: running(footerIdentifier);
}
div.header {
position: running(headerIdentifier);
}
No matter where I add another div, on the top, bottom, between the header and footer, footer just disappears. How to prevent this from happening.
We can reproduce this behavior here (issue #7827 in our internal tracking system). It seems to only occur when the running elements contain tables and when they are followed by only inline elements or text.
As a workaround, you could wrap the content after the running elements in a block element like this:
<div class="header">
...
</div>
<div class="footer">
...
</div>
<p>Some Text</p>
OS: OSX macOS Sierra 10.12.6
Selenium Version: 3.6.0
Browser: Safari
Browser Version: 11.0.1(12604.3.2)
Expected Behavior - click() action should work on a button located inside an iframe in Safari browser
Actual Behavior - No action when performed button.click() action on Safari browser
Steps to reproduce -
Open safari browser
Access web application login screen
Enter valid credentials and click on Login button, pop up appears
Switch to iframe
Click on button placed inside an iframe
No action when clicked on button. Same code is working fine in other browsers(Chrome, Mozilla, IE11)
Below is the code:
SafariOptions options = new SafariOptions();
options.setUseCleanSession(true);
driver = new SafariDriver(options);
driver.manage().window().maximize();
driver.get("testurl");
driver.findElement(By.id("UN")).sendKeys("admin");
driver.findElement(By.id("UN")).sendKeys("admin$");
driver.findElement(By.id("Login")).click();
driver.switchTo().frame(driver.findElement(By.xpath("//*[starts-with(#class,'dijitDialog') and contains(#style,'z-index: 950;')]//*[starts-with(#id,'AxDojo_Dialog_frame')]")));
driver.findElement(By.xpath("//*[#id='ButtonPlaceHolder']/button[2]")).click();
No action when last step is executed.
As work around found an alternate to perform click on the button with below code
driver.findElement(By.xpath("//*#id='ButtonPlaceHolder']/button[2]")).sendKeys(Keys.ENTER);
But like this we need to change in many areas, Selenium is browser independent and maintenance of code browser wise is tedious task to us. Please can anyone look into this issue.
Please find HTML code inside iframe.
<iframe id="AxDojo_Dialog_frame_1508320744505" name="AxDojo_Dialog_frame_1508320744505" style="border: 0px; width: 605px; height: 159px;" width="605" height="136px" scrolling="auto" frameborder="0" src="about:blank" axpageload="1"></iframe>
#document
<!DOCTYPE html>
<html style="overflow-y: hidden"><head>
<title>Login</title>
<link href="../AxCommon/Styles/ECDefault/main.css" type="text/css" rel="stylesheet">
<script language="javascript" type="text/javascript" src="../Packages/Scripts/JQuery/jQuery.js"></script>
<script type="text/javascript" language="javascript" src="../AxCommon/Scripts/AxSystemBroadcast.js"></script>
<script type="text/javascript" src="../AxCommon/Scripts/AxMyParent.js"></script>
<script type="text/javascript" src="./Scripts/AxDialog.js?v=14082015"></script>
<style type="text/css">
.DialogBtn{width: 80px; font-size: 10pt;white-space:nowrap;}
.DialogCustomBtn{font-size: 10pt;white-space:nowrap;}
#popupMandatoryDiv { display:none;position:relative;height:auto;background:#FFFFFF;z-index:999999;overflow:auto;border:1px solid black;padding:5px 20px 10px 18px;font-size:12px;}
li {list-style: none; }
/*li:before {content:'\2022'; display: block; position: relative; max-width: 0px; max-height: 0px; left: -13px; top: -4px; color: red; font-size: 20px;padding-right: 5px;}*/
li:before {content:'\2217'; display: block; position: relative; max-width: 0px; max-height: 0px; left: -13px; top: -2px; color: red;font-weight:bold}
</style>
</head>
<body>
<div id="divMask" style="height: auto; width: auto;">
<table id="Table1" cellspacing="6" cellpadding="4" border="0">
<tbody><tr>
<td rowspan="3" style="width: 3px; height: 5px" valign="top" align="center"></td>
<td colspan="2" valign="top" align="center" height="10"></td>
</tr>
<tr style="width:100%">
<td valign="top" align="center" width="10%">
<img id="IconImage" src="../AxCommon/Images/28 information.gif">
</td>
<td valign="middle" align="left" height="5" width="90%">
<div id="divPrompt" align="left" style="DISPLAY: block; FONT-SIZE: 9pt; OVERFLOW: hidden; DIRECTION: ltr;">You are already logged into Excelicare in other active session(s). Please choose one of the options below:</div>
</td>
</tr>
<tr style="width: 100%; display: none;">
<td valign="top" align="center" width="10%">
</td>
<td valign="top" align="left" height="5" width="90%">
<div id="popupMandatoryDiv" align="left" style="DISPLAY: block; FONT-SIZE: 9pt; OVERFLOW: auto; DIRECTION: ltr;display:none">
</div>
</td>
</tr>
<tr>
<td valign="middle" align="center" colspan="2" style="padding-top: 10px">
<div id="ButtonPlaceHolder"><button class="DialogCustomBtn" onclick="AxSysF_CloseWindow(6)">Open new session / <br>end other session(s)</button>
<button class="DialogCustomBtn" onclick="AxSysF_CloseWindow(7)">Open new session / <br>retain other session(s)</button>
<button class="DialogCustomBtn" onclick="AxSysF_CloseWindow(0)">Cancel login<br> </button> </div>
</td>
</tr>
<tr id="trchkPlaceHolder" style="visibility: hidden; display: none;">
<td> </td>
<td valign="middle" align="left" colspan="3" id="tdchkPlaceHolder">
<div id="checkPlaceHolder"></div>
</td>
</tr>
</tbody></table>
<div>
<br>
<div id="lblInfo" style="display: block;"><b>Note : </b> If you choose to <i>Open new session/end other session(s)</i> any unsaved data in the other session(s) will be lost.</div>
</div>
</div>
<input id="hdnTitle" type="hidden" value="Login">
<script type="text/javascript">
var strProductType = '<%=System.Configuration.ConfigurationSettings.AppSettings("ProductType")%>';
strModulePageName = 'frmdialog';
$(document).ready(function() { PageLoaded();setTimeout('self.focus()', 10);});
function setCallback(CallbackFn) {
_CallbackFn = CallbackFn;
}
document.oncontextmenu = function (event) {return false;};
</script>
</body></html>
As per the screenshot/HTML you provided, there needs some modification in your code block as follows:
The line :
driver.switchTo().frame(driver.findElement(By.xpath("//*[starts-with(#class,'dijitDialog') and contains(#style,'z-index: 950;')]//*[starts-with(#id,'AxDojo_Dialog_frame')]")));
Though the outer HTML element does have the class attribute as dijitDialogPaneContent but doesn't have style attribute as z-index: 950;.
The line :
driver.findElement(By.xpath("//*[#id='ButtonPlaceHolder']/button[2]")).click();
As you are using xpath with index e.g. button[2] the xpath becomes brittle and vulnarable. I would have prefered to expand the <button> tag and use the <span> or any other tag/text present within to construct an unique css/xpath.
Following those 2 observation you can make some minor changes in your code as follows:
driver.switchTo().frame(driver.findElement(By.xpath("//div[#class='dijitDialogPaneContent')/iframe[starts-with(#id, 'AxDojo_Dialog_frame')]")));
//clicking the first button
driver.findElement(By.xpath("//button[#class='DialogCustomBtn' and contains(.,'end other session(s)')]")).click();
In-case the loading sequence of this <iframe> is constant, our xpath would be much more generic as follows:
driver.switchTo().frame(driver.findElement(By.xpath("//div[#class='dijitDialogPaneContent')//following::iframe[1]")));
//clicking the first button
driver.findElement(By.xpath("//button[#class='DialogCustomBtn' and contains(.,'end other session(s)')]")).click();
I am trying to implement JSTL in Freemarker template. To do that, I got a sample freemarker template example and tried to incorporate JSTL namespace and trying to execute it.
Here is how my code looks right now.
<html>
<head><title>ViralPatel.net - FreeMarker Spring MVC Hello World</title>
<#assign c=JspTaglibs["http://java.sun.com/jstl/core"]/>
<style>
body, input {
font-family: Calibri, Arial;
margin: 0px;
padding: 0px;
}
#header h2 {
color: white;
background-color: #3275A8;
height: 50px;
padding: 5px 0 0 5px;
font-size: 20px;
}
.datatable {margin-bottom:5px;border:1px solid #eee;border- collapse:collapse;width:400px;max-width:100%;font-family:Calibri}
.datatable th {padding:3px;border:1px solid #888;height:30px;background-color:#B2D487;text-align:center;vertical-align:middle;color:#444444}
.datatable tr {border:1px solid #888}
.datatable tr.odd {background-color:#eee}
.datatable td {padding:2px;border:1px solid #888}
#content { padding 5px; margin: 5px; text-align: center}
fieldset { width: 300px; padding: 5px; margin-bottom: 0px; }
legend { font-weight: bold; }
</style>
<body>
<div id="header">
<H2>
<img height="37" width="236" border="0px" src="http://viralpatel.net/blogs/wp-content/themes/vp/images/logo.png" align="left"/>
FreeMarker Spring MVC Hello World
</H2>
</div>
<div id="content">
<c:set var="Salary" value="4000/>
<c:out value="${Salary}/>
<fieldset>
<legend>Add User</legend>
<form name="user" action="add.html" method="post">
Firstname: <input type="text" name="firstname" /> <br/>
Lastname: <input type="text" name="lastname" /> <br/>
<input type="submit" value=" Save " />
</form>
</fieldset>
<br/>
<table class="datatable">
<tr>
<th>Firstname</th> <th>Lastname</th>
</tr>
<#list model["userList"] as user>
<tr>
<td>${user.firstname}</td> <td>${user.lastname}</td>
</tr>
</#list>
</table>
</div>
</body>
</html>
I know the problem is with the new code I added i.e Salary and I see the following error.
freemarker.core.InvalidReferenceException: Expression Salary is undefined on line 62, column 5 in index.ftl.
at freemarker.core.TemplateObject.assertNonNull(TemplateObject.java:124)
What am I doing wrong?
Thanks
Nikhil
What you are doing wrong is not understanding how Freemarker works and thinking that it's somehow completely inoperable with JSP. As far as I can tell, you have imported JSTL in order to set and output variable values when Freemarker already does this.
Replace this:
<c:set var="Salary" value="4000/>
<c:out value="${Salary}/>
...with this:
<#assign Salary = 4000>
${Salary}
Also, rid yourself of the JSTL taglib and just learn how to use Freemarker. You will be much happier.