I am new to the jsp. I am creating a jsp page.Index.jsp, I want that when this index.jsp is loading one modal pop up should appear that would ask the user to enter some information.Please let me know how to add it.
You can do something like this using jQuery.Download jQuery file and place it under your webapps directory,
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(showWindow());
function showWindow(){
window.open('mathutil.jsp','myWindow','height=255,width=250,toolbar=no,directories=no,status=no,continued from previous linemenubar=no,scrollbars=no,resizable=no ,modal=yes');
}
</script>
This will be called before your JSP page get loaded.
If you want something as soon as page get loaded (e.g. wait until all assets have finished downloading, such as images and scripts.) use onload() in your body tag.
Related
I'm learning jQuery and Javascript, and I'm trying to understand why my code is not working.
I'm doing this from inside a custom plugin in WordPress.
My javascript file with the function I'm trying to call is enqueued in the WordPress footer:
<script type='text/javascript' src='..... gf_timer.js?ver=1.1.0.1'></script>
and my PHP is generating items like the following:
<div id="gf_timer_1">Placeholder</div>
<script type="text/javascript">$j=jQuery.noConflict(); $j(window).on('load',gfInitTimer(1));</script>
I just want to call the function gfInitTimer() after each div. I keep on getting an error "gfInitTimer is not defined".
So I added the onclick handler as a test and that's finding the function properly:
<div id="gf_timer_1" onclick="gfInitTimer(1)">Placeholder</div>
<script type="text/javascript">$j=jQuery.noConflict(); $j(window).on('load',gfInitTimer(1));</script>
I thought the window.on('load', should fire after the page and all scripts are loaded.
What am I missing?
if you want to load gfInitTimer right after the page is loaded try using ready as shown:
$(document).ready(function(){
//run your gfInitTimer here
});
I have three different ways to add Twitter code for loading Twitter button that seems almost identical to me, but for some reason only two of them do work.
Here is how I define Twitter button in HTML:
Tweet
Here is a fist method that works, just embed JavaScript code in the page:
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
Here is a second way that works, put this function into a separate file and load this file on page load:
<script>
$(window).bind("load", function() {
// js/social.js just contains the same code that
// was in <script> tag in previous example
$.getScript('js/social.js', function() {});
});
</script>
But if I just include js/social.js file via tag it doesn't work:
<!-- js/social.js here has the same content as in the previous example -->
<script type="text/javascript" src="js/social.js"></script>
and image does not load.
Could you explain what it the difference between those variations?
I am using Firefox 40.0.3
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="a.js"></script>
</head>
<body>
<script>
functionFromAJS();
</script>
</body>
</html>
this works OK most of the time, but on production server, its not 100%. It says that functionFromAJS() doesnt exists, which is ok, if the .js is not gets loaded in time. But then what to do?
EDIT: Using the window.onload function should not do any difference as long as the script you're embedding is loaded before the function call. Then the a.js file will be loaded before <script>functionFromAJS();</script> anyway and you should be able to execute the function if it exists.
Try using:
<script>
window.onload = function() {
functionFromAJS();
};
</script>
So that the function is not called before the document is fully loaded.
Or if you're using jQuery you can use:
<script>
$(document).ready(function() {
functionFromAJS();
});
</script>
If the function doesn't exist, then it's not a matter of the file not being loaded in time, then the file isn't loaded at all.
When the browser encounters a script tag for loading a file, then it will stop the parsing of the page until the file has been loaded, or until the file fails to load. The functionFromAJS will never be called before the browser has completed the attempt to load the file.
If the file fails to load, then there isn't much you can do. You can check if the function exists before you call it to avoid the error. You could even try to load the script again, but if it failed the first time then it's likely that it will still fail.
I have put javascript into a custom payment method block template .phtml like so:
<ul class="form-list" id="payment_form_<?php echo $this->getMethodCode() ?>" style="display:none;">
<div>
<script type="text/javascript">
//<![CDATA[
...
//]]>
</script>
</div>
</ul>
the Javascript controls the disabling and showing of input fields in my custom payment method form.
But the script does not load when my payment method custom form appears.
I was able to place the script into the head of the checkout html page using layout block reference.
But that does not work since the payment method custom form is loaded after the JS is loaded.
I'm just trying to load the JS with the form, but that does not work. How can I do this?
You can try:
alert('here') / console.log('here') in the script to make sure it got called.
wrap your script in:
document.observe("dom:loaded", function() {
// your scripts
}
To make sure it load last.
I have 6 different stylesheets, and 1 html page. What i need to do is have the page load one of the stylesheets randomly when it is accessed.
And also, when the user visits and a random stylesheet is loaded, is it possible to remember which stylesheet was loaded, and only load that stylesheet for that particular visitor (i.e. stop randomising... load the style sheet which was originally loaded)?
I have jQuery loaded into html document.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script>
$(document).ready(function(){
var userStylesheet = $.cookie('user_stylesheet');
if(!userStylesheet){
userStylesheet = Math.floor((Math.random()*6)+1);
$.cookie('user_stylesheet', userStylesheet);
}
var ss = $('<link/>').attr('rel', 'stylesheet').attr('type','text/css').attr('href', 'stylesheet' + userStylesheet + '.css');
$(document.body).append(ss);
});
</script>
</head>
<body>
Hello!
</body>
</html>
EDIT
Here's the link for the jquery.cookie.js RAW
Do you have any kind of server-side scripting at your disposal? If so I would decide which CSS file to serve on the server, and save the value in a session variable—then if that session variable is set on subsequent page loads, output it instead of generating a new one.
Alternatively, you can try setting a cookie in javascript or local storage.