I'm writing something fairly basic; however for some reason the jquery .click() is not working. Here is my code:
<?php for($r=0; $r<count($result); $r++){?>
<tr>
<?php for($c=0; $c<9; $c++){?>
<td><?php echo $result[$r][$c];?></td>
<?php }?>
<td><button name="edit<?php echo $r;?>">edit</button></td>
</tr>
<?php }?>
and
$('button[name*="edit"]').click(function(){
var row= $(this).parent().parent();
alert($(this).val());
});
If anyone can help me with this it would be greatly appreciated.
See this: jsfiddle
Note that it alerts the id of the containing row and the text value of the button.
HTML:
<table>
<tr id='foo'>
<td>1</td>
<td>
<button name="editg">edit</button>
</td>
</tr>
</table>
Javascript:
$('button[name*="edit"]').click(function(){
var $row= $(this).parent().parent();
alert($row.attr('id'));
alert($(this).text());
});
Alerts: -
"edit"
"foo"
In your example, did you mean:
alert($(this).text());
there is no val() on button.
If this does not answer your question, then perhaps you can change the fiddle to show the problem happening.
Update
See this: jsdfiddle
This uses $(function() in case your javascript is in head.
Related
I am using basic datatable to print dynamic values that are received from the back end. I also have a hidden child row for each row with some additional values of that parent row. There is a button in each parent row and I want that on click of that link the child of that parent row should expand and be visible to the user. This should happen for every row.Here is the fiddle
However, when I am clicking on that button, the child row is not opening. Can anyone please help me with the solution
$('table').on('click', 'tr.parent .det', function() {
$(this).closest('tr.cchild').toggleClass('open');
});
.cchild {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Location</th>
<th>Experience</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php foreach($per_job as $job): ?>
<tr class="parent">
<td>
<?php echo $job->name; ?>
</td>
<td>
<?php echo $job->location; ?>
</td>
<td>
<?php echo $job->experience; ?>
</td>
<td>
<button class="show-btn rd-details det">
DETAILS
</button>
</td>
</tr>
<tr class="cchild">
<td>
<?php echo $job->age; ?>
</td>
<td>
<?php echo $job->class; ?>
</td>
<td>
<?php echo $job->address; ?>
</td>
<td>
<?php echo $job->number; ?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
As far I see you have not defined the class open anywhere, so just define the class in existing CSS.
.open{
display:block !important;
}
The display property specifies if/how an element is displayed.
Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline. When you declare an object to have display none as you have done using your CSS for cchild the code hides the object.
Now to show your object you can either remove your existing class or override the existing class by using another class or style. To do so you are using toggling the class open which should have display 'block'. In simple language, you are showing and hiding the object. More info can be found here.
I am fetching data from MySql and I am displaying it in a table. I would like that for each <td> that contains a certain id to display some extra info on mouseenter and hide it on mouseleave using jQuery. Here is the HTML output:
<table>
<tbody>
<tr>
<th>Option 1</th>
<th>Option 2</th>
<th>Option 3</th>
</tr>
<?php
while ($row = mysqli_fetch_assoc($result)) {
?>
<tr>
<td id="triggerTooltip"><?php echo $row['option1']; ?>
<div class="tooltip">
<p>Extra info</p>
</div>
</td>
<td><?php echo $row['option2']; ?></td>
<td><?php echo $row['option3']; ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
The default display property for the tool-tip is set to none. Here is the jQuery I am using:
$('#triggerTooltip').mouseenter(function() {
$(this).closest('.tooltip').show();
}).mouseleave(function() {
$(this).closest('.tooltip').hide();
});
I tried using $(this).find('.tooltip') and it works, but only for the first occurrence of the #triggerTooltip. I think I am getting it wrong. Can you please help me to figure this out? Thank you.
The above answer is correct here, this behaviour could also be implemented with CSS if you wanted, with a rule like:
.triggerTooltip .tooltip {
display: none;
}
.triggerTooltip:hover .tooltip {
display: block;
}
It seems that you are duplicating (or nplicating) ids. Don't duplicate ids! Use classnames instead.
$('.triggerTooltip').mouseenter(function() {
$(this).find('.tooltip').show();
}).mouseleave(function() {
$(this).find('.tooltip').hide();
});
HTML
<td class="triggerTooltip"><?php echo $row['option1']; ?>
<div class="tooltip">
<p>Extra info</p>
</div>
</td>
Try using jquery hover, which takes two functions as arguments, and remember that classes and IDs are different. IDs are meant to be unique on a page.
You can use:
$('#triggerTooltip').mouseenter(function() {
$(this).find('.tooltip').each(function() {$(this).show()});
}).mouseleave(function() {
$(this).find('.tooltip').each(function() {$(this).hide()});
});
This is my form :
<div class="mutiple-array-form">
<?php $form = ActiveForm::begin(); ?>
<table id="sampleTbl", class="table table-striped table-bordered">
<thead>
<tr id="myRow">
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>william</td>
<td>32</td>
</tr>
<tr>
<td>Muli</td>
<td>25</td>
</tr>
<tr>
<td>Sukoco</td>
<td>29</td>
</tr>
</tbody>
</table>
<div class="form-group">
<?= Html::button('Create',['class' => 'btn btn-success _addNew', 'onclick' => 'myfunction()']) ?>
</div>
<?php ActiveForm::end(); ?>
</div>
Below is my Javascript code :
<?php
$script = <<< JS
function myfunction() {
alert(document.getElementById("sampleTbl").rows.namedItem("myRow").innerHTML);
}
JS;
$this->registerJs($script);
?>
My code does not work. When I click button, nothing happens. For example, I want to show table value using array in alert. Please help!
What you are trying won't work because somehow declaring the function in inline script in yii2 doesnt work,i dont know proper reason of it and i am trying to find the reason.
Now your code will work if you write your script like this
<?php
$script = <<< JS
$('#idOfButton').click(function(){
alert(document.getElementById("sampleTbl").rows.namedItem("myRow").innerHTML);
});
JS;
$this->registerJs($script);
?>
And it will only print the value of your header
Now if you want the data of the table inside as an array and alert it, try this code
<?php
$script = <<< JS
$('#idOfButton').click(function(){
var myTableArray = [];
$("table#sampleTbl tr").each(function () {
var arrayOfThisRow = [];
var tableData = $(this).find('td');
if (tableData.length > 0) {
tableData.each(function () {
arrayOfThisRow.push($(this).text());
});
myTableArray.push(arrayOfThisRow);
}
});
alert(myTableArray);
});
JS;
$this->registerJs($script);
?>
And i would suggest that you use AppBundle to use script that way you will be able to debug the code via browser and figure out the problem yourself,which will help you find the answer.
I have a table. Inside table i have rows, each with a column : checkbox.
as following
<table>
<tr class="row">
<td class ="checkclass" ><input type="checkbox"></td>
<td></td>
<td></td>
</tr>
<tr class="row">
<td class ="checkclass" ><input type="checkbox"></td>
<td></td>
<td></td>
</tr>
</table>
I want whenever i select the checkbox, a pop up is created.
Please note : i can not edit the html code.. However i can only do some changes in javascript.
PS : At last i want to highlight the selected row.
well you could use the Jquery library and take advantage of the .change() functionality
$('.target').change(function() {
alert('Handler for .change() called.');
});
reference: http://api.jquery.com/change/
On how to use JQuery is a different question
Now for javascript its a bigger hack:
function checkAddress(checkbox)
{
if (checkbox.checked)
{
alert("a");
}
}
To add the on click on the HTML with Javascript
document.getElementById("ElementID").setAttribute("onchange", function() {checkAddress(this));
HTML
<input type="checkbox" name="checkAddress" />
please check following links
http://jqueryui.com/dialog/#modal-form
http://www.mywebdeveloperblog.com/my-jquery-plugins/modalpoplite
<td class ="checkclass" ><input type="checkbox" onchange='checkBoxClicked();'></td>
function checkBoxClicked()() {
alert("Hi");
}
for more info you can use [javascript pop-up][1] but i will suggest to go with jQuery or modal
[1]: http://www.echoecho.com/jsbasics.htm
you can do with jquery
$('.checkclass input').change(function() {
// code here
});
I hope it will help to solve your problem.
Is it possible to add a jQuery function so that a click in a table cell will invoke
a hidden <a href="javascript: ..." /> element (that is a descendant of the TD) ?
I've tried with
$('#table td').click(function() {
$(this).find('a').click();
});
An other variants, but to no luck.
--larsw
Why don't you move your JavaScript code out of the href attribute and into your click event? jQuery was made to write unobtrusive JavaScript.
Edit:
No, but really, consider removing those hidden links in favor of unobtrusive JavaScript. Here are the relevant parts of Corey's example rewritten:
JS:
$(document).ready(function() {
$('table td').click(function(event) {
alert($(this).html())
})
})
HTML:
<table border="1">
<tr>
<td>a1</td>
<td>a2</td>
</tr>
<tr>
<td>b1</td>
<td>b2</td>
</tr>
</table>
<html>
<head></head>
<body>
<table border=1>
<tr>
<td>a1<a href=# onclick='alert("a1")' /></td>
<td>a2<a href=# onclick='alert("a2")' /></td>
</tr>
<tr>
<td>b1<a href=# onclick='alert("b1")' /></td>
<td>b2<a href=# onclick='alert("b2")' /></td>
</tr>
</table>
<script src="scripts/jquery-1.2.6.min.js" ></script>
<script>
$(function(){
$('table td').click(function(){ $(this).find('a').click()});
})
</script>
</body>
</html>
I have it working fine with that clip above. However see your jQuery selector has a # in front of it , which would be failing unless your table has an id of 'table'.
Having said that, there is probably a better way to do what your after than hidden a tags with javascript embedded in them.
This would be a workaround if you want to avoid adding an onclick:
$('#table td').click(function() {
$(this).find('a').each(function(){ window.location = this.href; });
});