We Keep Coding

How to call a JSP page query?

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
}

Insert a button into a div on a jsp using document ready

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 ## ?

How to call a Java method in a different part of a JSP page

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.

Attach Jquery events to JSF data tables

Since we can apply JQuery to any JSF rendered components, as in the following question
JSF to JQuery Component Integration
After having tried that, it did work I can successfully integrate JQuery into JSF, but the problem is that whenever I re-render the h:dataTable for instance, JQuery stops working,
-I'm using RichFaces and the a4j, by the way-.
For example, I have a data table as follows
<h:dataTable id="someDataTable" value="#{backingBean.someDataModel}" var="item" styleClass="table">
<h:column>
<h:outputText value="#{item.text}"/>
</h:column>
</h:dataTable>
and I have a button that when clicked re-renders the dataTable, and repopulate it with new data.
<a4j:commandButton value="Click" reRender="someDataTable"/>
and not to forget I have this script in the page
<script>
jQuery.noConflict();
jQuery(document).ready(function () {
jQuery('.table').dataTable({
"bSort": false});
});
</script>
Now when the page is first loaded, sorting works fine, but whenever I click the button to re-render the table, the table is successfully populated with the new data from the backing bean, but the sorting doesn't work anymore.
From what I guess, I think this might has something to do with the
jQuery(document).ready()
which applies the
jQuery.('.table').dataTable();
only when the document is ready, so I was wondering if there's some events in jQuery that I can attach to the dataTable re-render event, as I'm no guru at JQuery or JS.

Just re-execute the script when the ajax request has completed.
First refactor your script into a reuseable function.
<script>
jQuery.noConflict();
jQuery(document).ready(function() {
initDataTable();
});
function initDataTable() {
jQuery('.table').dataTable({
"bSort": false
});
}
</script>
Then invoke the same function in oncomplete of <a4j:commandButton>.
<a4j:commandButton ... oncomplete="initDataTable()" />

Wait for confirmation dialog return value

I have the following jQuery code:
<script type="text/javascript" charset="utf-8">
$(function() {
initConfirmbinding();
$('#dialog').dialog({
autoOpen: false,
width: 'auto',
modal: true,
buttons: {
"Delete": function() {
$(this).dialog("close");
alert("You pressed OK!");
return true;
},
"Cancel": function() {
$(this).dialog("close");
return false;
}
}
});
function initConfirmbinding(){
// Dialog Link
$('.confirm').click(function(){
return $('#dialog').dialog('open'); // Here it doesn't stops for the return value!!
});
}
</script>
And this other code:
...
<c:foreach ...>
<h:commandLink styleClass="confirm" action="#{myBean.delete}">
<img src="/resources/images/delete-bw.png"/>
</h:commandLink>
<c/:foreach>
...
<!-- ui-dialog -->
<div id="dialog" title="Question" style="display: none;">
This item will be deleted, confirm?
</div>
I need to make the call to myBean.delete after the user confirms the dialog, but it just continues and makes the call with the dialog still open. How can I make the dialog to return a synchronized value? So the commandLink can know whether to execute the action or not.
I know it can use callbacks, but callbacks is not an option since the commandLink is waiting for the result to decide to execute the action, and if I use callbacks I will need to make a direct call to the commandLink.click which would make an infinite loop.
Even thought, thinking again there could be a way to use callbacks but how could I send to the dialog which callback to call when it's done.

There is no way to make the execution of code stop and wait. The only thing you can do is to make a modal dialog by blocking out the page under the dialog so the user has to select something before continuing.

The way I see it, your problem can be solved if you expose the #{myBean.delete} method of bean as a javascript function and call it accordingly in jQueryUI dialog's Delete and Cancel handlers.
If you can use the RichFaces library, refer to a4j:jsFunction
But in this case the delete button click has to be pure ajax call. i.e. you can have the dialog invoked in the onclick and no action specified.
Otherwise there's no way you can stop the postback from happening.