Pop Up with <a href=#modal> in java script - javascript

i have code :
<div id="modal" style="display:none">
<?php $name = $_GET['name']; echo $name; ?>
</div>
$sql = mysql_query(SELECT * FROM data);
while($data = mysql_fecth_row($sql)){
echo "name;
}
this popup not show, but if I delete "?name=".$data[0]" this popup show but "$name" is empty.
how to this popup show and the "$data[0]" include in #modal..?
thanks

That's because, here is what a url should end with:
And you are making it:
file.php#id?parameter=value
And what you should have done is:
<div id="modal" style="display:none">
<?php
$sql = mysql_query(SELECT * FROM data);
$data = mysql_fecth_row($sql);
echo $data[0];
?>
</div>
name

Related

How to Create Load More With PHP and PDO

i want to create load more to my site, but when i try to click load more it just load 2 items.
my index.php
<div class="postList">
<?php
// Include the database configuration file
include 'koneksi.php';
// Get records from the database
$query = $db->prepare("SELECT * FROM master_post, posting WHERE master_post.master_post_name = posting.master_post_name AND posting.sticky = 'Normal' ORDER BY posting.idpost DESC LIMIT 2");
$query->execute();
if($query->rowCount() > 0){
while($row = $query->fetch()){
$postID = $row['idpost'];
?>
<div class="list_item"><?php echo $row['file_name']; ?></div>
<?php } ?>
<div class="show_more_main" id="show_more_main<?php echo $postID; ?>">
<span id="<?php echo $postID; ?>" class="show_more" title="Load more posts">Show more</span>
<span class="loding" style="display: none;"><span class="loding_txt">Loading...</span></span>
</div>
<?php } ?>
</div>
my javascript
<script type="text/javascript">
$(document).ready(function(){
$(document).on('click','.show_more',function(){
var ID = $(this).attr('id');
$('.show_more').hide();
$('.loding').show();
$.ajax({
type:'POST',
url:'ajax_more.php',
data:'id='+ID,
success:function(html){
$('#show_more_main'+ID).remove();
$('.postList').append(html);
}
});
});
});
</script>
my ajax_more.php
if(!empty($_POST["id"])){
// Include the database configuration file
include 'koneksi.php';
// Count all records except already displayed
$query = $db->prepare("SELECT COUNT(*) as num_rows FROM master_post, posting WHERE master_post.master_post_name = posting.master_post_name AND posting.sticky = 'Normal' AND posting.idpost < ".$_POST['id']." ORDER BY posting.idpost DESC");
$row = $query->fetch();
$totalRowCount = $row['num_rows'];
$showLimit = 2;
// Get records from the database
$query = $db->query("SELECT * FROM master_post, posting WHERE master_post.master_post_name = posting.master_post_name AND posting.sticky = 'Normal' AND posting.idpost < ".$_POST['id']." ORDER BY posting.idpost DESC LIMIT $showLimit");
if($query->rowCount() > 0){
while($row = $query->fetch()){
$postID = $row['idpost'];
?>
<div class="list_item"><?php echo $row['file_name']; ?></div>
<?php } ?>
<?php if($totalRowCount > $showLimit){ ?>
<div class="show_more_main" id="show_more_main<?php echo $postID; ?>">
<span id="<?php echo $postID; ?>" class="show_more" title="Load more posts">Show more</span>
<span class="loding" style="display: none;"><span class="loding_txt">Loading...</span></span>
</div>
<?php } ?>
<?php
}
}
I'm not sure where the mistake is. im using tutorial from this site https://www.codexworld.com/load-more-data-using-jquery-ajax-php-from-database/

How to auto refresh div contents contain php variables?

