Sorry for the noob question...I've been searching for an example but I'm obviously doing something wrong (or am way off track in what I want to do!)
I am using this:
http://www.devx.com/webdev/Article/10483/0/page/2
to create a multipage form using visibility and div sections. Seems to work very well.
I now need to be able to print (printer) one page from another page. Possible?
I'm trying to use the printThis plugin by Jason Day.
I am calling the plugin like so:
$.getScript("printThis.js", function(){
});
(plugin is in the current directory...will address that later)
<input type="button" id="B1" value="Go Back" onClick="showLayer('page1')">
<input type="button" id="B2" value="Print App" onClick="$("#page1").printThis()">
First button works as expected...goes back to page1
Second button does nothing...is syntax right? Or am I just trying to do something that can't be done?
Your first button is correct. The second button is not however. Your double quotes " within your jQuery selector is causing the onClick attribute to close prematurely. Try one of the following methods:
Inline Option 1 - Escape Double Quotes
<input type="button" id="B2" value="Print App" onClick="$(\"#page1\").printThis()">
Inline Option 2 - Use Single Quotes
<input type="button" id="B2" value="Print App" onClick="$('#page1').printThis()">
Option 3 - Remove Obtrusive JavaScript (Strongly Recommended)
<!-- Place this code in the <head></head> section of your page -->
<script type="text/javascript">
$(document).ready(function () {
$('#B2').on('click', function () {
$('#page1').printThis();
});
});
</script>
Related
Im actually having a problem with html5 button in visualforce pages. I have a requirement where when i click on a button, it should redirect to a certain page (user do not want link). For some reason which i don't know, the function i'm executing do not work with HTML5 button (in fact the page only refresh but do not redirect) but when i use input of type button, the function is executed as expected.
I want to use the html5 button as there are some specific css already defined for button in the plugin im using. Find below codes for my button and javascript function :
<button class="butt" onclick="newContact()" >Nouveau</button>
<script type="text/javascript">
function newContact(){
window.location = "/apex/VFP01_NewContact";
}
</script>
What did I do wrong here, and what is the limitation of html5 button ?
Got to know the answer. In visualforce page, the html5 button execute a submit of my form. A way to prevent this, was to specify the attribute type="button".
You really have two options.
You could consider wrapping a element with an anchor tag that points to the URL that you want to target as seen below :
<!-- Target the "YourAction" action in your "YourController" controller -->
<a href='#Url.Action("YourAction","YourController")'>
<input type="Button" id="mybutton" name="url button" value="Next" />
</a>
or you could handle this purely through Javascript and perform your navigation that way :
<!-- The onclick event will trigger a Javascript call to navigate -->
<input type="Button" id="mybutton" name="url button" value="Next" onclick="window.location.href='#Url.Action("YourAction","YourController")';" />
How can I automatically click on an object using onload() with HTML.
Here's the button I would like to be automatically clicked:
<input type="button" value="{$LANG.checkout} »" class="checkout" onclick="addtocart();" />
What I would like to happen is for the button to be clicked automatically; as soon as a certain div is loaded. I know it's possible to do with Javascript, but is there any way to do it without javascript? If javascript is the only way I am more than open to it!
As a comment says, is not need to 'trigger a click automatically', just add the functionality in a script tag (or even better, in a separate file):
HTML
<input type="button" value="{$LANG.checkout} »" class="checkout" />
JS
<script>
addToCart();
function addToCart(){
//your code here...
};
</script>
Include this tag before the tag </body> (where body finish) and it will be execute when all your HTML (DOM) be ready.
Hi I have been writing a website for the last couple of weeks but cannot get the Javascript function window.print() to run locally in my browser. I do not have server space yet so I cannot check the online functionality. Here is my code:
<form>
<input type="button" value="Print this page" onclick="window.print();" />
</form>
Does anyone know if this function can run on a local machine? Or is there a problem with my code? Thanks
The syntax is fine. It should work.
You might also want to try onclick="javascript:window.print();" and see if that works.
Another option you can try then is to create a function inside a script tag and call it from your onclick event:
<input type="button" value="Print this page" onclick="PrintMe()" />
<script>
function PrintMe(){
window.print();
}
</script>
It might be a problem with the form tag..
try using button without form requirement
<button onclick="window.print();">Print this page</button>
Or if you are using the form
<form>
<input type="button" value="Print this page" onclick="window.print();return false;" />
</form>
if alert works and then enables this to work what happens if you try
onclick="console.log(window.print());return false;"
Capitilize the C in onClick. That might help. That's how I learned it, anyway.
I'm working with html and javascript. My problems is, in one webpage a show a plot and a few button. When the user press any of this button I need show 3 or 4 options but in the same page without switching pages.
Below is my code
<form action="MyPage">
<button type="submit" value="More Options">
</form>
redirect to an other page.What I can do?
First of all, get rid of type="submit". That's what's causing the page to do stuff you don't want. The second thing is to add an onclick handler. It should return false to avoid behavior like "submit". The variable 'this' will pass the button to your function, which you might need in that code. Then fill in the body of addMoreStuff() with your code to, well, add more stuff!
<form action="MyPage">
<button onclick="addMoreStuff(this); return false; ">More Options</button>
</form>
<script type="text/javascript">
function addMoreStuff(button) {
/* your code here */
}
</script>
Drop the form (use the button alone), and look into jQuery. It's extremely easy to use, and it'll help you quickly build code your application.
HTML
<button type="submit" value="More Options" id="more">
JavaScript (jQuery)
// run "add_options" when someone clicks on the button
jQuery('button#more').on('click', add_options)
function add_options() {
//code here to add more options
}
After clicking the button the JavaScript displays the result on the new tab, but I want the results to be displayed just below the button.
<html>
<body>
<input type="button" id="button1" value="Click Here" onclick="print();"/>
<script type="text/javascript"> //script to do some task
function print()
{
document.write('My Text Goes here ');
}
</script>
</body>
You can use document.write only before the pages complete to load.
If you want to add that text after the page is loaded you have to alter the DOM using some native javascript functions (appendChild, createElement, etc), or you can use jQuery (or other javascript framework) for this. The second is easier because you don't need to concern of browser compatibility.
jQuery eg:
$("#button1").after("My Text Goes here");
Remove semicolon from onclick function but it works without any problem when writing semicolon OR not.
<input type="button" id="button1" value="Click Here" onclick="print()"/>
<script type="text/javascript">
function print()
{
document.write('My Text Goes here ');
}
</script>