Develop Reference

scroll to the relevant item on html after serving a server call

I am rendering a html page with a list of things with an option to edit any one of them.
Draft:
On clicking on any of the item, makes a server call and effectively an update in the database.
Now, What i want to do is, When the list is long and the page is scrolled all the way to the bottom (for eg. ITEM 1000) and the user makes any server request,
after the page is reloaded, the user should be scrolled down at the exact item. Is this possible?
What is a good way to approach this functionality?
I am aware of anchor tag and name attribute and then posting url.com/#anchorTagName. But in case of server call, we dont provide any urls, its just a form.submit
Any suggestions are much appreciated!

Anchor tag is the best approach url.com/#anchorTagName but as you said the server doesn't provide it.
Here are some other alternatives:
1. Session attribute:
Once the server call is made and the data is loaded successfully in the DB, set a session variable. (session variable will contain tag)
In the UI using scriplet, assign the session variable to a javascript variable.
Now on page load, let the javascript to get the variable and scroll to the particular location.
example:
<script type="text/javascript">
window.onload = function() {
var scrollNow = "#<%=session.getAttribute('')%>"
window.location.href = scrollNow; // this will take to the particular element based on the ID
}
</script>
Another option, is to append the location in query string. Same way get the location and let the javascript do its part just like before :)
Another option,
In the form submit, handle the event via javascript before submitting the form.
Construct the action url dynamically with the hash tag and send it to the server.
So when the server receives it, it will ignore the anchor tag and will process the data.
When the page refershes again, the page scroll to the previous location as the anchor tag will be there in the URL :)

Need Jquery to switch between 3 servlet pages

I need Jquery and the corresponding js and css files to switch between the servlet files.
For example: I am having 3 servlets Myservlet1.java, myservlet2.jave & myservlet3.java each displaying a table value. I need Jquery to switch betweent the servlets like myservlet displaying for 20 secs and then myservlet2 displays for 20 secs then myservlet3 displays for 20 sec.
The switch should be automatic. I am entirely new to Jquery and I badly need the code immediately ASAP.
Thanks in advance!!
I am displaying the results of 3 tables in corresponding java files. in the page values of tables will be displayed in servlets. Now I need to switch the servlets for every 1 min so that the record of 3 tables will be displayed in the specific interval of time

