How to call js jQuery from functions.php in Wordpress - javascript

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.

Related

How to include php file using jquery

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()

JQuery Very simple POST not work

I'm trying to simply POST something using JQuery. when the element is clicked, I want the page redirect to the php file and echo out the POST value.
Html file
<html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div onclick="posttest();" >hi there</div>
<script>
function posttest(){
var txt="hi";
$.post("testpost.php", {testVar: txt},function(){
window.location.href = "testpostphp.php";
});
}
</script>
</html>
PHP file
<?php
var_dump($POST["testVar"]);
?>
There is $_POST variables in PHP, not $POST.
Try this:
$.post("testpost.php", {testVar: txt}, function(response){
console.log(response);
});

How to call custom.js file in for loop and i want pass some argument with this js

How to call customs.js file in for loop and i want pass some argument with this js,And how to retrieve this var in JavaScript file.
for($i=0;$i<5;$i++)
{
<script type="text/JavaScript" src="http://localhost/customs.js?var=test'">
}
A better way to do this would be to include your custom.js in the html of the webpage and wrap it's code in a function to which you can pass a variable, like so:
<html>
<head>
<script type="text/JavaScript" src="http://localhost/customs.js"></script>
</head>
<body>
<!-- Your HTML -->
<script>
<?php
for($i=0; $i<5; $i++){
echo "custom(".$myvar.");";
}
?>
</script>
</body>
</html>
Then in your custom.js file you can do this:
function custom(input){
//Do something
}
I should note that you should be careful inserting unsanitized PHP into html directly. For more info, see: How to prevent XSS with HTML/PHP?

Jquery inside PHP

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 }

jquery show/hide not working on wordpress

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>

Categories

Resources