Has anyone tried using the new AJAX script loader to load Sys.Component dependencies?
For example, I have an IScriptControl, which gets instantiated during page load with $create, but the component has a dependency on another file, which is loaded asynchronously with Sys.loadScripts().
Blah.js:
Type.registerNamespace('Blah');
MyComponent.js:
Sys.loadScripts(['blah.js'], function() {
Blah.MyComponent = function() {
Blah.MyComponent.initializeBase(this);
};
Blah.MyComponent.prototype = {
// ...
};
Blah.MyComponent.registerClass('Blah.MyComponent', Sys.Component);
});
MyPage.aspx:
<script type="text/javascript" src="MyComponent.js"></script>
<script type="text/javascript">
Sys.Application.add_init(function() {
$create(Blah.MyComponent, ...);
// This fails, because it runs before MyComponent has been initialized, which in turn is waiting for blah.js to load
});
</script>
It seems that the Sys.Application.init event doesn't wait for any sync scripts to finish loading, and Sys.loadScripts doesn't block, so the initialization fails.
I could hack the add_init function to load the component script asynchronously, e.g.:
Sys.Application.add_init(function() {
// load component asynchronously
Sys.loadScripts(['MyComponent.js'], function() {
$create(...);
});
});
This would probably work, but it just feels wrong. Instead of just calling ScriptManager.RegisterScriptControl, I'd have to roll my own initialization code. What's the right way to handle this scenario?
Thanks!
Related
Blazor serverside (dotnet core 3.1)
I run into the problem that on customer side this is shown:
Could not reconnect to the server. Reload the page to restore functionality.
Each time I update the code base or internet is broken or something like this.
Now the goal is that it should reload the page as soon as the server is back again (or in some interval).
Is there any possibility that could help me?
You can try this code:
<script src="_framework/blazor.server.js"></script>
<script>
Blazor.defaultReconnectionHandler._reconnectCallback = function(d) {
document.location.reload();
}
</script>
<script>
// Wait until a 'reload' button appears
new MutationObserver((mutations, observer) => {
if (document.querySelector('#components-reconnect-modal h5 a')) {
// Now every 10 seconds, see if the server appears to be back, and if so, reload
async function attemptReload() {
await fetch(''); // Check the server really is back
location.reload();
}
observer.disconnect();
attemptReload();
setInterval(attemptReload, 10000);
}
}).observe(document.body, { childList: true, subtree: true });
</script>
This will wait until the reload button appears and then will wait until the server is back up before actually reloading.
From https://github.com/dotnet/aspnetcore/issues/10325#issuecomment-537979717
For .NET 6 & 7 you can use:
<script src="_framework/blazor.server.js" autostart="false"></script>
<script>
Blazor.start().then(() => {
Blazor.defaultReconnectionHandler._reconnectCallback = function (d) {
document.location.reload();
}
});
</script>
This keeps all of the original startup process as is and just adds a page reload on connection down, without needing a mutations observer.
Here's an alternative but I'm not sure it works 100%.
<script src="~/_framework/blazor.server.js" autostart="false"></script>
<script>
Blazor.start().then(() => {
Blazor.defaultReconnectionHandler._reconnectionDisplay = {
show: () => {},
update: (d) => {},
rejected: (d) => document.location.reload()
};
});
</script>
One trick some people forget about is that you can actually "watch" your code base for changes, if you open your favorite terminal and run dotnet run watch debug in the same folder as your cproj file it should watch your changes so when you refresh your browser it should pick up any changes to your application, formore information read: https://learn.microsoft.com/en-us/aspnet/core/tutorials/dotnet-watch?view=aspnetcore-3.1
dotnet watch is a tool that runs a .NET Core CLI command when source files change. For example, a file change can trigger compilation, test execution, or deployment.
Hope this helps
I am working on a Meteor project that has come custom Pagination using Sessions. The template rendering the contents of said items is using ellipsis.js and highlight.js to do some DOM formatting. The code looks something like thus:
if (Meteor.isClient) {
Meteor.startup(function () {
Session.setDefault("homePageSize", 10);
Session.setDefault("homePageStart", 0);
});
}
Template.home.articlesPaginated = function() {
return Articles.find({published: true}, {sort: {post_date: -1}, skip: Session.get("homePageStart"), limit: Session.get("homePageSize")});
}
Template.home.rendered = function() {
// Setup ellipsis
$('.ellipsis').dotdotdot({
ellipsis: '...',
wrap: 'word',
fallbackToLetter: true,
after: $('a.blog_continue')
});
// Setup highlight.js
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
}
Template.home.events({
'click .next': function(event) {
var offset = Session.get("homePageStart") + Session.get("homePageSize");
if (offset < 0) {
offset = 0;
}
Session.set("homePageStart", offset);
},
'click .prev': function(event) {
var offset = Session.get("homePageStart") - Session.get("homePageSize");
if (offset < 0) {
offset = 0;
}
Session.set("homePageStart", offset);
}
});
Pagination is working just fine, but as soon as the Template re-renders I loose all the ellipsis.js and highlight.js formatting. I know the obvious reason is that the DOM has changed, and since the Template.render only runs once up-front and doesn't happen when the Template re-renders the DOM updates are not being applied. So, what is the best way to trigger ellipsis.js and highlight.js after the Template is done such that it gets re-called everytime the Template re-renders?
Basically you need to listen for changes in your Articles collection, which is a client-side subset of the server database clipped to contain only the currently visible paginated articles.
When you detect a change in the articles subset, you'll need to retrigger initialization of ellipsis.js and highlight.js.
You could reorganize your code as follow :
First, we define the cursor declaration as a separate function on his own because we need to use it twice :
function articlesPaginated(){
return Articles.find({
published: true
}, {
sort: {
post_date: -1
},
skip: Session.get("homePageStart"),
limit: Session.get("homePageSize")
});
}
Template.home.helpers({
articlesPaginated:articlesPaginated
});
Then in the rendered callback, we need to setup a reactive computation that will depend on this cursor, so whenever the articles subset is updated to a new page, our computation will rerun.
But we need to be aware that the helper we defined on the home template returns the same cursor so it's going to be invalidated and trigger DOM refresh AT THE SAME TIME... JavaScript is single-threaded and the Tracker.Computation manual states that the order of execution of concurrently invalidated computations is unpredictable.
So we cannot just trigger the ellipsis/highlight initialization code in the computation because this setup code assumes that the DOM is ready, however at this precise moment we don't know if DOM manipulation has just happened before or is going to happen immediately after.
Fortunately there is a Tracker.afterFlush method which allows us to execute code after concurrent computations are done so we are sure that by that time DOM state is OK.
Having understand all these implications, we can write the following rendered callback :
Template.home.rendered=function(){
// declare a template managed Deps.Computation
this.autorun(function(){
// have this reactive computation depend on the SAME cursor
// that triggers DOM rerendering
var articles=articlesPaginated();
// forEach is actually the method that triggers a dependency on the cursor in this computation
articles.forEach(function(article){
// you can manipulate the model here if needed
});
// setup a callback to execute your DOM alteration code after
// it is actually rerendered by Blaze
Tracker.afterFlush(function(){
// your ellipsis/highlight initialization code goes here
});
});
};
If you can put your Articles into another template, then you could apply formatting individually as they are inserted.
Template.article.rendered = function () {
// Setup ellipsis
this.$('.ellipsis').dotdotdot({
ellipsis: '...',
wrap: 'word',
fallbackToLetter: true,
after: $('a.blog_continue')
});
// Setup highlight.js
this.$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
};
Assuming your template looks something like this.
<template name="home">
...
{{#each articlesPaginated}}
{{> article}}
{{/each}}
{{> paginationControls}}
...
</template>
This has the added benefit of scoping the formatting to just the articles, rather than the entire DOM.
I'm using laika for testing and the meteor-router package for routing. I want to do tests that navigate to some page, fill a form, submit it and check for a success message, but I'm stuck on the navigation part. This was my first attempt:
var assert = require('assert');
suite('Router', function() {
test('navigate', function(done, server, client) {
client.eval(function() {
Meteor.Router.to('test');
var title = $('h1').text();
emit('title', title);
})
.once('title', function(title) {
assert.equal(title, 'Test');
done();
});
});
});
This doesn't work because Meteor.Router.to doesn't have a callback and I don't know how to execute the next line when the new page is loaded.
I tried also with something like this
var page = require('webpage').create();
page.open('http://localhost:3000/test', function () {
...
}
but I got the error Error: Cannot find module 'webpage'
Edit
I'm moving to iron router, so any answer with that also will be helpful.
I had the same problem. I needed to navigate to some page before running my tests. I'm using iron router as well. I figured you can't just execute Router.go('foo') and that's it. You need to wait until the actual routing took place. Fortunately the router exposes a method Router.current() which is a reactive data source that will change as soon as your page is ready. So, in order to navigate to a specific route before running my tests, I firstly run the following code block:
// route to /some/path
client.evalSync(function() {
// react on route change
Deps.autorun(function() {
if (Router.current().path == '/some/path') {
emit('return');
this.stop();
}
});
Router.go('/some/path');
});
Since this is within an evalSync()everything that follows this block will be executed after the routing has finished.
Hope this helps.
Laika now includes a waitForDOM() function you can set up to wait for a specific DOM element to appear, which in this case would be an element in the page you're loading.
client.eval(function() {
Router.go( 'test' );
waitForDOM( 'h1', function() {
var title = $('h1').text();
emit( 'title', title );
});
});
The first parameter is a jQuery selector.
I am having no luck in getting a jqueryui dialog to ajax load a form, which inturn submits via ajax.
Everything works upto the point of catching the form that is being submited and instead sending it through an ajax call. Thus the form action is triggered and the browser redirected. The ajax call is never made.
My code is as follows
$(document).ready(function() {
$('.viewOrder').click(function() {
$('#displayOrder').load(this.href, [], function() {
console.log("landed here");
$('#blah').click(function() {
console.log("submiting the form via ajax");
$.ajax({
url: "/ajax/orderupdate",
type: "GET",
data: data,
cache: false,
//success
success: function (data) {
console.log("worked:");
}
});
return false;
});
});
return false;
});
});
.viewOrder is the a href that is ajax loaded. This works fine.
I have read many similar questions on here and it seems load() does not execute scripts that are embeded in the return html, but my return code is pure html no scripts. Any ideas?
IMHO you should try and capture the submit instead of the click, that way you prevent submits done by keyboard aswell, and it might even fix your problem.
The events are bound on page load. At page load the form you are binding the click event does not exist. I use the livequery plugin but they added Live to jquery 4 which you can also use(i had some issues with IE so i went back to livequery)
So load livequery with your scripts http://docs.jquery.com/Plugins/livequery
and change
$('#orderUpdate').submit(function() {
to
$("#orderUpdate").livequery("submit", function() {
recently I came up with the following problem:
In my web site in all html pages I call a function in body onLoad event:
<body onLoad="func1();">
This is part of my template for html, so it appears on every page in my site and I can't change that. Now, the deal is that on some pages, I need to call some other functions onload and I tried with window.onload property, but it wipes the calling of func1...
I now that I can just say:
window.onload = func2(); //where func2() calls to func1()
but this seems dirty and lame? Isn't it ?
So, is there a way to add some functions to those that are about to be executed onload, without deleting the old one? In addition I use asp.net if that could help ...
Thanks!
You can use jQuery to chain on load handlers. Repeatedly using jQuery.load or jQuery(document).ready will chain your handlers (I believe). You other option is to do it programmatically, which means you need an auxiliary function that will chain your onload handlers for you. You can do this with a closure (or anonymous function):
var addOnLoadHandler = function(newHandler) {
if (typeof window.onload != 'function') {
window.onload = newHandler;
}
else {
var oldHandler = window.onload;
window.onload = function() {
if (oldHandler) {
oldHandler();
}
newHandler();
};
}
};
You will have to bind your functions programmatically though, so you would have to do:
addOnLoadHandlers(function() {
alert("Hi I am the first onLoad handler!");
});
addOnLoadHandlers(function() {
alert("Hi I am the second onLoad handler!");
});
in a javascript file (or in your html file).
Another approach is to use an array:
var onloaders = new Array();
function runOnLoads() {
for (i = 0; i < onloaders.length; i++) {
try {
var handler = onloaders[i];
handler();
} catch(error) {
alert(error.message);
}
}
}
function addLoader(obj) {
onloaders[onloaders.length] = obj;
}
In your HTML or Javascript file you do:
addLoader(function() {
alert("Hi I am the first onLoad handler!");
});
addLoader(function() {
alert("Hi I am the second onLoad handler!");
});
Then in your html you can just do <body onload="runOnLoads()">
You may want to make the best out of anonymous functions:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
oldonload();
func();
}
}
}
Borrowed from the Top 10 custom JavaScript functions of all time.
jQuery has a nice shorthand for adding multiple defined handlers to the "ready" event (does not work with anonymous functions where you have to use $(document).ready(function(){});).
simply
$(myFunction);
$(myFunction2);
One big advantage is that if the DOM has already loaded, this still gets fired, whereas anything you bind to window.onload after the event will not get called.
have you considered a javascript library like jquery, i know that there are other approaches but jquery will make your life so much easier...
$(function(){
//Do stuff when DOM is loaded.
func1();
$('#link').click(function(){
//bind a click event
});
});
The classic approach is to just stick all of your functions at the bottom of the page :)
In jquery you can do
$(document).onload(function() {
// do something
}
//then later on do
$(document).onload(function() {
// do something here too!
}
jQuery will intelligently add both events to the onload event and both will be executed when the page loads. With jQuery you also get crossbrowser support as an added bonus.