Here is my block of Php code in which I am rendering the table row:-
Actually what I am trying to achieve is that on the click of the button in the first row I should be able to show the next row, which is previously hidden by using .hide() in the document ready script.
<?php
echo "<tr>";
echo "<td>"."<button id= \"btnnumber_". $i ." \" class=\"btn info toggler\" data-value=\" $val\">Show Info <i class=\"icon-arrow-down\"></i></button>"."</td>"; // On click of this button I am taking its id in Jquery getting the number at end creating the id of the next row in the Jquery script.
echo "</tr>";
echo "</tr>";
echo "<tr id=\"row_$i \" class=\"info_row\">";// This row is dynamically generated one each row has its unique id like 0 row is having id row_0,1 row is having id row_1 etc.
echo "<td id=\"student_count\">"."students count:"."</td>";
echo "<td id=\"start_date\">"."start date: "."</td>";
echo "<td id =\"end_date\">"."end date: "."</td>";
echo "<td></td>";
echo "</tr>";
?>
This row is initially set to hide in document ready by using the following JQuery:-
$(function(){
$('.info_row').hide();// On document load I am hiding all the element with class info_row.
$('.toggler').toggle(function(){// Then I am toggling between hide and show.
var currentId = $(this).attr('id');
var number = currentId.substr(currentId.length - (currentId.length - currentId.indexOf("_") - 1));
var rowId = 'row_' + number;
$("#" + rowId).show();
}, function(){
var currentId = $(this).attr('id');
var lastChar = currentId.substr(currentId.length - (currentId.length - currentId.indexOf("_") - 1));
var rowId = 'row_' + lastChar;
$("#" + rowId).hide();
});
});
I am not able to achieve the toggle i.e the row is not hiding and showing as I was trying to achieve.
Any help will be highly appreciated.
This line look like a problem
echo "<tr id=\"row_$i \"
In that there is a spurious space in the id.
echo "<tr id=\"row_$i\"
Related
I have a table that is being populated by a given sql query, that has a radio button at the end.
How can i get the entire row value of a selected radio button passed to a different page?
results=mysqli_query($conn,$sqlitem);
while ($dat=mysqli_fetch_assoc($results)){
echo "<tr>";
echo "<td>".$dat['sellername']."</td>";
echo "<td>".$dat['itemname']."</td>";
echo "<td>".$dat['maker']."</td>";
echo "<td>".$dat['details']."</td>";
echo "<td>".$dat['condition']."</td>";
echo "<td>".$dat['price']."</td>";
echo "<td> <input type='radio' name='selc' width ='5px'> </td>";
echo "</tr>";
}
I have tried various combinations but for some reason the entire row value doesn't come. The last and closest option that I tried was this SOMETHING CLOSELY SIMILAR
I took the script portion and updated still isn't working. I believe there should be some solution for this.
You should probably use the MySQL primary key for each row, pass that info to the next page and have PHP perform a query for that item on the new page rather than explicitly passing content around from page to page.
That said, you can keep track of the order that you are echoing the keys in an array, then use that array to turn the row into an object:
var keys = ['sellername','itemname','maker','details','condition','price'];
$('input[type=radio]').on('change', function(event) {
if (this.checked) {
var $tr = $(this).closest('tr');
var $cells = $tr.find('td');
var obj = {};
$.each($cells, function(index, cell) {
obj[keys[index]] = cell.textContent;
});
console.log('row data', obj);
}
});
Note this is untested, but just demonstrates how you can match up an array of key names to the index their data can be found in a table cell
I want to get the text of just which table data is clicked on. i.e. get $post_no value if clicked on post_no, get the word 'description' if clicked on description. I have tried a number of ways but cannt get what i want. whats the approach?
my php code:
echo "<table border=1>";
echo "<tr><th>Post No</th><th>Writer ID</th><th>Writer Name</th><th>Title</th><th>Description</th><th>Summary</th><th>Approval</th></tr>";
while ($row= mysqli_fetch_array($r2)){
$post_no=$row['post_no'];
$writer_id=$row['writer_id'];
$writer_name=$row['writer_name'];
$title=$row['title'];
$description=$row['description'];
$summary=$row['summary'];
echo "<tr height='50' class='x"."". " '>";
echo "<td class='r'>".$post_no."</td>";
echo "<td class='r'>".$writer_id."</td>";
echo "<td class='r'>".$writer_name."</td>";
echo "<td class='r'>".$title."</td>";
echo "<td class='r'>".'description'."</td>";
echo "<td class='r'>".'summary'."</td>";
echo "<td class='r'>Approve</td>";
echo "</tr>";
}
echo "</table>";
javascript code;
<script>
$(document).ready(function(){
$(".x").each(function(i){
$(this).click(function(){
console.log($(this).children().eq(i).text());
});
});
});
</script>
I would do this
$('.x').click(function (e) {
var $target = $(e.target);
console.log($target.text());
});
So you just want the value of $post_no if you click on the according div? Then why don't you just bind the event on that class?
$(".r").click(function() {
console.log($(this).text())
});
Since people continue to downvote this - for whatever reason - here you go, fiddle. If i do something wrong, tell me and don't just downvote.
https://jsfiddle.net/LcbwL85m/
So you want to know on what value you've clicked on, but the binding remains on the row?
Perfectly possible:
$(document).ready(function(){
$(".x").click(function(event){
console.log(event.target); //Log where you clicked
console.log($(event.target).text());
});
});
Why should this work?
In the event handler that we add to the clicking event when we click the elements with class x (every row), we pass a reference to the event itself.
In this reference we have access to a lot of information about the event, like in this case the target. The target is the Element where there is really clicked.
Because Javascript works with event bubbling, you do not need to set the handler on every element, but you can set it on a top level (even on 'body' would work), and with this (event.target) you can see where the user really clicked.
Because we now know the element that the user clicked, we can pass that reference to a jQuery object ($(event.target)) and utilise the text() function.
echo "<table border=1>";
echo "<tr><th>Post No</th><th>Writer ID</th><th>Writer Name</th><th>Title</th><th>Description</th><th>Summary</th><th>Approval</th></tr>";
while ($row= mysqli_fetch_array($r2)){
$post_no=$row['post_no'];
$writer_id=$row['writer_id'];
$writer_name=$row['writer_name'];
$title=$row['title'];
$description=$row['description'];
$summary=$row['summary'];
echo "<tr height='50' class='x"."". " '>";
echo "<td class='r'>".$post_no."</td>";
echo "<td class='r'>".$writer_id."</td>";
echo "<td class='r'>".$writer_name."</td>";
echo "<td class='r'>".$title."</td>";
echo "<td class='r'>".$description."</td>";
echo "<td class='r'>".$summary."</td>";
echo "<td class='r'>Approve</td>";
echo "</tr>";
}
echo "</table>";
// jquery part
<script>
$(document).ready(function(){
$(document).on('click','.r',function(event){
event.preventDefault();
var td_txt = $(this).text();
console.log(td_txt);
//or you can use alert.
});
});
</script>
the php values of 'description' and 'summary' were not concatenated properly.
in the jquery part you can use alert as well to get the value of respective td
$(function() {
$("#table_test").find("td").each(function() {
$(this).click(function() {
alert($(this).text());
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="table_test" border="1">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
</table>
With this code, you can alert the value of each td.
This code use .each(), which is not advisable, better use event.target on click on table.
Not sure why everyone is going for complicated solutions. Just use a selector that targets the elements you desire:
$("tr.x td.r").click(function(){
console.log($(this).text());
});
or even just:
$(".r").click(function(){
console.log($(this).text());
});
Dynamic elements:
If you are after something more efficient, you can use a delegated event handler. This has the advantage that it will still work if items are added dynamically to the table:
$("table").on('click', 'td.r', function(){
console.log($(this).text());
});
This works by listening for events (in this case click) to bubble up to the non-changing ancestor element, then it applies the jQuery filter (in this case td.r) to just the elements in the bubble-chain. It then applies the function to just the element that caused the event. The upshot of all this is that the elements only need to exist at event time and not when the event was registered.
The target of the delegated event should be a non-changing ancestor element. In this example I just chose table. If nothing is close/convenient the default to use is document (do not use body as it has a bug that can stop mouse events responding)
My JavaScript function works fine, but I have problems getting different ids from the PHP input box.
JavaScript
window.onload = function()
{
new JsDatePick({
useMode:2,
target:"inputField1", //HERE I WOULD LIKE TO PASS DIFFERENT ID ex. "inputField1"+ "i"
dateFormat:"%Y-%M-%d",
yearsRange:[1978,2120],
limitToToday:false,
cellColorScheme:"beige",
imgPath:"main/img/",
weekStartDay:1
});
My PHP input box for loop
<div class = "start_date" >
<strong><label for="start_date">Start Date</label></strong>
<br/><br/>
<?php
for($k=1;$k<=$textboxindex;$k++)
{
echo "<input type=\"text\" class='textboxsize' id= \"inputField1\" name=\"start_date[]\" value=\"$start_date\" />";
echo "<br/>";
}
?>
</div>
It works fine, but I would like to have different ID names to use in the JavaScript function. Any ideas?
This doesn't work...
echo "<input type=\"text\" class='textboxsize' id= \"inputField+$k\" name=\"start_date[]\" value=\"$start_date\" />";
Any help will be appreciated.
It's most likely with JsDatePick widget. Its target parameter takes a single ID of an element, therefore you'd have to wrap the JS code in a loop and initiate a separate instance of the widget for each field ID.
Assuming your input field indexing starts with 1:
window.onload = function()
{
var i = <?=$totalNumberOfInputs;?>
for(j=1;j<=i;j++) {
new JsDatePick({
useMode:2,
target:"inputField" + j, //HERE I WOULD LIKE TO PASS DIFFERENT ID ex. "inputField1" + j
dateFormat:"%Y-%M-%d",
yearsRange:[1978,2120],
limitToToday:false,
cellColorScheme:"beige",
imgPath:"main/img/",
weekStartDay:1
});
}
}
You don't need to put the + sign to concatenate strings within double quotes (it's dot, by the way).
Change:
id= \"inputField+$k\" name=...
To:
id=\"inputfield$k\" name=...
What is screwing it up is the "+" sign. PHP uses "." to concatenate strings. ECHO out $k properly and you shouldn't have any trouble
//this is doesn't work
echo "<input type=\"text\" class='textboxsize' id= \"inputField$k\" name=\"start_date[]\" value=\"$start_date\" />";
just remove that + sign.
I have two dropdown lists containing customers info.
Using PHP for loop, I have allowed to enter 5 customers details at a time.
for($i=1; $i<6; $i++)
{
echo "<tr><td><select id=\"customer_" . $i . "_class\"></select></td>";
echo "<td><select id=\"customer_" . $i . "_age\"></select></td></tr>";
}
Now I want to execute a jQuery function in such a way that if, for example, customer_2_class changes, it executes some function to its corresponding customer_2_age.
$("#customer_?_clas").change(function()
{
//some function to execute on corresponding customer_?_age
});
Add class to your <select> and move the id to another attribute, like data:
echo "<tr>";
echo "<td><select class=\"customer_class\" data-id=\"$i\"></select></td>";
echo "<td><select class=\"customer_age\" data-id=\"$i\"></select></td>";
echo "</tr>";
And in your javascript:
$('.customer_class').change(function() {
var id = $(this).attr('data-id');
// process customer_class with this id
});
You could use the attribute ends-with selector:
$('select[id$="_class"]').change(function() {
It might be worth browsing through the full list of jQuery selectors.
$('select').
filter(function() {
return /^customer_[0-9]_class$/.test(this.id); // filter on select
// based on id format
})
. change(function() { // binding change
// to filtered select
var num = this.id.match(/\d/)[0]; // get numerical value
// of select box on change
$('#customer_' + num + '_age') // point to target select
.css('background', '#f00'); // do something
});
Working sample
i have 2 functions
1- addMessage(): save data into database and is called only on click .
2-updateMessage():get data with ajax from database, called when document is ready ,called every 3 seconds for new data, and called on success of addMessage().
function updateMessage()
{
$.ajax({
url:"db.php",
type:"post",
dataType:"text/xml",
success:function(data)
{
$(data).find("message").each(function() {
var msg_id = $(this).find("msg_id").text();
var date_time = $(this).find("date_time").text();
var from_user = $(this).find("from_user").text();
var from_group = $(this).find("from_group").text();
var to_user = $(this).find("to_user").text();
var to_group = $(this).find("to_group").text();
var msg_type = $(this).find("msg_type").text();
var msg = $(this).find("msg").text();
var grp_abr = $(this).find("grp_abr").text();
var html = "<tr class='blue'>";
html += "<td><a href='#' class='bullet' onclick='changeStatus(\""+msg_id+"\")'><\/a><\/td>";
html += "<td><a href='#' class='reply' onclick='reply(\""+from_user+"\");'><\/a><\/td>";
html += "<td>"+date_time+"<\/td>";
html += "<td>"+from_user+"["+from_group+"]"+"<\/td>";
html += "<td>"+to_user+"["+to_group+"]"+"<\/td>";
html += "<td><a href='#' class="+msg_type+"><\/a><\/td>";
html += "<td><a href='#' class='flag_msg' onclick='flagMsg("+msg_id+")'><\/a><\/td>";
html += "<td>"+msg_id+msg+"<\/td>";
html += "<td>"+grp_abr+"<\/td><\/tr>";
});
}
});
setTimeout('updateMessage()',3000);
}
Now the data retrieved i want to add to different tabs with different names and different containers, how would i do that. My question isn't a matter of code, it is more about logic or sequence of steps.
Any help please.
Not sure I understand what you really want. Assuming you are asking how you can add tabs dynamically
Look into the jQuery Tabs add() method and maybe the tabTemplate and panelTemplate options.
At the end of your success function when you have constructed the new tab content append it somewhere suitable in the DOM (e.g. hidden table which holds all tabs) and the just use the add method.
If you have multiple tab-containers just call the add-method on the one you want.