I have a php function:
function myfunc() {
//then I have a div...
echo '<div class="overlay">';
echo "<button onclick=\"$('.overlay').hide();\">Close</button>";
echo '</div>';
}
My problem is that when I click on the close button the div is not hiding.
What I'm I doing wrong here?
Avoid to hardcode javascript handlers and inline events inside the output of php code: do instead
echo '<div class="overlay">';
echo "<button>Close</button>";
echo '</div>';
and previously insert in your page this code that detects a click on your button using event delegation
<script>
$(document).on('click', '.overlay button', function() {
$(this).parent().hide()
});
</script>
try:
<button onclick="this.parentNode.style.display = 'none'; return false;">Close</button>
Try this code:
function myfunc() {
//then I have a div...
echo '<div class="overlay" id="overlay" >';
echo "<button onclick=\"hide()\">Close</button>";
echo '</div>';
}
//using the javascript code:
function hide()
{
document.getElementById("overlay").style.display="none";
}
try:
$('.overlay button').live('click',function(
$('.overlay').css({'display': 'none'});
));
Related
I have this code in .php that retrieves a contact form:
echo '<div class="hsk-column4 hsk-agency-inquiry-form">';
echo hsk_agency_enquiry_form();
echo '</div>';
How can I make a popup appear with the contact form when pressing a button with id="btn-contact"?
Thanks.
Maybe you are talking about Modals? Should help...
https://getbootstrap.com/docs/4.0/components/modal/
You can do it with jQuery
PHP:
<button id="btn-contact">Open Contact</button>
<?php
echo '<div class="hsk-column4 hsk-agency-inquiry-form">';
echo hsk_agency_enquiry_form();
echo '</div>';
?>
jQuery:
jQuery(document).ready(function( $ ) {
$("body").on("click", function(){
$(".hsk-column4.hsk-agency-inquiry-form").removeClass("active-form");
});
$("#btn-contact").on("click", function(event){
$(".hsk-column4.hsk-agency-inquiry-form").addClass("active-form");
event.stopPropagation();
});
});
CSS:
.hsk-column4.hsk-agency-inquiry-form {
display: none;
}
.active-form {
display: block;
}
How to make it so that this code will be activated (without the automatic timer ofcourse) on the click of a button and refresh a div that has been set.
So for instance with this button:
<a id="refresh">Refresh</a>
This code works, but automaticly refreshes every second.
<script>
var auto_refresh = setInterval(
function()
{
$('#load_new').load('class_admin_search.php?logfile=<?php echo $_GET['logfile']; ?>&search=<?php echo $_GET['search']; ?>');
}, 1000);
$(document).ready(function(){
$('#load_new').load('class_admin_search.php?logfile=<?php echo $_GET['logfile']; ?>&search=<?php echo $_GET['search']; ?>')
})
</script>
I couldn't find any code which was working, this is the closest which I could find, the rest doesn't work.
Many thanks.
use below code. you dont need to use setInterval function.
$(document).ready(function(){
$(document).on('click','#refresh',function(){
$('#load_new').load('class_admin_search.php?logfile=<?php echo $_GET['logfile']; ?>&search=<?php echo $_GET['search']; ?>')
});
});
I'm having trouble with a jQuery script for voting on posts. I have a "frontpage" with a list of posts from a mysql db. On each post there is a little votebox you can either vote up or down.
jQuery/ajax script:
<script type="text/javascript">
$(document).ready(function() {
$('.plus-button').click(function(){
var postid = <?php echo $postloopid; ?>;
$('.minus-button').removeClass('disliked');
$(this).toggleClass('liked');
alert(postid);
$.ajax({
type:"POST",
url:"php/votesystem.php",
dataType : 'html',
data:'act=like&postid='+postid,
success: function(data){
$('.plus-button').html(data);
}
});
});
$('.minus-button').click(function(){
var postid = $(this).attr('id');
$('.plus-button').removeClass('liked');
$(this).toggleClass('disliked');
$.ajax({
type:"POST",
url:"php/votesystem.php",
dataType : 'html',
data:'act=dislike&postid='+postid,
success: function(data){
$('.minus-button').html(data);
}
});
});
});
</script>
Votebox.php
<?php
// If postid is from frontpage use $postloopid as $postid
if(isset($postloopid)){
$postid = $postloopid;
}
$postid = htmlentities($postid, ENT_QUOTES);;
include("connect.php");
//For test purposes
echo $postid;
// If user logged in show votebox
if(isset($_SESSION['username'])){
$userid = $_SESSION['userid'];
$sql2 = mysqli_query($connect,"SELECT * FROM posts WHERE id='$postid' AND deleted=0");
if($sql2){
$voterow = mysqli_fetch_assoc($sql2);
$checkupvote = $voterow['upvoters'];
$checkdownvote = $voterow['downvoters'];
$checkupvote = explode(" ",$checkupvote);
$checkdownvote = explode(" ",$checkdownvote);
if($checkupvote = array_search($userid,$checkupvote) == true){
echo '<div class="plus-button liked" name="like">+ ' . $voterow['totalupvotes'] . '</div>';
echo '<div class="minus-button" name="dislike">- ' . $voterow['totaldownvotes'] . '</div>';
}
elseif($checkdownvote = array_search($userid,$checkdownvote) == true){
echo '<div class="plus-button" name="like">+ ' . $voterow['totalupvotes'] . '</div>';
echo '<div class="minus-button disliked" name="dislike">- ' . $voterow['totaldownvotes'] . '</div>';
}
else{
echo '<div class="plus-button" name="like">+ ' . $voterow['totalupvotes'] . '</div>';
echo '<div class="minus-button" name="dislike">- ' . $voterow['totaldownvotes'] . '</div>';
}
}
else {
echo 'No result <br />';
}
}
else {
echo 'Cant find user';
}
?>
Frontpage:
<?php
$sql1 = mysqli_query($connect,"SELECT * FROM posts WHERE totalupvotes < $trendmin AND deleted=0 ORDER BY added DESC LIMIT 0,10");
if($sql1){
while($row = mysqli_fetch_array($sql1)){
$postloopid = $row['id'];
?>
<div id="postlist">
<div style="width:400px; font-size:18px; font-weight:bold;">
<a target="_blank" href="post.php?id=<?php echo $row['id']; ?>"><?php echo $row['title']; ?></a>
</div><br />
<article class="slide"><?php echo nl2br($row['post']); ?></article>
<br />
<?php include("php/votebox.php"); ?>
<br />
by <a style="font-size:18px;" href="profile.php?id=<?php echo $row['submittedby']; ?>"><?php echo $row['submitteduser']; ?></a>
at <span style="font-size:12px;"><?php echo $row['added']; ?></span><span style="float:right; margin-right: 10px;"><a target="_blank" href="post.php?id=<?php echo $row['id']; ?>#commentfield"><?php echo $row['totalcomments']; ?> comments</a></span>
</div>
<?php
}
}
?>
The problem now is that when I click the votebox buttons it turns out I only get the postid from the first loaded post from the while loop. Another problem I have is that my total up- and downvotes changes in all the posts on the list, not the specific post.
Any ideas?
The Javascript code isn't in the loop, it can't reference postloopid. Or if it is, you're binding all buttons of the class every time through the loop, and clicking on them will run all the handlers, incrementing all the posts.
You should put the post ID as a data field in the button, and then access that from the Javascript:
echo '<div class="plus-button liked" data-postid="'+$postid+'" name="like">+ ' . $voterow['totalupvotes'] . '</div>';
echo '<div class="minus-button" data-postid="'+$postid+'" name="dislike">- ' . $voterow['totaldownvotes'] . '</div>';
Then your Javascript can do:
$('.plus-button').click(function(){
var postid = $(this).data('postid');
$(this).siblings('.minus-button').removeClass('disliked');
$(this).toggleClass('liked');
alert(postid);
$.ajax({
type:"POST",
url:"php/votesystem.php",
dataType : 'html',
data:'act=like&postid='+postid,
context: this,
success: function(data){
$(this).html(data);
}
});
});
I made the following changes to the JS:
Use $(this).data('postid') to get postid.
Only remove the disliked class from the sibling minus button, not all minus buttons on the page.
Put the returned HTML just in this element, not in all plus buttons. I pass this in the context: parameter, so that the success function can refer to it.
Alright lets go through your jQuery code(just the like function):
Bind click handler to all elements with the class plus-button
$('.plus-button').click(function(){
var postid = <?php echo $postloopid; ?>;
Remove disliked class from all elements with class minus-button
$('.minus-button').removeClass('disliked');
$(this).toggleClass('liked');
alert(postid);
$.ajax({
type:"POST",
url:"php/votesystem.php",
dataType : 'html',
data:'act=like&postid='+postid,
success: function(data){
Set inner html of all elements with class plus-button
$('.plus-button').html(data);
}
});
});
What you want is to store the postid as an attribute on the posts, then use
var postid = $(this).attr('postid')
only remove the disliked class from the current element
$(this)
.parents('{element containing plus and minus button}')
.find('.minus-button')
.removeClass('disliked')
;
store reference to the clicked element
var $this = $(this); // Cool guys do this right in the beginning and use only this variable instead of $(this)
then in your ajax success handler you want to set only the html of the button you clicked, so you may use the reference you stored in the parent function scope
$this.html(data);
EDIT in regards to infinite scroll script
When parts of your page are dynamic, you want to bind the click handler to a static parent element of the dynamic content using:
$("#postsParent").on('click', '.plus-button', function () {/*handler*/})
I am trying to fix this issues from last two days but :(
Now I have a index.php page where I am displaying all the data of adds from database.
this is my index page
<html>
<head>
<script>
$(document).ready(function(){
var overlayclass = $("<div id='overlayclass'></div>");
//pagination starts
$("#pagination li:first")
.css({'color' : '#FF0084'}).css({'border' : 'solid #dddddd 10px'});
$("#page").load("Controller/pagination_data_all_adds.php?page=1");
//Pagination Click
$("#pagination li").click(function(){
//CSS Styles
$("#pagination li")
.css({'color' : '#FF0084'})
.css({'border' : 'none'});
$(this)
.css({'border' : 'solid #dddddd 10px'})
.css({'color' : '#0063DC'});
//Loading Data
var pageNum = this.id;
$("#page").load("Controller/pagination_data_all_adds.php?page=" + pageNum);
});
//pagination ends
//for closing the div
$(".close").click(function () {
$(".divpopup").hide();
overlayclass.appendTo(document.body).remove();
return false;
});
//for close image
$(".x").click(function () {
$(".divpopup").hide();
overlayclass.appendTo(document.body).remove();
return false;
});
//onclick on button display div and overlay with button value and post the value to the index page where I can use it to select the specific adds data from database
$(':submit').live('click',function () {
var id = $(this).val();
overlayclass.show();
overlayclass.appendTo(document.body);
$(".divpopup").show('slow');
$.ajax({
url: 'index.php',
data:'button=' + $(this).val(),
dataType: 'json',
succss: function(data)
{
$('.divpopup').html('');
alert(data);
$('.divpopup').append('button:'+data);
}
});
return false;
});
});
</script>
</head>
<body>
<div class="divpopup">
<div class="divcontent">
<img src="http://www.catalyst-gc.com/images/icon_close_window.jpg" alt="icon_close_window"
class="x" id="imgclose" />
<div class="detail_data">
<?php
print "<h1>".$button."</h1>";
?>
</div>
Close
</div>
</div>
<div id="page"></div>
<ul id="pagination">
<?php
//Pagination Numbers
for($i=1; $i<=$pages; $i++)
{
echo '<li id="'.$i.'"-->'.$i.'';
}
?>
</ul>
<!--Pagging display ends -->
</body>
</html>
This is my pagination_data_all_adds page which will be load through jQquery load function in index page. inside page div. and the button which is inside table will be click to display the popupdiv with id of adds and than I will use it to display the rest of the data.
<?php include_once('dbconn.php');
$per_page = 6;
if($_GET)
{
$page=$_GET['page'];
}
$start = ($page-1)*$per_page;
$sql = "select * from adds order by add_id limit $start,$per_page";
$result = mysql_query($sql);
echo "<table cellspacing='0'>";
echo "<thead>";
echo "<th></th>";
echo "<th>Advertise</th>";
echo "<th>Title</th>";
//echo "<th>Description</th>";
echo "<th>Price</th>";
echo "</thead>";
while ($adds = mysql_fetch_array($result)) {
echo "<tbody>";
echo "<tr class='even'>";
$image_link = $adds["image"];
echo "<td><img class='image' src=adds_images/".$image_link."></td>";
echo "<td><b>".$adds["add_type"] . "</b></td>";
echo "<td><b>".$adds["add_title"] ."</b></td>";
echo "<td><b>".$adds["add_price"] ."</b></td>";
echo "<td>";
echo "<form method='post' action=''>"
echo "<button class='button' value='".$adds['add_id']."' type='submit'>Detail!</button>";
echo "</form>";
echo"</td>";
echo "</tr>";
echo "</tbody>";
}
echo "</table>";?>
Now the problem is when I click on the button which is page div it display nothing but when I look at Firebug response it shows there. It does not display when I click the button.
Your dataType in ajax call is json.
$.ajax({
url: 'index.php',
data:'button=' + $(this).val(),
dataType: 'json', <--------------------------------- JSON
But you are returning html.
echo "<table cellspacing='0'>";
echo "<thead>";
echo "<th></th>";
echo "<th>Advertise</th>";
..........................
..........................
Hence your call is actually failing (Which you could have spotted had you used fail).
So answer is return json or change data type.
N.B.
LOTS AND LOTS OF deprecated function. use .on instead of live. use .done instead of success. use mysqli/pdo instead of mysql.
if($_GET)
{
$page=$_GET['page'];
}
You need to use isset or empty that too on approriate index. $_GET is always set. So checking its existance is futile. You need to check the index. i.e.
if(isset($_GET['page']))
again echoing what #itachi has said, pass json data from your php. your js script is waiting for json object yet you passing html file.
to use your code the way it is comment out this line from your JavaScript //dataType: 'json',.
i would also encourage you to use jquery dataTables to save time. take a look at it here
I have a page in php and all over the page I am using the <a tag to link.
For example:
<?php for($i=1;$i<=5;$++) {?>
<a href="abc.php?ref=<?php echo $i ?>"CLick me No. <?php echo $i ?> </a>
<?php } ?>
What I want to do is once we click on the link, jquery load function should called, like
$('#div1').load('abc.php?ref=1'null, function() {
});
but I can't change the php loop and <a tag ...
Thanks
Give each anchor a common class and an attribute that identifies the value of $i:
...
Then attach an on-click function to them:
$('a.numbered-anchors').click(function(e) {
var i = $(this).attr('anchor-id');
$('#div' + i).load(...);
});
You mean something like this:
"CLick me No. <?php echo $i ?>
$('#yourLink').click(function() {
$('#div1').load('abc.php?ref=1'null, function() {
});
});
Bobby
Something like this maybe :
$('a[href^="abc.php"]').click(function(event){
//do whatever you want
$('#div1').load(event.target.href, null, function() {});
});
PHP:
<?php for($i=1;$i<=5;$++) {?>
<a class="anchor-click" href="#" id="<?php echo $i ?>">CLick me No. <?php echo $i ?></a><br />
<?php } ?>
JS
$(function(){
$(".anchor-click").bind("click", function(event){
event.stopPropagation();
$('#div1').load("abc.php?ref="+$(this).attr("id"), null, function() {
});
});
});