[Full Screen Ajax Wait] impementation

[Full Screen Ajax Wait] impementation

  
Forge Component
(4)
Published on 2015-10-09 by Pedro Coelho
4 votes
Published on 2015-10-09 by Pedro Coelho
 Hi,
    I want to use Full screen Ajax wait in my application and I want to put this on layout page not on every page so when ever ajax request is intialized it will trigger this plugin and display ajax wait .Is it possiple to do that if so how can i do that is there any documentation available for this .Please provide the soluton.
Hi,
its very simple to add full ajax wait in your application, you need to add the reference of this component in you espace and simply need to drag an drop the fullAjaxwait webblock on your page, since you don't want to use it on every page, so don't need to add it on common layout webblock. Simply use it wherever it is required.
The fastest way to achieve what I'm understanding your request is (have this replacer for the AjaxWait in some pages) it's just to create 2 layouts

If you check the espace, you will find a Modified_Layout, you could have the Unmodified_Layout or something and use the appropriate layout in the pages that you require 

The soulition that Manish Jawla posted is not tottally correct, since by default the layouts that the platform use already include the AjaxWait, so it will conflict if you just add the web block to a page that already contains one AjaxWait.

Just add another layout and it will work fine.

Best regards,
PC 
Hi Pedro Coelho,

In my above post i have mentioned the common layout not the default Layout! Usually we use Custom layout for our application not the default layout of Outsystem, if you are developing the application for Clients.
Please read the post carefully before mentioning the comment over it.

Thanks,
MJ

 
Manish Jawla wrote:
Hi Pedro Coelho,

In my above post i have mentioned the common layout not the default Layout! Usually we use Custom layout for our application not the default layout of Outsystem, if you are developing the application for Clients.
Please read the post carefully before mentioning the comment over it.

Thanks,
MJ

 
 It seems you missunderstood what I said.
  1. My solution is have 2 layouts one with the web block and the other without, most likely with the default richwidgets web block
  2. I said that the Plataform's default layouts do have the default richwidgets web block embedded after the footer. If you open a clone of RichWidgets and open one of the layouts there (Layout_London or Layout_Chicago) you will notice that the last web block on either of these layouts it's the "RichWidgets\Feedback_AjaxWait" 
    Having that into consideration your proposed solution to simply add the FullScreen_AjaxWait whenever you needed it to the page will not work because of the conflicts
 Best regards,
PC

Hi guys, please help me on this. I want the loading to be on the center of the screen.


how can I do that?

thanks

-Daryl

just put the loadiing icon inside the div and position it center with css by giving position left top add below style to your div which contains loading icon.

div.classname{text-align:center}

ash vd wrote:

just put the loadiing icon inside the div and position it center with css by giving position left top add below style to your div which contains loading icon.

div.classname{text-align:center}

it didn't work :-(



<div style="margin:auto;text-align:center;width:100%;position:absolute;top:10px;left:50%"><img src="loading.gif"></div>


make the parent div to position relative.

just try this or send me your generated html code 

ash vd wrote:

<div style="margin:auto;text-align:center;width:100%;position:absolute;top:10px;left:50%"><img src="loading.gif"></div>


make the parent div to position relative.

just try this or send me your generated html code 

wel this is the code:


div.Feedback_AjaxWait {
    font-weight:   bold !important;
    position: absolute;
    color: white;
    font-size: 16px;
    position: fixed;
    bottom: 30px !important;
    right: 20px !important;
    background-color: #6698b7 !important;
    padding: 4px 10px 4px 10px;
    z-index: 10000;
    border-top-left-radius: 3px;
}
.Feedback_AjaxWait_CursorProgress,
.Feedback_AjaxWait_CursorProgress a,
.Feedback_AjaxWait_CursorProgress input {
    cursor: progress;
}

the loading icon is still on top.


just remove position fixed  from the style

Guys, the original CSS used for this was back when London Theme was the default for v8/v9 apps (the !important stuff was to overwrite the London stuff)

Using it on other themes, it will most likely need to have some tweaks to the CSS to comply with the new styles

The only thing you should need to replace (as far as the CSS) is:

div.Feedback_AjaxWait {
}

I will try and create a new version for it as soon as I have some time

Best regards,

PC

Pedro Coelho wrote:

Guys, the original CSS used for this was back when London Theme was the default for v8/v9 apps (the !important stuff was to overwrite the London stuff)

Using it on other themes, it will most likely need to have some tweaks to the CSS to comply with the new styles

The only thing you should need to replace (as far as the CSS) is:

div.Feedback_AjaxWait {
}

I will try and create a new version for it as soon as I have some time

Best regards,

PC


Yes true  we need to change the style only it will work as expected now also we can do just need to overwrite the styles.

@DARYLE IF POSSIBLE FOR YOU TO JUST SEND THE GENERATED HTML STRUCTURE JUST THAT  DIV PART WHICH CONTAINS THE LOADING ICON .