Hello i'm trying to insert
<?php comments_template(); ?>
into the jQuery show function below, but it doesn't work. Is it even possible to insert the php function into jQuery?
*update
<head>
<script src="code.jquery.com/jquery-latest.js"></script>;
</head>
<button>Show it</button>
<a style="display: none"><?php comments_template(); ?></a>
<script>
$("button").click(function () { $("a").show("slow"); });
</script>
May be if your comments_template returns its result as a string, instead of directly printing it with echo, you just need something like this:
<?php echo comments_template(); ?>
Firstly, make your comments_template() return a full string.
Then, try structuring your code like this. You want to .hide() the comments on .ready(), and then .show() them when you click the .comment-button button.
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button class="comment-button">Show Comments</button>
<p class="comments"><?php echo comments_template(); ?></p>
<script>
$("document").ready(function() {
$(".comments").hide();
$(".comment-button").click(function () {
$(".comments").show("slow");
});
});
</script>
</body>
Don't use direct elements with $() in jQuery, either; use a class or an ID.
Also, if you want a brilliant framework to use that can collapse elements with subtle animations, try Bootstrap for Twitter and then do something like this:
<div class="comment-1 collapse">
<?php echo comments_template(); ?>
</div>
<button data-target=".comment-1" data-toggle="collapse">Show Comment</button>
No Javascript needed, since it's already in the bootstrap library.
Related
I have three div tags, on click of a link I want to reload the second div tag only instead of loading the complete page, I want to keep the first and third div tag as static and second div tag should be dynamic?
<div class="first">
<?php echo $data->hospital_name;?>
</div>
<div class ="second">
//content//
<div>
<div class ="third">
//content//
<div>
First of all you should make the difference between your divs by making their IDs unique as Billy said in the comment. Classes are used to make a common selector for all elements. Create your HTML like below:
<div id="first">
<?php echo $data->hospital_name;?>
</div>
<div id="second">
//content//
<div>
<div id="third">
//content//
<div>
Now to load data in only a particular div, you can use Ajax request in three ways using jQuery.
$('#second').load("load.php");
OR
$.post('load.php?param=value',function(data){
$('#second').html(data);
});
OR
$.get('load.php?param=value',function(data){
$('#second').html(data);
});
OR
$.ajax({
url:"load.php";
data: yourDataObject,
success: function(data){
$('#second').html(data);
}
});
Hope all above will help a little
You can try load
$(".second").load("yourhtml.html");
Give id to second div and then try following
#secondDivId::after {
content:"";
}
it will refresh the second div.
Try this it's working :
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#link").click(function(){
$(".second").load("abc.html");
});
});
</script>
</head>
<body>
<div class="first">
<a id="link" href="patientLogin/patientVisit_details/<?php echo $data->patient_visit_id;?>"><?php echo $data->hospital_name;?></a>
</div>
<div class ="second">
//content//
<div>
<div class ="third">
//content//
<div>
</body>
</html>
Here, abc.html is the file where your content exist that you want to display in <div class="second">...</div> on click the link.
this is the code that I have to call my index.php file.
<script type="text/javascript">
$('button').click(function(){
$.ajax({url: 'permiteCookie.php'});
document.getElementById('div_cookies').style.display = 'none';
return false;
})
</script>
<?php
session_start();
if (!isset($_SESSION['permiteCookie'])){
?>
<div class="div_cookies" style="display: block;">
<div>
<div>
<div class="cookies_botoes">
<div class="cookies_bt2">
<button id="button" name="button" type="button">Close</button>
<a id="button" name="button" href="javascript:void(null);">Close</a></div>
</div>
</div>
</div>
</div>
<?php
}
?>
and this is the code that I have in the file permiteCookie.php
<?php
session_start();
$_SESSION['permiteCookie']=1;
?>
Problem: I cant access to the $_SESSION['permiteCookie'] in the index.php file.
What am I doing wrong?
The script is running before the DOM is ready. You'll need to wrap it in a $(document).ready() handler:
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
$.ajax({url: 'permiteCookie.php'});
document.getElementById('div_cookies').style.display = 'none';
return false;
});
});
</script>
And as long as you're using jQuery, why use the plain DOM to hide the div?
$('#div_cookies').hide();
if I'm not mistaken, because session_start() affects the page headers, it needs to be at the top of the page, preferably the first line of code.
i.e. add this segment to the very top of index.php :
<?php
session_start();
if (!isset($_SESSION['permiteCookie'])){
?>
I have this code
<?php
if(!empty($auction['Auc']['beginner'])){
?>
<?= $html->image('badge/beginner_icon.png', array('width'=>"30", 'height'=>"30", 'border'=>"0", 'alt'=>"Beginner auction", 'title'=>"Beginner auc"))?>
<div class="tooltip">
<label>Beginner</label>
<label>For an explanation please click here</label>
</div>
<script>
$(function() {
$("#trigger_beginner").tooltip();
});
</script>
<?php
}
?>
Issue is when I have two auctions with same auction type for e.g like beginner in this case, then tooltip is only working for one auction. I want it to display tooltip on all similar auctions..
Change your code to use this:
<?php if(!empty($auction['Auc']['beginner'])){?>
<?= $html->image('badge/beginner_icon.png', array('width'=>"30", 'height'=>"30", 'border'=>"0", 'alt'=>"Beginner auction", 'title'=>"Beginner auc"))?>
<div class="tooltip">
<label>Beginner </label>
<label>For an explanation please click here</label>
</div>
<script>
$(function() {
$(".trigger_beginner").tooltip();
});
</script>
<?php } ?>
ID has to be unique so you need to use different IDs or a class instead.
ID of elements should be unique. No two elements should have same ID. You should use CSS class as your jquery selector
$(function() {
$(".yourCssClassName").tooltip();
});
Assuming all your auction items has the class yourCssClassName
I am working on site for users to do social netwoking. like facebook. or twitter. So far i have this code and let me show you what I want to do.
<button id="welcome">Welcome user</button>
<?php
function dal(){
alert("Hello user, welcome to my big social network")
}
?>
and i do javascript like this
<script>
document.byID('welcome').onclick = dal();
</script>
code currently is not working.
if you have any suggestion i really appreciate.
Remove the php and write this inside script tag
<script>
window.addEventListener("DOMContentLoaded",
function(){
document.getElementById('welcome').onclick=dal;
},false);
function dal(){
alert("Hello user, welcome to my big social netowkr")
}
</script>
You can't call php functions in javascript.
<button id="welcome" onclick="dal()">Welcome user</button>
<script type="text/javascript">
function dal()
{
alert("Hello user, welcome to my big social network")
}
</script>
This question really needs rewording. I honestly don't know where to start correcting the mistakes with this.... however to make the alert work for your button you need the following:
<button id="welcome">Welcome user</button>
<script>
document.getElementbyID('welcome').onclick = function(){
alert("Hello user, welcome to my big social network");
}
</script>
also you can't call or access PHP in JavaScript.
Please note the spelling mistake in your alert message too
It is considered best practice to unobtrusively add the handlers in the head instead of inline
I suggest
<?php ... ?>
<html>
<head>
<script>
window.onload=function() {
document.getElementById('welcome').onclick=function() {
alert("Hello user, welcome to my big social network")
}
}
</script>
</head>
<body>
<div id="content">
<button id="welcome">Welcome user</button>
</div>
</body>
</html>
The PHP script doesn't seem to call dis(); function..Here it is:
PHP:
if (!$_SESSION['user']) {
echo"<script type='text/javascript'>dis();</script>";
}
JS:
<script type="text/javascript">
function dis() {
$(document).ready(function() {
$("#main_text_area").attr("disabled", "disabled");
});
}
When I place just $("#main_text_area").attr("disabled", "disabled"); it disables correctly...but I need to do it on a function call...Thanks for comments.
I'd recommend, instead of disabling the textarea, outputting the content of the <textarea> as static text.
Maybe something like this:
<?php if( !$_SESSION['user'] ): ?>
<div class="text">
<?php echo $textareaContents; ?>
</div>
<?php else: ?>
<textarea id="main_text_area">
<?php echo $textareaContents; ?>
</textarea>
<?php endif; ?>
The Javascript approach you're currently taking is trivially easy to get around.