We Keep Coding

Clickable HTML list to query db and output to <div>

Bear with me; this is my first StackOverflow question. I'm having trouble writing a proper algorithm. Perhaps doing all this to "force" it means I'm over-complicating a simple concept, but it's also very likely I'm just unaware of the fix.
I'm building an experimental cookbook that reads from a database and displays in the browser. I created a list (note: NOT a <ul> or <ol> element) that is populated by <span> items generated by a PDO query to the database. These spans reference the name of each recipe in the database.
<p>
<?php
$recList = $pdo->query('SELECT name FROM Recipe');
$rowCount = $recList->rowCount();
echo 'There are ' . $rowCount . ' recipes currently in our database!';
echo '<br /><br />';
while ($row = $recList->fetch()) {
echo '<span class="recName"';
echo '>' . $row['name'] . "</span><br />";
}
?>
</p>
I then created a scrolling div element:
<div id="recWindow">
<!-- Display recipe queried from the database here -->
<?php require("$DOCUMENT_ROOT/$rec_source"); ?>
</div>
I would like the user to be able to click on the recipe names generated by php and the chosen recipe to display within the <div>. Choosing different recipes should not cause the page to reload.
I feel like the answer lies in an AJAX request to a php file listening for a variable containing the recipe to display, but that's where I'm stuck. Somehow I need to pass the php list items a unique identifier that is recognized by javascript, which in turn handles the onclick change in the div by passing that identifier BACK to php to query the database. While typing that out, I'm almost certain that I've over-complicated this entire process.
I thought of using a dropdown select menu and a GET request, but I'd like to retain the clickable names function if possible.
Answers that conclude my proposed method is too "dirty" and point me in a better direction are completely acceptable. I'm happy to provide any necessary information I left out. Thank you so much in advance.
Environment: Virtual LAMP (CentOS7, MariaDB)

Try something like this
<p>
<?php
$recList = $pdo->query('SELECT name FROM Recipe');
$rowCount = $recList->rowCount();
echo 'There are ' . $rowCount . ' recipes currently in our database!';
echo '<br /><br />';
while ($row = $recList->fetch()) {
echo '<span class="recName" data-id="' . $row['id'] . '"';
echo '>' . $row['name'] . "</span><br />";
}
?>
</p>
<div id="recWindow">
<!-- Display recipe queried from the database here -->
<?php require("$DOCUMENT_ROOT/$rec_source"); ?>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("body").on("click", "recName", function() {
//* get id of required recipe
var recId = $(this).attr("data-id");
//* send ajax-request to back-end
$.ajax({
url: "/get-recipe.php",
method: "GET",
data: {
id: recId
},
success: function(respond) {
//* put recipe-data into container
$("#recWindow").html(respond);
}
});
});
});
</script>
I hope, it shows you the main idea

Pass Variable To Simple Modal Popup From URL

Have a table created from a sql query am trying to pass the variable pmntid via the following code:
?>
<td class="listingTextLeft">
<?php echo $row[20] ?>
</td>
<?php
The link shows the correct pmntid however I am unable to pass it through the following jquery:
<script>
jQuery('.pmntDetail').each(function(i,v){
jQuery(v).click(function(paymentID){
paymentID.preventDefault();
paymentID.stopPropagation();
var pmntid = <?php echo $row[0]; ?>
console.log("ID: ", pmntid);
$("#pmntDetailPopup").modal({position: ["5%"]});
});
});
</script>
The console log shows pmntid as undefined. I need this pmntid passed to a simple modal popup which displays in the pmntDetailPopup div on the same page where I run a sql query to populate fields with results from the query.
The popup works fine and all fields are populated if I use a constant in the query so the error is definitely in passing the pmntid.

Use a data attribute:
<?php echo $row[20] ?>
and read it in the click event
var pmntid = $(this).data("rid");
console.log("ID: ", pmntid);

Passing a PHP Function (With parameters) through an HTML Button

