Why does window.onload ignore postback? - javascript

Consider the following js code (to click an asp.net Button on load):
function doSomething()
{
document.getElementById("<%= theButton.ClientID %>").click();
}
window.onload = doSomething;
When the page is loaded - the codebehind of the button is executed, and the page is loaded again (with new information). This should have introduced a bug of an infinite loop, but it doesn't. It is only called once, and ignored in the postback.
Why?

Assuming you want the doSomething method to be called only the first time the page loads:
You should add your call to doSomething to the page using Page.RegisterStartupScript in the code behind, but wrap it in an if statement that checks if it is a postback. That way, your method will only be called the first time the page loads:
if(!Page.IsPostBack)
{
Page.ClientScript.RegisterStartupScript(GetType(), "buttonClickScript" "window.onload = doSomething;", true);
}

Related

functions with button.click() are not executing the click part

I have 2 function as below:
<script type="text/javascript">
sm=()=>{
document.getElementById('show').click()
console.log('show')
}
hm=()=>{
document.getElementById('hide').click()
console.log('hide')
}
</script>
When the functions are called they do get executed (cause i can see the console.log) but the button click never gets executed. although when I tried the below jQuery the sm() got executed with all its lines(including the click)
$("#ss").ready( function(){
document.getElementById('show').click()
console.log("show")
});
the whole idea is that I want to show a modal when the page starts loading (with loading spinner) and then when the page is fully loaded (including getting database data and inserting them into a table). the modal gets automatically hidden
i prefer vanilla js rather than jquery

on print click how to open another page?

I have written following function to call another page when i will click print button. but when i click on print button it opens current page instead of the one which i want to call.
function printme(tripId, requestId, Ecommerce) {
//alert("print is called");
alert(tripId);
alert(requestId);
alert(Ecommerce);
window.location.href = "ViewTripConformationPrint.cshtml?";
window.print();
//workaround for Chrome bug - https://code.google.com/p/chromium/issues/detail?id=141633
if (window.stop) {
location.reload(); //triggering unload (e.g. reloading the page) makes the print dialog appear
window.stop(); //immediately stop reloading
}
return false;
}
The problem you're having is that the code after you set window.location.href is executed immediately. The page isn't loaded and then the code continues... you code continues until the end of the function and then window.location.href is actually loaded and processed. If you see what I mean.
You could try moving your code (window.print, if window.stop, etc) into ViewTripConformationPrint.cshtml (as part of onload).

location.reload(), Javascript,HTML

I'm having a problem always when I try to use the following code in a button in my HTML file.
onClick=window.location.reload();
mapGenerator();
The page reloads but the javascript (mapGenerator) that make a D3JS view doesn't appear. What am I doing wrong?
location.reload() will immediately reload the page and prevent any following code to execute.
You can, however, create a function that executes your method after the page has (re)loaded:
window.onload = function() {
mapGenerator();
};
This method will run every time the page has fully loaded. To only run the code after you have reloaded the page using location.reload(), you could create a method that handles the click by setting a cookie and then reloading the page.
function handleClick() {
document.cookie="reload=true";
location.reload();
}
This would require you to change your onClick value to onClick="handleClick();". Now, whenever the page loads, you can check whether the cookie has been set. Your window.onload function now changes to this:
window.onload = function() {
if(document.cookie.indexOf("reload") >= 0) {
mapGenerator();
}
}
Checking if a cookie exists - answer by Michael Berkowski
After the reload it's up to you whether you want to unset the cookie — if you don't, the page will run the function mapGenerator on every page load until the cookie expires.
If you need more help with cookies, check out W3Schools' tutorial.
As per your description mentioned above two actions are to be taken on click. As the first action reloads the page the second action is lost. If you want any action to be taken on load of the page, mention the same on onload event of the page.

Counting instances of a class - injecting jQuery into a third party website using Firebug?

I am accessing a third party web page with a comments section.
The site in question: http://www.cbc.ca/news/technology/canadian-led-research-looks-to-grow-strawberries-on-mars-1.2704433
The comments section only shows a few comments and displays a "Show More" button. I am writing a script that will continue to automatically press the "Show More" button until all the comments have been displayed. Once the "Show More" button no longer displays I want to trigger a new function.
I am trying to achieve this by "injecting" my own JavaScript into the third party page through the command line in Firebug (2.0.1) in Firefox (30.0).
Using Firebug I have found that the "Show More" button's class is vf-load-more. I created a setInterval() function call and have been able to successfully "click" the button repeatedly.
Now I am trying to implement an "end of comments" recognition. I am doing this by counting the instances of vf-load-more on the page. If there are no instances of vf-load-more, start the next function.
numShowMore = $('.vf-load-more').length;
if (numShowMore == 0) {
clearInterval(interval1);
nextFunction(); //This function has not been written yet
}
The problem: $(".vf-load-more").length; is returning undefined. Why? The button is on the page.
The code in it's entirety:
//This injects a jQuery reference into the header
var script = document.createElement('script');
script.src = '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js';
document.body.appendChild(script);
//If jQuery is loaded execute the rest of the code
if (!window.jQuery)
{
alert('jQuery is GO');
var numShowMore;
function clickButton()
{
numShowMore = $('.vf-load-more').length;
alert('numShowMore = ' + numShowMore); //This alert returns "undefined"??
if (numShowMore == 0) {
clearInterval(interval1);
nextFunction(); //This function has not been written yet
}
$('.vf-load-more').click();
}
var interval1 = setInterval(clickButton, 3000);
}
Now it gets weird. If I let the interval keep running and "clicking" the "Show More" button until all the comments are displayed, it will eventually stop displaying the "Show More" button. I then force the interval to stop by running clearInterval(interval1); in the command editor and then when I run the following code it alerts numShowMore = 1 but the button is no longer there.
numShowMore = $('.vf-load-more').length;
alert('numShowMore = ' + numShowMore);
Why is it not 0?
I have tried replacing the jQuery $ with jQuery and it worked. I am not sure why but I think maybe that jQuery is making a conflict with another library that is loaded on the page.
$('.vf-load-more').length;
is replaced with
jQuery('.vf-load-more').length;
and
$('.vf-load-more').click();
is replaced with
jQuery('.vf-load-more').click();
I also noticed something wrong in your code, in the if condition which checks whether jQuery is loaded or not, the condition is reversed, it shall be
if (window.jQuery){
//do stuff
}
However, because you are loading an external script which might take time to load, the condition might be false if the library is not loaded, so it's better to use setInterval or setTimeout to check whether jQuery is loaded or not and if it's loaded, then execute your code.
Something like this:
//If jQuery is loaded execute the rest of the code
var jqueryCheckTimer = setInterval(function(){
if(window.jQuery){
clearInterval(jqueryCheckTimer);
var interval1 = setInterval(clickButton, 3000);
}
},100);

strange issue with js in updatePanel

I have a link in an update panel which calls a js method to do printing of the current window:
Print Coupon
where the js method is called on Page_Load event:
private void loadJs()
{
String flashMap = "script";
if (!Page.ClientScript.IsClientScriptBlockRegistered(this.Page.GetType(), flashMap))
{
ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), flashMap, "function print(){ alert('test'); window.print(); return false; }", true);
}
}
When pressing the link, the alert window is shown multiple times (after I click "Ok", which seems strange) but window.print() is never called (a new tab for printing is not opened).
If I directly call javascript:window.link from href it works, but because the link is contained in an update panel, it no longer works second time (that's why I tried to register the script).
Can anybody see the issue here?
I believe window.print(); is actually calling your print() function recursively. Try changing the name of your js function.

Categories