onclick attribute can't find Javascript function - javascript

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.

Related

external javascript file function call from html not working (Google Chrome Extension)

I know this question has been asked a lot, but none of the solutions to the question have worked for me. This is for a Google Chrome Extension. I am calling a javascript function in an html file like this:
<div style="text-align:center">
<input type="button" onClick="buttonClicked()" value="Activate Extension">
</div>
<script type="text\javascript" src="eventPage.js"></script>
</body>
</html>
in eventPage.js:
function buttonClicked() {
var uname = document.getElementById("uname").value;
alert("Extension activated. Enjoy!");
}
I have tried moving the html tag in the head and the body and nothing changes. Any and all help is greatly appreciated.
Changing the type should work. If not check if the external reference path is correct and all the javascript is available.
Also check if you see any errors in developer console.
Try to add some breakpoints and see if that function is being called.
It's because of this line var uname = document.getElementById("uname").value; where you are giving a variable to the button value.It is only needed when there is input type "text" where there will be text in the text box.
Your code should be following and it works fine.
<div style="text-align:center">
<input type="button" onClick="buttonClicked()" value="Activate Extension">
</div>
<script src="eventPage.js"></script>
</body>
Just remove variable line from the javascript.
function buttonClicked() {
alert("Extension activated. Enjoy!");
}

Call javascript function within a PHP form

The architecture I use to load contents onto a common area on the web page is as below
I have a java script function within the form as shown below called javaScriptFunc which never gets invoked.
Is it possible to invoke a java script function within a form?
Please do let me know if more clarity is needed. I'll try to clarify. I'm stuck with this for a while now. I'd appreciate any help please
I think you are missing some PHP tags if I understand what you are trying to do correctly. Try this:
<form method="post" action="" id='somdId'>
<?php
require_once 'some_php_file.php';
if (isLoggedIn()) {
// Some PHP code here
?>
<script>
javaScriptFunc(<?php echo formatJson(someArgs); ?>);
</script>
<?php
}
?>
Not very clear what you want. You need to echo the script like this
echo ("<script type='text/javascript'>javaScriptFunc(" . formatJson(someArgs) . ");</script>");
provided you have already defined the function javaScriptFunc somewhere else in script.
For some reason, I the JS function doesn't seem to fire from within a form. I've worked around by re-writing the load logic to load the whole PHP page instead of a form. just a different way of doing things.

How to insert script tag and execute response via src?

I have a script tag which calls a remote JavaScript snippet through src, and writes it on the page, thus rendering a banner in the process.
I'm looking for a way to call the script, or insert the script via JavaScript. Right now it looks like this:
<div id="<?php print $banner_id; ?>" class="banner-responsive <?php print $breakpoints; ?>">
<script src="<?php print $url; ?>"></script>
</div>
This is the preferred method supplied by the banner vendor. I'm looking for a way to implement it more like this:
<div class="banner">
<div id="<?php print $banner_id; ?>">
<script type="text/javascript">
function banner_load(){
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = '<?php print $url; ?>';
var x = document.getElementById('<?php print $banner_id; ?>');
x.parentNode.appendChild(s);
}
if (window.attachEvent)
window.attachEvent('onload', banner_load);
else
window.addEventListener('load', banner_load, false);
</script>
</div>
</div>
This sort of works. It inserts the script tag, and calls the remote URL, but it does not execute the JS snippet received like it does in example 1, and because of that the banners do not appear. Is there a way for me to execute the script src at will?
What the src response could look like:
document.write("<a target='_blank' href='http://domain/?options'><img src='http://domain/whateever-930x180px.jpg' alt='Click here' /></a>");
I want to do this, so I can switch banners at specific moments, based on pre-defined break points. How would you go about this? Any thoughts?
Update: I don't have any control over the output. It's an external banner supplier. I take it that this is impossible?
You cannot dynamically load javascript that uses document.write() and get the result you want.
Dynamically loaded javascript runs AFTER the DOM has been loaded. When document.write() is used after the DOM has been loaded, it clears the entire document and starts a new empty document. As such, it will not do what you want.
If you want to dynamically load the Javascript, then you will need to use DOM manipulations (e.g. document.createElement() and elem.appendChild()) to insert your banner into the existing DOM and not use document.write(). document.write() is only useful for this type of problem when it is done inline with sequentially loaded javascript either inline or via <script> tags in the markup (not via dynamically loaded javascript).
There are several ways you can do this:
Instead of returning a document.write, you could return a HTML snippet and then use appendChild to write your banners. Generally using document.write is a bad javascript practice.
If you must use document.write, then rather than inserting the script tags url insert the response from the url directly into your banner_load function.

Javascript form validation by the code inside a separate file

<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.

Kohana 3 JavaScript issue

We have a simple JQuery date picker that we are trying to include on a page. The function works on a strait html site, however, when we include the working function via Kohana the function does not work. We have tried including it both as a file by loading all of the JavaScript references in an array in a template and printing them with
<?php foreach($scripts as $file) { echo HTML::script($file, NULL, TRUE), "\n"; }?>
As well as simply putting the script in a separate view and using view::factory to include the file. When we do the latter the </script> tag is not recognized by browsers or at least its syntax highlighting is not picking it up, though this does not effect other scripts such as Google maps. For what ever it is worth, here is the function:
jQuery(function(){
jQuery(".datepick").datepicker();
});
and the element it is acting on is:
<input class="datepick" id="to" type="text" />
Does anyone have any suggestions for us. We are getting pretty desperate to make this one little simple function work.
You probably don't need the last TRUE on the HTML::script() call, as that will add index.php to your script URL, implying that you are using PHP to serve the actual script files.
In this case, I think your call should just be:
<?php foreach ($scripts as $file) { echo HTML::script($file), "\n"; } ?>
I don't think this is related to Kohana but to your HTML code.
How do you include your scripts (is jQuery included before your javascript code) ?

Categories

Resources