I have a link in a php while loop
echo "<a href = '#$product_id' onclick = 'pop_up()' id = 'linker'>See more</a>";
The pop up requires the product id to search the database but hash tag is client side. I tried to use javascript window.location.hash but the outcome was not very reliable.
Does anyone know a method preferably server side I could use to retain the active product id while I call the pop up, attain the product id, use it to query the database and output it in the pop up.
I have a session already started and tied to a different condition.
I tried to call the product id directly from the pop up but because of the loop I only get either the first or last in the array.
<?
while ($i < $num) {
$product_id=mysql_result($result,$i,"prod_id");
$title=mysql_result($result,$i,"lTitle");
//main page
echo "<b>" , $title;
echo "<a href = '#$product_id' onclick = 'pop_up()' id = 'linker'>See more</a>";
?>
<!------pop up--------->
<script type="text/javascript">
function pop_up(){
document.getElementById('pop').style.display='block';
}
</script>
<div id="pop">
<p style='color:#6F0A0A; font-size:15px;'><? echo $product_id; ?></p>
</div>
<?
$i++;
}
?>
I'll try answering but to be honest the question is very vague and the code is a bit messy.
First off, you can simply send the product_id as a GET variable to the new popup and read it in PHP. Something like this will work:
echo "<a href = 'http://www.mydomain.com/popup.php?product_id=$product_id' onclick="window.open(this.href, 'popup_win',
'left=100,top=100,width=500,height=500,toolbar=1,resizable=0'); return false;" id = 'linker' >See more</a>";
On your popup.php file (the popup page) you will get the product_id with the PHP $_GET method:
$product_id = $_GET['product_id'];
and then do whatever MySQL query you want, now that you know $product_id.
I hope this helps, if that's not exactly what you meant please add more details so I can revise my answer.
Well, you could first load all this records first and place them into the popup content or, make an ajax request, open the popup, and when the request is done successfully place the values returned into the popup content. Better with JQuery
Related
A number of employees and their info gets shown on a page. The info of employees gets retrieved via a DB and then a foreach() loop is used to display all employees who fit the search criteria, an example can be seen on image below
Now when the user clicks the button, a simple Bootstrap pop up modal gets triggered, with some basic form fields. As can be seen from example image below
My Problem
I need to get the $userID when a button is clicked to work with / process data in modal.
Below is an extract of relevant code:
$teacherClass = new TeacherSearch();
$teachers = $teacherClass->showAllTeachers();
if (is_array($teachers)) {
foreach ($teachers as $teacher) {
$src = $teacher['userID'];
<div class="teacher-info">
<p class="teacherLabel">
NAME:
<?php
echo $teacher['name'];
?>
</p>
<p class="teacherLabel">
HEADLINE:
<?php
echo $teacher['headline'];
?>
<p class="teacherLabel">
LOCATION:
<?php
echo $teacher['location']
?>
</p>
<!--BUTTON GOES HERE-->
}//foreach
What I've tried
Ive tried using an <a> element binding a parameter with userID to it, like so:
Hire <?php echo $teacher['name'] ?>
As is to be expected the following triggered a new page reload inside the modal.
I then tried using a # sign for ahref attribute and then biding parameter $userID to it like so:
The above lead to an undefined index error as can be seen in the picture above.
Conclusion
I hope this question makes sense, I'm pretty much out of ideas, no idea how to further approach this problem.
You add the user-id in the anchor tag.To get the contents of the attribute data-id you have to use
<a id="myid" data-id="123">link</a>
<script>
$('#myid').data("id");
</script>
use javascript function to get userID and show modal:
<a onclick="myfunction('<?php echo $userID; ?>')>Hire <?php echo $teacher['name'] ?></a>
javascript function:
var userID; // global
function myfunction(id){
userID = id;
$("#myModal").modal("show");
//do somethings with user id here
}
So this is what I have - A javascript onclick event that will parse json from my MySQL database data and display it when someone clicks on a seat.
var jsonData = <?php echo json_encode($array); ?>;
function displayInfoForDiv(i){
document.getElementById('fname').innerHTML = jsonData[i].first_name;
document.getElementById('lname').innerHTML = jsonData[i].last_name;
}
Output
<?php while ($row = mysql_fetch_array($sql)){ ?>
<p><span id="fname"><?php echo $row['first_name']; ?></span></p>
<p><span id="lname"><?php echo $row['last_name']; ?></span></p>
<?php } ?>
The PHP is for my search box when you try to look up a name - I'm using this
$sql = mysql_query("select * from people where first_name like '%$term%' OR last_name LIKE '%$term2%'");
So the problem I'm having is when I conduct a search for Matt, more then one result will show up. Say:
Matt
Hasselbeck
Matt
Hew
But if I use the onclick event and click on joe's seat, it will display like this:
Joe
Frill
Matt
Hew
So the problem is that the search results will remain when I trigger the onClick event but the first one will change.
My question is, is there a way when I click on a seat to clear the search results and only display the one but when I conduct a search to display the similar names.
I'm using the PHP and JS to call the same data because, the JS only has a range of floor, while the php is grabbing everything from the database.
Hopefully this is clear and thank you for any input.
You Have Two Issues going on here.
You are using the same value for the id attribute multiple times.
Your result setup is logically flawed
Solution to Issue 1
Change id attribute to class attribute
When you use document.getElementById in javascript it returns the first element with that id.
Which means that if you have multiple ids with the same value only the first element will be selected. So your function should be changed to the following
function displayInfoForDiv(i){
document.getElementsByClassName('fname')[i].innerHTML = jsonData[i].first_name;
document.getElementsByClassName('lname')[i].innerHTML = jsonData[i].last_name;
}
Solution to Issue 2
Use template for results
Wrap all results in a div tag
By wrapping results into a div tag you will be able to clear results by clearing the html for that div tag.
<div id='Results'>
<?php while ($row = mysql_fetch_array($sql)){ ?>
<p><span class="fname"><?php echo $row['first_name']; ?></span></p>
<p><span class="lname"><?php echo $row['last_name']; ?></span></p>
<?php } ?>
</div>
<script>
function clearResults()
{
document.getElementById('Results').innerHTML='';
}
</script>
To use a template for results I would recommend underscore.js
So a template for your needs would look like the following:
<script id='result-template' type="text/x-jquery-tmpl">
<p><span class="fname">${first_name}</span></p>
<p><span class="lname">${last_name}</span></p>
</script>
And to utilize the template you would do the following:
The code below assumes you have included underscore.js
function LoadResults(jsonData)
{
_.templateSettings = {
interpolate: /\$\{(.+?)\}/g
};
var output='',
resultDiv=document.getElementById('Results');
template= _.template(
document.getElementById('result-template').innerHTML
);
clearResults();
for(x in jsonData)
{
resultDiv.innerHTML+=template(jsonData[x]);
}
}
I am trying to build a db driven web site in which the user selects from a drop down menu a
value and some Information from a database are returned. I use an ajax post cause i dont want the page to get refreshed:
$("#button").click(function(){
var datastr = ($('#act').val());
var datastr1 = ($('#loc').val());
$.ajax({
type:'POST',
url:'activities_code.php',
data: {datastr:datastr, datastr1:datastr1},
success:function(response){
$("#msg").html(response);
} });});
In the url parameter I have the following php file (this is a part of the php file):
$query = "SELECT PK,title,Information from activities where Activities='$category'";
$result = mysqli_query($dbcon, $query) or die('no available data');
echo "<table>";
$num_results = 0;
$t = 0; //title counter for the id of each title
while ($row=mysqli_fetch_array($result, MYSQLI_ASSOC)) {
// Here the columns of title and information are printed
echo "<tr><td>";
echo "<a href='test.php' id=\"t\".$t onClick=\"test()\" target=\"_new\" >".$row['title']."</a>";
echo "<br>";
echo $x = $row['PK'];
echo "</td></tr>";
echo "<tr><td>";
echo $row['Information'];
echo "</td></tr>";
// Here I sum up the number of the results
$num_results=$num_results+1;
$t = $t+1;
}
}
As you can see, I have a while loop in which I echo each time a link with an id:
"<a href='test.php' id=\"t\".$t onClick=\"test()\" target=\"_new\" >".$row['title']."</a>";
What I want to do is to use this id of each link later in my code by doing something like this:
document.getElementById("t1").value
My question is, how can I return this id's to the client side? I think I should write something in the success function but I have no idea what.
If you dont understand some part of the code or I didn't explain everything clear, please ask me.
Thanks
D.
This is what I get when I alert(response) in the success function.
<!DOCTYPE HTML>
<table id="container"><tr><td><a href='test.php' id="t0" target="_new" class='pickanchor'>Rafting in Voidomatis</a><br>1</td></tr><tr><td>
<img src="m.jpg" class="textwrap" height="120px" width="120px">
<p style="text-align:left;">Our experienced rafting instructors will show you the best way to enjoy Voidomatis, the river with the most clear waters inSouth Europe. You can also cross the Vikos Gorge by following Voidomatis river in an attractive one and a half hour long walk. Alternatively you can ask for the more demanding Aoos river rafting.</p>
<br>
<br>
<hr></td></tr><tr><td><a href='test.php' id="t1" target="_new" class='pickanchor'>Rafting in Lousios</a><br>4</td></tr><tr><td><img src="raf.jpg" class="textwrap" height="120" width="120">
<p>You will be surprised to know that Greece hides numerous, densely vegetated rivers offering amazing rafting opportunities. In the whole mainland, there is a company base awaiting you, for an amazing � off the beaten track experience!</p>
<br>
<br>
<br>
<hr></td></tr><div id="r2" align="center" id="result_2">2 results for rafting were found!
</div></table> <!-- End of PHP code-->
First, There is problem with ID of your anchor tag. here is correction
"<a href='test.php' id=\"t".$t."\" onClick=\"test()\" target=\"_new\" >".$row['title']."</a>";
Second, Give id to your table like
<table id="container">
Third, give class to your anchor tag.
"<a href='test.php' class='pickanchor' id=\"t.$t\" onClick=\"test()\" target=\"_new\" >".$row['title']."</a>";
Now write following code into your success handle after .html() statement
NEW EDIT
$("a.pickanchor").each(function(i){
alert(this.id);
});
In line you presentd you made mistake. In wrong place you have added ".
echo "<a href='test.php' id=\"t\".$t onClick=\"test()\" target=\"_new\" >".$row['title']."</a>";
It should be
echo "<a href='test.php' id=\"t".$t."\" onClick=\"test()\" target=\"_new\" >".$row['title']."</a>";
As simplest solution you could add after the while loop
echo "<script> my_max_id_num=$t </script>"
This will give you knowledge about which ids are present on page. This should give your js script access to my_max_id_num variable. It's not considered best programming practice but is simple.
Second (better) way of solving problem could be returning json instead of html and rewriting your success method. This will be more work to be done:
Rewrite while loop so it returns something like:
{ "data":[
...
{ "id":"10", "target":"_new", "title":"one_of_your_link_titles" },
{ "id":"10", "target":"_new", "title":"one_of_your_link_titles" },
...
]}
Rewrite your ajax query so it will accept json, and rewrite success method so it will create your links on basis off data returned from server.
This way you will have both, ids and your links in one query. What's more in case of changing requirements it will be easier.
The simplest solution would be to give your elements a class, that way you don't need to select based on the elements id, but you can access it easily:
eg.
test 0
test 1
$('#msg').on('click', '.className', function() {
console.log(this.id);
});
I don't have enough rep points to ask for clarification, but what do you mean by 'return this id's to the client side'? Also what would the 'value' of the element 't1' be?
Lets say you wanted to get the link location it could be something like:
var value = $('#addButton').attr('href');
and then do something with the value (not sure what you mean by 'return this id's to the client side') but perhaps you want the value then to be visible to the client?
So if you have a div somewhere on the page where you want it to show you could populate it with you value, maybe something like:
HTML
<div id="valueBox"></div>
jQuery
$("#valueBox").html(value);
How do I Limit some information displayed from the database and add a link eg "More" to enable read all information in a drop down using PHP. such as what is on facebook (Read more...). I am dealing with a lot of content and I dont want it all displayed at once.
Here is part of the code
echo "<p>".$row['Firstname']." ".$row['Lastname']."</p>";
echo "<p>".$row["Course"]." | ".$row["RegID"]."</p>";
echo "<p>".$row["Email"]."</p>";
echo "<p>"."Tel:".$row["Telephone"]."</p>";
echo "<p>".$row["info"]."</p>";
The code is running well only that I want to limit the information
echo "<p>".$row["info"]."</p>";
so that not all is displayed
Thanks
Use Jquery-ui click on "view source" and you'll see it's very simple really, just set the row that you want as the header (what's clicked to show the rest) and store the rest in a div below.
Split info into two strings, one intro, and the rest. Display only the intro to begin with. Insert a link that displays the rest when clicked.
$intro = substr($row['info'], 0, 200);
$rest = substr($row['info'], 200);
echo sprintf(
<<<HTML
<p>
<span class="intro">%s</span><span class="rest" class="display: none">%s</span>
Show more
</p>
HTML
, htmlentities($intro)
, htmlentities($rest)
);
displayRest is a Javascript-function that, given a link, finds the previous span with class rest, shows it and removes the link. I leave it as an exercise to implement this in a way that fits your project. You can go with native Javascript, or use a library such as jQuery, YUI, MooTools, Prototype etc.
if(isset($_POST['more']))
{
$query="select col1,col2,col3, ... ,colN from tableName ";
}
else
{
$query="select col1,col2,col3 from tableName ";
}
//HTML
<form method="post">
<input type="submit" name="more" value="More" />
</form>
//PHP
$records=mysql_query($query);
while($row=mysql_fetch_assoc($records))
{
//Display
}
The limit must be fixed on the SQL request.
// If you want to transmit limitation with a GET PARAMETER.
// You can also $_POST ur data.
$limitation = $_GET['limit'];
//..... And in your SQL REQUEST
$sql = "SELECT * FROM your_table LIMIT 0 , $limitation";
//And in the link....
echo 'Show only 10 Results'
?>
You can optimize that and add security precaution to prevent errors when $limitation receive empty or non numeric parameters.
<?php if(isset($_GET['limit']) && !empty($_GET['limit']) && !preg_match(EXPRESSION, $_GET['limit'])){
//YOU CAN DO THE LIMITATION WHITOUT SQL ERRORS
}
else{
//ERROR DIRECTIVE
}
?>
alright i have a div #pagecontainer which loads another php page page_$var.php into it and $var is the page number, i need to get the url query string variables but i cant seem to retrieve them from the newly page.
example: loc=3&option=5
i just cant grab that inside the new page
1) Make sure your page is actually loading - output some static value regardless of the loc and option
2) print out $_SERVER['QUERY_STRING'] to make sure that your get parameters are getting passed
3) print out a dump of _GET via var_dump($_GET)
Good luck!
In the <head> of your main page, or anywhere else as long your ajax script is able to get it, add this:
<script type="text/javascript">
$_GET = <?php echo json_encode($_GET) ?>;
</script>
You should then be able to use the $_GET variable from Javascript. You can for example test it out in FireBug in FireFox:
console.info($_GET);
console.info($_GET['loc']);
console.info($_GET.loc);
Remember to sanitize the values before using them for something important...
Yes, you can. If page_1.php?loc=3&option=5 is your query string, then $_GET['loc'] and $_GET['option'] are set.
im building it based off of this tutorial
http://tutorialzine.com/2009/09/simple-ajax-website-jquery/
except i have the load_page.php including the page_x.php files
but inside the page_1 file i have it including my connect.php file and then running an sql query "SELECT * FROM pages WHERE Pages.option='mysql_real_escape_string($_GET["option"]);
and i can never get the url query string inside the php file
im loading this as page_1 from the tutorial and am trying to get the GET from the page thats loading this one
here a link
http://imstillreallybored.com/newstuff/pagetest.php?loc=3&option=5
info loads page_1.php which is where im trying to grab the url query string
im connecting to the database and grabbing information only because im setting the $loc and $option to test numbers until i can get the string
<?php
include './connect.php';
$sql = "SELECT
*
FROM
pages
WHERE
pages.option =".mysql_real_escape_string($_GET["option"]);
$result = mysql_query($sql);
if(!$result)
{
echo 'The topic could not be displayed, please try again later.';
}else{
if(mysql_num_rows($result) == 0)
{
echo 'This doesn′t exist.';
}else{
while($row = mysql_fetch_assoc($result))
{
if($_GET["loc"]=="3")
{
//display content for sports section based on option
echo $option.'
<div id="pageContent">
<div class="clear"></div>
<h2>'.$row[header].'</h2>
<p class="meta">
<b>Coach(s)</b>:'.$row[coach].'
</p> <div class="post-img">
<img src="'.$row[image].'" width="640" height="196" alt="image missing" />
</div>
<div class="excerpt">
<p>'.$row[body].'</p>
</div>';
}
}
}
}
?>
Here is a way to get url parameters with javascript.
<script language="javascript">
function gup( name )
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}
From: http://www.netlobo.com/url_query_string_javascript.html