We Keep Coding

Execute PHP script inside JavaScript

This is my PHP page:
<div class="whomfollow">
<div class="umayknow">People you may know</div>
<ul>
<?php
$result = $linkID1->query("select ud.UserID,ud.Name,ud.Company,ud.Designation,ud.UserType,up.ProfilePic from user_details ud join user_picture up on ud.UserID=up.UserID where ud.UserID!='$UserID' ORDER BY RAND() LIMIT 20")
or
die(mysqli_error());
while($row = mysqli_fetch_array($result))
{
$UT1='';
if($row['UserType']=='A')
{
$UT1='Advertiser';
}
else if($row['UserType']=='P')
{
$UT1='Publisher';
}
?>
<li class="postimage followimgconnections">
<div class="pull-left"><?php echo "<img src=profile_pic/".$row['ProfilePic']." />"; ?></div>
<div class="pull-left followboxcontent">
<div><b><?php echo $row['Name']; ?></b></div>
<div><a class="followsmall_content" href="#"><?php echo $UT1." - ".$row['Designation']." - ".$row['Company']; ?></a></div>
<div class="followbtn"><button id="myBtn" onClick="connect(<?php echo $row[UserID]; ?>)">Connect</button></div>
</div>
</li>
<?php
}
?>
</ul>
</div>
<div class="clear"></div>
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<p class="popupheading">Invitation Sent</p>
<p class="popupcontent">Your invitation is on its way.</p>
<div class="invidone">Done</div>
</div>
</div>
<script>
function connect(num) {
var x = document.getElementById('myBtn');
<?php
$ID=num;
$stts='IS'; //Invitation Sent
$stmt = $linkID1->prepare("insert into user_connections set MyUserID=?, MyFriendsUserID=?, cstatus=?");
$stmt->bind_param("sss", $UserID,$ID,$stts);
$stmt->execute();
$stmt->close();
?>
modal.style.display = "block";
}
</script>
Now as soon as the page is loaded, the PHP part inside the JavaScript is executed automatically, I want to run that PHP part when the JavaScript is called. If it's not possible to do it this way, then is there another way?

<script>
function connect(num) {
var x = document.getElementById('myBtn');
$.post('/Script.php', {id: num});
modal.style.display = "block";
}
Script.php:
$ID=$_POST['id'];
$stts='IS'; //Invitation Sent
$stmt = $linkID1->prepare("insert into user_connections set MyUserID=?, MyFriendsUserID=?, cstatus=?");
$stmt->bind_param("sss", $UserID,$ID,$stts);
$stmt->execute();
$stmt->close();

Thanks guys, used AJAX and solved the problem.
function connect(num) {
var x = document.getElementById('myBtn');
$.ajax({
type: "POST",
url: "request-connect.php?id="+num
})
modal.style.display = "block";
}

How to solve jQuery ajax load more issue?

