i have a problem using alert in html.
I have a controller in Java that sends
model.addAttribute("borrowedAlready",1);
and I need to take it from html.
here's code i have but doesn't seem to work.
<div>
<script type="text/javascript">
var borrowed = '${borrowedAlready}';
if(borrowed== 1){
alert("Borrwed Already.");
}
</script>
</div>
Need help
Related
I want to call java method with parameter form .vm file can you please give me a simple example for it.
mail.vm
<HTML>
<head>
<script >
function functionUpdate(val){
alert(val);
alert(getElementById(val).value);
//now here i wanna call java method from my java class with 'val' as parameter
}
</script>
</head>
<BODY>
<br>
<span style='font-family:Arial; font-size:13px;'>
<p>Dear User,
<p>Please Rate the Module with your experience
<form name="ratings" >
<input id="$rate" name="$rate" value="1" type="submit" onclick="functionUpdate('$rate');">
</span>
</BODY>
</HTML>
thank you
Javascript run at client side and java code runs at server side.
so you cannot directly call java method in javascript function.
although you can use ajax call using get or post method to call some servlet, and do call your methods.
I am using jquery load function in my application's masterpage.html and it is working fine. But the problem is i need to put Jquery.min.js in all my content pages in order to use jquery functionality in my content page. I don't want to include it in all pages. It should refer from my master page.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
<script type="text/javascript">
function loadContent(pagename)
{
$("#output").load(pagename);
}
</script>
</head>
<body>
About
<div id="output"></div>
</body>
</html>
about.html
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
<div id="content">
This is about page !!
</div>
As you see my about.html again am including jquery in order to use it in my about.html page. How to avoid this in all pages ? Please help
No, it is not possible . You have to include it in all pages where you are using jquery
Instead of referring to the url like below ,
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
You can download the jquery library to your project path and use it like
<script src="project_name/folder_name/jquery.min.js">
But it is compulsory to include jquery in all pages
Hope this helps !!
I can't give you a best answer, these is my advice
the jQuery file had better include at the bottom in body tag.
If you use the jQuery,you must include it.
Hey I'm completley new to jquery and java.
As shown in the picture I have two texts that slides down which have to work separate, but the right one doesnt work properly.
http://s7.directupload.net/file/d/3485/3xjuqtbh_jpg.htm
Here my jquery code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle();
});
});
</script>
<script>
$(document).ready(function(){
$("enter").click(function(){
$("pi").slideToggle();
});
});
</script>
and my HTML code:
<div id="Max Mustermann">
[...]
<p style="display:none;">Hallelulja</p><button>Read more...</button>
</div>
<div id="Max Mustermann 2">
[...]
<pi style="display:none;">Hallelulja</pi><enter>Read more...</enter>
</div>
How does the code have to look that the right one work properly?
Thanks for every Help!
1) Try giving your p and button some id or class , so that it would know which element to toggle
2) change your pi and enter to p or button tag
3)Only one $(document).ready fucntion is required. Put all your scripts into that.
4)You can also try giving display:none using CSS class.
5)If there are gonna be many number of slideToggle() functionality, rather than writing it for each button , you need to write the code generically.
Please see the edited code below
HTML:
<div id="Max Mustermann">
[...]
<p id="para-1" class="displaynone">Hallelulja</p>
<button id="button-1">Read more...</button>
</div>
<div id="Max Mustermann 2">
[...]
<p id="para-2" class="displaynone">Hallelulja</pi>
<button id="button-2">Read more...</button>
</div>
CSS:
.displaynone{display:none;}
Script:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#button-1").click(function(){
$("#para-1").slideToggle();
});
$("#button-2").click(function(){
$("#para-2").slideToggle();
});
});
</script>
I'm planning to use AJAX to trigger a java servlet method which checks whether an email is already in our system or not. Then when this has completed, if the email is not in our system it will dsiplay an overlay to allow the user to accept the T&Cs, if it is already in the system it will prompt them otherwise.
Being new to AJAX and that though I am confused as to how this done/fail/always stuff works. How can I trigger this emailvalidation method, and how do I then define whether it was successful or not?
You need to the following code to validate email using AJAX:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function emailCheck(){
var email = document.getElementById('email').value;
var xmlhttp=new XMLHttpRequest();
var params = "email="+email;
xmlhttp.open("POST","emailcheck.jsp",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
if(xmlhttp.responseText == '0'){
document.getElementById('msg').innerHTML='Email already exists.';
}
else{
document.getElementById('msg').innerHTML='Email valid.';
document.getElementById('tnc').style.display='block';
}
}
}
xmlhttp.send(params);
}
</script>
</head>
<body>
<form>
Email: <input type="email" name="email" id="email" onblur="emailCheck()" required><div id="msg"></div>
<br>
<div id="tnc" style="display: none;">
<!-- T&C here -->
</div>
</form>
</body>
</html>
The onblur event will call emailCheck() function, which contains the AJAX code to perform the required task. Also note that the email is being sent using POST method.
Your emailcheck.jsp should simply output(or print) 0 if the email already exists.
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.