I try to call the JS function from CodeBehind ( C# ) :
function goToBottom() {
window.scrollTo(0, document.body.scrollHeight);
}
The function works when I call it directly from my asp.net.
I tried this but it doesn't work... :
Page.ClientScript.RegisterStartupScript(this.GetType(), "goBot", "goToBottom()", true);
RegisterClientScriptBlock and RegisterStartupScript do not "call" code or functions, they simply add code to the page; RegisterClientScriptBlock adds script to the top of the page—so it might not see all the html because it's not loaded; RegisterStartupScript adds script to the bottom of the page—so all the html is available to it.
If you want to scroll down when the page loads, take it out of the function:
// this will run the *first time* the page loads.
window.scrollTo(0, document.body.scrollHeight); // no function.
If you want to call it from a click, use a function:
function goToBottom() {
window.scrollTo(0, document.body.scrollHeight);
}
Calling code behind from javascript is another issue. It has been asked before. Search the site or start another question.
Related
What I would like to achieve is this:
refresh website
run my javascript script on it (just as if I put it in Chrome console).
Question is: how to achieve it?
I can also use PHP for this (set server on my computer that wil be redirecting to the desired website and execute my javascript program on it).
Some example of functionality I want to achieve:
Go to stackoverflow.com -> click StackExchange (you can see it in the top left corner, it can be accessed by a querySelector() in JS) -> refresh stackoverflow.com -> click StackExchange again -> repeat...
If you want to refresh the page behind a DOM element click, you can attach an event handler to the element and then in your event handler execute location.reload() to reload the page.
//When the document has loaded, call the function
document.addEventListener("DOMContentLoaded", function(event) {
if(window.location.hash == "#page"){
console.log("Page reloaded!");
}else{
console.log("Page has a new hit!");
}
});
You can use DOMContentLoaded event listener to solve your problem.
You can do something like this -
var value = localStorage.getItem("logdata");
if(value != null) {
eval(value);
logdata();
}
And try to add logdata to localStorage from console.
Example - localStorage.setItem("logdata", "var logdata = function(e) { console.log('data logged.'); }");
Now when you load the page, logdata function will be called and you can have your code executed.
I have a filtered list of items using https://mixitup.kunkalabs.com/
see screen for example
The user then selects to add another action - this uses fancybox as a popup and shows the user the next image:
Once the user has added the data, the pages does a partial post back using an update panel. the code then calls a js function from the code behind to close the popup and then call the mixitup function to reinitialize the list as it now has a new item in it, but it doesn't work.
Here's the code behind that calls the js
ScriptManager.RegisterStartupScript(Me, [GetType](), "Load", "ReloadData();", True)
and here is the js that will be called:
function ReloadData() {
parent.jQuery.fancybox.close();
$(document).ready(function () {
$('#Container').mixItUp({layout: {display: 'block'}});
});
}
The fancybox closes but the mixitup never gets fired as it it never passes the docment.ready test meaning its not loaded so cant run the jQuery, but I am unsure why?
$(document).ready() fires after the document is finished rendering. So, if you already rendered your page and are now interacting with it, that ready statement no longer has any relevance, until you reload the page. So, don't put that inside a function.
Just call your mixItUp code inside the function block.
function ReloadData() {
parent.jQuery.fancybox.close();
$('#Container').mixItUp({layout: {display: 'block'}});
}
As a suggestion: if you're already using jQuery, don't bother with update panels. Just do your ajax calls through $.ajax.
You should place the following code outside the ReloadData() function.
$(document).ready(function () {
$('#Container').mixItUp({layout: {display: 'block'}});
});
document ready function should always be kept at the top level. Also please check if there is any JS error while loading page.
A $ function (which is a DOM ready function) will be only be executed when the page loads for the first time. Any further AJAX call (which is a partial loading/rendering) will not fire DOM ready function. Which is the reason, I were not able to get it working.
In you case, this function binds my anchor link (button) with the lighbox behavior the first time the page loads. so, it works. The next time when I refresh the update panel (which is a partial render) the button is not bound to lightbox again. Unless this binding is achieved it will not show up.
it work fine first time when page is loaded.
<script type="text/javascript">
$('body').flipLightBox();
</script>
If you need to call Javascript/jQuery function in an UpdatePanel you need place them inside the pageLoad() function:
<script type="text/javascript">
function pageLoad() {
$('body').flipLightBox();
}
</script>
This will call it on every update of the UpdatePanel.
I want to change between two pages in html with javascript, but when I change with window.location, the code that is after this sentence continues executing.
So when I do, for example, a call to getElementById() it doesn't recognize the element because the page is still loading.
function myFun(){
// ...
window.location = 'page.html';
// ... wait until page.html is loaded
}
How can I wait until the page is loaded to avoid this problem?
When you do
window.location = 'page.html';
you replace the page in the browser, the one containing the code of myFun, by a new page. There is no way for the code following this instruction to be executed.
If you want to execute it, and only after that change page (but I don't see the point), then you might do
document.onload = function(){ window.location = 'page.html'; };
You can use jQuery document.ready or you can create custom bind like this one. In case you use jQuery.
$(document).ready(function() {
window.location = 'page.html';
});
You can't execute code in your own page after doing window.location = 'page.html';. Your page will be replaced by the new page and the code in the current page will no longer be there.
The only ways to execute some code after page.html is loaded into the current window are as follows:
Load it in an iframe or another window and monitor for when the iframe or window has finished loading. In this way, your current code stays around and is not replaced.
Have some code in page.html that monitors when it finishes loading and trigger your desired action from there.
I am using an asp.net update panel to refresh the content on a page when a menu item is selected.
Within the content that is updated are images which have a javascript reflection function which is triggered with the following line of code:
window.onload = function () { addReflections(); }
This runs fine when the page is first loaded but not when a menu item is selected and the update panel is run.
On previous projects using jquery code I have replaced document.ready with function pageLoad but there is no document.ready on this page.
Like this:
<script>
// ASP.NET AJAX on update complete
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function(sender, args) {
// your code here, eg initToolTips('/Common/images/global/popup3.gif');
});
Basically, it's because that event isn't triggered by an update panel refresh.
There are ways to achieve this behaviour though, Ajax.Net has an EndRequestHandler function that you can hook into.
Here's a good example:
http://zeemalik.wordpress.com/2007/11/27/how-to-call-client-side-javascript-function-after-an-updatepanel-asychronous-ajax-request-is-over/
i think u should use
function pageLoad(sender, arg) {
if (!arg.get_isPartialLoad()) {
// in first load only
}
//every time the update panel refreshed
}
Regards
Take a look to this event:
http://msdn.microsoft.com/en-us/library/bb383810.aspx
window.onload is fired when the entire page is loaded. UpdatePanel uses an AJAX approach, so whenever it's updated and round trip ends, the page remains loaded and only a portion of this has been updated.
In other words, you need to do that "when a request to the server ends".