I created a page named queries.php
<?php
require("connection.inc.php");
$query = "SELECT SUM(john), SUM(robert), COUNT(school) FROM election";
$result = mysql_db_query($db, $query, $connection) or
die("query error!");
$data = mysql_fetch_array($result);
$john = number_format($data[0], 0,',','.');
$robert = number_format($data[1], 0,',','.');
$school = $data[2];
$total = $john + $robert;
$remaining_school = 524 - $school;
$percentage_john = round(($john*100/$total),2);
$percentage_robert = round(($robert*100/$total),2);
?>
Then I display the data in display.php
The data displayed well and nothing error, I tried a couple of tricks to auto refresh the container using jquery but failed.
Here is my display.php page:
<?php
include("queries.php");
?>
<div id="totaljohn"> // <--- the div id taken from css layout
<h9>John: <?php echo $john; ?> <br> (<?php echo $percentage_john; ?> %)</h9>
</div>
<div id="totalrobert">
<h9>Robert: <?php echo $robert; ?><br> (<?php echo $percentage_robert; ?> %)</h9>
</div>
<div id="totalboth">
<h4>Total : <?php echo $total; ?> Suara</h4>
</div>
<div id="totalschool">
<h4>Total School attending : <?php echo $school; ?> Schools</h4>
</div>
<div id="remaining_schools">
<h4>Remaining Schools: <?php echo $remaining_school; ?> of 524 schools</h4>
</div>
Everything looks good. Is your database connected? Is your SQL correct? Are there records in the database returned for your query?

Adding image to comment box

Thanks for your time guys.
I have the following code working for my commenting system though I can't really be sure about the security for now. But I need your help guys in :
Allowing anyone that comment to add their image to their comment whether registered users or Visitors
Building the inside comment or reply box. This is what I got.
Comment for comment counter
Here is the PHP code for the comment:
<?php
// Connect to the database
include('config.php');
$id_post = "1"; //the post or the page id
?>
<div class="cmt-container" >
<?php
$sql = mysql_query("SELECT * FROM comments WHERE id_post = '$id_post'") or die(mysql_error());;
while($affcom = mysql_fetch_assoc($sql)){
$name = $affcom['name'];
$email = $affcom['email'];
$comment = $affcom['comment'];
$date = $affcom['date'];
// Get gravatar Image
// https://fr.gravatar.com/site/implement/images/php/
$default = "mm";
$size = 35;
$grav_url = "http://www.gravatar.com/avatar/".md5(strtolower(trim($email)))."?d=".$default."&s=".$size;
?>
<div class="cmt-cnt">
<img src="<?php echo $file_path; ?>" height="250" />
<div class="thecom">
<h5><?php echo $name; ?></h5><span data-utime="1371248446" class="com-dt"><?php echo $date; ?></span>
<br/>
<p>
<?php echo $comment; ?>
</p>
</div>
</div><!-- end "cmt-cnt" -->
<?php } ?>
<div class="new-com-bt">
<span>Write a comment ...</span>
</div>
<div class="new-com-cnt">
<input type="text" id="name-com" name="name-com" value="" placeholder="Your name" />
<input type="text" id="mail-com" name="mail-com" value="" placeholder="Your e-mail adress" />
<textarea class="the-new-com"></textarea>
<div class="bt-add-com">Post comment</div>
<div class="bt-cancel-com">Cancel</div>
</div>
<div class="clear"></div>
</div><!-- end of comments container "cmt-container" -->
<script type="text/javascript">
$(function(){
//alert(event.timeStamp);
$('.new-com-bt').click(function(event){
$(this).hide();
$('.new-com-cnt').show();
$('#name-com').focus();
});
/* when start writing the comment activate the "add" button */
$('.the-new-com').bind('input propertychange', function() {
$(".bt-add-com").css({opacity:0.6});
var checklength = $(this).val().length;
if(checklength){ $(".bt-add-com").css({opacity:1}); }
});
/* on clic on the cancel button */
$('.bt-cancel-com').click(function(){
$('.the-new-com').val('');
$('.new-com-cnt').fadeOut('fast', function(){
$('.new-com-bt').fadeIn('fast');
});
});
// on post comment click
$('.bt-add-com').click(function(){
var theCom = $('.the-new-com');
var theName = $('#name-com');
var theMail = $('#mail-com');
if( !theCom.val()){
alert('You need to write a comment!');
}else{
$.ajax({
type: "POST",
url: "ajax/add-comment.php",
data: 'act=add-com&id_post='+<?php echo $id_post; ?>+'&name='+theName.val()+'&email='+theMail.val()+'&comment='+theCom.val(),
success: function(html){
theCom.val('');
theMail.val('');
theName.val('');
$('.new-com-cnt').hide('fast', function(){
$('.new-com-bt').show('fast');
$('.new-com-bt').before(html);
})
}
});
}
});
});
</script>
And the Ajax Script :
<?php
extract($_POST);
if($_POST['act'] == 'add-com'):
$name = htmlentities($name);
$email = htmlentities($email);
$comment = htmlentities($comment);
// Connect to the database
include('../config.php');
// Get gravatar Image
// https://fr.gravatar.com/site/implement/images/php/
$default = "mm";
$size = 35;
$grav_url = "http://www.gravatar.com/avatar/" . md5( strtolower( trim( $email ) ) ) . "?d=" . $default . "&s=" . $size;
if(strlen($name) <= '1'){ $name = 'Guest';}
//insert the comment in the database
mysql_query("INSERT INTO comments (name, email, comment, id_post)VALUES( '$name', '$email', '$comment', '$id_post')");
if(!mysql_errno()){
?>
<div class="cmt-cnt">
<img src="<?php echo $grav_url; ?>" alt="" />
<div class="thecom">
<h5><?php echo $name; ?></h5><span class="com-dt"><?php echo date('d-m-Y H:i'); ?></span>
<br/>
<p><?php echo $comment; ?></p>
</div>
</div><!-- end "cmt-cnt" -->
<?php } ?>
<?php endif; ?>

