I need some help, i have a forum page and i cant get the toggle part to work
Here is the code:
<script type="text/javascript">
$(document).ready(function() {
$(".button").click(function(event) {
$("#div").hide();
var tmp = ($("#div" + $(this).attr("target")).is(":visible") ? false : true)
if (tmp) $("#div" + $(this).attr("target")).toggle();
});
});
</script>
<h2>Forum</h2>
<table cellspacing="0" cellpadding="0" width="100%" class="table">
<tr style="background: #f2f2f2;"><td><strong>Name</strong></td><td></td></tr>
<tr style="display:none;" id="divDynamicID"><td> NAME</td><td align="right" width="40"><img src="../img/pencil.png"> <img src="../img/delete.png"></td></tr>';
<tr class="Test"><td> Name</td><td align="right" width="40"><img src="../img/pencil.png" class="button" target="dynamicID"> <img src="../img/delete.png"></td></tr>';
When you click the .button i want it to hide all open divs and just open that one you click at, but at this time i only get the show part to work not the not show part.
In your jQuery code I found code with #div, but could not find div with id div in HTML code. # will only be used with id of the HTML control
Whereas div is the selector used for HTML controls
I'm not very sure about your question. If I've understood properly I'd say two things. First, you can have a local variable for the tr id which you want to display. I guess the id is the value of the target attribute for button class with "div" prefixed. And secondly, you can have a class for each of the rows so that you can hide them all when needed.
echo '<tr style="display:none;" id="div'.$obj->boardID.'"><td> '.$obj->name.'</td><td align="right" width="40"><img src="../img/pencil.png"> <img src="../img/delete.png"></td></tr>';
echo '<tr class="Test"><td> '.$obj->name.'</td><td align="right" width="40"><img src="../img/pencil.png" class="button" target="'.$obj->boardID.'"> <img src="../img/delete.png"></td></tr>';
In the abodes, I put a class trClass. You can change it to whatever you feel contextual to your code.
$(".button").click(function(event) {
$('.trClass').hide();
var trId="div"+$(this).attr("target");
var tmp = $("#" + trId).is(":visible");
if (tmp) $("#" + trId).show();
});
Related
I have usual sql scenario with php (mysqli_fetch_assoc) and create table. I want to hide rows randomly when i click on them. I may also need to delete them from the database at the same time, because this file is calling from another with ajax every 5 sec. and hiding is not enough because after calling the rows appear again.. :) I'm no sure that this is the best solution but I'm learning now.
I'm trying something like this it's working, but i can hide only last row. I want hide every row randomly :)
jQuery().ready(function(){
$( "#trow" ).click(function() {
$( "#trow" ).hide()
});
});
<?php while ($row = mysqli_fetch_assoc($result_down)):
$datetime = $row['datetime'];
$device = $row['host'];
$message = $row['msg'];
?>
<tbody>
<tr id="trow">
<td id="device"><?php echo $datetime;?></td>
<td id="datatime"><?php echo $device;?></td>
< td id="message"><?php echo $message;?></td>
</tr>
</tbody>
<?php endwhile;?>
Try to change the trow from an id to a class name
<tbody>
<tr class="trow">
<td id="device"><?php echo $datetime;?></td>
<td id="datatime"><?php echo $device;?></td>
<td id="message"><?php echo $message;?></td>
</tr>
And in the JQuery side, call the click event on the class and not the id this time. The $(this) means the clicked element.
jQuery().ready(function(){
$( ".trow" ).click(function() {
$( this ).hide()
});
});
Simply hiding rows after a click can be done like this:
(function () {
$('table tr').click(function() {
$(this).hide();
});
})();
<td value="541">123</td>
<td value="542">456</td>
$("#table td").click(function(){
var value=$(this).html();
alert(value);
});
i want to pass the td value 541 to modal
but when i click I only get the value 123
As value is not a valid attribute for a td tag, you should use data-* attributes to store custom data.
The data-* attributes gives us the ability to embed custom data attributes on all HTML elements.
See docs: https://www.w3schools.com/tags/att_global_data.asp
$("#table td").click(function(){
var value=$(this).data("value");
alert(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
<tr>
<td data-value="541">123</td>
<td data-value="542">456</td>
</tr>
</table>
value isn't really used on the td element. However, you can always grab its value like this:
$("#table td").click(function(){
var value=$(this).attr("value");
alert(value);
});
In my view the form as
<table width="90%" border="0" cellspacing="2" cellpadding="2" id="table-data" align="center" style="border:1px dashed #CCCCCC" class="table table-vcenter table-striped">
<tr class="tr_clone">
<td> % Completion</td>
<td> <?php echo $form->textField($model_result,'floatPaymentpercentage[]',array('class'=>'form-control','placeholder'=>'%')); ?></td>
<td> <?php echo $form->textField($model_result,'varAmount[]',array('class'=>'form-control','placeholder'=>'Amount')); ?></td>
<td><input type="button" name="add" value="Add" class="tr_clone_add btn btn-xs btn-warning"></td>
</tr>
Here i have two textboxes for payment terms..if i save ones it will be saved.
If i add more the last will not saved in database
In my controller we can use print_r()
echo ("<pre>"); print_r($_POST); echo ("</pre>");exit;
The default text field values only shown here.
Here the text fields are added dynamically.
The dynamic added text field's values are not displayed.
In my model the rules are
public function rules()
{
return array(
array('floatPaymentpercentage','required'),
array('varAmount','required'),
);
}
here is the java script for add more
<script type="text/javascript">
$(document).on('click','.delete',function(){
$(this).closest('tr').remove();
});
$("input.tr_clone_add").live('click', function() {
if($(this).val() == "Add")
{
var $tr = $(this).closest('.tr_clone');
var $clone = $tr.clone();
$clone.find(':text').val('');
$tr.find('.tr_clone_add').val('Delete')// set value to Delet
$tr.find('.tr_clone_add').val('Delete')// set value to Delet
.toggleClass('tr_clone_add delete')// toggle classes
.unbind('click'); // unbind the current events from button
$tr.after($clone);
}
else
{
$(this).closest('tr').remove();
}
});
</script>
Please help me to fix this.
Here i can add js for funuction add more
Thanks
I have a problem with change value of opener document by jquery with data from mysql. Mysql data is displayed in table, in every TR I have button which should change data in opener document with data from mysql but it puts everywhere 0. Where is the problem? I have a following code:
<script type="text/javascript">
$(".formbutton").click(function() {
var parent = $(this).parents('tr');
var nazwa = $('#nazwa', parent).val();
var osoba = $('#osoba', parent).val();
var nip = $('#nip', parent).val();
$("#nazwa",opener.document).val(+nazwa)
$("#adres",opener.document).val(+osoba)
$("#nip",opener.document).val(+nip)
window.opener.focus();
window.close();
});
</script>
<? echo'<table>
<thead>
<tr>
<th>Nazwa</th>
<th>Osoba</th>
<th>Nip</th>
<th></th>
</tr></thead><tbody>';
$id=$_GET['id'];
$link=mysql_query("SELECT * FROM qwerty where qwerty like '%$id%'");
while($wiersz=mysql_fetch_array($link))
{
echo'<tr>';
echo'<td id="nazwa">'.$wiersz['nazwa'].'</td>';
echo'<td id="osoba">'.$wiersz['osoba'].'</td>';
echo'<td id="nip">'.$wiersz['nip'].'</td>';
?>
<td align="center" width="260px"><form><input type="button" class="formbutton" value="PUT IN"/></form></td>
<?
}
echo'</tbody></table></div>'; ?>
Thanks in advance
Using .val() on a td doesn't work.
Use e.g. var nazwa = $('#nazwa', parent).text(); or var nazwa = $('#nazwa', parent).html();
Finally, as mentioned by PH. T. ids must be unique, so use css classes:
var nazwa= $('.nazwa', parent).text();
...
$("#nazwa",opener.document).val(+nazwa)
...
echo'<td class="nazwa">'.$wiersz['nazwa'].'</td>';
I assume that the td named nazwa contains a number and that #nazwa in parent is a unique form element.
I'm having problems with my slideToggle function in jquery when I use divs created in a loop.
When I press one of the buttons I want it to show the corresponding div instead of all the divs underneath all the buttons.
This is my css:
<style>
.toggle { display:none;}
p { width:400px; }
</style>
Here is my loop with button and div
<?php
include('sql.php');
$i = 0;
while ($i < count($rows)) {
echo "
<button class='trigger'>
<table width='100%'>
<tr>
<td width='20%'><img src='http://localhost/app-side/Icons/beer_icon.png' /></td>
<td width='80%'><h2>{$rows[$i]['titel']} </h2></td>
</tr>
</table>
</button><br>
<div class='toggle'>
<p>
{$rows[$i]['info']}
</p>
</div>";
$i++;
}
?>
And here is my slideToggle function
<script>
$('.trigger').click(function(){
$('.toggle').slideToggle('fast');
});
</script>
Thank you in advance.
The easiest solution would probably be to wrap your entire looping html in a further div, and then amending your jQuery like so:
$('.trigger').click(function() {
$(this).siblings('.toggle').slideToggle('fast');
});
Since the two elements are now grouped inside a common parent, one can find the other using the siblings-method. Naturally, you can go about this in hundreds of ways, but this one struck me as the quickest and easiest.
Here's a fiddle: http://jsfiddle.net/QukC8/