It's strange that I didn't find anything at Google but I hope you can help me. I have a Table with different accounts. When I click on one of those rows, another table for this specific account will slide in. This "specific table" for this account needs to show some account specified data and therefore I need to tell my ajax request for what account he needs those data. The problem: I don't know how I can tell this. I never used Ajax requests without a form.
My HTML Table (I need the var $orderid for my ajax request)
foreach($data as $row)
{
$orderid =$row['id'];
$username = $row['name'];
$done = $row['refsDone'];
$quantity = $row['quantity'];
$running =$row['refsRunning'];
$untouched = $quantity - ($done+$running);
echo "
<tr class='header mySlideToggler'>
<td class='align-center'>$username</td>
<td>0 %</td>
<td>22 Aug 2014</td>
<td>$done / $quantity</td>
<td>$running</td>
<td>$untouched</td>
<td>
<a href='#' class='table-icon edit' title='Edit'></a>
<a href='#' class='table-icon expand mySlideToggler' title='Expand'></a>
<a href='#' class='table-icon delete' title='Delete'></a>
</td>
</tr><tr style='padding: 0'><td colspan='7' style='padding: 0'>
<div class='slideMe' style='display: none'>
Content of the additional info is here
</div>
</td></tr>";
}
My Jquery part which handles only the slide effect of the div and its trigger function:
$('.mySlideToggler').click(function( event ){
event.preventDefault();
event.stopPropagation();
$(this).closest('tr').next().find('.slideMe').slideToggle();
});
So basically my question is: How can I access the php value $orderid from my Jquery function?
Put the order id in the html:
<tr class='header mySlideToggler' data-id="<?php echo $orderid; ?>">
And then:
$('.mySlideToggler').click(function( event ){
event.preventDefault();
event.stopPropagation();
var id = $(this).data('id');
$(this).next().find('.slideMe').slideToggle();
});
Store your id within some data-attribute that can be accessed by JS.
Create some hidden variable and assign value of $orderid to it.
then read same variable inside jQuery. And you are done :)
You can set the ordered attribute wherever you want in your HTML element, like this:
<?php
foreach($data as $row)
{
$orderid =$row['id'];
$username = $row['name'];
$done = $row['refsDone'];
$quantity = $row['quantity'];
$running =$row['refsRunning'];
$untouched = $quantity - ($done+$running);
?>
<tr class='header mySlideToggler' orderedid='<?php echo $orderedid ?>'>
<td class='align-center'><?php echo $username ?></td>
<td>0 %</td>
<td>22 Aug 2014</td>
<td><?php echo $done / $quantity ?></td>
<td><?php echo $running ?></td>
<td><?php echo $untouched ?></td>
<td>
<a href='#' class='table-icon edit' title='Edit'></a>
<a href='#' class='table-icon expand mySlideToggler' title='Expand'></a>
<a href='#' class='table-icon delete' title='Delete'></a>
</td>
</tr><tr style='padding: 0'><td colspan='7' style='padding: 0'>
<div class='slideMe' style='display: none'>
Content of the additional info is here
</div>
</td></tr>
<?php
}
?>
PHP will render the right id for you like a simple HTML attribute. After it, you can access the attribute of your element using jQuery selector inside your .click() function:
$(this).attr('orderedid');
As a good practice, do not "echo" your HTML. Instead of it, enclose plain HTML inside PHP tags. This will make your code more legible.
Related
Let's say for example column dropdown represents a type of membership and depending on the value of dropdown, I would like to be able to display a column next to it that indicates the maximum number of companions I could bring. Is there a way to do it via javascript or PHP or maybe SQL itself?
<?php
foreach ($dbh->query($sql) as $rows){
?>
<tr>
<td><?php echo $rows['name']?></td>
<td><?php echo $rows['email']?></td>
<td><?php echo $rows['number']?></td>
<td><?php echo $rows['org']?></td>
<td><?php echo $rows['dropdown']?></td>
<td><?php echo $rows['date']?></td>
</tr>
<?php
}
?>
Code:
<?php
foreach ($dbh->query($sql) as $rows){
?>
<tr>
<td id="<?=$rows['id']?>"><?php echo $rows['name']?></td>
</tr>
<?php
}
?>
By clicking on the ajax button you will take the ID attribute of the column, send a request with the received id and add the value to the column created next to it.
If I understand you correctly.
I have a list of records on a table which look like this..
PHP/HTML CODE:
<script src="js/jquery-3.2.1.js"></script>
<?php
while($resrecord=mysqli_fetch_array($resdata))
{ ?>
<tr>
<td> <?php echo $resrecord[0];?> </td>
<td> <?php echo $resrecord[2];?> </td>
<td> <?php echo $resrecord[3];?> </td>
<td> <a onclick="window.open('test.php?id='+'<?php echo $resrecord[0]; ?>','popup','width=600,height=600');">Tesing</a> </td>
//also checked with href of anchor tag
</tr>
<?php } ?>
Which means I can't access a php variable in javascript. I also tried these methods
<script type="text/javascript">
var x= '<?php echo $resrecord[0]; ?>';
//OR
var x= '<?php echo json_encode($resrecord[0]); ?>';
//here x won't populate with above php variables
</script>
I've also tested the above javascript methods on a simple PHP variable which didn't belong to any loop and still didn't work.
[UPDATED] You can pass the value using attribute in a class, Try this one.
<script src="js/jquery-3.2.1.js"></script>
<?php while($resrecord=mysqli_fetch_array($resdata)) { ?>
<tr>
<td> <?php echo $resrecord[0];?> </td>
<td> <?php echo $resrecord[2];?> </td>
<td> <?php echo $resrecord[3];?> </td>
<td> <a class="getAllData" data-id="<?php echo $resrecord[0];?>">Tesing</a> </td>
//also checked with href of anchor tag
</tr>
<?php } ?>
Then use jquery function:
you do this.
<script>
$(window).ready(function(){
$(".getAllData").on("click", function(){
var id = $(this).data('id'); //get the current data-id you the row
window.open('test.php?id='+id,'popup','width=600,height=600');
});
});
</script>
This should do it.
In order to access your variable value in JS, the best way is, keep you value in some element bonded with some selector (keep it hidden if not required to display). Then use that selector to access the value.
eg.
<script src="js/jquery-3.2.1.js"></script>
<?php
$i=0;
while($resrecord=mysqli_fetch_array($resdata))
{ $i++ ?>
<tr>
<td><div class="hidden selector_<?php echo $i ?>">
<?php echo $resrecord[0];?>
</div>
<?php echo $resrecord[0];?>
</td>
<td> <?php echo $resrecord[2];?> </td>
<td> <?php echo $resrecord[3];?> </td>
<td> <a onclick="window.open('test.php?id='+'<?php echo $resrecord[0]; ?>','popup','width=600,height=600');">Tesing</a> </td>
//also checked with href of anchor tag
</tr>
<?php } ?>
JAVASCRIPT
var x = $(".selector_1").val();
// you can iterate if required;
Hope you may get some idea with above example
Like in the title I would like to use a variable inside the hyperlink to use it into the modal window.
I am not using bootstrap, it is a custom code but it works until I try to put some kind of <a href='#openModal?id=".$VARIABLE."'>
Is it possible to do that?
Regards
Update:
<?php
$query = "SELECT * FROM USER";
$result = mysqli_query ($connection,$query)
or die ("You couldn’t execute query");
echo "<div class='admin-table'>
<table cellspacing='15'>
<td><h3>Last Name</h3></td>
<td><h3>Name</h3></td>
<td><h3>Phone</h3></td>
<td><h3>Address</h3></td>
<td><h3>Postcode</h3></td>
<td><h3>Date of Birth</h3></td>
<td><h3>Email</h3></td>
<td><h3>Password</h3></td>
<td><h3>Role</h3></td>
</tr>";
while ($row = mysqli_fetch_array ($result, MYSQLI_ASSOC))
{
extract ($row);
echo "<tr>\n
<td>$USER_LASTNAME</td>\n
<td>$USER_FIRTSNAME</td>\n
<td>$USER_PHONE</td>\n
<td>$USER_ADDRESS</td>\n
<td>$USER_POSTCODE</td>\n
<td>$USER_DOB</td>\n
<td>$USER_EMAIL</td>\n
<td>$USER_PASSWORD</td>\n
<td>$USER_ROLE</td>\n
<td><a href='admin_user.php?id=".$USER_ID."'>Delete</a></td>\n
<td><a href='#openModal?id=".$USER_ID."'>Edit</a></td>\n
</tr>\n";
echo "<tr><td colspan ='15'><hr></td></tr>\n";
}
echo "</table></div>\n";
?>
<div id="openModal?id=<?php echo $USER_ID; ?>" class="modalDialog">
<div>X
<h2>$USER_ID</h2>
</div>
</div>
It is working the modal but its just taking the last id, I have to think another solution to pass the variable.
Many thanks for your help
Update 2:
Thank you very much! Now its working,
<?php
$query = "SELECT * FROM USER;";
$result = mysqli_query ($connection,$query) or die ("You couldn’t execute query");
//First echo the table with all your data as you want
echo "
<div class='admin-table'>
<table cellspacing='15'>
<tr>
<td><h3>Last Name</h3></td>
<td><h3>Name</h3></td>
<td><h3>Phone</h3></td>
<td><h3>Address</h3></td>
<td><h3>Postcode</h3></td>
<td><h3>Date of Birth</h3></td>
<td><h3>Email</h3></td>
<td><h3>Password</h3></td>
<td><h3>Role</h3></td>
</tr>";
//Fetch all rows for each user
while ($row = mysqli_fetch_array ($result, MYSQLI_ASSOC)) {
extract ($row);
echo "
<tr>
<td>$USER_LASTNAME</td>
<td>$USER_FIRTSNAME</td>
<td>$USER_PHONE</td>
<td>$USER_ADDRESS</td>
<td>$USER_POSTCODE</td>
<td>$USER_DOB</td>
<td>$USER_EMAIL</td>
<td>$USER_PASSWORD</td>
<td>$USER_ROLE</td>
<td><a href='admin_user.php?id=".$USER_ID."'>Delete</a></td>
<td><a href='#openModal?id=".$USER_ID."'>Edit</a></td>
<div id='openModal?id=".$USER_ID."' class='modalDialog'>
<div><a href='#close' title='Close' class='close'>X</a>
<h2>".$USER_ID."</h2>
<p>You can have additional details here.</p>
</div>
</div>
</tr>
<tr>
<td colspan ='15'><hr></td>
</tr>";
}
echo"
</table>
</div>";
?>
Try this:
echo '<a href="#openModal?id='.$VARIABLE.'">';
Update:
echo '<td>Edit</td>\n';
echo '<td>Delete</td>\n';
any reason you can't use onclick ?
<a href="#" onclick="myJsFunc();">
<script>
function myJsFunc() {
//code to open modal
}
</script>
UPDATE
If i have understood you correct you are trying to make a table showing all users and then when the admin clicks at element a modal pop ups providing additional info for the particular user.
<?php
$query = "SELECT * FROM USER;";
$result = mysqli_query ($connection,$query) or die ("You couldn’t execute query");
//First echo the table with all your data as you want
echo "
<div class='admin-table'>
<table cellspacing='15'>
<tr>
<td><h3>Last Name</h3></td>
<td><h3>Name</h3></td>
<td><h3>Phone</h3></td>
<td><h3>Address</h3></td>
<td><h3>Postcode</h3></td>
<td><h3>Date of Birth</h3></td>
<td><h3>Email</h3></td>
<td><h3>Password</h3></td>
<td><h3>Role</h3></td>
</tr>";
//Fetch all rows for each user
while ($row = mysqli_fetch_array ($result, MYSQLI_ASSOC)) {
extract ($row);
echo "
<tr>
<td>$USER_LASTNAME</td>
<td>$USER_FIRTSNAME</td>
<td>$USER_PHONE</td>
<td>$USER_ADDRESS</td>
<td>$USER_POSTCODE</td>
<td>$USER_DOB</td>
<td>$USER_EMAIL</td>
<td>$USER_PASSWORD</td>
<td>$USER_ROLE</td>
<td><a href='admin_user.php?id=".$USER_ID."'>Delete</a></td>
<td><a href='#openModal".$USER_ID."'>Edit</a></td>
</tr>
<tr>
<td colspan ='15'><hr></td>
</tr>";
}
echo"
</table>
</div>";
//Fetch again the rows to make the modals with the edit info
while ($row = mysqli_fetch_array ($result, MYSQLI_ASSOC)) {
extract ($row);
echo '
<div id="openModal'.$USER_ID.'" class="modalDialog">
<div>X
<h2>'.$USER_ID.'</h2>
<p>You can have additional details here.</p>
</div>
</div>';
}
?>
Old answer before the comments
It seems that single quotes and/or double quotes aren't escaped properly.
Also remember that in PHP string concatenation is made using " . " (dot) and in JavaScript using " + " (plus).
Update 1
I think that if you use the following you will be ok.
echo '<td>Delete</td>';
echo '<td>Edit</td>';
Update 2
Don't forget to add $variable at div too so <a> and div id are the same the same. E.g.
echo '<div id="openModal'.$variable.'" class="modalDialog"></div>';
I am trying to create form by dynamically adding rows and deleting it when user clicks on delete button using php code,
below is my code to render first row while opening the form ,
<div class="selector-details" style="display:none">
<div class='newfield'>
<div id='container'>
<table id="tid">
<tr>
<td><?php echo CHtml::dropDownList('field_list','',$field_name); ?></td>
<td><?php echo CHtml::dropDownList('field_list','',$operator); ?></td>
<td><?php echo CHtml::textField('querybox'); ?></td>
<td> <?php echo CHtml::imageButton(Yii::app()->request->baseUrl.'/images/Trash.jpg',array('class'=>'trash-action')); ?></td>
<?php echo "<br>"; ?>
<td> <?php echo CHtml::dropDownList('condition_check','',$condition_check);?></td>
</tr>
</table>
</div>
</div>
<?php
echo CHtml::button('Add',array('class'=>'addfield-button','background-style'=>'none'));
how i should make call the above code to add rows and delete particular row when user clicks on the row delete button ? I am new to yii please provide any idea to go further.
$script = 'alert("hello")';
Yii::app()->getClientScript()->registerScript('#test', $script,CClientScript::POS_HEAD );
echo CHtml::button('Add',array('class'=>'addfield-button','background-style'=>'none','onclick'=>$script));
if you real want to use Yii style, you can open framework code and there is a good code that you want, search : CButtonColumn.php
I made this JS function that open 2 pages
function edit(id){
window.open('<?php echo site_url();?>store_out/store_out_print/'+id);
window.open('<?php echo site_url();?>store_out/delivery_print/'+id);
document.getElementById('print').target = '_blank';
}
I have that table that display all possible records that user can select one row and click on print image so two pages are opened:
<?php
for($i=0;$i<sizeof($storeout);$i++){ ?>
<tr class="gradeZ" id="<?php echo $storeout[$i]->storeout_id;?>" onclick="edit(this.id); ">
<td><?php printf("%06d",$i+1);?></td>
<td><?php echo $storeout[$i]->storeout_id;?></td>
<td><?php echo $storeout[$i]->storeout_modified_time;?></td>
<td><?php echo $account[$i][0]->account_name;?></td>
<td><?php echo $storeout[$i]->rof_id != 0 ? "R.O.F" : "S.O";?></td>
</tr>
<?php } ?>
I want when I select specific row and click on the print image, execute two functions to open two different pages (delivery/store_out).
Any Ideas guys?
I'm going to assume that the td is in a tr which is programmatically generated in a loop (i.e. you will have more than 1 tr, td, and img). I will also assume jQuery is available.
The first problem will be if you have more than 1 row that is created in a loop, you will have a bunch of things with the same id="print". This is not the good js.
You should append the store_out (or whatever the id is you are trying to get to the controller) to the id attribute. Something like id="print_<?php echo $thing->id;?>". This will let you get the id you want to pass to the edit function. I would also add a class="print" which will make the below easier. So, the whole row would look something like:
<td width="5%"><a id="print_<?php echo $thing->id; ?>" class="print" href="#" ><img src="<?php echo site_url();?>/images/print.png" border="0" title="Print" height="25" width="25"/> </a></td>
Which would output something like:
<td width="5%"><a id="print_1234" class="print" href="#" ><img src="http://example.com/images/print.png" border="0" title="Print" height="25" width="25"/> </a></td>
Second is you are not passing the id to the method so far as I can tell. Considering you heeded the above, you can pull the id from the id attribute.
$('.print').click(function(){
var id = $(this).attr('id').split('_')[1];
edit(id);
})