Changing the src content of iframe dynamically - php

I am making a page which do a search result. To brief the scene is that I have a login page which will direct you to another page (let's say homepage) This page contains 1 drop-down box ( and ), 1 textbox, 1 button and 1 iframe which contains the page where I have my table. Now I have a list of user which is displayed on that table having a header of firstname, lastname and middlename which is all the data is displayed on at startup Now I selected the firstname from the drop-down box then key in my name which should result to a filter for those who have the same name as mine. I used a filter on my table page in which I add the parameters e.g. //localhost/test/table.php?fname=test
Now the thing is that the iframe should be the only one that will change making my homepage intact. Now the iframe src will be changed on click based on what I selected on the drop-down box as I already said without using a form submit and the value will be based on the text on the text box. And also if possible without using http:// on the src link.
Well I almost done the part of onclick will change the iframe page using this script:
<script type='text/javascript'>
function goTo(){
top.table.location = 'http://localhost/test/home.php;
}
</script>
It should be like this:
$dropdownvalue = dropdownselectedtext
$textvalue = valueoftextbox
//localhost/test/table.php?$dropdownvalue$textvalue
Well here it is my first work. commented for better understanding. Assume that '#' followed by text means some value. For reference.
$acct_no = "#LOG_IN_ID OF USER";
echo "<script type='text/javascript'>
function goTo(){
top.table.src = '#SOMEURLHERE';
}
</script>";
echo "<table border='0' align='center' bgcolor='#ffffff' width='800px'>
<tr>
<td style='padding-left:30px;padding-top:20px;'>
<h3>SELECTION TEST</h3>
</td>
<td align='right' style='padding-right:30px;' height='120px'>
<select name='filter' id='filter'>
<option value='fname'>fname</option>
<option value='lname'>lname</option>
<option value='mname'>mname</option>
</select>
<input type='text' value='Enter text here' id='textbox'>
<input type='button' value='Search' onClick='goTo();'> //this should give me the filters e.g: #SOMEURLHERE.php?#selectedfiltervalue=#textboxvalue
</td>
</tr>
<tr>
<td colspan='2' align='center'>
<iframe src='table.php?ref=$acct_no' name='table' width='730px' height='300px' frameborder='0'></iframe>
</td>
</tr>
</table>";

I would suggest that you keep the <script> container outside of PHP area.
<script type="text/js" language="javascript">
//Your function goes here
</script
<?php echo "<form name='someName' action='#'>
echo "<table border='0' align='center' bgcolor='#ffffff' width='800px'>
<tr>
<td style='padding-left:30px;padding-top:20px;'>
<h3>SELECTION TEST</h3>
</td>
<td align='right' style='padding-right:30px;' height='120px'>
<select name='filter' id='filter'>
<option value='fname'>fname</option>
<option value='lname'>lname</option>
<option value='mname'>mname</option>
</select>
<input type='text' value='Enter text here' id='textbox'>
<input type='button' value='Search' onClick='javascript: return goTo(\"this.parent.filter.value, this.parent.textbox.value\");'> //this should give me the filters e.g: #SOMEURLHERE.php?#selectedfiltervalue=#textboxvalue
</td>
</tr>
<tr>
<td colspan='2' align='center'>
<iframe src='' name='table' width='730px' height='300px' frameborder='0'></iframe>
</td>
</tr>
</table></form>";?>
You didn't use a <form> tag in your whole section, so managing fields is difficult. Also, try the javascript I defined in previous post.

Try using this in onclick/onchange handler in your drop down box(for each value):
javascript: return goto(\"$dropdownvalue\", \"$textvalue\");
And, to incorporate it
<script type='text/javascript'>
function goto(var1, var2){
finLink = "http://localhost/test/table.php?" + var1 + var2
top.table.location = finLink; //Not sure if it will be top.table.location or top.table.src
}
</script>

You can use jquery for this:
$('#myiframeid').attr('src', 'http://some.url.here');

Related

How to enable a tree view in php page?

I have a mysql database. In a table i have some entries of uploaded file. I want to display that on a php page. But those files are categorized by one column. So what i want is to have that categories name on that page. In front of each name i want to have a button. Initially when page loads it should not show the files. when some one click on a button then that corresponding category should expand.
But i am unable to do it. I am giving you a link to sample code.
HTML code
<span class="show"></span>
<p>category</p>
<table width='100%' class='tree'>
<tr>
<td width='70%'><b>Name</b></td>
<td width='30%'><b>Last Updated</b></td>
</tr>
</table>
http://jsfiddle.net/SumitRathore/FqcSM/
Edit
this is my sample html code where i am showing the tables. This code have some variables name and sql query don't go for that. I have found the answer here http://jsfiddle.net/JGLaa/2/ but that is not working here. I dont know why?
<span class="show"></span>
<p><b>category<b></p><br/>
<table width='100%' class='tree'>
<tr>
<td width='35%'><b>Name</b></td>
<td width='25%'><b>Last Updated</b></td>
</tr>
while($row = $result_sql->fetch_assoc())
{
<tr>
<td width='50%'><a href='http://127.0.0.1/wordpress/?page_id=464&name_file={$row['name']}&cat={$cat}&sec={$sec}' target='_blank'>{$row['title']}</a></td>
<td width='25%'>{$row['created']}</td>
<td width='25%'><input type='checkbox' class='checkbox'><input type='button' class= 'input1 input_box' value='delete' name='delete' id= '{$row['id']}'><input type='button' class='input2 input_box2' value='edit' name='edit' id= '{$row['id']}'></td>
</tr>
}
</table>
Your issue is that .next() searches the siblings, so it does not find a table. Try traversing up to the buttons parent (span), and then find the span's sibling table -
$(this).parent().nextAll('table:first').find('td').toggle();
updated JSFiddle - http://jsfiddle.net/JGLaa/1/
here is an updated JSFiddle that has multiple buttons/tables - http://jsfiddle.net/JGLaa/2/
Looking at you code the use of the next selector is flawed. From Jquery.com:
.next( [selector ] ) Description:
Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
I would suggest to sourround your button and table with a div and use the following code:
$(document).ready(function(){
$(".show").html("<input type='button' value='Show All' class='treebtn'>");
$('.tree td').hide();
$('.treebtn ').click( function() {
$(this).parent().parent().find('table td').toggle();
if (this.value=="Show All") this.value = "Hide All";
else this.value = "Show All";
});
});
http://jsfiddle.net/FqcSM/3/
$(document).ready(function(){
$(".show").html("<input type='button' value='Show All' class='treebtn'>");
$('.tree').hide();
$('.treebtn ').on('click', function() {
$(this).parent('span').next('table').toggle();
if (this.value=="Show All") this.value = "Hide All";
else this.value = "Show All";
});
});
fiddle

How to stop my jquery to listen to all rows of data?

I'm trying to make a dropdown when the reject checkbox is ticked. I have done this simply with Jquery but however because I need the function on all of the data that is pulled in, it copies the classes to the next row and so on, so when i check the reject button it opens all the dropdown text areas to input a reason. I was wondering how i would go about making this for an unlimited amount of data????? so it only ever opens one dropdown textarea.
I have read online that I can do this with php parenting? As my PHP skills are weak to say the least is there any simpler ways of going about this?
HTML
Name
Username
Email
Verify
Reject
if ($supplier['Id'] != '3') { ?>
<tr class="unverifiedSuppliers">
<td width="150"><?php echo $supplier['Name']; ?></td>
<td width="150"><?php echo $supplier['Username']; ?></td>
<td width="250"><?php echo $supplier['Email']; ?></td>
<td width="40"><input type='checkbox' name='verifySupplier[]' value='<?php echo $supplier['Id']; ?>' /></td>
<td width="40"><input class="checked" type='checkbox' name='rejectSupplier[]' value='<?php echo $supplier['Id']; ?>' /></td>
</tr>
<tr class="dropdown" style="display: none;">
<td colspan="5">
<label>Reason:</label>
<textarea name="rejectReason[<?php echo $supplier['Id']; ?>]"></textarea>
</td>
</tr>
<?php } } ?>
</table>
Jquery
$(function() {
$('.checked').change(function() {
$('.dropdown').toggle();
});
});
Try :
$('.checked').change(function() {
$(this).closest('tr').next('.dropdown').toggle();
});
$(this) is the DOM element you changed.
.closest('tr') is looking for the closest parent with the jQuery selector 'tr', wich mean the closest <tr></tr>.
.next('.dropdown') is looking for the immediate next sibling with the jQuery selector '.dropdown'.
Side note - using the selector here is facultative, it will just return an empty element if the next element doesnt have the class dropdown.

retrieving specific value from the array of textbox with specific array button

I am new here and i trying to make some PHP page working but failed miserably.
I am not very good with logic nor PHP, so please bear with my stupid question and my messy codes :)
I have array of textboxes with value and there are array of buttons next to it.
what i want is each button capture specific value what i typed into the corresponding textbox
here's the piece of my code
<?php
$data = mysql_query("SELECT * from tempimg");
while($hasil = mysql_fetch_assoc($data)){
$i++;
echo "<tr>
<td align=center><input type= checkbox name=check[] value=$hasil[idFoto]</td>
<td align=center><img src=$hasil[thumbPath]></td>
<td align=center>$hasil[imgName]</td>
<td align=center>$hasil[thumbPath]</td>
<td align=center>$hasil[Path]</td>
<td align=center>
<input type=text align=center value=$hasil[imgLink] name=link[{$hasil['idFoto']}] id=link />
<td align=center>
<button type=submit onClick=\"return confirm('you clicked button with ID: $hasil[idFoto] '+'value: '+(document.getElementById('link').value))\">
<img src=images/sav.png alt=search-btn id=img />
</button>
</td>
<td align=center><img src=images/del.png></img></td>";
}
?>
and here's the link of image for the PHP page I'm talking about
so I humbly request of help from people here, please help me.
EDIT: thanks to Mr. Barmar i manage to pop out the value of the text box inside the dialog box with the corresponding button,
here a new question, how to save the value from the text box that i got from clicking the corresponding button into the database?
or more simple, how to capture the value from the text box by using the button next to it and then post it on the screen using "echo"
You need to give all the id=XXX attributes unique values, by including $i in the ID. Then your onclick code can get the value of the input from the same row.
<?php
$data = mysql_query("SELECT * from tempimg");
while($hasil = mysql_fetch_assoc($data)){
$i++;
echo "<tr>
<td align='center'><input type='checkbox' name='check[]' value='$hasil[idFoto]'</td>
<td align='center'><img src='$hasil[thumbPath]'></td>
<td align='center'>$hasil[imgName]</td>
<td align='center'>$hasil[thumbPath]</td>
<td align='center'>$hasil[Path]</td>
<td align='center'>
<input type='text' align='center' value='$hasil[imgLink]' name='link[{$hasil['idFoto']}]' id='link$i' />
<td align='center'>
<button type='submit' onclick='return confirm(\"you clicked button with ID: $hasil[idFoto] \"+\"value: \"+(document.getElementById(\"link$i\").value))'>
<img src='images/sav.png' alt='search-btn' id='img$i' />
</button>
</td>
<td align='center'><img src='images/del.png' /></td>";
}
?>
You should also put quotes around all attribute values.

