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?
Related
I have a JSP page that at the end comes a pop-up window from a javascript, I want after the users click to reload only a specific part of the JSP page more specific one if - loop want to be reloaded one more time ...can this happened or the idea is totally wrong ?
What you are looking for is called AJAX.
AJAX is the art of exchanging data with a server, and updating parts
of a web page - without reloading the whole page.
jQuery has a very nice ajax api.
To load html pages, you could use jQuery.load like this:
$("#result").load( "ajax/test.html" );
You can also generate dynamic html by calling a REST function of a php page using a different url. Example:
var data = { limit: 25, otherProp: "val" }
$("#result").load( "getHtmldata.php", data);
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);
});
}
}
});
});
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.
i need to create a pop up window from my java. Can anyone give me some samples for creating window.open popup from java bean? I have a list of records created from java. in that list i have a column called ID with anchor link. When clicking on that link it should open the popup and retrieve the details.
No Name Amount
1 xxx 15
2 uuu 20
3 uku 23
4 iko 09
I assume that you know some javaScript for this .
On click of a Link call a function this way
<script>
function PopupCenter(pageURL, title,w,h) {
var targetWin = window.open ("http:localhost:8080/MyServlet?name="+kiran"")
}
</script>
Process your request with Servlet , get the Data and show it on that page.
In case you use Struts, replace servlet with a Action class .
I have a rich:dataTable with dataScroller. In each page I need to show 5 records. Record count dynamically changes. I refresh dataTable every 20 seconds to see if there is any new record.
If there are more than 5 records, dataTable will have two or pages.
If there are more than one pages for dataTable, is it possible to say dataScroller to switch pages every 10 seconds? After it shows last page then it should back to first page.
Thanks
Well, you can bind dataScroller with the bean (using de prop. "binding") and use a javascript to "click a invisible button" that executes a bean function to go to the next page..
Xhtml:
<script type="text/javascript">
var t;
t=setTimeout("timedCount()", 1000);
function timedCount() {
document.getElementById('formName:button').click();
t=setTimeout("timedCount()", 10000);
}
</script>
(...)
<h:commandButton id="button" action="#{bean.scrollNext}" reRender="tableID"
style="visibility:hidden;"/>
(...)
Bean:
HtmlDataScroller scroll; //(im not sure about the "HtmlDataScroller")
(...)
public void scrollNext() { scroll.next(); }
(...)
//Gets and sets to bind the scroller
get; set;...
Dont forget to make a new instance of htmlDataScroller or you'll get a nullPointException..
I guess this is not impossible. Please try to have a look into a4j:poll component. Will try and hopefully post more updates
AFAIK, this is not possible with default richfaces. I think you will be able to refresh the data in your table periodically using <a4j:poll>, but not the automatic page-switching.
However, the <rich:datascroller> has a client-side API (which is described here).
Combining this with javascript timing may be the way to get the page-switching working.