Open remote page into bootstrap modal

Here is something that seems to be having repetition problem with. I want to open a content into a modal from a remote page, which is populated from a MySql database. I also want that modal to be opened with my custom styling etc. I have gone so far with it, but after that I have got stuck. Here is the code so far
the output on the page:
$output .='<h4><a class="md-trigger" data-OfferID="' . $offer_id . '" href="#" data-modal="offer_modal">' . $title . '</a></h4><hr>';
the modal where data is loaded, on click of output (located in footer.php):
<div id="offer_modal" class="md-modal md-effect-flip" aria-hidden="true">
<div class="md-content">
</div>
</div>
the script located in the page where $output is echoed:
$('.md-trigger').click(function(){
var OfferID=$(this).attr('data-OfferID');
$.ajax({url:"Open-Offer.php?OfferID="+OfferID,cache:false,success:function(result){
$(".md-content").html(result);
}});
});
and just as a reference, the remote page which loads the data based on id, and then populates modal:
<?php
extract($_GET);
?>
<?php
require('inc/connect/config.php');
$offer = (int) $_GET['OfferID']; ?>
<?php
try {
$code_sql = 'SELECT * FROM codes WHERE id LIKE :code_id';
$query = $db->prepare($code_sql);
$code_params = array(':code_id' => $offer);
$query->execute($code_params);
$code_r = $query->fetch(PDO::FETCH_ASSOC);
$c_title = $code_r['title'];
$c_desc = $code_r['description'];
$c_redeem = $code_r['redemption'];
$c_textcode = $code_r['textcode'];
$c_exp = $code_r['expiry'];
$c_terms = $code_r['terms'];
$c_url = $code_r['url'];
} catch (PDOException $e) {
echo "failed to load offer";
exit;
}
?>
<button type="button" class="close close-md" data-dismiss="modal" aria-label="Close"><h3><span aria-hidden="true">×</span></h3></button>
<h5><?php echo $c_title; ?></h5>
<p><?php echo $c_desc; ?></p>
<h3><?php echo $c_textcode; ?></h3>
<p><?php echo $c_redeem; ?></p>
<p class="small-text"><?php echo $c_terms; ?></p>
At the moment, the problem I am getting is the modal only loads once, when the top item in the list is clicked, it won't load when clicking any other item in the list... what am i doing wrong!! I am pretty new to all of this, so go easy on me please :)
thanks in advance
Kaylee
Test with this example.
$('.md-trigger').on('click',function(){
var OfferID=$(this).attr('data-OfferID');
$.ajax({url:"Open-Offer.php?OfferID="+OfferID,cache:false,success:function(result){
$(".md-content").empty().append(result);
}});
});

Dynamically values parse to Popup Model Box from PHP Page

