<script type="text/javascript" src="js/js01.js"></script>
<!-- ... -->
<form id="frmReg" method="post" onsubmit="valRegs()" action="memb_area/register.php">
Why the function valRegs() (code is placed inside js01.js file) is not executed, except I drag the code inside html file ?
How can I be sure that valRegs() is always executed before and not after code inside register.php file ?
By making sure that the script with your validation is below the form in your html.
This is because you are trying to bind to a non-existent element when the script runs.
Alternatively you should wrap your script inside a jQuery $(document).ready() or by creating an onload function.
Besides the solution Sam suggests, there is also a possibility if the js01.js contains errors, and the function is placed after the point of error. So use the broswer inspect to make sure there is no error within the js file.
Related
I tried the simplest way of calling Google Apps Script server-side function from my html using the sample code given here https://developers.google.com/apps-script/guides/html/reference/run. It works like a charm.
However, when I try to do the same thing in my actual project which has all the server code in a library, it doesn't work. I keep getting the error
"Uncaught TypeError: google.script.run.doSomething is not a function"
Here is a sample project that I created to recreate the issue
The Gdoc
Here look for "Test Menu" and click on "open sidebar" to invoke the functionality. Access the bound script to see the code and the usage of Library.
Library code
Any help with this would be much appreciated.
Example:
html:
<script>
function doSomething() {
google.script.run
.withSuccessHandler(function(msg){
window.alert(msg);//Thank's I got it.
})
.doSomething();
}
</script>
<body>
<input type="button" value="Do Something" onClick="doSomething();" />
</body>
gs:
function doSomething() {
return 'Thanks I got it';
}
You are trying to call DocumentApp.getUi() from the library.
As you can see here
A script can only interact with the UI for the current instance of an
open document, and only if the script is bound to the document.
Your library is not bound to your document. This is why your code cannot work.
You can only move those parts of your code into a library that do no use getUi() or any Not-shared resources (e.g. triggers). The documentation specifies which resources are shared and which ones are not.
I have an application using jquery 3.2.1
One of the pages contains 2 <form> elements which have the same class name, .products-ctp__search-form. The HTML for this is rendered on page load:
<form class="products-ctp__search-form">
<input name="n1" type="text">
</form>
<form class="products-ctp__search-form">
<input name="n2" type="text">
</form>
I want to target the <input> elements in each form and use an event handler to deal with the user entering input into either of them. So I've written this inside a foo.js file and then linked it at the bottom of the page:
<!-- Form markup above is here -->
<script src="foo.js"></script>
The foo.js file contains:
$(function() {
$('.products-ctp__search-form input[type="text"]').bind("keyup change input",
function (e) {
console.log('debug');
console.log(e);
});
});
When I enter text into either input it doesn't log anything to the console.
But if I paste the script above into my console, it will, e.g.
debug
VM726:4 r.Event {originalEvent: InputEvent, type: "input", target: input#n1.form-control.form-control.input-border-secondary, currentTarget: input#n1.form-control.form-control.input-border-secondary, isDefaultPrevented: ƒ, …}
Strangely if I get rid of 1 of the inputs (e.g. removing the form containing n2 and keeping n1) it works fine. Other pages in the application have just 1 input and the equivalent code - when included from a linked .js file - works fine.
So I've read jquery works in console, but not in linked js file but this seems to suggest waiting for something to load. In this case the markup is rendered on page load (not via ajax, etc) and the jquery code is inside document.ready.
There is another post jQuery works in console but not in .js file which I read but again this seems to suggest having to wait for something to load. If this is the case then what am I supposed to wait for and how to I bind this?
The linked posts make sense when you're waiting for something like an image to load. But how does this work if it's just the markup of the page? Or is that not actually the problem?
jquery is included in the <head> of the document whereas the foo.js file is inside <body>. So I don't believe it's an issue of foo.js being included before jquery, etc.
I have tried your code and found that console.log(e) is causing issue (not sure why it is throwing error in console). Comment this part and don't use bind, use 'on' as bind is deprecated in jquery.
$(function() {
$(document).on("keyup change input", '.products-ctp__search-form input[type="text"]', function (e) {
console.log('debug');
//console.log(e);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form class="products-ctp__search-form">
<input name="n1" type="text">
</form>
<form class="products-ctp__search-form">
<input name="n2" type="text">
</form>
I can't manage to link my Javascript function to my 'onclick' html attribute in the span tag.
I keep getting the error:
"Uncaught ReferenceError: closeAndRefresh is not defined" "at
HTMLSpanElement.onclick"
My code looks like this:
<div class="error">
<div id="errorMessage">
<span onclick="closeAndRefresh();">✖</span>
<p id="message">
<?php echo $confirmationMessage ?>
</p>
</div>
</div>
<script>
function closeAndRefresh() {
<?php $visibility = 'hidden' ?>
window.location.reload(true);
}
</script>
I'll also add a screenshot of my code:
Your script is after your HTML. Include it before html so that your function is defined
function closeAndRefresh(){
window.location.reload(true);
}
<span onclick="closeAndRefresh();">✖</span>
Try writing the script function closeAndRefresh() in the head tag of your html page.
Maybe the html page is not able to load the script when you write it inside the body.
If you have recently added the function to your javascript code, consider clearing the browser's cache, in order to force it reload the javascript code. To check if this is the problem, on your browser show the source html code, find the line where the javascript code is included, and click on it; it will show you the javascript source code the browser is currently using, that may be out of date. Also, as mentioned by others, make sure you include the javascript code before you reference it.
Make sure you reference the function correctly and also try putting the script above or below as it seems to be function not recognized.
Before coming here I tried few links listed in stackoverflow, but none of them helped me to get this issue fixed Or may be I am doing something wrong.
I have a input button in my aspx and have serverclick event as well as onclick, both client and server methods are called correctly, I only facing problem when the 'onclick' function is in external file(it is in same directory).
I even referenced the js file in aspx.
NOTE :
all other controls are working in external js except this.
inline function works fine, but not when moved in external function.
I even tried window.onload() but it triggers the function during pageload which is not what I need.
aspx
<script type="text/javascript" src="external.js"></script>
Input button.
<input class="data" type="submit" name="cmdSubmit" value="Run Report" onclick="return FormValidate();"
onserverclick="RunReport" runat="server" id="Submit1" />
external.js
$(document).ready(function () {
function FormValidate() {
alert("Validated");
});
Please remove $(document).ready(function () { present around your function FormValidate() to make it global function. Right now by placing it inside ready handler you are making it a local scoped function. So your external.js should be:
function FormValidate() {
alert("Validated");
}
You need to define it as global function if written in external file
function FormValidate() {
alert("Validated");
};
Removing .ready(function...) around it will make it global which will be called in html file.
You are limiting scope of function keep it out of .ready(function...)
this will allow you function to be available globally
I have written the small html code where javascript/jquery is inserted inside the tag. This approach works fine.
Now I want to divide this single file into ".html" & ".js". Where I want to separate all javascript/jquery coding part into ".js"
But the problem here I faced is that I am not able to read the values(in ".js") of any field which I have created in ".html"
Example
test.html:
<form name="attachlaunchform" id="attachlaunchform" class="form">
<input type="text" name="serial_number" id="serial_number" maxlength="16">
test.js:
serial_num=document.attachlaunchform.serial_number.value
I have included source of my external js file also.
But if I put all these in single file in test.html, it works.My query is how can I get the text box or any other value in .js?
Lets say-
Assuming you have number of events in your html file like-
$('element1').click(function(){});
$('element2').keydown(function(){});
$('element1').bind('click mouseover',function(){});
function initFunction(){
//something
}
$(document).ready(function(){
initFunction();
});
You can separate it by making an external .js file(you already trying this)
Standardize this file as an extension not just an external source.
Now separating all above functions in .js file-
(function($){
function events(){
$('element1').click(function(){});
$('element2').keydown(function(){});
$('element1').bind('click mouseover',function(){});
}
function initFunction(){
//something
}
$(window).on('load',function(){
events();
initFunction();
});
});
and then simply use this file in your html file.