I have a layout.jsp that I am using to build a page using multiple other jsp's.
In my main content jsp pages I have a button or two. In the current version I am positioning the div with the buttons relatively.
I am switching the way the page is designed. I created a div in my layout page to place the buttons into. I gave it an appButtonDiv class.
The issue I am running into is I do not know how to create a button insert it into the div. I would like to do this on document ready.
Here is the div I want to put the button(s) into.
<div class="row-fluid verticalmenubottom">
<div class="span12 verticalMenuCell appButtonDiv"></div>
</div>
Below is a example button.
<button type="submit" id="searchButton" name="searchButton"
value='<spring:message code="Generic.Search"/>'/>
Search</button>
There are some cases where I will have multiple buttons.
I haven't JSP competence, however you are asking how to add content to an element on document ready.
Using JQuery, you can do this:
$(document).ready(init);
else without JQuery, you might use the onload event of your body element:
<body onload="init()">...</body>
Then declare this function in your script tag:
function init() {
//this executes on document ready
//create your elements
var externDiv = document.createElement('div');
var internDiv = document.createElement('div');
externDiv.className = 'row-fluid verticalmenubottom';
internDiv .className = 'span12 verticalMenuCell appButtonDiv';
externDiv.appendChild(internDiv);
//find your button and put the new elements in it (check that your jsp don't change the id client-side)
var btn = document.getElementById('searchButton');
btn.appendChild(externDiv);
}
That's it!
You mean u want to insert a button inside a button?
or create another button inside the div?
<div class="row-fluid verticalmenubottom">
<div id="button1" class="span12 verticalMenuCell appButtonDiv"></div>
<div id="button2" class="span12 verticalMenuCell appButtonDiv"></div>
</div>
or i miss something ## ?
Related
My Question:
Is there a way i can add an infobox to a label which was created by the form:checkboxes-Tag? It should appear while hovering over the label (I know that the title attribute in html does exactly this).
Scenario:
I have a div with generated checkboxes. Those checkboxes have labels which are longer than the max-width of the containing div. As i don't want the width to be increased i thought displaying the name while hovering over the label would suffice. But as far as is know the checkboxes-Tag does not support a title-tag per item (items are computed at runtime and passed to the model).
It looks like this:
<fieldset>
<div id="selectedAccounts" style="overflow-y:scroll;overflow-x:hidden;" onchange="loadSthElse()">
<form:checkboxes path="selectedAccounts" items="${accounts}" delimiter="</br>/>
</div>
</fieldset>
As items i pass a Map<Integer,String> to fill values and labels.
The Spring Documentation says that the standard html attribute title is still available. But i can't see if or how it is used for every single item that is created as you only seem to define one title.
I tried something like
$("#selectedAccounts label").each(function(element) {
element.attr('title', element.name)
}
but it wouldn't work either.
Is there a way to make this work - Javascript, Jquery - or is the checkboxes-Tag poorly chosen?
Greetings,
Uwe
If you don't want to use title attribute (¿WHY?), you can define hover event in any hidden object you want. It also gives your code and HTML structure more readability.
HTML
<form:input type="checkbox" value="CHECKBOX1" checked="checked">
<div>all the info you want to show when hovering your checkbox</div>
CSS
input+div{display:none;}
input:hover+div{display:inline;}
I fixed this issue.
I simply added a title using dojo after generating the checkboxes.
<div id = "selectedCampaigns" onchange="loadAdSets()">
<form:checkboxes path="selectedCampaigns" multiple="true" items="${campaigns}" delimiter="<br/>"/>
<script type="text/javascript">
dojo.query("#selectedCampaigns label").forEach(function(element) {
dojo.setAttr(element,"title",element.innerHTML);
});
</script>
</div>
After setting the attribute to the innerHTML everything looks just fine.
Currently am working on Selenium Webdriver with Java
Am trying to click on a button but i can't able to click because it is hidden. Please let me know how to make the hidden element visible 1st then how can click the button.
Please give me some example and my HTML tag is:
<input id="iskpiFilterAction" type="hidden" value="1" name="isKpiFilterAction">
Hmm, your question doesn't make sense for me. But I can exactly answer for your question.
For selenium 2 (webdriver):
WebDriver driver = ...
JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;
jsExecutor.executeScript("document.getElementById('iskpiFilterAction').type = 'button';");
Result is:
This code causes changing type of element (from hidden to button), but it doesn't make sense for all of us. These two elements have different purpose/use. For more information see:
Original purpose of <input type="hidden">?
What's the point of having hidden input in HTML? What are common uses for this?
http://www.w3schools.com/jsref/dom_obj_hidden.asp
I didnt quiet understand the question.. However .. if you have a hidden object which you want to unhide dynamically using JavaScript using some trigger, this is a way you could do that:
<head>
<script>
function unhide()
{
document.getElementById("iskpiFilterAction").type = "button";
}
</script>
</head>
<body onload="unhide()">
<input id="iskpiFilterAction" type="hidden" value="1" name="isKpiFilterAction">
</body>
I am using body onload event to unhide the object so the moment this page loads you will see the button which u can then click. However if you want it some be triggered at some other event you can use the function accordingly.
Hope it helps.
Try this:
WebElement element = driver.findElement(By.id("iskpiFilterAction"));
((JavascriptExecutor) driver).executeScript("arguments[0].style.type = 'button';", element);
I have two jsp pages. The first one with "Hello World" text message. The second JSP page with "Hello JSP" text message. Now in my third JSP page I have two buttons button1 and button 2. Can someone suggest some code snippet which I can use to call the first JSP page on click of the button 1 and **on click of button 2 , it should call the second JSP page?
On click of the first button only the first jsp page value should be displayed i.e Hello World and on click of the second button only second page value should be displayed i.e Hello JSP.
Kindly suggest the approach to achieve this.
Kind regards
Just put some javascript that sets the window location to the page you want to display as the script of the button
<input type="button"
value="Button 1"
onclick="window.location.assign('HelloWorld.jsp')">
<input type="button"
value="Button 2"
onclick="window.location.assign('HelloWorldJSP.jsp')">
Put the correct addresses in there for your JSP pages. This will cause the browser to reload from the address of the JSP page, and that JSP will 'fill the browser' with its contents.
JavaScript using AJAX
<script>
function loadXMLDoc(page)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",page,true);
xmlhttp.send();
}
</script>
Code For Buttons
<button type=button onclick='loadXMLDoc("page_one.jsp")'>Button 1</button>
<button type=button onclick='loadXMLDoc("page_two.jsp")'>Button 2</button>
And inside body
<div id="myDiv"></div>
It does not make a lot of sense to "call" a JSP page. Are you trying to submit a different set of information based on which button you click (I think so)? And if you submit different information, what do you want to do with the result?
The simplest thing - have two forms that get submitted to different URLs. Clicking on button 1 should submit it to the URL of first JSP, clicking on button 2 should submit it to the URL of the second JSP. Or these could be simple GET links. If the three JSPs, a.jsp, button1.jsp, and button2.jsp are in the same (and accessible through direct web URL) directory , a.jsp could be -
Click for Hello World
Click for Hello JSP
Content of button1.jsp and button2.jsp is trivial.
Keep in mind that in general, you should not be submitting directly to a JSP URL. May I also suggest that you spend some time reading up on how JSP, servlets and HTTP work in general and in conjunction with each other?
Always try your practices to forward via the servlets, and below is one of the implementation. Set both buttons as a submit type.
Use hidden textbox for storing the clicked id/name of button inside of the form.
$("#button1").click(function() {
var buttonId = $("#buttonId").val('button1');
return true;
});
$("#button2").click(function() {
var buttonId = $("#buttonId").val('button2');
return true;
});
Submit the form and get the value of buttonId in your servlet like this,
String clickedButton = request.getParameter("hidden_name");
finally forward the page to whatever you like this,
if(clickedButton.equals("button1")){
// do your stuff
}else if(clickedButton.equals("button2")){
// do your stuff
}
Let's say I have an input button.
<input type="button" value="click here />
Then there's other HTML and Java codes.
.
.
.
.
.
Then there's a div tag.
<div>
</div>
and inside this div I want to execute these codes, but Only when I click on that button.
<% `int i = 0;
while(i<3) {
%> <div> I love you </div>
<% i++;} %>`
Java code is executed on the server. Events like clicks happen on the user's browser. So a click cannot call java code directly.
You need to:
either code the filling of the div in pure javascript,
or make an ajax call when the button is clicked, to retrieve the
content of the div from the server.
Probably Onclick event you can set the value of a hidden parameter and in div check for parameter value in script-let using if else but again java code will be executed on server and hence it will be new request to same Action otherwise use Ajax to populate data in div from sever.
you need to use ajax and servlet to acheive this.
servlet would send the code in response.
The success part of ajax would add the returned string to the div.
You would need to assign an id to div.
The ajax syntax would be
$.ajax({
url:"../servletname",
type:"POST",
data:{},
success:function(response){
$("#divid").html(response);
}
});
You need to call the servlet in the jsp using onClick function.
I don't have access to my HTML code but I have access to Javascript in the footer of my document. With that being said I would like to switch out the URL "/vistor_signup" with a new URL of my choosing. Lets say "http://www.example.com/account_signup"
And I would also like to do the same for "/user_signup", lets say swap to "http://www.example.com/master_signup"
I have to use JavaScript to do so and I don't have any understanding of JS.
How do I make this work with JS code?
My code
<div class="grid_12">
<div id="login">
<div class="panel" id="login-form">
<div id="login-promo">
<div class="clear"></div>
<h2>Visitor Sign-Up ></h2>
<h2>User Sign-Up ></h2>
</div>
</div>
</div>
</div>
</div>
you mean something like this:
var anchors = document.body.getElementsByTagName("a");
for(var i=0; i < anchors.length; i++) {
var anc = anchors[i];
if (anc.getAttribute("href") == "/visitor_signup") {
anc.setAttribute("href", "http://www.example.com/account_signup");
}
}
WARNING: due to the way browser render HTML (parsing the page, semi-sequentially fetching referenced resources, evaluating javascript along the way), it might happen that someone sees the html before your script gets executed, and even clicks the '/visitor_signup' link.
Under your limitations, esp.
No access to code
No id tag on elements
your best bet is to
use document.body.GetElementsByTagName() to find all tags
on those check the href property
change it accordingly
EDIT: This is exactly what #milan's answer does, so please disregard this one
Since you can't edit the HTML and the <h2>s aren't differentiated, using jQuery might be easier than using plain JS in order to reach the elements.
This jQuery could be:
$('#login-promo h2:first a').attr("href", "/account_signup").parent().next().find('a').attr("href", "/master_signup");
Here we are selecting the first <h2> <a> and changing its href. Then we go back tho the <a>s parent, find the next <h2> <a>and change its href too.
You can check an example in this jsfiddle.