For some reason some Javascript/Jquery code does not work when placing it inside PHP.
<?php
if (x > 0) {
?>
<script type="text/javascript">
alert("Hi!");
$("#fault_message_mail").hide();
</script>
<?php
} else . . .
?>
In case x>0 it is executed only the Alert and not the hide method(I'd like to hide a div declared in some html code).
Why it is not executed? Is it prudent to use jQuery inside PHP?
I've been searching similar questions in Stack overflow, however I cannot find a positive answer.
Thank you
You'll need to attach a handler something like:
$(document).ready(function(){
("#fault_message_mail").hide();
});
or
$('#mybutton').click(function(){
("#fault_message_mail").hide();
});
You have to inlude jQuery library if you have not included :
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
and then you have to write you code inside ready function like this :
$(document).ready(function(){
("#fault_message_mail").hide();
});
and third thing is that you have written a wrong syntax here :
<?php
if (x>0){ ?>
^
it should be like this :
<?php
if ($x>0){ ?>
maybe the element is not in the dom, try the following
if (x>0){ ?>
<script type="text/javascript">
jQuery(function ($) { // run on document.ready
alert("Hi!");
$("#fault_message_mail").hide();
});
</script>
<?php }
Related
I already visited this link,
How to include php file using Jquery?
but when I m trying it in my code, its not working. What could be the issue?
index file
<div id="content">Hi</div>
<script type="text/javascript">
var about_me = "<?php include('del.php') ?>"
$('$content').click(function(){
$('#content').load(about_me);
});
</script>
del.php
<?php
echo "hi again";
?>
First, make sure you include the jQuery library.
Second, don't use include as it isn't necessary. You will just load the file via jQuery:
<script type="text/javascript">
$(document).ready(function(){
var about_me = "del.php";
$('#content').click(function(){
$('#content').load(about_me);
});
});
</script>
NOTE: You have a typo in your selector $content should be #content to make it clickable. I have also included a document ready function in the event your script is at the top of the page, instead of the bottom.
.load() accepts url (type string) as first parameter, not a php code.
Try to change it from:
var about_me = "<?php include('del.php') ?>"
To: var about_me = "/del.php"
EDIT: You have a typo in your event listener's selector, should be $('#content').click() instead of $('$content').click()
I have this code on Wordpress post:
<input type=text id="testni" value="la">
and this code in functions.php:
<script type="text/javascript">
$function(){
$("#testni").attr("value", "petra");
}
</script>
This does not work. I guess i have to add some php code?
How to call JS from php?
What you want is this
<script type="text/javascript">
$(function(){
$("#testni").val("petra");
});
</script>
Read about DOM ready
Read about setting an input value
If you need to call js in wordpress.. You need to add action in functions.php file. Try the below method.
<?php
add_action('wp_footer','custom_script');
function custom_script(){
echo "<script type='text/javascript'>
$function(){
$('#testni').attr('value', 'petra');
}
</script>";
}
?>
Or else simply add your script in header.php or footer.php.
The Jquery will not run. After the button is clicked, I'd like it add text, "Hello Everyone" after the Say: between the tags. The jquery.js file is uploaded to my server and is in the same place as the testpage.php file.
Should my button be inside <html></html> or is it something else?
my testpage.php code:
<?php
echo '<button id="some-btn">Test</button>
<script src="jquery-3.2.0.min.js"></script>
<p>Say: </p>
<script>
$(document).ready(function () {
$("#some-btn").click(fucntion (){
$("p").append("Hello Everyone");
});
});
</script>';
?>
You have mistakes in your code. E.g. fucntion is misspelt, should be function
<?php
echo '<button id="some-btn">Test</button>
<script src="jquery-3.2.0.min.js"></script>
<p>Say: </p>
<script>
$(document).ready(function () {
$("#some-btn").click(function (){
$("p").append("Hello Everyone");
});
});
</script>';
Like Qirel mentionned, I prefer to break the php. That way you prevent having too large strings in PHP.
Should my button be inside or is it something else?
Your elements should be between your body tags. You can also change your click function to the next one:
$(document).on('click', "#some-btn",function (){
$("p").append("Hello Everyone");
});
This way your event will trigger even for the elements that are added to the DOM once it is rendered.
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 have a site i'm working on http://trueproperty.org/ and on the front page i have two divs, one is #excerpt and the other is #content. #content is filled using
<?php the_excerpt(); ?> <button id="readmore">Continue Reading...</button>
and #excerpt is filled using
<?php the_content(); ?> .
content is set to display:none. now i use this code to display #content and hide #excerpt when the user clicks continue reading, it works in jsbin, but not on the actual site, and i cant figure it out :/.
<script type="text/javascript">
$(document).ready(function(){
$("#readmore").click(function(){
$('#content').show('slow');
$('#excerpt').hide('fast');
});
});
</script>
It doesn't seem like you reference the Jquery library before you actually use the jQuery object. Try placing the code after the:
<script type='text/javascript' src='http://trueproperty.org/wp-includes/js/jquery/jquery.js?ver=1.7.1' />
You are loading two files that uses $ as alias ..
The following works:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#readmore").click(function(){
jQuery('#content').show('slow');
jQuery('#excerpt').hide('fast');
});
});
</script>
But it would be better to look for the conflict issue and use jQuery.noConflict
Place this code at the end of Head tag.
<script type="text/javascript">
$(document).ready(function(){
$("#readmore").click(function(){
$('#content').show('slow');
$('#excerpt').hide('fast');
});
});
</script>