Jquery inside PHP block - javascript

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.

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

How to call js jQuery from functions.php in Wordpress

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.

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 }

How to include javascript onclick event in Chtml::link

I have tried with this code, but it wont work. it works fine when i write it to onmouseover event.
echo CHtml::link('Form',
array('id'=>'submitButton'),
array('class'=>'linkClass','onclick'=>'formSubmit();'))
//Javascript
echo CHtml::script("
function formSubmit(){
$('#supplier-form').submit();
}");
Try writing javascript code inside the script tags:
<script>
function formSubmit(){
$('#supplier-form').submit();
}
</script>
after hours of searching finally found the answer.
just add return false inside onclick event after you call function name.
array('class'=>'linkClass','onclick'=>'formSubmit(); return false;'))
and javascript function should be inside <script> tags as rdanusha mentioned
<script>
function formSubmit(){
$('#supplier-form').submit();
}
</script>

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