Pop up menu to show detail view of contact in contact manager - javascript

I have queried data from DB depending on user input and viewed that on a table.
There is a column in my table, it will include id of each row as a link.
When I click that link it should show a pop up menu with full details of that particular row contact.
I want to pass that id to new pop and query full details from DB and show that in the pop up. Please help me with this.
Following is my current table population depend on queried data:
<tr valign="middle">
<td><?php echo $row["last_name"];?></td>
<td><?php echo $row["calling_name"]; ?></td>
<td><?php echo $row["designation"]; ?></td>
<td><?php echo $row["agm_branch"]; ?></td>
<td><?php echo $row["dgm_branch"]; ?></td>
<td><?php echo $row["office"]; ?></td>
<td><input type="submit" name="button" id="<?php echo $row["id"];?>" value="Details" onClick="showpopup()"></td>
</tr>
Now I need to write appropriate code in this java script
function:
function showpopup() {
//get passed variable if any (id)
//include database config details
//query data base depend on passed id
//show the results on form or table
//close button
}

I'm a bit rusty on Javascript/Jquery but here's some changes i would make
Put the id as a argument to your JS function
function showpopup(id){
...//your code here
}
This means that you also need to echo in the call of the function
onClick="showpopup(<?php echo $row["id"];?>)">
You said you want to query more details. If you haven't got the details on this page ready to go then you can use an ajax call to a php script that can get the details and return the data.
Some reading:
jQuery ajax calls
JSON syntax

Related

How do i pass php variable inside a row cell to a $_SESSION variable

echo "<form method='post'>
<tr id='myrow'>
<td>$id</td>
<td>$subject</td>
<td>$department</td>
<td>$categoryview</td>
<td>$status</td>
<td><input type='submit' name='assign' value='Assign me'></td>
</tr>
</form>";
if(isset($_POST["assign"])){
echo "<script type='text/javascript'>
var Row = document.getElementById('myrow');
var Cells = Row.getElementByTagName('td');
</script>";
}
I echo a table inside a form which loops it's rows taking mysql database values passing it to the shown php variables. What i want is that when user clicks on the button (Assign me) the value of $id will be passed to a $_SESSION variable so i will use that variable in another webpage. What do i need to edit in my code to achieve that?
Just add an action with the php page url you want to redirect to, so for exemple <form method='post' action='http://localhost/test-site/next.php'>
You have to use actual input in your table cell if you want the form to natively send the data, so for exemple : <td><input name="id" value="<?php echo($id); ?>"/></td>
Next on localhost/test-site/next.php you can access the data in your php with $theId = $_POST["id"]; and keep it in session with $_SESSION["id"] = $theId;

PHP redirect URL

I have successfully directed my users to a page that contains their information from a table. Using this code:
<?php foreach ($customers as $row) : ?>
<td onclick="window.location='view_customer.php?customer_id=<?php echo $row['id'] ?>&operation=edit';">
</td>
<?php endforeach; ?>
Now they are on view_cutomer.php. The next step would be to redirect the users to another page that also contains their information (the same information). Using a button. The next page is paint.php. I've tried this code, but it does not seem to work. Btw this next page no longer has a table.
<button onclick="window.location='paint.php?customer_id=<?php echo $row['id'] ?>&operation=edit';" class="rbutton">Paint</button>
How do i redirect users to a specific page using their ID?
on the 2nd page the id you want is in the get array (from the url)
<button onclick="window.location='paint.php?customer_id=<?php echo $_GET['customer_id'] ?>&operation=edit';" class="rbutton">Paint</button>

select onblur firing ajax but not updating database