Basically, I'm trying to create a login system, and I'm using it what I call "Dynamically" meaning it's included from my other files, and if I wanted to use a different database I would simply pass that database to the login function. I know how to do this by default, but as soon as using a button came in I got a little confused.
Here's what I have in it's most basic form.
<?php
createLogin('test', 'test2');
function createLogin($SQLConnection, $SQLConfig) {
echo "<h1> You are currently not logged in!</h1>";
echo "<form action='handleLogin(".$SQLConnection.",".$SQLConfig.") method='post'>";
echo "<div align='center'>";
echo "<table style='width: 475px'>";
echo "<thead>";
echo "<th>";
echo "<tr>Enter your e-mail and password.</tr>";
echo "</th>";
echo "</thead>";
echo "</table>";
echo "<input type='submit' value='Login' />";
echo "</form>";
}
function handleLogin($foo, $bar) {
echo $foo . " || " . $bar;
}
?>
When I click the submit button however, it simply takes me here...
http://localhost/handleLogin%28test,test2%29%20method=
Now, I read about using Javascript to do this, and to do something like
<script>
function processLoginRequest($SQLConnection, $SQLConfig) {
alert("<?php handleLogin($SQLConnection, $SQLConfig) ?>");
}
</script>
Then I could use
echo "<form action='processLoginRequest(".$SQLConnection.",".$SQLConfig.") method='post'>";
However, the code causes the entire php script to die. (Without error?)

You're using action incorrectly, and the result is as expected. action stores the page to which the form will be submitted. So, yes, when you hit submit it is trying to take you to a page called handleLogin%28test,test2%29%20method= because that is what your action says to do.
What you can do is simply leave the action blank, which will submit the form to the current page. Then, on that page, check if the form has been submitted, and if so, call your function.
Inside the function that creates the form make these changes:
function createLogin() {
...
echo "<form action='' method='post'>";
....
echo "<input type='submit' value='Login' name='login'/>";
}
Then, at the top of the page that renders the form, add something like this:
// Check if login form has been submitted - if so, handle
if (isset($_POST['login'])) {
handleLogin($SQLConnection, $SQLConfig);
}
// Render login form. No need to pass config parameters here.
createLogin();
If you really want to keep everything in a single function, I suppose you could also do it like this:
function createLogin($SQLConnection, $SQLConfig) {
if (isset($_POST['login'])) {
handleLogin($SQLConnection, $SQLConfig);
}
else {
echo "<h1> You are currently not logged in!</h1>";
echo "<form action='' method='post'>";
echo "<div align='center'>";
echo "<table style='width: 475px'>";
echo "<thead>";
echo "<th>";
echo "<tr>Enter your e-mail and password.</tr>";
echo "</th>";
echo "</thead>";
echo "</table>";
echo "<input type='submit' value='Login' name='login'/>";
echo "</form>";
}
}

