I have a select box that directs users to another page when an item is selected. I would like to show some kind of loading.gif when the user selects an Item, so they know that something is happening. Can someone please show me how to accomplish this?
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$("sRedirect").change(function(){
$("#sRedirect :selected").not(:contains('Click Here To Select')).siblings("img").first().attr('src','loading.gif');
});
</script>
</head>
<body>
<div class="titleBar">
<div class="Logo"><a class ="backBtn" href="javascript:history.back();"> </a><img src="logotop.png" align="right" />
</div>
<br><br>
<div class="top"><br><br><h2>Step 1<br><br>Choose an Area</h2><br><br> <div>
<div class="middle">
<form name=form1>
<select name="URL" id="sRedirect" onchange="window.location.href=this.form.URL.options[this.form.URL.selectedIndex].value" onfocus="javascript:toggle();" >
<option value="" disabled="disabled" selected="selected">Click Here To Select</option>
<?=$options?>
</SELECT>
<br>
<img src="" id="myLoadingPicture"/>
</form>
</div>
</html>
Just show an image before you set the location.href.
<select name="URL" onchange="$('#myLoadingPicture').show(); window.location.href=this.form.URL.options[this.form.URL.selectedIndex].value" onfocus="javascript:toggle();" >
When you start going to another page (more specifically, start unloading a page) then the page is no longer required to respond. Therefore, even if you added an animated GIF (a simple task, just create an image element and append it to the body) there is no guarantee that it will animate, or even show up.
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 have project, where I need to add popup form. Here is my project structure.
<body>
<div class="header">ART Compiler Explorer </div>
<div class="container">
<div class="box1">
<div id="inside" >
<label for="input-file" class="custom-file-upload">Select Java File</label>
<select class="tab" name="android" id="android"> </select>
</div>
<textarea id="editor" name="field1"><?php if(isset($_POST['field1'])){echo htmlentities ($_POST['field1']);}?>
</textarea>
</div>
<div class="box1 box2">
<div id="second" >
<select class="tabb" name="launguage" id="launguage" onchange='this.form.submit()' > </select>
<button type ="button" class="btn" onclick='this.form.submit()'>Refresh</button>
</div>
</div>
</div>
</body>
I want to add popup form under div id="inside"
which have code structure like:
<button class="add" onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Add ToolChain</button>
<div id="id01" class="modal">
<div class="imgcontainer">
</div>
<div class="container_form">
</div>
</div>
The problem I am facing is The popup does not come in fully as in above link, instead it get hidden by first half text editor (see the blue colour line, which get shifted by left).
It seems popup div id "id01"make seperate space inside the div id ="inside", so not coming properly. Please suggest me how to tackle this problem as I have to add popup form under div id="inside", but this pop up form contain itself another div which make separate space.
Please help me to resolve this problem.
The popup is not coming over the textarea because of z-index, add z-index:4 to your popup modal so that it can come on top of the textarea.
.modal {
z-index:4
}
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!
On my concept design the jQuery controlling things like the calendar to appear when the input(s) at the top right are clicked on work fine, however now I'm trying to integrate this into an existing design, all these Javascript elements are not working, although I am using the same code amongst other things which already existed within old design.
I considered it to be simply a compatibility issue of the sidebar calendar, removed it entirely and still nothing. Within the console it defines "Cannot read property 'datetimepicker' of null" for example.
Live URL of the concept (all working elements): http://bit.ly/1m23oXT
Live URL of the non working site: http://bit.ly/1gxgXfx
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo HTTP_HOST; ?>Styles/jquery.datetimepicker.css" />
<script src="<?php echo HTTP_HOST; ?>Scripts/jquery.idTabs.min.js"></script>
.
<div class="header-reservations">
<div id="usual2" class="usual">
<ul>
<li>ROOM BOOKINGS</li>
<li>SPA BOOKINGS</li>
</ul>
<div id="tabs2">
<form>
<input type="text" class="header-form-input" id="datetimepicker" placeholder="21st January" />
<select class="header-form-dropdown">
<option>1 Night</option>
<option>2 Nights</option>
</select>
<select class="header-form-dropdown">
<option>1 Adult</option>
<option>2 Adults</option>
</select>
<input type="submit" class="header-form-submit blue-btns" value="BOOK" />
</form>
<span class="clearboth"></span>
</div>
<div id="tabs3">
<div class="header-tab-spa">
<h3>To Make A Spa Booking, Contact Us Here</h3>
</div>
<span class="clearboth"></span>
</div>
</div>
</div>
.
<!-- Required JS Files -->
<script type="text/javascript">
$(document).ready(function() {
$("#usual2 ul").idTabs("tabs2");
}
</script>
<script src="<?php echo HTTP_HOST; ?>Scripts/jquery.datetimepicker.js"></script>
<script type="text/javascript">
$('#datetimepicker').datetimepicker();
$('#datetimepicker2').datetimepicker();
</script>
A parenthesis is missing at the end of
$(document).ready(function() {
$("#usual2 ul").idTabs("tabs2");
}
But such a syntax error should be found using the console, not Stack Overflow. Read about the console.
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>