I have a button:
<input class="formatButton verInfo2" type="button" value="Aceptar" id="btnAceptar" />
That when clicked calls a whole bunch of fun-ctions that in turn call PHP etc, the problem is that all this magic happens on another page, this button is a mere trigger. I wanted to load such other page when the button is clicked and onclick=window.location was doing the job, expect that when used like this:
<input class="formatButton verInfo2" type="button" value="Aceptar" id="btnAceptar" onclick="window.location='somepage.php';" />
It totally ignored the scripts that I have at the end of my document, I specially need it to trigger the last one because it uses the button's id:
<script src="js/jquery.js"></script>
<script type="text/javascript" src = "js/agregarPcLogic.js"></script>
<script src="js/addLab.js"></script>
I figure that such thing happens because it read the code in order and once the button is pressed and it loads the other page it just ignores the rest, so I figure that adding such scripts somewhere before could fix that but I think it would look bulky, so my question is, is there any other method or technique I could use to load a page?
Or is the best solution?
<input class="formatButton verInfo2" type="button" value="Aceptar" id="btnAceptar"
<script src="js/jquery.js"></script>
<script type="text/javascript" src = "js/agregarPcLogic.js"></script>
<script src="js/addLab.js"></script>
onclick="window.location='somepage.php';" />
Thanks alot in advance for your kind words of wisdom.
Decided to just add another script with:
$("id of button").click(function(){
window.location.href='link to page .php';
})
Related
I'm new in Chrome packaged apps and have two questions (that actually solves one problem).
I'm trying to do a simple form to send some data to a remote server, using Ajax and POST. As I understand, I can't use inline javascript ( tags) and also, I can't use events on the HTML button element. So, I've no idea where to put my javascript and what to execute when the button is clicked. My forms is as simple as this:
<!DOCTYPE html>
<html>
<head>
<script>
function send(){
//do some ajax
}
</script>
</head>
<body>
<img id="headerImage" name="headerImage" src="logo_main.gif"/>
<div>
<form>
<table>
<tr>
<td>Send:</td>
<td><input type="text" size="32" id="send" name="send"/>
</tr>
<tr>
<td colspan="2"><button id="send">Send</button>
</tr>
</table>
</form>
</div>
</body>
</html>
So my two questions are: where do I put my javascript? and how do I execute a javascript function from my HTML button element?
Thanks a lot!
P.D. I've searched for complete documentation about this, but can't find it. I'll very thankfull if some one posts a link with the complete documentation.
Your question's title does not really correspond to your question (edit it, maybe?). Answering your questions as quoted:
So my two questions are: where do I put my javascript? and how do I
execute a javascript function from my HTML button element?
Both of those questions are answered in documentation on Content Security Policy, with an example. Your JavaScript code should go in a separate file that you include with a <script> tag, and you need to bind event listeners from within that code.
To make this a proper answer, here's how to do it in your case, with jQuery (for non-jQuery solution see docs mentioned). To use, add jQuery as "jquery.js" in your app's files.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script src="form.js"></script>
</head>
<body>
<!-- ... -->
<button id="send">Send</button>
<!-- ... -->
</body>
</html>
form.js:
function send(){
//do some ajax
}
// Use document ready to wait for DOM to be created
$(document).ready(function(){
$('#send').click(send); // Binds a listener for onclick event
});
This has been driving me crazy- I can't figure out why it wont work!
I have two files: myPage.html and myCode.gs in google scripts. I have deployed the html file as a web app, and I want the onclick event for the submit button to trigger the emailTech function from the myCode.gs file but it won't work! When I run the function straight from the file, it works fine.
I've done a few hours of research and tried to add <script type="text/javascript" src="myCode.gs"></script> but that causes an error when I refresh the web app. I have tried calling the function in the onClick event as onClick= "google.script.run.emailTech()" and onClick= "emailTech()" but neither work. I have also tried loading the emailTech function into the script tag in the header, but that didn't work either! What am I missing? Please help!
myPage.html file:
<script type="text/javascript"></script>
<body>
<input type="submit" onclick="emailTech();" value="Submit" />
</body>
myCode.gs file:
function doGet() {
return HtmlService.createHtmlOutputFromFile('myPage');
}
function emailTech(){
Logger.log("is this firing?");
var message = "This is the email message";
MailApp.sendEmail("XYZ#abc.com", "This is the subject", message );
}
You were actually on track with this:
<script type="text/javascript"></script>
<body>
<input type="button" onclick="emailTech();" value="Submit" />
</body>
Don't use a submit; use a button. The semantics of submits and onclick handlers are a little bizarre (not just because of HtmlService sandboxing, but even in general) and don't play well with google.script.run. This is documented in the HtmlService user guide:
" You cannot use this technique with a regular submit button"
EDIT: New answer - use google.script.run.
<script type="text/javascript"></script>
<body>
<input type="button" onclick="google.script.run.emailTech();" value="Submit" />
</body>
I have a script tag like
<div id='CommentBox'></div>
<script src="http://www.mywebsite.com/widget.js" type="text/javascript" />
This javascript creates a comment box. (like facebook comment box)
But when users copy/paste same exact script tag more than once Chrome and IE9 does not request 2nd, 3rd file again, because it is cached. But actually people want to use comment box more than once in the same page. How can I break browser cache and force it to download as many as people pasted in their blog?
You're doing it wrong.
If you want two or more comment boxes just call the code twice. A script include is not like a function call.
Instead of Code that you write use this code:
Main HTML File:
<html>
<head>
<script src="http://www.mywebsite.com/widget.js" type="text/javascript" />
</head>
<body>
<div id="CommentBox"></div>
<script type="text/javascript">
Func1();
</script>
</body>
</html>
widget.js File:
function FUNC1(){
alert("Hello");
}
Consider the code given at the end, which makes use of jQuery Mobile to enhance buttons.
The first button (original button) appears when page loads:
The second button (inserted button) is inserted by clicking the yellow box:
The problem here is, the inserted button cannot catch up the CSS styles. This scenario is very common (and not specific to jQuery Mobile) when we work with AJAX, but I have never able to find a solution or workaround for this problem.
What can I do to enhance the inserted button with CSS styles?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript">
function insert(){
$("#result").html('<input type="button" value="Inserted button"/>');
}
</script>
</head>
<body>
<form>
<p class="ui-body-e ui-corner-all" style="padding:5px" onclick="insert()">Click here to insert the button</p>
<input type="button" value="Original button" />
<div id="result">
Button not inserted yet
</div>
</form>
</body>
</html>
After you insert the button's html:
$("#result").html('<input type="button" value="Inserted button"/>');
You can call .trigger('create') on its container to invoke the jQuery-mobile renderer on its contents, so your line would look like this:
$("#result").html('<input type="button" value="Inserted button"/>').trigger('create');
jQuery mobile adds extra elements/classes to your objects. This happens onpage load.
When you insert extra buttons or other objects (list,...) the style needs to be applied again.
in this case you use after you inserted the button $(_selector_for_new_button_).button();
jQuery mobile applies the nice button style for you.
I want send a form as soon as the page is loaded. All variables in the form are written dynamically and there is no button for submitting.
Does following JS script work in all browsers ?
<script type='text/javascript'> window.onload = function(){ window.document.forms[0].submit(); }; </script>
I doubt window.onload will work in all without any problems.
Thanks in advance...
If you're worried about compatibility in all browsers, how about using jQuery's ready function?
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
window.document.forms[0].submit();
});
</script>
Whilst I would agree that Ken's answer is perfectly acceptable, I don't believe it is correct to include a full-fat JS library just for its .ready() functionality.
For what it's worth, I'd recommend docReady. The size of docReady is 322 bytes gzipped (548 bytes uncompressed).
docReady(function() {
window.document.forms[0].submit();
});
I love jQuery, and I'd even say that there's not much of a perf impact in Ken's answer because it's likely that, if you're using the Google CDN, you've probably already downloaded it during your time on that site or others. But still, it's an unnecessary overhead on what should be a simple page IMO.
Don't use the window.onload (I mean, you can, but is easier/ more logical to do it differently). What you should do is print the form in a hidden div tag, assign an id to the submit button and then use javascript to 'click' it. Here is an example:
<div style="display: hidden;">
<form action="page/site" method="get/post">
<input type="hidden" name="name" value="value" />
<input type="submit" id="formButton" />
</form>
<script language="javascript">
document.getElementById("formButton").click();
</script>
</div>
I hope that helps.