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>
Related
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
Source HTML look like this :
<script id="during-reserve-tpl" type="text/x-lodash-template">
<div class="gd-row">
<div class="gd-col gu16">
<div class="emailModule message module-tmargin">
<div class="error-msg"></div>
<div class="register brdr-btm">
<div class="jbv jbv-orange jbv-buy-big jbv-reserve">Buy Now</div>
</div>
<div class="topTextWrap brdr-btm tmargin20">
<div class="subHeading">
Only one phone per registered user
<p>
First come, first serve!
</p>
</div>
</div>
</div>
</div>
</div>
</script>
When I code : IWebElement buy = driver.FindElement(By.CssSelector(".jbv.jbv-orange.jbv-buy-big.jbv-reserve")); It says Element not found.
I tried putting By.ClassName with while spaces but it says, compound classes are not supported.
Is there any alternative to click it ?
driver.FindElement(By.cssselector("div.jbv.jbv-orange.jbv-buy-big.jbv-reserve"))
In the above example css selector looks for div tag with name and it will look for all the dot with space
Try this By.xpath("//*[contains(#class, 'jbv')]") if it works.
You can try either of these:
IWebElement buy = driver.FindElement(By.CssSelector("div.register>div"));
OR
IWebElement buy = driver.FindElement(By.CssSelector("div.register"));
I'm building a webapp (using java,spring,freemarker and tiles) with tinyMCE editor.
I've added all files to classpath, everything is on the right place, tinyMCE editor is ALMOST correctly loaded...
There are several fields in my form, text inputs, options, buttons, labels etc... but the problem occurs when I run this form. tinyMCE replaces the whole form, not just textarea and puts that form inside itself - into tinyMCE editor area.
I am following basic installation found here http://www.tinymce.com/wiki.php/Installation
My code is almost the same as here, has more elements in form.
Is there any solution for this? Is this a standard behavior?
I run it on FF 13.0.1 if it matters...
my init code in form.ftl file is:
<#import "../spring.ftl" as spring>
<#assign form=JspTaglibs["http://www.springframework.org/tags/form"]>
<html>
<head>
<script type="text/javascript" src="/resources/tinymce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
height : "480",
mode : "textareas"
});
</script>
</head>
<body>
<div id="content">
<#form.form>
<input type="text" id="title"/><br>
<input type="text" id="author"/><br>
<textarea id="content"></textarea><br>
<button type="submit"/> <button type="reset"/>
</#form.form>
</div>
</body>
</html>
Ok
I've found the solution. The problem was that I had two elements with the same id="content", there was
<div id="content">...</div>
and
<textarea id="content"></textarea>
when I changed it to be unique it resolved the problem.
I am trying to integrate the jQuery Masonry library with my GWT project. However I cannot make the library to work with the containers and elements generated by GWT. But it does work if I rewrite the generated GWT HTML directly in my HTML page.
This how my GWT EntryPoint looks like
public class Sample implements EntryPoint {
//In here the text has random lengths to achieve different div blocks to work with Masonry
private HTML label1 = new HTML("Text..");
private HTML label2 = new HTML("Text..");
private HTML label3 = new HTML("Text..");
private HTML label4 = new HTML("Text..");
private Image image1 = new Image("images/samsung.jpg");
private AbsolutePanel hPanel = new AbsolutePanel();
public void onModuleLoad() {
DOM.setElementAttribute(hPanel.getElement(), "id", "content");
image1.setSize("230px", "400px");
HTML html = new HTML(image1.toString());
html.setStyleName("item");
hPanel.add(html);
label1.setStyleName("item");
hPanel.add(label1);
label2.setStyleName("item");
hPanel.add(label2);
label3.setStyleName("item");
hPanel.add(label3);
label4.setStyleName("item");
hPanel.add(label4);
RootPanel.get("wrapper").add(hPanel);
}
}
I also have a css file declared like this:
#wrapper{
margin: 0 auto;
width: 1000px;
}
.item{
padding: 10px 10px;
width:230px;
float: left;
}
This generates the following HTML code:
<div id="wrapper">
<div id="header">
<h1>JQuery, Masonry, GWT, GQuery Test</h1>
</div>
<div style="position: relative; overflow: hidden;" id="content">
<div class="item">
<img src="images/samsung.jpg" class="gwt-Image"
style="width: 230px; height: 400px;">
</div>
<div class="item" style="">
Text
</div>
<div class="item">text</div>
<div class="item" style="">text</div>
<div class="item"><img src="images/samsung.jpg" class="gwt-Image"
style="width: 230px; height: 400px;">
</div>
<div class="item">text</div>
</div>
</div>
And finally in my HTML page I have the jQuery call which looks like this:
<script type="text/javascript" charset="UTF-8" language="javascript"
src="scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" charset="UTF-8" language="javascript"
src="scripts/jquery.masonry.js"></script>
<script type="text/javascript" charset="UTF-8">
$(document).ready(function(){
$('#content').masonry();
});
</script>
When I execute this GWT application the Masonry library will not work and will not render the expected output. However, when I copy the HTML generated by GWT and paste it directly into the HTML page the library will work correctly and will render the expected output.
I followed this tutorial in the Masonry website http://masonry.desandro.com/docs/intro.html . Can somebody point me out what could be the reason why this does not work with the GWT generated HTML??
At the time of your document ready the entrypoint has not been executed yet. So the DOM is not there yet.
To avoid this problem you could just use GWTQuery instead or call javascript from gwt signaling your DOM update. This would look something like this:
JavaScript:
function domUpdated(){
//do you jquery stuff here...
}
GWT:
private native void tellJavascriptWeAreDone()/*-{
$wnd.domUpdated();
}-*/;
Looks like the #content-tag doesn't exist yet on document.ready. Just try to stop the program there (debugger?) and check what is generated as HTML.
Could be that the ready-event is also the start point of the javascript GWT generated, and then the id could be set later :)
Sometimes this works.
$(window).load(function() {
// executes when complete page is fully loaded
//including all frames, objects and images
var class1 = $('textarea[name="class1_members"]');
var class0 = $('textarea[name="class0_members"]');
}
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.