You do NOT want to pass your SQL Configuration parameters back to JavaScript, because anyone can look at your JavaScript code when they browse your page, and then they'll have everything they need to connect and play around in your database.
You will have to pass some kind of flag to your form, to let your PHP code know (when it receives the form's data later) what kind of SQL settings it should use.
Example:
<form method="POST" ...>
<type input="hidden" name="loginMode" value="<?php echo $loginMode; ?>" />
</form>
Again, don't pass any sensitive data in there, just have some kind of unique value like "mySql" for $loginMode or the other options.
And then, when you're handling the HTTP POST in your PHP:
if ($_POST['loginMode'] == 'mySql')
{
// ... create connection based on $SQLConnection, $SQLConfig
}
else if ($_POST['loginMode'] == 'otherMethod') ...

Your JavaScript is probably failing because of the the contents of $SQLConnection and $SQLConfig. If you have a double quote in them it would fail.
Also designing and implementing a safe and robust login system is actually pretty difficult and you should opt using a framework that has been tested over time.

inserting popup window command in sql

I'm assigning popup window on my links but it doesn't work sorry i'm still learning about mysqli and javascript.
while($row = mysqli_fetch_array($result))
{
$id = $row['BapID'];
echo "<tr>";
echo "<th>" . "<a href=bapview.php?BapID=$id onlick='pop_up(this);'>View Full Info</a>" .
" | " .
"<a href=bapupdate.php?BapID=$id onlick='pop_up(this);'>Edit</a>" . "</th>";
My script
function pop_up(url){
window.open(url,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=1076,height=768,directories=no,location=no') }

The url that you want the pop-up window to point should be put as the parameter to your function call in your onclick handlers:
<a onclick="pop_up('bapupdate.php?<?php echo $id; ?>');">Edit</a>
As you can see at
https://developer.mozilla.org/en-US/docs/Web/API/Window.open
the first parameter to the window.open method is a string value for the url you want the opening window to point to. Your code was attempting to provide as that argument the actual reference to the link element on your page (that's what this will refer to in that context).

A couple of suggestions:
Don't be afraid to 'exit' (?>) PHP half way through a script. This will make it easier to read later on and allows you to write in pure HTML.
It looks like your missing you quotation marks around your href parameter. This likely won't cause issues but you never know. I would also recommend using the full url in your href and also as your pop_up() parameter (as suggested by #myesain)
<?php
while($row = mysqli_fetch_array($result)){
$id = $row['BapID']; ?>
<tr>
<th>
<a href=# onclick='pop_up("http://fullurl.com/bapview.php?BapID=<?php echo $id; ?>");'>View Full Info</a>
|
<a href=# onclick='pop_up"http://fullurl.com/bapupdate.php?BapID=<?php echo $id; ?>");'>Edit</a>
</th>
</tr>
<?php
//Rest of code
?>

include variable in javascript?

I need some help with the following.
I have a script that close down the web page using the following:
<a href=\"Javascript:void(0);\" onclick=\"parent.location.reload();window.parent.Shadowbox.close();\">
It works as it should. My problem is that I need to change parent to another page. For this I used the following:
<a href=\"Javascript:void(0);\" onclick=\"parent.location='http://www.google.com';window.parent.Shadowbox.close();\">
It also works, but now I do not want it to go to google but one of my pages where it should include a variable. Normally I would use:
<?=$array["id"]?>
But since it is a javascript then I cant use PHP and the following solution does not work:
<a href=\"Javascript:void(0);\" onclick=\"parent.location='new-new.php?$array[‘id’];window.parent.Shadowbox.close();\">
So I tried this:
function getNewURL() {
var root="http://minside.net";
var id="topic/#entry667119";
var nURL=root+"/"+id;
return nURL;
}
With the javascript:
<a href=\"Javascript:void(0);\" onclick=\"parent.location.replace(getNewURL);window.parent.Shadowbox.close();\">
For in this way to get my variables with me, but it does not work.
Someone who can help me? Or have another idea for how to resolve this?

you can assign a php variable to javascript variable.
var a=<?php echo $array[‘id’]?>;

you are using echo for that right since you use \ for ", so it should be like this:
<a href=\"Javascript:void(0);\" onclick=\"parent.location='new-new.php?'.$array[‘id’]'.window.parent.Shadowbox.close();\">

The best way to assign a variable in Javascript is
var id = <?php echo json_encode($array["id"]); ?>

You need to use echo:
<? echo $array["id"]; ?>
Edit
var id = <?php echo $array["id"]; ?>;
var link = "<a href=\"Javascript:void(0);\" onclick=\"parent.location='new-new.php?id="+id+";window.parent.Shadowbox.close();\">";
assuming you use $_GET['id'] in new-new.php (you omitted it in the URL)
Edit
if(strlen($large_photo_exists) > 0 && strlen($thumb_photo_exists) > 0)
{
echo $thumb_photo_exists;
echo "<p>Use this photo as my profile photo</p>";
echo "<br> OR <br>";
echo "<p>Upload and use another photo</p>";
}