I am using load more functionality in my application using jQuery ajax. This is my ajax code:
$(document).ready(function() {
$(document).on('click','.show_more', function(e) {
e.preventDefault();
var ID = $(this).attr('id');
//$('.show_more').hide();
//$('.loding').show();
alert(ID)
$.ajax({
type:'POST',
url:'ajax_load_more.php',
data:{"id" : ID},
success:function(html){
$('#show_more_main'+ ID).remove();
$('.showmorediv').append(html);
}
});
e.preventDefault();
});
For testing i put alert to display id it working perfectly. But ajax code is not working.there is no error and no console log found.
i double check ajax_load_more.php page it working perfectly according to alerted id.
Here is my php code
if(isset($_POST["id"]) && !empty($_POST["id"]))
{
$queryAll = $conn->query("SELECT COUNT(*) as num_rows FROM product WHERE id < ".$_POST['id']." ORDER BY id DESC");
$row = $queryAll->fetch_array();
$allRows = $row['num_rows'];
$showLimit = 3;
$query2 = $conn->query("SELECT * FROM product WHERE id < ".$_POST['id']." ORDER BY id DESC LIMIT ".$showLimit);
$rowCount = $query2->num_rows;
if($rowCount > 0){
while($row_p = $query2->fetch_array()){
$loadmoreid = $row_p["id"]; ?>
<div class="col-md-4 col-sm-6 col-xs-12 mar-bot showmorediv">
<!-- single-product-start -->
<div class="single-product">
<div class="single-product-img">
<a href="product-details/<?=preg_replace('!\s+!', '-',preg_replace("/[^A-Za-z0-9 \s+]/",' ',$row_p[4]));?>-<?=$row_p[0];?>">
<img src="<?=$row_p[13];?>" alt="<?=$row_p[3];?>"/>
</a>
<span class="sale-box">
<span class="sale">-<?php echo $offprice=round((($row_p[5]-$row_p[6])*100)/$row_p[5]); ?>%</span>
</span>
</div>
<div class="single-product-content">
<div class="product-title">
<h5>
<?=$row_p[3];?>
</h5>
</div>
<div class="price-box">
<span class="price">Rs.<?=$row_p[6];?></span>
<span class="old-price">Rs.<?=$row_p[5];?></span>
</div>
<div class="product-action">
<button class="btn btn-default add-cart" data-id="<?=$row_p[0];?>" data-name="<?=$row_p[3];?>" data-summary="<?=$row_p[3];?>" data-price="<?=$row_p[6];?>" data-quantity="1" data-image="<?=$row_p[13];?>">Add to cart</button>
</div>
</div>
</div>
</div>
<?php
}
if($allRows > $showLimit)
{
?>
<div class="show_more_main" id="show_more_main<?php echo $loadmoreid; ?>">
<span id="<?php echo $loadmoreid; ?>" class="show_more btn btn-primary" title="Load more posts btn btn-primary">More</span>
<span class="loding" style="display: none;"><span class="loding_txt">Loading…</span></span>
</div>
<?php }
}
}
?>

You can get the unknown error by using jquery ajax error function as like this
https://stackoverflow.com/a/8918298/7419418

Display contents of $row in a modal dynamically

I have a website in which events are queried and displayed on the index page. Upon clicking an image which was among the results of the query, a modal pops up.
As i have multiple images, I would like to dynamically display the contents of each row in the modal depending on which image was clicked. Currently, I am able to click any image and a modal appears, however they all contain the data from row[0].
INDEX PAGE:
while($row = $result->fetch_assoc()) {
include 'testModal.php';
echo "<tr><td><figure><figcaption style='padding-bottom:20px'>" . $row["name"]."</figcaption>".
'<img class="modalBtn" style="width:15em; height:17em;" src="data:image/jpeg;base64,'.base64_encode( $row['image'] ).'"/></figure></td>'.
"<td>".$row["category"]."</td>".
"<td> $".$row["price"]."</td>".
"<td>".$row["age"]."</td>".
"</tr>";
}
?>
The below is the modal page.
MODAL PAGE:
<div id="TheModalTest" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close" onclick="closeWindow()">X</span>
</div>
<div>
<?php echo '<img style="width:15em; height:17em;"
src="data:image/jpeg;base64,'.base64_encode( $row['image'] ).'"/>'; ?>
</div>
<?php echo '<p class="desc">'.$row["description"].'</p>' ?>
<div class="modal-footer">
<h3>BOOK NOW</h3>
</div>
</div>
</div>
<script>
//get modal
var Testmodal = document.getElementById('TheModalTest');
//get button that opens modal
//var modalbtn = document.getElementById('modalbtn');
var modalbtn = document.getElementsByClassName('modalBtn');
console.log("Length: " + modalbtn.length);
//Open modal when btn click
for (var i = 0; i < modalbtn.length+1; i++ ) {
console.log("I IS: " + i);
modalbtn[i].onclick = function(){
console.log("MODAL IS: " + modalbtn[i]);
Testmodal.style.display = "block";
}
}
</script>
The below images are what it looks like. When i click the event image for Kanye, the modal pops up with his image. However if i click the image of Katy Perry, the modal pops up with Kanye still.
https://i.imgur.com/YhIoXmT.png
https://i.imgur.com/AaqxChj.png

Your Question Something unclear, Try to Provide the Output screenshots and mark it. Because i don't know the output.
But
I have Re written your mysql Code as foreach So you can play with foreach images.
while($row1 = $result->fetch_assoc()) {
foreach($row1 as $row){
include 'testModal.php';
echo "<tr><td><figure><figcaption style='padding-bottom:20px'>" . $row["name"]."</figcaption>".
'<img class="modalBtn" style="width:15em; height:17em;" src="data:image/jpeg;base64,'.base64_encode( $row['image'] ).'"/></figure></td>'.
"<td>".$row["category"]."</td>".
"<td> $".$row["price"]."</td>".
"<td>".$row["age"]."</td>".
"</tr>";
}
}
Replace the above code with your Old one. Hope it works.

Try not to mix " and '. Just stick with single quotes for php and js, it makes it simpler when you're starting.
What you'll need to do is add an attribute to the element with the data you want to pass to the modal, than grab that attribute's value with your js.
notice: data-category="'.$row['category'].'" below
<?
while($row = $result->fetch_assoc()) {
include 'testModal.php';
echo '<tr><td><figure><figcaption style="padding-bottom:20px">' . $row['name'].'</figcaption>'.
'<img data-category="'.$row['category'].'" class="modalBtn" style="width:15em; height:17em;" src="data:image/jpeg;base64,'.base64_encode( $row['image'] ).'"/></figure></td>'.
'<td>'.$row['category'].'</td>'.
'<td> $'.$row['price'].'</td>'.
'<td>'.$row['age'].'</td>'.
'</tr>';
}
?>
now in the modal... notice category = modalbtn[i].getAttribute('data-category');
<div id="TheModalTest" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close" onclick="closeWindow()">X</span>
</div>
<div>
<?php echo '<img style="width:15em; height:17em;"
src="data:image/jpeg;base64,'.base64_encode( $row['image'] ).'"/>'; ?>
</div>
<?php echo '<p class="desc">'.$row["description"].'</p>' ?>
<div class="modal-footer">
<h3>BOOK NOW</h3>
</div>
</div>
</div>
<script>
//get modal
var Testmodal = document.getElementById('TheModalTest');
//get button that opens modal
//var modalbtn = document.getElementById('modalbtn');
var modalbtn = document.getElementsByClassName('modalBtn');
console.log("Length: " + modalbtn.length);
//Open modal when btn click
for (var i = 0; i < modalbtn.length+1; i++ ) {
console.log("I IS: " + i);
modalbtn[i].onclick = function(){
console.log("MODAL IS: " + modalbtn[i]);
/// here your go
var category = modalbtn[i].getAttribute('data-category');
console.log('category',category);
Testmodal.style.display = "block";
}
}
</script>
<script>

How to fix the scroll at the bottom?

I am developing a Messaging system.I need Scroll bar to be fixed down ,Because when new data arrives It should automatically go down.How to do that in HTML/CSS
Don't mine if this full code is in a unprofessional way..
Home.php
<?php
// Turn off all error reporting
error_reporting(0);
//shop not login users from entering
if(isset($_SESSION['id'])){
$user_id = $_SESSION['id'];
}else{
}
require_once("./inc/connect.inc.php");
?>
<header>
<link rel="stylesheet" href="home - Copy.css" />
<nav>
<h3><a class="h3" href="#">CP</a></h3>
<div><span>Logout</span></div>
<div>
<?php
//Start your session
session_start();
//Read your session (if it is set)
if (isset($_SESSION['user_login'])){
echo '<div id="ull">'.strtoupper($_SESSION['user_login']).'</div>';
}
?>
</div>
</nav>
<body>
<div class="shead">
<div class="a1"> <li >Frequent Member</li>
<div class="fm">
<ul>
<?php
//show all the users expect me
$user_id = $_SESSION['id'];
$q = mysql_query("SELECT * FROM `users` WHERE id!='$user_id'");
//display all the results
while($row = mysql_fetch_assoc($q)){
echo " <div class='usernames'>
<a id=\"usernames\" href='home.php?id={$row['id']}'>{$row['username']}</a>
</div>
";
}
?>
</ul>
</div>
</div>
<div class="a2"> <li >Site's Popular in Your College</li></div>
</div>
</header>
<div class="rss">
<?php
// include('rssclass.php');
//include('rss.php');
?>
</div>
<div class="message-right">
<!-- display message -->
<div class="display-message">
<?php
//check $_GET['id'] is set
if(isset($_GET['id'])){
$user_two = trim(mysql_real_escape_string( $_GET['id']));
//check $user_two is valid
$q = mysql_query( "SELECT `id` FROM `users` WHERE id='$user_two' AND id!='$user_id'");
//valid $user_two
if(mysql_num_rows($q) == 1){
//check $user_id and $user_two has conversation or not if no start one
$conver = mysql_query( "SELECT * FROM conversation WHERE (user_one='$user_id' AND user_two='$user_two') OR (user_one='$user_two' AND user_two='$user_id')");
//they have a conversation
if(mysql_num_rows($conver) == 1){
//fetch the converstaion id
$fetch = mysql_fetch_assoc($conver);
$conversation_id = $fetch['id'];
}else{ //they do not have a conversation
//start a new converstaion and fetch its id
$q = mysql_query( "INSERT INTO `conversation` VALUES ('','$user_id',$user_two)");
$conversation_id = mysql_insert_id($con);
}
}else{
die("Invalid $_GET ID.");
}
}else {
die("Click On the Person to start Chating.");
}
?>
</div>
<script type="text/javascript">
var objDiv = document.getElementById("display-message");
objDiv.scrollTop = objDiv.scrollHeight;
</script>
<div class="send-message">
<!-- store conversation_id, user_from, user_to so that we can send send this values to post_message_ajax.php -->
<input type="hidden" id="conversation_id" value="<?php echo base64_encode($conversation_id); ?>">
<input type="hidden" id="user_form" value="<?php echo base64_encode($user_id); ?>">
<input type="hidden" id="user_to" value="<?php echo base64_encode($user_two); ?>">
<div class="textbox">
<input class="t_box" type="text" id="message" placeholder="Enter Your Message"/>
<button class="t_btn" id="reply">Reply</button>
<span id="error"></span>
</div>
</div>
</div>
<!--
<div class="textbox">
<form action="#" method="post">
<input type="text" name="msg_body" class="t_box" id="t_box" >
<input type="submit" class="t_btn" id="t_btn" name="submit" value="Send">
</form>
</div>-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
Getmsg.php
<?php
require_once("./inc/connect.inc.php");
if(isset($_GET['c_id'])){
//get the conversation id and
$conversation_id = base64_decode($_GET['c_id']);
//fetch all the messages of $user_id(loggedin user) and $user_two from their conversation
$q = mysql_query( "SELECT * FROM `messages` WHERE conversation_id='$conversation_id'");
//check their are any messages
if(mysql_num_rows($q) > 0){
while ($m = mysql_fetch_assoc($q)) {
//format the message and display it to the user
$user_form = $m['user_from'];
$user_to = $m['user_to'];
$message = $m['message'];
//get name and image of $user_form from `user` table
$user = mysql_query( "SELECT username FROM `users` WHERE id='$user_form'");
$user_fetch = mysql_fetch_assoc($user);
$user_form_username = $user_fetch['username'];
//display the message
echo "
<div class='message'>
<div class='text-con'>
<a href='#''>{$user_form_username}:</a>
<p> {$message}<p>
</div>
</div>
<hr>";
}
}else{
echo "No Messages";
}
}
?>

You didn't mention if you are using jQuery. If yes, you can do something like this:
$('#your_div_id').scrollTop($('#your_div_id')[0].scrollHeight);
Alternatively, only with Javascript you can find solution here:
Scroll to bottom of div?
You always need to pass the height of the div to the scroll option so it is sticked to the bottom. This means that you need to bind this to the event which detects when the new message is received and rendered.

Your solution si based on scrollHeight, these two ling of code can help you
var objDiv = document.getElementById("toScrollBottom");
objDiv.scrollTop = objDiv.scrollHeight;
You can see this snippet for example, just click on the blue div to add messages
var count = 0;
var objDiv = document.getElementById("toScrollBottom");
objDiv.scrollTop = objDiv.scrollHeight;
$("body").on("click","#toScrollBottom",function(){
$("#messages").append('<p>Message Line' + count + '<br/>Message line</p>');
var objDiv = document.getElementById("toScrollBottom");
objDiv.scrollTop = objDiv.scrollHeight;
count++;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toScrollBottom" style="height: 150px; overflow-y: scroll; margin: 50px; border: solid 2px blue;">
<div id="messages">
<p>Message Line FIRST<br/>Message Line</p>
</div>
</div>

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

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