Execute JQUERY on Ajax refresh

Execute JQUERY on Ajax refresh

  
I hesitated to post this question, as there are LOTS of very detailed posts on how to implement JQUERY properly. Let me first say, that I have read most all of them, and they were VERY informative. Alas, even with the, I am encountering an issue that I cannot seem to resolve.

I am trying to implement the jquery.freezeheader.js plugin. Currently, I have created a webblock, and copy/pasted all of the code from the js file into the JavaScript attribute of the webblock. Then, in the content of the webblock, I have added an unescaped expression with the execution code... Namely:

"<script language=""javascript"" type=""text/javascript"">
   $(document).ready(function () {
       $(""#" + TableRecordsId + """).freezeHeader();    
   })
</script>"

I have added this webblock to the top of the page. It works great for the initial page load. Table header is locked down beautifully. The problem I have now is that I cannot seem to figure out how to get the jQuery to fire again after a refresh (namely after a column sort). I have tried the following
- Moving the entire weblock into the container that is being refreshed.
- Adding a "RunJavaScript" after the Ajax refresh in the refresh action (I tried both..
            $(""#" + TableRecordsId + """).freezeHeader(); 
    AND
            $(document).ready(function () {
                 $(""#" + TableRecordsId + """).freezeHeader();
            })
- Adding an unescaped expression in the container of the page itself, after the table it is modifying with the full <script> code.

Does anyone have any guesses to what I am missing? I feel like it should be very simple. I am afraid I am missing a simple syntax issue, or a basic conscept that I am misunderstanding.

Hi,

You were close to the solution. the RunJavaScript option is the way to go, but you must have that in a different action, because in the same action that refresh the Id of the Table was already refreshed and the one in the Script is the "old" Id.

So instead of running the script in the same action, you should use a hidden button to perform the script, and in the refresh action after the AJAX you do the WidgetClick on that button.

Hope that helps.
Hi Guy,

That jquery plugin is already wrapped in a component that you'll find on the forge: http://www.outsystems.com/Forge/component/379/freeze-panes/

Cheers.
André Vieira wrote:
Hi Guy,

That jquery plugin is already wrapped in a component that you'll find on the forge: http://www.outsystems.com/Forge/component/379/freeze-panes/

Cheers.
Andre, thanks for the reply. I actually already loaded that one, and that is what I based it on. I was having the same refresh problems with the using the webblock from the eSpace. I went ahead and rebuilt a copy of the webblock from that eSpace into my local eSpace. The behavior is the same.
 
Nuno Rolo wrote:
Hi,

You were close to the solution. the RunJavaScript option is the way to go, but you must have that in a different action, because in the same action that refresh the Id of the Table was already refreshed and the one in the Script is the "old" Id.

So instead of running the script in the same action, you should use a hidden button to perform the script, and in the refresh action after the AJAX you do the WidgetClick on that button.

Hope that helps.
 Nuno, 
This almost gets me there. I seem to be having a little difficulty understanding what you mean by "hidden button". I have pulled the RunJavaScript action into it's own screen action. I set up the button, and use the WidgetClick to execute the jQuery, and it works perfectly... Except for one thing. It only works when the button is visible. If I set the "Visible" attribute to false, or add a style property with "display:none;", the javaScript never executes. But if the button is visible, it works fine.

Any ideas on what I am missing?
 
Check the sample. 
Ajax refresh is working there
Hi, 
Don't use the propertie Visible, on extended properties select style and write "display:none;"
Nuno Rolo wrote:
Hi, 
Don't use the propertie Visible, on extended properties select style and write "display:none;"
Nuno,
I tried this as well, and it still didn't work.
 
Well, it looks like it is a browser issue on my development server. When running Firefox on my dev server, the freezeheader only works on refresh if the button is visible. In IE 10 (runnning in compatibility mode), it doesn't work at all (not even on page load). I went ahead and pushed the change to my production environment, and it appears to work great with the hidden button in FireFox, Chrome and Safari. I'll have to test IE10 later. Thank you Nuno and Andre for your help!