Is POST information from jquery $.post sent in parent page

I have a parent page which has a drop down list in it. using the onchange event, data is posted to a second page using $.post(). This page uses the posted variables to output mysql data with a checkbox for each line. This page output is then inserted into the parent page using jquery $('#DIV name').html(output).show();
The user can then see the mysql table rows with corresponding checkboxes. They then select the checkboxes they want and say delete. Delete is a form submit button.
My question is, when they click delete how do I take the form data from the second page and post it with that of the parent page so that I can then use $_POST[] to get the checkbox info and delete the selected table rows?
example of the parent page code is:
javascript/jquery
<script type="text/javascript">
function get(row){ //row being processed, defined in onchange="get(x)"
('getpeopleinjobs.php',{ //data posted to external page
postvarposition: form["position"+row].value, //variable equal to input box, sent to external page
postvarjob: form["job"+row].value, //variable equal to input box, sent to external page
postvarperson: form["person"+row].value, //variable equal to drop down list, sent to external page
postrow: row}, //variable equal row being processed, sent to external page
function(output){
$('#training'+row).html(output).show(); //display external results in row div
//popupWindow = window.open('t4.php?variable1Name=Vicki&variable2Name=Maulline','popUpWindow','height=400,width=1000,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no,status=yes')
});
}
</script>
Form data is
<tr>
<td>
<?PHP echo $i; ?>
</td>
<td>
<input type=text NAME="position<?PHP echo $i; ?>" id="position<?PHP echo $i; ?>" style="border: 1px solid #2608c3;color:red; width=200px" value="<? echo mysql_result($resultpositionjob,$r,0);?>">
</td>
<td>
<input type=text NAME="job<?PHP echo $i; ?>" id="job<?PHP echo $i; ?>" style="border: 1px solid #2608c3;color:red; width=200px" value="<? echo mysql_result($resultpositionjob,$r,1);?>">
</td>
<td>
<SELECT NAME="person<?PHP echo $i; ?>" id="person<?PHP echo $i; ?>" style="border: 1px solid #2608c3;color:red; width=200px" onchange="get(<? echo $i; ?>);">
<OPTION VALUE=0 >
<?=$optionpeople?>
</SELECT>
</td>
<td onclick="train(<? echo $i; ?>);" style="color:grey; cursor: pointer;">
<div id="training<?PHP echo $i; ?>"><font color=grey size=2></div>
</td>
<td>
</td>
</tr>
<?PHP
$i++;
$r++;
}
?>
The second page or page called by jquery, the output is:
echo
"
<table border=0 width=400>
<tr>
<td width=20>
</td>
<td width=150>
<b>Position<b>
</td>
<td>
<b>Job<b>
</td>
</tr>
";
while($line = mysql_fetch_array($result))
{
echo "
<tr>
<td>
";
?>
<input type=checkbox name="delete[]" id="delete[]" value="<?php echo $rows['id']; ?>">
<?PHP
echo "
</td>
<td>
";
echo $line['position'];
echo "
</td>
<td>
";
echo $line['job'];
echo "
</td>
</tr>
";
}
?>
<tr>
<td>
<input type=submit name="update" id="update" value="Update">
</td>
</tr>
</table>
<?PHP
}
To repeat I want the table checkbox element from the second page posted with the form data of the parent page.
Is this possible as my testing hasnt given me any luck.
Am I doing something wrong or do I need to modify the jquery code?
Thanks as always for the assistance.
There is no second page. Really - you're loading HTML content from the second page, but it's being inserted into the parent page. All content, from your browsers perspective, is in the same page. The fields should be included as long as they're inside the DOM inside the element. Use the developer tools for your browser or Firebug for Firefox to make sure that the content is placed within the form element in the DOM. The developer tools should also be able to show you exactly which variables are submitted to the server when the form is submitted.
The 'action' parameter of 'form' will indicate where the content gets submitted (and it seems you've left that part out of your HTML, so it's impossible to say if you've left out or just not included it in the paste.

IE-text input fields "clickable" region is only 1 pixel wide

I have a simple input form with input fields that are 3 characters wide. To gain focus to these fields however, I must click the very, very LEFT of the field, about 1 pixel or cursor width wide. The form works fine in Firefox and Safari, where you can click anywhere in the text input field to gain focus.
The form:
<form name=game_edit method=post action="?includepage=game_results.php&gameID=<?=$gameID?>" onsubmit="return validate_form();">
<table border="0" id=gameResults>
<tr><th colspan="4">RESULTS FOR: <?=$gamedate?> HOSTED BY <?=$hostName?></th></tr>
<tr>
<td colspan="2">PLAYERS: <input type=text name=playercount value="<?=$playercount?>" size="3"></td>
<td colspan="2">Championship money colleted: $<?=$champamount?></td>
</tr>
<tr><th>PLAYER</th><th>Place</th><th>Champ Discount</th><th>Didn't play</th></tr>
<? Player_list($gameID); ?>
<tr><td colspan="2"><input type="text" name="manualAdd" size="17" /></td><td colspan="2">Add a username who didn't RSVP</td></tr>
<input type=hidden name=gameID value="<?=$gameID?>">
<tr>
<td colspan="2"><input type=submit name='saveGameResults' value='SAVE CHANGES' style='width:100px;font-size:11px;'></td>
<td colspan="2" align="right"><input type=submit name='saveGameResults' value='LOCK GAME' style='width:100px;font-size:11px;'></td>
</tr>
</table>
The function that writes the fields:
function player_list($gameID)
//////////////////////////////////////////////
// Creates player list for specified //
// game. Provides input for game results. //
//////////////////////////////////////////////
{
//*****Get list of players for gameID*****
$sql = "SELECT rsvpid,rsvp.playerid,concat(fname,' ',lname) as playerName,place,points,freeChamp FROM rsvp LEFT JOIN players ON rsvp.playerid=players.id WHERE rsvp.gameID=$gameID ORDER BY place,lname";
$playerlist = mysql_query($sql);
if ($listrow = mysql_fetch_array($playerlist))
{
#--Get number of players who signed up on the website. This may differ from the actual player count --#
#--entered by the host. A player may have played but not be signed up on the website. --#
echo "<input type=hidden name='recordedPlayerCount' value='".mysql_num_rows($playerlist)."'>";
$i = 0; // index for form rows
do
{
foreach($listrow as $key=>$value) $$key = $value;
($freeChamp) ? $freeChampChecked = "checked" : $freeChampChecked = ""; //check the freechamp box if appropriate.
if ($place==100) $place="";
?>
<tr>
<td><?=$playerName?>:</td>
<td style="text-align:center"><input type=text size="2" name="place<?=$i?>" value="<?=$place?>"></td>
<td style="text-align:center"><input type=checkbox name="freeChamp<?=$i?>" value='true' <?=$freeChampChecked?>></td>
<td style="text-align:center"><input type=checkbox name="noShow<?=$i?>" value='true'></td>
<input type=hidden name="rsvpid<?=$i?>" value="<?=$rsvpid?>">
</tr>
<?
$i++; //increment index for next row
}while ($listrow = mysql_fetch_array($playerlist));
}else
echo "<tr><td colspan='4'>NO RECORDS FOUND FOR THIS GAME!</td></tr>";
}
?>
The offending form field is the "place" field...it is clickable only on the very left of the form field instead of the entire form field, in IE only. (IE 7, that I know of).
Help?
I am willing to bet that the culprit is setting the size of the input element to 2. Give this a shot and let me know if it works any better:
<td style="text-align:center"><input type=text size="3" maxlength="2" name="place<?=$i?>" value="<?=$place?>"></td>
There are other things that I notice in your code:
<tr><th>PLAYER</th><th>Place</th><th>Champ
Discount</th><th>Didn't play</th></tr>
<? Player_list($gameID); ?>
You call the function "Player_list()", but your function is named "player_list()".
foreach($listrow as $key=>$value) $$key = $value;
is the same as:
extract($listrow);
Thanks for the tips, Michael. Found the issue. I have a css-driven horizontal dropdown menu (http://www.udm4.com/) in a header div that drops down over the content div's. Above that, I have a javascript-driven login panel that can drop down over the header div. In playing around with the z-indexes so that everything played nice, I set the content div that holds the form to a z-index of -1. Even after taking out everything except that one div and that one form, IE doesn't like negative z-indexes. I don't know if negative z-indexes constitute valid CSS and IE is just being a tard again, or if other browsers are just too lenient.

Categories