First, I build a single php page with
<script type="text/javascript" >
function ShowDIV()
{
if (popUpDiv.style.display=="none")
{popUpDiv.style.display="block"; blanket.style.display="block"; }
else
{ popUpDiv.style.display="none"; blanket.style.display="none";}
}
</script>
and in my code I can call this function
<a href="#" onClick="ShowDIV();">
everything works...
but then I wanted to separate that file into
main.php (which now includes header.php)
in my header.php, I added the same JS code:
<script type="text/javascript" >
function ShowDIV()
{
if (popUpDiv.style.display=="none")
{popUpDiv.style.display="block"; blanket.style.display="block"; }
else
{ popUpDiv.style.display="none"; blanket.style.display="none";}
}
</script>
but now it doesn't work, my console tells me:
Cannot read property display of Undefined
Does it mean I have to pass somehow the propreties to the new header.php file?
There should be Selector for blanket so that you can access its properties, please check your code for blanket, right now what happening there is no blanket selector that`s why its undefined.
so please check selector is exist then only you can access its properties.
EDIT
you should never have two elements on the same page with the same ID.
Related
This is a question from a noob in javascript. I tried to find something similar the last two days but I didn't find. I try to pass an html image element to an external javascript file which I include to the rest html code. The javascript fade in and fade out an image. Because I want to use different images everytime, thus I want to have a function in an external javascript file.
What I did so far:
PHP and HTML:
<?php
if ($success){
echo"<link rel='stylesheet' href='js/jquery-ui-1.11.4-smoothness.css'>
<script src='js/jquery-1.11.3.js'></script>
<script src='js/jquery-ui-1.11.4.js'></script>
<img id='tick' src='tick.png'>
<script type='text/javascript' src='js/success_failure_signs.js'>
success_failure(tick);
</script>";
}?>
Javascript file has this code:
function success_failure(tick){
var x = tick;
x.fadeIn();
x.fadeOut(1000);
}
The browser's console doesn't give any error.
It seems that the function success_failure doesn't get the image.
What is wrong on this code and how can I fix it?
Thank you in advance!
You haven't defined tick when you make your function call. Try this...
<script type="text/javascript" src="js/success_failure_signs.js">
</script>
<script type="text/javascript">
var tick = $("#tick");
success_failure(tick);
</script>
EDIT: I've also separated the inclusion of the script and your code to call it into two separate script tags.
maybe passing the image to the script is the wrong way of thinking here.
Most of the time with Javascript for web pages the JS gets the image from the HTML site itself.
You are already including jQuery so look into how to get an element from the page with jQuery.
I swear I have included jquery in the page header, it is right there!
Nonetheless the following code, which I've included near the bottom of the page (and inline for now) gives me an error saying "TypeError: $ is not a function."
<script>
function displayResult(longA, latA, longB, latB, units) {
$("#distance").html(calcDist(longA, latA, longB, latB, units));
if (units=="m") {
$("#unitLabel").html("miles");
$("units").prop("selectedIndex",0);
} else {
$("#unitLabel").html("kilometers");
$("#units").prop("selectedIndex",1);
}
$("#longA").val(longA);
$("#latA").val(latA);
$("#longB").val(longB);
$("#latB").val(latB);
}
$("#calculateButton").click(function() { //This is the line it's complaining about
var longA=$("#longA").val();
var latA=$("#latA").val();
var longB=$("#longB").val();
var latB=$("#latB").val();
var units=$("#units").val();
displayResult(longA, latA, longB, latB, units);
})(jQuery);
</script>
Higher up in the page header I've got the following:
<script src="jquery.js" ></script>
<script src="calcDistSinglePage.js" ></script>
I'm not using Wordpress or anything, this is a very straightforward hand-coded HTML page.
Try wrapping your code in a closure (which is considered good practice anyways):
(function($) {
$("#calculateButton").click(function() {
// do stuff...
});
}(jQuery));
If this snippet still complains with the same error, there's bound to be a problem with the way you're loading the jQuery library.
Also, make sure that you don't overwrite the $ variable in your other code. For example, inside calcDistSinglePage.js.
The dollar-sign is a very straight-forward javascript variable and can be reassigned to whatever you want. According to the error, $ currently is something but not a function (otherwise you'd receive a ReferenceError stating that $ is undefined). So probably, somewhere in your code, you've overwritten it.
Make sure the jQuery library it's the first script you load.
Add this just before the closing </body> tag.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-{{JQUERY_VERSION}}.min.js"><\/script>')</script>
Download the file locally and inside js/vendor/ add the file.
Replace the value {{JQUERY_VERSION}} in the script above adding your jquery version.
Here one CDN you could use.
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
https://code.jquery.com/jquery-2.1.3.min.js
You are probably linking it from a root folder that is not your HTML folder. Use an absolute path:
<script src="/jquery.js" ></script>
Or make sure jquery.js is in the same folder as your HTML.
This question is not a duplicate of some of the other PHP & Javascript questions that have been asked here before, at least not one I have been able to find.
I have a .php file that contains some HTML elements that get rendered by the PHP for the sake of argument here we will say the file is located at http://url.php. It is looking for certain GET tags, and including a div if those get tags exist.
<?php if(isset($_GET['VAR']))
{
echo '<div id="VARDIV"></div>';
}?>
Of course I realize that this all happens on the server, and gets sent back to the clients web browser where the javascript takes over.
But in the javascript (on the same PHP page) I have the following code that executes on page load looking for that div tag and doing something with it:
if(document.getElementById("VARDIV")!==null)
{
alert('div exists!');
}
While the page loads this should logically pop up the div if the URL is http://url.php?VAR correct?
However it does not. If I run the javascript code a second time in the console it works fine, so its not a misspelling (such as getElementsById or something silly like that).
How can this possibly render out of order like this? Should the PHP engine not render the HTML then pass it back to the browser before one line of JS is executed?
EDITED FOR CLARITY BASED ON COMMENTS BELOW:
<script type="text/javascript">
function doDIVStuff()
{
if(document.getElementById("VARDIV")!==null)
{
alert('div exists!');
}
}
doDIVStuff();
</script>
<html>
<body>
<?php if(isset($_GET['VAR']))
{
echo '<div id="VARDIV"></div>';
}?>
</body>
</html>
use either window.onload() or document.onload(), see differences here
you could also place your script just before the end of your tag in the html although there could be unintended consequences in certain things in IE, seen here
Try to use jquery and document ready event:
$(document).ready(function(){
if(document.getElementById("VARDIV")!==null)
{
alert('div exists!');
}
})
If you do not want to include jquery js lib, you can use the solution here:
pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it
Actually if you place the javascript code at the end of file after all php and html code it must work.I have tested it.
<?php if(isset($_GET['VAR']))
{
echo '<div id="VARDIV">Dilip</div>';
}?>
<script type="text/javascript">
if(document.getElementById("VARDIV")!==null)
{
alert('div exists!');
}
</script>
but i think it is better to use onload event
window.onload=function(){if(document.getElementById("VARDIV")!==null)
{
alert('div exists!');
}};
Or if you are ok to use jquery then its awesome..
$(document).ready(function(){
if(document.getElementById("VARDIV")!==null)
{
alert('div exists!');
}
})
Any JavaScript that is not inside a function is executed sequentially as the page is interpreted. Your doDIVStuff(); call is executing before any HTML is interpreted on the page, therefore your "VARDIV" is not yet available in the DOM for the JS to read.
As others have suggested, the best approach is to listen for when the page is done loading and then trigger the call to your function.
Wrap in doc rdy() or just do something like this:
<html>
<head>
</head>
<body>
<?php if(isset($_GET['VAR']))
{
echo '<div id="VARDIV"></div>';
}?>
<script type="text/javascript">
function doDIVStuff()
{
if(document.getElementById("VARDIV")!==null)
{
console.log('div exists!');
}
}
doDIVStuff();
</script>
</body>
</html>
I'd say you should create a javascript file and put your code there so you can debug it.
I am working with the MVC4 application with the aid of an external js file. In the view (.cshtml) file, I have a function which performs an action of creating the row in the grid,
based on the button click.
I have defined the button click in the external .js file.
But, when I tried to call the internal script function from that external js file method, it throws an exception saying that, that particular method is not defined.
I surfed but was not able to find a convincing answer..
Is what I'm trying possible??.. How should I achieve it??
Can any Js expert out there help me with this?...
Thanks All...;)
EDIT:
this is in external .js file:
$('#AddRowButton').on('click', function () {
window.CreateRow();
}
in my view:(.cshtml)
<script>
function CreateRow()
{
// creting row goes here...
}
window.CreateRow = CreateRow; //defined like what #joseeight suggested...
</script>
This is most likely due to a scoping issue. The internal script and external must be in a different scopes. The easiest, and hackiest, way to get around this would be to add the internal method to the Window, and access it as such in the external.
//Internal script
function myInternalMethod () {
//some code..
}
window.myInternalMethod = myInternalMethod;
Since window is global, and the name is the same, you could either use window.myInternalMethod or myInternalMethod when referencing it in the external scripts.
Make sure your external file is included below the internal
.......
<script>
function createRow(){
console.log('created');
}
</script>
<script src = "external.js"></script>
</body>
yes it is possible only when you call that external js file from html where that internal javascript have..
Example :
a.html
<html>
<head>
<script type="text/javascript">
function displayAlert(){
alert('displayAlert');
}
</script>
<script type="text/javascript" src="../../abc.js"></script>
</head>
<body>
//call the sample() javascript function which is in abc.js
</body>
</html>
abc.js
function sample(){
displayAlert();
}
i've seen the other posts in regard to this, but the following method is not working for some reason.
onclick="parent.testing();"
now for the full story. i have an index.html that houses all the JS files. also within the index, i have an empty 'div' tag. with jQuery, i'm appending a page1.html file to the empty 'div'. so the index kinda looks like this:
<html>
<head>
<script files>
<script>
ready { function testing(){do stuff;} }
</script>
</head>
<body>
<div><iframe src="page1.html" (added via jQuery)></div>
</body>
</html>
now in the page1.html file, i'm trying to call a function when a link is clicked. but i'm receiving the following error:
Uncaught TypeError: Cannot call method 'testing' of undefined
i've also tried the following but they didn't work:
onclick="window.testing();"
onclick="window.frames[0].testing();"
Your parent page script isn't valid JavaScript, but assuming ready { ... }:
<script>
ready { function testing(){do stuff;} }
</script>
...is a simplification supposed to represent a document ready handler you are declaring testing() as a local function within that ready handler so it can only be accessed from within that ready handler. You need to make testing() global in the parent page:
<script>
$(document).ready({ /* your on ready stuff here */ });
function testing(){ /* do stuff; */ }
</script>
...and then you should be able to call it from the iframe using parent.testing().
If I understand your question, your problem it's your function is not called, right? So maybe a solution is to put this in your "page1.html"
<script type="text/javascript" src="your_js_file"></script>