I was trying to parse the php data values which inside the while loop to the popup model .
Sample Code
<?php
include("connect.php");
$sql = 'SELECT id FROM products WHERE tag="mixed" ORDER BY id DESC LIMIT 5';
mysql_select_db('levels');
$retval = mysql_query( $sql, $db_server );
if(! $retval )
{
die('Could not get data: ' . mysql_error());
}
while($row = mysql_fetch_array($retval, MYSQL_ASSOC))
{
$id = $row['id'];
?>
<div onclick="showDialog('#dialog6');show_data();">
<div id="getid">
<?php echo $id; ?>
</div>
</div>
<?php
}
mysql_close($db_server);
?>
<script>
function showDialog(id){
var dialog = $(id).data('dialog');
dialog.open();
}
function show_data(){
var x = document.getElementById("getid").innerHTML;
document.getElementById("demo").innerHTML = x;
}
</script>
<!-- Popup Model -->
<div data-role="dialog" id="dialog6" >
<div id="demo"> </div>
</div>
Let's say if i have id => 1 to 10 , above code writing last 5 items from the table. which are 6 7 8 9 10 . ( it's working perfectly ) .
my requirement is to when i click the 7 it should parse 7 to the popup model. ( or let's say to the innerHTML of ).
it only parsing the first value ( 5 ) . to all onclick events when i click the each number.
PS : this is test using mysql not mysqli or pdo :) .
Thanks in Advance !
Try this. Hope it helps.
$sql = 'SELECT id FROM products WHERE tag="mixed" ORDER BY id DESC LIMIT 5';
mysql_select_db('levels');
$retval = mysql_query( $sql, $db_server );
if(! $retval )
{
die('Could not get data: ' . mysql_error());
}
while($row = mysql_fetch_array($retval, MYSQL_ASSOC))
{
$id = $row['id'];
?>
<div onclick="showDialog('#dialog6');show_data(<?php echo $id; ?>);"> <!-- Changed -->
<div id="getid<?php echo $id; ?>"> <!-- Changed -->
<?php echo $id; ?>
</div>
</div>
<?php
}
mysql_close($db_server);
?>
<script>
function showDialog(id){
var dialog = $(id).data('dialog');
dialog.open();
}
function show_data(y){ // Changed
var x = document.getElementById("getid"+y).innerHTML; // Changed
document.getElementById("demo").innerHTML = x;
}
</script>
<!-- Popup Model -->
<div data-role="dialog" id="dialog6" >
<div id="demo"> </div>
</div>
Try This One.
<?php
include("connect.php");
$sql = 'SELECT id FROM products WHERE tag="mixed" ORDER BY id DESC LIMIT 5';
mysql_select_db('levels');
$retval = mysql_query( $sql, $db_server );
if(! $retval )
{
die('Could not get data: ' . mysql_error());
}
while($row = mysql_fetch_array($retval, MYSQL_ASSOC))
{
$id = $row['id'];
?>
<div onclick="showDialog('#dialog6');show_data(<?php echo $id; ?>,'<?php echo $name; ?>','<?php echo $imgUrl; ?>');"> <!-- Changed -->
<div id="id<?php echo $id; ?>"> <!-- Changed -->
<?php echo $id; ?>
</div>
<div id="name<?php echo $name; ?>"> <!-- Changed -->
<?php echo $id; ?>
</div>
<div id="image<?php echo $id; ?>"> <!-- Changed -->
<img src="<?php echo $imgUrl; ?>" />
</div>
</div>
<?php
}
mysql_close($db_server);
?>
<script>
function showDialog(id){
var dialog = $(id).data('dialog');
dialog.open();
}
function show_data(id, name, imgUrl){ // Changed
document.getElementById("dispID").innerHTML = id;
document.getElementById("dispName").innerHTML = name;
document.getElementById("ImgDisplay").src = imgUrl;
}
</script>
<!-- Popup Model -->
<div data-role="dialog" id="dialog6" >
<div id="demo"> <!-- Changed -->
<div id="dispID"></div>
<div id="dispName"></div>
<div id="dispImg"><img id="ImgDisplay" src="" /></div>
</div>
</div>

Categories