SharePoint web part automatic refresh javascript event? - javascript

Background: I'm modifying a SharePoint list web part using JSLink. I'm also adding jQuery and jQuery-UI to make the list items display as the jQuery Accordion. It works well, except that I also need to implement the ajax automatic refresh on the web part to refresh the content every 60 seconds.
Problem: When the web part refreshes, the jquery code reverts - the items no longer show in accordion mode. I can open the browser console and type the jquery code manually, e.g., $(".selector").accordion(); and it works fine. This makes me think that I need to find a way to call the jquery code after each web part automatic refresh completes.
Question: So, is there a javascript event or way to find out when an automatic refresh triggers on my webpart so that I can call again my jquery accordion after? Is there something else I could be missing?
Thanks for your time!

The answer was to use this code:
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(MyFunction);
function MyFunction() {
//do something here;
}
Credit to #Thriggle
References:
https://msdn.microsoft.com/en-us/library/bb311028.aspx
https://www.daniweb.com/programming/web-development/threads/247263/ajax-postback-after-endrequest

I believe you can insert your own code or function calls into the callback chain by overriding the _onFormSubmit method of the current instance of the Sys.WebForms.PageRequestManager object.
Sys.WebForms.PageRequestManager.getInstance()._onFormSubmit = function(i){
Sys.WebForms.PageRequestManager.prototype._onFormSubmit.call(this,i);
alert("Refreshing the data..."); // -- your code or function call here
};
When I ran the above code in the F12 console on a page with a list view that had a 25-second refresh, I started seeing the "Refreshing the data..." pop-up every 25-seconds, but I haven't tested it with anything more complicated than that.

Related

How to call a javascript from plugin or refresh the page in microsoft dynamics 2015

We have a requirement in which we have to call a Javascript from plugin,
also we want to refresh our page from plugin.
Is there any way to do this? We know this can be done from javascript using XRM but we need to refresh our page after plugin execution so for the same we will need a call to javascript from plugin or any other way to refresh our page from plgin.
We cannot make our plugin as synchronous.
One solution could be to set an attribute on the regarding entity in the plugin execution that indicates, that the process finished.Then let a javascript run, which checks this attribute periodically and performs the refresh.
One solution is to override the Save button's default functionality and call you custom code (js function) when user clicks the save button.
function customSave()
{
Xrm.Page.data.save().then(
function(){
Xrm.Utility.alertDialog("Record saved");
Xrm.Page.data.refresh();
},
function(error){
Xrm.Utility.alertDialog(error.message);
});
}
Correction: I just saw you have mentioned that your plugin will run ASync... This solution will not work.

prevent default browser action but allow library code in meteor

I converted my brewery's website to use meteor. In the conversion process I have run into a bug in the integration of some library code. The original site uses lightbox2 http://lokeshdhakar.com/projects/lightbox2/ to pop up a modal of a graphic we designed.
In the meteor version the modal looks like its about to load but then instead just navigates directly to the image asset the modal is supposed to display. Click 'View the Brew Diagram' at http://twbrewing.meteor.com/beers to see the problem in action.
To me it looks like the library code is working but for some reason does not prevent the default browser action. I tried using a preventDefault() on the click event for that, but then nothing happens at all. Ideas?
Wrap the HTML in {{#constant}}...{{/constant}} and run any lightbox code in a template render function, e.g.
Template.pictures.rendered = function() {
lightBoxInit();
}
I don't actually know what the lightbox function is called... it's either something that they will tell you in the docs to run on pageload, or that is wrapped in a $(document).ready() call in the source. Even better is if there's an API call to run on the elements directly (something like $('img').lightbox() or $('img').each(function(el) { lightbox(el) }).
Sorry I'm not so familiar with lightbox but this is the strategy you need and what you need to look for :)
Note that the rendered function is called on rerendering too. This is fine for most libraries but if you notice any strange behaviour you'll need to add some logic to ensure that the relevant links are not processed twice (either by using a .data boolean or by destroying and recreating the wrapper).

Javascript run function in background regardless the page

i need to run a function periodically regardless the page where i am. This function will get some data periodically.
I dont think that this works:
function myFunc()
{
//your code
}
//set the interval
setInterval(myFunc,2000) //this will run the function for every 2 sec.
Because it works only for the page where I am right now, so if i go to another page, function is not executed anymore.
I would like to write a function that start running when user is at index page and then is called periodically until user close the page.
Any idea? Thanks in advance!
That's not possible with javascript in the browser. When you navigate away from the page, the script will stop. You have to include a script on every page that initializes this periodical update. Or you could rewrite your application to a "single page application", which seems to be popular nowadays.
You'll need a backend application or cron-job to do that.
Another way do that would be to make an Ajax-only single page application. I guess twitter uses that model.
Depending on what your doing in the function you may be best to use a JS Worker which will run as a new thread and allow you to continue processing as much as you want in the background without having to worry about JS timeouts.
The main point here is what your asking for is near enough impossible within JS unless you use something similar to jQUery and dynamically load your pages in to a div? This would mean you still have the effect (visually) that you changing page but the browser only loads the data in.
Its very easy to in fact to load content in to a DIV using jQuery its:
$('#elementoloadid").load("/path/to/load");
You could achieve this without using jQuery but will take you longer.

infinite ajax scroll not loading javascript

SO basically I am using this plugin
https://github.com/webcreate/Infinite-Ajax-Scroll
It fits my needs perfectly and is working pretty seamless.
My website is articles, the problem is the javascript only appears for the first page of data.
For example, my facebook like buttons, hover effect, etc etc only works for the original rows loaded, not for the rows loaded by the plugin when you scroll to load more.
Anyone experience this issue and know how to approach this.
Thanks
Since version 0.1.5 of IAS there is a new option called onRenderComplete, this is a callback function you can use to reinitialize other javascript code after new items have been added to the DOM.
You can read more about here: https://github.com/webcreate/infinite-ajax-scroll#onrendercomplete
Basically you can put any code that lives in $(document).ready() into this callback.

How do I do ajax navigation on pageload?

I have a page with several reports that are produced via ajax calls. I am prototype.js framework on this page for some of the display functions.
The links for each report have anchors/tags like #Report1, #Report2 etc, which are hrefs with onClick functions that do lots of work to create the report via javascript.
I would like to make it so if a user bookmarks a page with a link or navigates directly with a anchor/link in the url for my page to load the report.
So if the user goes to : http://mysite/myPage.jsp#Report2 it should load the page and go to the 2nd report.
Is there anyway in my pageload I can look at the anchor/link and perform the onlcick for that anchor? I was thinking I could create a big case/if statement to figure out what to do, but maybe there was an easier way.
It all depends on how you're Ajax calls are structured really. I do something similar for opening the correct tab within a tab navigation. The code would start off like this, if you let me see how your Ajax events are hooked up then i should be able to show you the rest.
document.observe("dom:loaded", function() {
if(window.location.hash){
var report = window.location.hash.replace("#","");
}
});
EDIT
Looking at your code you would be much better off (imv) switching to an unobtrusive method where you attach events to your elements e.g.
$('ele').observe('click',doStuff.bindAsEventListener($('ele')));
This would enable you to more easily connect the same functionality to a click or a pageload but is also better practice anyway and would prevent code duplication etc. Obviously this is missing large chunks but hopefully you get what i mean

Categories

Resources