You need to use the jQuery load-function with callbacks, and perform a setTimeout for each callback. The code would look something like this (I haven't tested it):
var delayTime = 20 * 1000;
// Wait on servlet 1
setTimeout(function() {
$( "#content" ).load( "myservlet2.java", function() {
// Wait on servlet 2
setTimeout(function() {
$( "#content" ).load( "myservlet3.java", function() {
// Servlet 3 loaded
});
}, delayTime);
});
}, delayTime);
This would load the page inside a HTML-element with id content. However, it doesn't seem like a good approach. Maybe you could explain better what you want to achieve?

JavaScript only loads once per tab? (Multiple "pages" with tables in single page)

Alright, so I'm creating a script to avoid activating a link in a parent div. I've added an image of the website to give you an idea of what it looks like and to make it easier for me to explain. The white tabs are controlled by Ajax and all of them are loaded when the Orders/Subscriptions page is loaded.
All the rows in the table are clickable, and the blue cogwheel shows a dropdown when you hover over it. This dropdown contains several links that need the javascript/jquery code to not activate the row link instead. The problem is that when you switch tabs, the js code won't run unless you reload the page (the active tab stays when reloaded), but the users of the website shouldn't have to reload the page every time they switch between the tabs.
I have absolutely no idea why the .js file only works on the active tab. Everything is written in Wicket/Java using a lot of Ajax events for this page.
JavaScript:
$(document).ready( function () {
$('.dropdown-menu > li > a').on('click', function(event) {
event.stopPropagation();
alert('Propagination Stopped');
});
EDIT:
Alright, so I now know it works if I add
location.reload();
when the tabs are clicked, but I kinda want to avoid this since that adds unnecessary loading time.

I figured out what the problem was. Since I use Ajax for the tabs I had to add
$(document).ajaxComplete(function { myFunction });
and put the onClick in there. That way it would load properly every time I switched tabs.
The invisible tables in the inactive tabs had display: none; which mean when they are set to display: visible; it isn't part of the DOM. So the script won't run unless page is reloaded.
Don't like answering my own question, but felt like the info should be shared.
Thanks for the help anyways guys!

You haven't shown how your script elements are defined and added to the DOM, so it's hard to be specific.
Once a script element has been added to the DOM (directly, or via markup), it is run once. If you want any functions defined by that script to be run again, you have to run them. So in your tab-switching code, add code to call a function if you want it to be run for that tab.
You also haven't shown how you're loading the tab content, or whether the tab content defines script tags. It's best not to have the tab content contain any more script than necessary. Instead, have a main script file loaded with the page that defines the main functions, and then at most have a single script in the dynamically-loaded tab content that executes a single function call to that already-loaded code. If you're loading via jQuery's load, it'll call the scripts for you unless you use a fragment identifier with load. (If you use a fragment identifier with load, it disregards scripts in the content entirely.)

I think this will help you!
the html code example
<ul id="ajaxContainer">
<li>the default content in your app</li>
</ul>
<nav id="pagination">
<ul>
<li><a class="active" href="/ajaxpath1">1</a></li>
<li>2</li>
<li>2</li>
</ul>
</nav>
<script src="jquerypath/jquery.js"></script>
<script src="appjspath/app.js"></script>
Code in your app.js as bellow
$(function() {
var $ajaxContainer = $('#ajaxContainer'),
CLSA = "active",
DOT = ".",
$pagination = $('#pagination'),
hasElMakeShow = function($el) {
//just make elment show hide
$el.show().siblings().hide();
},
appendNewEl = function($el) {
//new data requested should be append to container element
$ajaxContainer.append($el);
hasElMakeShow($el);
},
initBindEl = function(){
//init bind first active pagination el with its data elment
var $li = $ajaxContainer.find('>li'),
$active = $pagination.find(DOT + CLSA);
$active.data('el', $li);
},
switchNavA = function($el) {
//do some pagination switch active class work
$el.addClass(CLSA).closest('li').siblings().removeClass(CLSA);
};
initBindEl();//first bind current pagination
$pagination.delegate('>li a', 'click.page', function(e){
e.preventDefault();//prevent default jump
var $me = $(this),
isActive = $me.is(DOT + CLSA),
$targetEl = $me.data('el');
if(!isActive) {
if($targetEl.length) {
hasElMakeShow($targetEl);
} else {
var url = $me.attr('href');
$.get(url, function(data){
var $respondEl = $(data);
$me.data('el', $respondEl);
appendNewEl($respondEl);
switchNavA($me);
});
}
}
});
});

How to select the particular row data in jsp using radio button

I know its a basic question and please bear with this.
I'm new to struts frame work and I'm creating a sample application using struts 1.2. I've inserted few values into the database using form beans. And i'm displaying all the database records in the jsp page using function. and i also placed the radio button for each row..
Now my question is, i want to select a particular data from the records displayed in the jsp page by clicking the radio button and i need to store the selected records into the another table.
Give me some suggestion regarding the condition specified above...
Thanks in advance..

Once you set those unique values in radio button, you can get the values for your purpose. Like using jquery,
var selRadio = $('input:radio[name=cname]:checked').val();
You can find out fiddle explains how to get checked value.
Use some ajax for send that value to server (servlet) and add the values to new table without refresh entire page.
$.ajax({
url : "ur_servlet_url" + selRadio,
type : "POST",
async : false,
success : function(data) {
alert("success");
}
});
Let me know if this helps.

Howto set focus in Rich Faces panelBarItem?

Hi
I want to set focus on <h:inputText> element whenever rich:panelBarItem is opened.
I have:
<rich:panelBar>
<rich:panelBarItem onenter="setFocus();">
<h:inputText value="#{bean.value}"/>
</rich:panelBarItem>
</rich:panelBar>
it works fine when I open it with mouse click, but does not work first time when first panelBarItem is automatically opened.
How should I set focus on first opened panelBarItem? I really would like it to be some event(I could not find) on rich:panerBarItem or rich:panelBar.

You can call your method after page load to set focus to field. Something like
<script>
//call after page loaded
window.onload=setFocus();
</script>
or
<body onload="setFocus();">