Ajax navigation loading div issue

[Kovács Áron <ko...@gmail.com>]

Hello!

I'm facing the following issue:
I have a page with a button. I'm navigation to some other page by
setResponsePage.
I've set up a loading div with spinner which works great with the
ajaxrequest.
It shows it and hides it automatically.

But I would like to use it in a way that the loading div should be
displayed, until the arrival page comes in a state of onLoad.

I can show the loading div from js code before navigating and hide in in
the recipient page's OnLoadHeaderItem js call, but is there a way to do it
manually?

Thanks,

Aron Kovacs

Re: Ajax navigation loading div issue

[kovaron <ko...@gmail.com>]

Hello!
I finally solved the issue with a little workaround.
I introduced a /manualLoadingDivHandler/ class, which is applicable to all
elements I want to behave as I wrote before. (show the loading div on
submit/click and then remove it on onload)

as I use wicketstuff also, I wrote the following in a common JS.

var listenerInit = function(){
	$(".manualLoadingDiv").bind("click", function(){
			showLoadingDiv();
		});
}

and also the following:

// whether we need manual handling currently when the observer fires.
var needManualHandling = false;

// hides the loading div and disables manual loading div handling.
var hideLoadingDiv = function(){
	var loadingDiv = $("#loadingDiv");
	needManualHandling = false;
	loadingDiv.css("display", "none");
}

//sho loading div manually, by enabling the observer and the flag
var showLoadingDiv = function(){
	needManualHandling = true;
	manualLoadingDivHandling();
}

// sets the manual loading div observer
var manualLoadingDivHandling = function(){
	var element = document.getElementById("loadingDiv");
	var observer = new MutationObserver(
	  function(mutations){
		mutations.forEach(function(mutation){
			var newValue = mutation.target.getAttribute(mutation.attributeName);
	        if(needManualHandling && newValue.indexOf("none") > -1){
	        	var loadingDiv = $("#loadingDiv");
	        	loadingDiv.css("display", "block");
			}
		})
	  }
	);
	observer.observe(element, {attributes: true});
}

Then, I do:

In my main, base Panel implementation, in renderHead:
		response.render(OnLoadHeaderItem.forScript("listenerInit();"));
		response.render(JavaScriptHeaderItem.forScript("$(function() {
hideLoadingDiv();}", "loadFinished"));

So when a panel is loaded it inits the click listeners to the nodes having
the manualLoadingDiv class.
And then a panel loads, it always hides the loading div.

This way all the buttons/links which has this class will fire a display
event to the div, event if it's hidden by the end of ajax request.

p.s.: I think it's a pretty common usecase to not only show busy sign during
ajax requests but also when the page loads (consider having several images
streamed to the client with a file resource)
If i'll have time, I will try to find a way to impelment it in a more
general way and then make a pull request to wicketstuff project.

I hope I helped some folks out there!

Aron Kovacs



Martin Grigorov-4 wrote
> Hi,
> 
> I'm afraid this is not possible.
> The browser unloads the page (with all its elements, i.e. the loader too)
> and then loads the new page.
> 
> It is possible only if you use single-page-application design, i.e.
> replace
> the body with Ajax.
> 
> Martin Grigorov
> Wicket Training and Consulting
> https://twitter.com/mtgrigorov
> 
> On Thu, Apr 23, 2015 at 4:30 PM, Kovács Áron <

> kovaron1@

> > wrote:
> 
>> Hello!
>>
>> I'm facing the following issue:
>> I have a page with a button. I'm navigation to some other page by
>> setResponsePage.
>> I've set up a loading div with spinner which works great with the
>> ajaxrequest.
>> It shows it and hides it automatically.
>>
>> But I would like to use it in a way that the loading div should be
>> displayed, until the arrival page comes in a state of onLoad.
>>
>> I can show the loading div from js code before navigating and hide in in
>> the recipient page's OnLoadHeaderItem js call, but is there a way to do
>> it
>> manually?
>>
>> Thanks,
>>
>> Aron Kovacs
>>



--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/Ajax-navigation-loading-div-issue-tp4670488p4670496.html
Sent from the Users forum mailing list archive at Nabble.com.

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org

Re: Ajax navigation loading div issue

[Martin Grigorov <mg...@apache.org>]

Hi,

I'm afraid this is not possible.
The browser unloads the page (with all its elements, i.e. the loader too)
and then loads the new page.

It is possible only if you use single-page-application design, i.e. replace
the body with Ajax.

Martin Grigorov
Wicket Training and Consulting
https://twitter.com/mtgrigorov

On Thu, Apr 23, 2015 at 4:30 PM, Kovács Áron <ko...@gmail.com> wrote:

> Hello!
>
> I'm facing the following issue:
> I have a page with a button. I'm navigation to some other page by
> setResponsePage.
> I've set up a loading div with spinner which works great with the
> ajaxrequest.
> It shows it and hides it automatically.
>
> But I would like to use it in a way that the loading div should be
> displayed, until the arrival page comes in a state of onLoad.
>
> I can show the loading div from js code before navigating and hide in in
> the recipient page's OnLoadHeaderItem js call, but is there a way to do it
> manually?
>
> Thanks,
>
> Aron Kovacs
>