Whenever I click on a button in my HTML side, I'm switching to my JSP-File (localhost:8080/index.hmtl -> localhost:8080/result.jsp). But my intention is to load the JSP script in the background and put the result of the jsp on my HTML side so i still stay on localhost:8080/index.html. Summarized this is a quick overview of my HTML side:
<form action="result.jsp">
Some Input textfield: <input type="text" name="name">
<input type="submit" name="button" value="eintragen">
</form>
So, is there a special command for this or a easy way to solve this problem?
In my application, I have got an image as a button. When I record the button click event in Selenium IDE and replay it, i merely plays it back but the click event is not actually submitting the value
Ex: The submit button (which is an image) should actually submit the value to database. But when I check in the database, the value is not added there
Element Value
<input width="98" vspace="3" type="Image" height="15" border="0"
id="Image1" src="images/butt_submit.gif" value="Submit" name="Submit">
Selenium Code
selenium.click("//input[#id='Image1']");
selenium.waitForPageToLoad("30000");
Please assist.
Thanking you!
HG
The issue is not with Selenium/IDE not clicking the image. The code you're using (in HTML) will not submit the form data even if you did it manually. Did you check that first?
Anyway, if you want to use an image as the submit action for a form, add an onclick event for the image to submit the form. See this example on W3Schools for form.submit:
<html>
<head>
<script>
function formSubmit()
{
document.getElementById("frm1").submit();
}
</script>
</head>
<body>
<form id="frm1" action="form_action.asp">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="button" onclick="formSubmit()" value="Submit form">
</form>
</body>
</html>
They are using a button here but you can use that for your image.
More about HTML Forms basics: http://www.w3schools.com/html/html_forms.asp
Folks,
I am trying to add a DateTimePicker javascript file in one of the screen. On clicking the calender icon, the calender is not getting poped up.
I added the javascript file in the public/javascript folder and the image in the public/images folder.
Then I added this line in main.html:
<script type="text/javascript" src="#{'/public/javascripts/datetimepicker_css.js'}" ></script>
and this line for diaplsying the image beside the textbox:
<input type="text" styleId="demo1" name="transaction.returnDate" size="10">
<img src="#{'/public/images/cal.gif'}" onclick="javascript:NewCssCal('demo1')" style="cursor:pointer"/>
When the screen is loaded, the image is getting diaplsyed properly beside the textbox. But when I click it, the calendar is not getting displayed.
I use these two lines in my other struts application and it works fine:
<script language="javascript" type="text/javascript" src="/MediaTest/datetimepicker/datetimepicker_css.js">
<html:text styleId="demo1" name="returnForm" property="returnDate" size="10"></html:text>
<img src="/MediaTest/datetimepicker/cal.gif" onclick="javascript:NewCssCal('demo1')" style="cursor:pointer"/>
Please let me know how to make it work.
Thanks,
change styleId attribute to id
<input type="text" id="demo1" name="transaction.returnDate" size="10">
Something very weird is happening when I try to edit my index.html file .
I'm working with jsp-s and servlets , in Java.
When I try to update one of the fields , for instance :
<!DOCTYPE html>
<html>
<head><title>Bank application</title>
<link rel="stylesheet"
href="./css/styles.css"
type="text/css"/>
</head>
<body>
<table class="title">
<tr><th>Bank application</th></tr>
</table>
<br/>
<fieldset>
<legend>Bank Account Balance</legend>
<form action="show-balance">
Customer ID (id001, idffffffffffffffffdsafds002, id003):
<input type="text" name="cusdddddddddddddddddddddddddddtomerId"/><br/>
<input type="submit" value="Sddddddddddddddddddddddddddddddddddddddhow Balance"/>
</form>
</fieldset>
<br/>
// from here, the rest is the same as the above
I get this (same as before) :
Why when changing the index.html file , no change takes place ?
I'm using :
Apache 7
Xampp
Thanks
Browsers will cache HTML files unless you explicitly tell the browser to refresh (ctrl + F5). I'm guessing you're just loading the cached version of the HTML.
I want a loading gif image to appear while processing a servlet. What I do is that before processing the form, I call a JSP which contains an animated gif with a loading image. From this JSP, I send a redirect to the servlet which processes the form.
This only works well in Chrome and in Explorer, but in Firefox the image stops moving.
The action of my form is a JSP which contains the loading image and for submiting the form I have the following code:
var form = document.getElementById('reporteEstadisticoAnualArticulo');
var win = window.open("", "reporte","width=1002, height=700,location=0, menubar=0, scrollbars=1, status=1,resizable=0");
form.target = "reporte";
form.submit();
The JSP contains the following code:
<html>
<head>
<link type="text/css" href="css/Preloader.css" rel="stylesheet" />
<script type="text/javascript">
function retraso(){
var vars = getUrlVars();
var location = document.getElementById("url").value;
window.location = location+"?"+vars ;
cargarImagen();
}
function cargarImagen() {
document.getElementById("cargando").src = "images/Cargando.gif";
return false;
}
</script>
</head>
<body onload="setTimeout('retraso()',500)">
<div align="center" class="Preloader1">
<label style="font-weight: bold; font-family: arial;">Cargando Reporte</label> <br /><br />
<img id="cargando" alt="LogoNatura" src="images/Cargando.gif">
<br /><br />
<img alt="LogoNatura" src="images/logo.png">
</div>
<input type="hidden" value="<%= request.getParameter("url") %>" id="url" />
</body>
</html>
I've tried a lot of things to avoid the image to stop moving, but I haven't found a good answer. If anyone could help, I would be pleased.
This doesn't work with iframes either. Any ideas?
I faced exactly the same issue earlier. And I fixed using IFrames.
First create a HTML file and insert the image there (loading icon). Now using IFrame just refer that file. It works fine in Firefox too. What I did is, if it IE browser, I just replaced the IFrame with image directly.
<td id="tdImgLoad">
<iframe style="height:50px;text-align:right;width:225px" scrolling="no" frameborder="0" src="web/loading.htm" id="imgLoad"> </iframe>
</td>
<script>
if(isIE())
{
getElement ("tdImgLoad").innerHTML ="<img src='images/loading.gif'>";
}
</script>
I already solved my problem. What I did is that I used ajax instead and now my jsp looks as follows:
<html>
<head>
<link type="text/css" href="css/Preloader.css" rel="stylesheet" />
<script type="text/javascript" src="js/acciones.js"></script>
</head>
<body onload="retraso()">
<div id ="reporte">
<div align="center" class="Preloader1" id="loading">
<label style="font-weight: bold; font-family: arial;">Cargando Reporte</label> <br /><br />
<img id='cargando' alt='LogoNatura' src='images/Cargando.gif'>
<br /><br />
<img alt="LogoNatura" src="images/logo.png">
</div>
<input type="hidden" value="<%= request.getParameter("url") %>" id="url" />
</div>
</body>
</html>
An my javascript file acciones.js contains the following function:
function retraso(){
var x = document.getElementById("reporte");
var content = x.innerHTML;
var vars = getUrlVars();
var location = document.getElementById("url").value;
var url = location+"?"+vars ;
xmlhttp = GetXmlHttpObject();
if (!xmlhttp) {
alert ("Browser does not support HTTP Request");
return;
}
var xml = xmlhttp;
xmlhttp.onreadystatechange = function () {
if (xml.readyState == 4) {
x.innerHTML = xml.responseText;
} else {
x.innerHTML = content;
}
};
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
return true;
}
I faced exactly the same issue earlier. And I fixed using setTimeout function!
Of course, ajax could also works well, but what I use is $("#form").submit() instead of ajax, which means that submit is synchronous with the gif image loading process. I think this problem may be due to Firefox's thread process bug(just one suspect). My solution is like the following code:
$.blockUI({ message: $("#loading").html() });
setTimeout(function(){
$("#form").submit();
},1);
Just like the code tells, let form's submit do not interfere with gif loading process and then problem solved!
Thanks for your attention!
I ran into this same issue and solved it by using a variation of the answer given by #Zhl. Instead of wrapping the form submit in a setTimeout call, I wrapped the UI update for the animated gif with a setTimeout. This saved me having to worry about the form submit details which in my case needed to call a server side method (ASP.NET).
<form id="myForm">
<button onclick="myPreSubmitFunction()">Do Stuff</button>
<img id="loading" />
</form>
<script>
function myPreSubmitFunction() {
setTimeout(function () {
//do UI update here which adds gif
document.getElementById("loading").src = "loading.gif";
}, 0);
//submit to come after the UI update
}
</script>
This prevents the gif animation being stopped by the action of the form being submitted in Firefox. As to how running a line of code via setTimeout might make a difference, this SO post is a worthwhile read.