I have a select dropdown that when it is changed I want to update a value in the database. Ajax is firing as I get the gif pop up and there are no errors in the console but the database does not get updated. All other fields (eg the startdate in the example below) work fine so the Ajax call is right I think. I've tried using both onBlur and onChange as my event handlers for the select.
<td <form><select onblur="saveToDatabase(this,'workingpatternid', 'employmenthistory', 'employmenthistoryid','<?php echo $employmenthistory[$k3]["employmenthistoryid"]; ?>')"><option value="<?php echo $employmenthistory[$k3]["workingpattternid"]; ?>"><?php echo $employmenthistory[$k3]["text"]; ?></option><?php
if(isset($workingpatterns) && !empty($workingpatterns)){
foreach($workingpatterns as $k4=>$v4) {
?> <option value="<?php echo $workingpatterns[$k4]["workingpatternid"]; ?>"><?php echo $workingpatterns[$k4]["text"]; ?></option><?php }}?></select></form></td>
<td contenteditable="true" onBlur="saveToDatabase(this,'startdate', 'employmenthistory', 'employmenthistoryid','<?php echo $employmenthistory[$k3]["employmenthistoryid"]; ?>')" onClick="showEdit(this);"><?php echo $employmenthistory[$k3]["startdate"]; ?></td>
Savetodatabase function:
<script type="text/javascript" name = "editable fields">
function showEdit(editableObj) {
$(editableObj).css("background","#FFF");
}
function saveToDatabase(editableObj,column,table,primary,id) {
$(editableObj).css("background","#FFF url(loaderIcon.gif) no-repeat right");
$.ajax({
url: "saveedit.php",
type: "POST",
data:'column='+column+'&editval='+editableObj.innerHTML+'&table='+table+'&primary='+primary+'&id='+id,
success: function(data){
$(editableObj).css("background","#FDFDFD");
}
});
}
</script>
saveedit.php
<?php
require_once("connect_db.php");
$table=$_POST['table'];
$column=$_POST['column'];
$value=$_POST['editval'];
$primary=$_POST['primary'];
$id=$_POST['id'];
$sql = "UPDATE `$table` SET `$column` = '$value' WHERE `$primary`='$id'";
$result = mysqli_query ($dbc, $sql) or die(mysqli_error ($dbc));
?>
Debugging the request being sent:
Client side
If you press F12 while on your calling page, go to the network console (I am asuming that you are using a newer browser like Chrome 40+ or IE 9+) and make sure that the cache is being saved (ie not refreshed on page refresh).
Update the page, clear the list, and then trigger your code again. Note whether the request is sent as you expect (click on the line representing the call to saveedit.php and then request)
Server side
You could add a call to error_log(var_export($_POST)) to see if you received what you expect. Results will be in your webservers error.log, thereby this does not expose data to users, if accidentally left in after deployment.
Also verify that the page is being called, by tailing access.log on your server.
Getting the expected value via javascript:
The trouble is that the first call is in a select; the code could be editableObj.options[editableObj.selectedIndex].value but the second is in a div element. Either you should reconsider your page design, or make two different functions (not recommended)

Common popup form, generated table

My Web page generates a table that shows the results of a search. I want the user to be able to click on one of the results, have a pop up window which allows them to enter a message and have it stored on a database. Then the user clicks the send message button, the popup will then close and let the user continue the search results.
Here is the current code I have.
<h1>
<center>
<u>Casting Call Results</u>
</center>
</h1>
<table border="1"; width="600px"; align="center">
<?php if(empty($results)) {echo "No Data returned";} ?>
<?php foreach($results as $member):?>
<?php $imgloc = "members/".$member['username']."/".$member['photolink'];?>
<tr align="center">
<td width="100px"> <img style="width:100px; height:125px" src="<?php echo $imgloc;?>"></td>
<td><?php echo $member['bio'];?></td>
</tr>
<tr align="center">
<td><?php echo $member['username']?></td>
<td><?php echo $member['email']?></td>
</tr>
<?php endforeach; ?>
</table></div>
<form action="castingcall.php">
<center><input type="submit" value="Search Again"></center>
</form>
Here's the search return. I tried to insert the image but I don't have ten reputation points so here's a link to the search return so you can see what I'm talking about.
http://www.chicagofilmclub.org/screenshot.jpg
As you can see the table is generated by a for each so I am really confused as to how I can have each user an active link that calls the same page in a popup but can still $PASS the proper user name.
Each person would have a link that would look something like this:
Contact Member
I am assuming you will give each memebr an ID in your database.
Then on the contactform.php page you would use something like this:
<?php
$memberId = $_GET['member'];
//lookup memeber in database and do whatever it is you want to do with that info
?>

How to print a html table in a separate window

I want to print a HTML table using some PHP data, in a separate window when I press a button. What is the best way to do it?
<table border="1">
<tr>
<td>MODEL</td>
<td><?php echo $modelNo ?></td>
<td>MODEL</td>
<td><?php echo $modelNo ?></td>
</tr>
<tr>
<td>QTY</td>
<td><?php echo $box ?></td>
<td>QTY</td>
<td><?php echo $box ?></td>
</tr>
</table>
Have the button open the new window, and set its location to the PHP file that prints the table.
Something as simple as this could work:
Click
(You can optionally style this link to look like a button)
You will need to have this table returnable from a PHP script, or available somewhere (I assume you already do).
Here is a purely html method:
Open Table!
Here is a javascript method:
<script type="text/javascript">
<!--
function myPopup() {
window.open( "http://path.to.my.page.com/mypage.php" )
}
//-->
</script>
</head>
<body>
<form>
<input type="button" onClick="myPopup()" value="Open table!">
</form>
<p onClick="myPopup()">CLICK ME TOO!</p>
You can also have the html in a hidden input and use a form submit to the other page and retrieve it from there with $_POST like assuming $table_data is your html:
<form action="new_window.php">
<input type="hidden" value="$table_data" name="data">
<input type="submit" value="Open Table">
</form>
Then in new_window.php:
if(isset($_POST['data'])){
echo $_POST['data'];
}
You can also create the entire solution in javascript by creating a new window and by writing the content in the window.
see the basic approach writing in a new window here:
http://www.w3schools.com/jsref/met_win_open.asp
and
Print the contents of a DIV
You would have to add an id attribute to your table
Then playing with DOM functions such as :
https://developer.mozilla.org/en-US/docs/DOM/document.getElementById
and
https://developer.mozilla.org/en/docs/DOM/element.innerHTML
You will have to wrap your table into a html. The main advantage of this method is that it can be called later on any table without the need to add a line of php.

Categories

Resources