I am trying to create a model in angularJS with angular UI, and I tried to use this code in my page's controller
$scope.insertEvent = function() {
$modal.open({
templateUrl: 'views/overlays/insert-event.html'
});
};
Inside insert-event.html it looks like this:
<section class="overlay overlay-insert-event">
<span class="bg"></span>
<form class="wrap">
<header>
Insert an Event
</header>
<div class="main">
<label>Name<input type="text" ng-model="newEvent.name" name="name" /></label>
<label>Start<input type="text" date-picker ng-model="newEvent.start" name="start" /></label>
<label>Stop<input type="text" date-picker ng-model="newEvent.stop" name="stop" /></label>
</div>
<footer>
<button ng-click="insertEventSubmit()">Insert</button>
<a ng-click="insertEventReset()">Cancel</a>
</footer>
</form>
</section>
Now the problem is that when I open it, the background of the overlay with the semi-tranparent black appears, but the content doesn't appear. I hope someone can help me understand how this works. Thank you in advance, Daniel!
Where is your views folder located? Try '/views/overlays/insert-event.html' if it is directly located under the project.
Try wrapping the HTML for your modal content in proper HTML tags with an ng-app directive defined. Worked for me when I also got just the background overlay when opening the modal.
<html>
<head>
<title>
Modal
</title>
</head>
<body>
<div ng-app="yourAppName">
<<<YOUR_CONTENT>>>
</div>
</body>
</html>
Related
I am trying to change the value of a text area and clicking the button to submit it, but my code doesn't seem to click on the target. What could I be doing wrong? Could it be that the modal is preventing the click?
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>
<form id="form1" name="form1" method="post">
<p>
<input type="button" value="submit" onclick="setValue()" />
</p>
<p>
</p>
</form>
<script type="text/javascript">
function setValue() {
document.getElementById('set').value = "5d10";
document.getElementById("throw").click();
}
</script>
</p>
</div>
</div>
Edit:
omg, I am SO sorry. I did not explain this well. I wrote this almost at 2 am my time. I was tired and frustrated (i spent a few hours trying to find what I was doing wrong) and did not explain myself properly. Let me try again.
What I posted was a snippet of the code where I believe is the problem since the function bit that modifies "set" does work, but the part that is supposed to click on "throw" doesn't. (ignore that empty p).
I am editing the source code of this git: https://github.com/MajorVictory/3DDiceRoller
I have managed to edit a few things like adding buttons and setting a modal from where the button you see in the snippet operates from. Visual reference: enter image description here
Set and Throw
In short, "document.getElementById('set').value = "5d10";" works, but "document.getElementById("throw").click();" doesn't.
There is no element called 'set' in your html code.
The correct code is this:
<!DOCTYPE html>
<html>
<head>
<title>Training File Upload</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p></p>
<form id="form1" name="form1" method="post">
<input type="button" id='set' value="submit" onclick="setValue()" />
</form>
<script type="text/javascript">
function setValue() {
document.getElementById('set').value = "5d10";
}
</script>
</p>
</div>
</div>
</body>
</html>
I'm trying to use Selenium in python to web scrape some data that is behind a login page. By viewing source, the page source code is as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>sometitle</title>
</head>
<body>
<div id="id1"></div>
<div id="wrapper">Loading...</div>
<div id="id2">
... some code ...
</div>
... some code ...
<script data-main="main" src="libs/requirejs.js"></script>
</body>
</html>
I tried to use the following code to log into system and go to the next page, but it cannot find username/password elements in the above source code:
from selenium import webdriver
browser = webdriver.Chrome()
username = 'username'
password = 'password'
browser.get("https://sometitle.com")
browser.find_element_by_name("callback_0").send_keys(username)
browser.find_element_by_name("callback_1").send_keys(password)
browser.find_element_by_name("callback_2").click()
I then examined elements by inspect elements and found the elements on that page:
<div id="wrapper"><div id="login-base" class="base-wrapper">
<div id="header" class="clearfix">
...
</div>
<div id="content" class="content"><div class="container-shadow" id="login-container" style="background-image: url(../images/box-bg.png);">
<br>
<h1>Header</h1>
<form action="" method="post" class="form small">
<fieldset>
<div class="group-field-block">
<label class="short">Username:</label><input type="username" name="callback_0" value="" data-validator="required" required="" data-validator-event="keyup">
</div>
<div class="group-field-block">
<label class="short">Password:</label><input type="password" name="callback_1" value="" data-validator="required" required="" data-validator-event="keyup">
</div>
<div class="group-field-block float-left">
<input name="callback_2" type="submit" class="button" index="0" value="Login">
</div>
<ul class="link-box float-left"></ul>
</fieldset>
</form>
</div>
</div>
</div>
</div>
My question is - how can I locate the username/password/submit elements on the page that is only visible from inspect elements but not page source? Did some research, seems the website was built as dynamic website and it's redirecting to other page via jquery or javascript or something. I don't quite understand what's going on. Really appreciate some help or some insights!
I am using Angular JS and all my views are separately split as different HTML template files. Using Angular JS Ui-Router i am changing my views(login.html template is loaded into index.html). One of my html template (login.html) has a javascript code . Template is as shown below
<div class="app-page app-login" data-page="login">
<div class="app-content">
<div class="app-section">
<input class="app-input" placeholder="john.doe#gmail.com">
<input class="app-input" placeholder="●●●●●" type="password" onfocus="this.placeholder = ''" onblur="this.placeholder = '●●●●●'">
<div class="app-button blue">
Login
</div>
<div class="app-button blue">
Create Account
</div>
</div>
</div>
<div class="footer">
Copyrights ©
<script>
document.write((new Date()).getFullYear());
</script>
</div>
When i change the view the script in the template is not getting executed. What i expect at runtime is "Copyright # 2015". Is this a known limitation or any hack prevention technique by browsers?
When i place it in my main HTML file its working fine.
Why dont you use Angular controller to get current year from a $scope variable then print it normal? Like this:
Controller.js
$scope.currentYear = (new Date()).getFullYear();
view.html
<div class="footer">
Copyrights ©{{currentYear}}
</div>
I have a modal and in that modal I want to add a ui-grid. The problem is that I don't want tot set fixed size. It seems that the class "ui-grid-pinned-container-" is not calculated as we expect.
I know that something similar has been fixed on https://github.com/angular-ui/ng-grid/issues/1296. But it seems to not work.
I'm using C# with angular JS and the modal is a patial view that look like this:
<script type="text/ng-template" id="company">
<div class="modal-header">
<h3 ng-bind="title"></h3>
</div>
<form class="form-horizontal" role="form" name="formName" novalidate>
<div class="modal-body">
<!--the following styles only works inline - do not remove-->
<div ui-grid-selection ui-grid="gridOptions" class="grid-class"></div>
</div>
</form>
<div class="modal-footer">
<button ng-click="cancel()">Close</button>
<button ng-click="select()">Select</button>
</div>
Do you got any thoughts how this can be solved?
This link looks like it may help - http://ui-grid.info/docs/#/tutorial/213_auto_resizing
Include ui.grid.autoResize as an app dependency, and add it as a directive to your grid element, the same as you're doing with ui-grid-selection.
After some investigation I found an attribute that can be added to the grid and this is
ui-grid-auto-resize
Using this will re-size the grid accordingly.
I'm trying to get a hidden form CLASS to show onclick of a class.
Heres my code:
<div class="product">
<input type="submit" class="clickme" />
<script>
document.getElementsByClassName('clickme')[0].onclick = function(){
document.write('<form class="etc"><label>Etc</label><select></select>');
};
</script>
</div>
<div class="product">
<input type="submit" class="clickme" />
<script>
document.getElementsByClassName('clickme')[0].onclick = function(){
document.write('<form class="etc"><label>Etc</label><select></select>');
};
</script>
</div>
<div class="product">
<input type="submit" class="clickme" />
<script>
document.getElementsByClassName('clickme')[0].onclick = function(){
document.write('<form class="etc"><label>Etc</label><select></select>');
};
</script>
</div>
The forms inside the scripts are styled.
I want the click to show only the content in the script, however nothing is working, Alerts work fine - So my question is can i use HTML in Scripts? And if so - based on what you see in this code, how can i do that?
I know this is not really what you expect as answer but I believe you can pretty much what you are trying to do with jquery click and jquery html.
Hope this helps