I've the current situation:
Have a Link in some HTML page.
When the user click that Link, an NORMAL (vs Ajax) HTTP request is being sent to a Web Server (typically a Java Servlet)
After that, of course the browser will bring the contents from the server and start rendering it. (actually it's the same page with modified contents - don't ask me to do it in ajax, cause it is the requirements)
Before step 3 is being done (while the page is being loaded) I need to display some frame to the user saying something like loading ....
Well, just populate a div somewhere on the page with "Loading..." when the link is clicked. Here's some rough code
$('#yourlink').click(function(){
$('#loading').html('Loading....');
});
<div id="loading">
</div>
And when the page loads, the current loading div will be replaced with an empty one, this will signify that the loading is complete.
Another approach:
The css
#loading
{
display: none;
}
The html
<div id="loading">
Loading....
</div>
The js
$('#yourlink').click(function(){
$('#loading').show();
});
Well, there's several non Ajax ways to do this. The simplest I guess would be to have a giv animated image with your loading bar, which you keep in a hidden div in your initial page:
<div style="display:hidden;"><img src="/img/loading.gif"></div>
Then add some javascript to the link/button that submits the page, such as when it is clicked it unhides the div with image.
There are many ways to do this. I handle it something like this:
// Any anchor with showOverlay class will invoke the overlay function
$("a.showOverlay").click(function() {
overlay();
});
// Normal form submits are intercepted. Overlay call also be skipped by
// making the form of class "noOverlay"
$("form").submit(function() {
var skipOverlay = $(this).hasClass("noOverlay");
if(!skipOverlay){
overlay();
}
return valid;
});
// This overlay function uses the blockUI plugin, other methods can also be used
function overlay(){
$.blockUI({
fadeIn: 500,
css: {
height: '150px',
top: '35%'
},
message: '<div style="margin-top: 40px;"><table align="center" ><tr ><td style="padding-right: 25px;"><img src="/images/wait.gif" /></td><td style="line-height: 25px;"><h1> Just a moment...</h1></td></tr></table></div>'
});
}
Related
I want to show a WebPage on another WebPage using InlineFrame.
I initialized it like this:
Wicket/ Java:
InlineFrame choosenTestcaseInlineFrame =
new InlineFrame("inlineFrame", AuthenticationPage.class);
public WhatToDoPage() {
Form whatToDoForm = configureWhatToDoForm();
add(whatToDoForm);
add(choosenTestcaseInlineFrame.setOutputMarkupId(true));
add(choosenTestcaseInlineFrame);
}
'
HTML:
<iframe wicket:id="inlineFrame" style="margin-left: 200px; height: 500px; width: 1000px">
The Problem is That the InlineFrame seems to refuse to show the Content.
here is a Screenshot:
I don't know if Chrome has a specific option to allow iframe to be displayed, but you might find some clues to solve the problem here:
iframe refuses to display
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 have two DIV elements. Inside DIV_1 i want certain images to be display when called upon, in DIV_2 i will have many LINKS.
When each individual LINK in DIV 2 is hovered I want the link-related image to appear in DIV 1, then change to another pic if another LINK is hovered, but also make it disappear when the mouse arrow doesn't hover over the specific LINK.
Javascript
function showIt(imgsrc)
{
document.getElementById('bottle').src=imgsrc;
document.getElementById('bottle').style.display='block';
}
function hideIt()
{
document.getElementById('bottle').style.display='none';
}
Add to your links this code :
<a href="#" onmouseover="showIt('some_image.jpg')" onmouseout="hideIt()" >...</a>
However it wont look pretty. Consider using jQuery.
EDIT:
Using jQuery you could do this way:
HTML:
<a href="#" data-src="some.jpg" class="changeImage" >...</a>
<a href="#" data-src="another.jpg" class="changeImage" >...</a>
...
<img class="bottle" />
JavaScript
$(function(){
$('.changeImage').hover(function(){
$('.bottle').attr('src',$(this).attr('data-src'));
$('.bottle').show();
},
function(){
$('.bottle').hide();
});
})
You can adjust animation speed by providing animation time as argument to show() and hide().
URL for images put in data-src attributes of a tags.
An alternative that you might consider would be setting the background-image property in CSS and then adding the :hover pseudo-class to change to the new image, saving you from having to deal with Javascript at all.
Using the transition property, you could even add a fade between the two images with no additional work on your part, or the need to include another library like jQuery.
Here's some simple jQuery you could use:
$('#DIV1').delegate('a', 'mouseenter mouseleave', function (e) {
if (e.type === "mouseenter") {
switch ($(this).attr('href')) {
case "#link1":
$('#DIV2').html('<img src="image1.jpg" />');
break;
case "#link2":
$('#DIV2').html('<img src="image2.jpg" />');
break;
}
} else if (e.type === "mouseleave") {
$('#DIV2 img').fadeOut();
}
});
jsBin demo
if you have something like this:
<div id="images">
<img src="img1.jpg" alt="" />
<img src="img2.jpg" alt="" />
<img src="img3.jpg" alt="" />
</div>
<ul id="links">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
CSS:
#images img{position:absolute;display:none;}
than you need just this:
$('#links li').on('mouseenter mouseleave',function(e){
$('#images img').stop().fadeTo(300,0); // do on mouseenter and mouseleave
if(e.type=='mouseenter'){ // do just on mouseenter
$('#images img').eq( $(this).index() ).stop().fadeTo(300,1);
}
});
In my webpage (Eg Link1: http://localhost:8086/MyStrutsApp/login.do) I have several links. When a user clicks on one of the links, he is taken to another page (Eg link2: http://localhost:8086/MyStrutsApp/AddBook.jsp) to fill an html form.
Now what I want to achieve is that when any user clicks on the link, that html form (Link2) is displayed on the same page (i.e. Link1).
I have no idea how to achieve this.
The AJAX way to achieve this is the following:
you have a DIV on your original page that will be replaced (i.e., either has content that only makes sense in the original context or completely empty)
your Link2 servlet produces only the contents of the above DIV (and not the contents of that page)
you use a tiny bit of Javascript to make an AJAX call and fill the DIV with the response.
If you want to use Dojo, the HTML page would look like this:
<!-- main content -->
<div id="leftpanel">
<h3>This content will be replaced</h3>
You can add a book
</div>
The Javascript code would look like this:
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" type="text/javascript"></script>
<script type="text/javascript">
function display_wait(s) {
var mainPanel=dojo.byId("leftpanel");
mainPanel.innerHTML='<div class="waitingmsg">'+s+'</div>';
}
function updateFromURL(url) {
display_wait("loading content");
dojo.xhrGet({url:url,
load:function(result) {
dojo.byId('leftpanel').innerHTML=result;
}});
}
</script>
(As Rafa mentioned, you can use the same technique to display the new part in a dialog)
You can always use jQuery to present a dialog ... http://jqueryui.com/demos/dialog/
Retrieve the page with AJAX and present it inside the dialog.
To display one page within another, use an iframe. See the iframe docs.
To make a link on the outer page load its target page into the iframe, give the iframe a name attribute, and give the link a matching target attribute.
Here is my what I have
<div id=A></div>
<div id=B></div>
<input type="button" value="ChangeA" onClick="createTableA();">
<input type="button" value="ChangeB" onClick="createTableB();">
So in my jsp file, I use javascript and jQuery to manipulate the content of those two div dynamically. For example, if I click on changeA, the function createTableA() will dynamically manipulate <div id=A></div> and append a table to it. So my question is if I click on changeA, then click changeB, how can I manipulate the history so that if I click the back button, I go back to the content of Table A
I've been using the jQuery History plugin for just this sort of thing and it's been working pretty well for me.
Each "page" is referenced by a hash in your URL. That way "changing pages" doesn't refresh the page, but does store the page state in history and allow for bookmarking.
EDIT
I'll expand on the example given in the link to apply more for your situation.
function loadTable(hash)
{
if(hash == "ChangeA")
createTableA();
if(hash == "ChangeB")
createTableB();
}
$(document).ready(function() {
$.history.init(loadTable);
$("input[id^='Change']").click(function(){
$.history.load(this.attr('value'));
return false;
});
});
What the above code does is sets an event handler on all input tags whose id begins with 'Change' so that when those buttons are clicked, loadTable is called. If you change your buttons to look like this:
<input type="button" id="ChangeA" value="ChangeA">
<input type="button" id="ChangeB" value="ChangeB">
clicking button A will put this http://www.example.com/yourpage.html#ChangeA in the address bar and load table A, also adding that table change to the browser history.
The native 'location' object has a 'hash' property that you could use for navigation in AJAX/JS applications.
You could use History plugin or Address plugin.
Address plugin gives more flexibility and recommended for more complex apps.
You should check out Ben Alman's Back Button and Query Library Great api for mucking with the browser history and has some great examples to get you started.
YUI also has a browser history manager: YUI3: http://developer.yahoo.com/yui/3/history/ or YUI 2: http://developer.yahoo.com/yui/history/