so i am writing a program that uses php to collect data from a database and with that data I am creating HTML Strings as shown below.
I am then echoing this data in my HTML file and using bootstrap to create the table, and the table comes out perfectly, but I am looking to be able to have the user that is using my website be able to click on a row and more detailed data about the row they clicked on comes down. The code I wrote to try and accomplish this looks like so:
$htmlStr .= '<tr data-toggle="myCollapse" data-target="#details" class="accordion-toggle">';
$htmlStr .= '<td>' some data '</td>';
$htmlStr .= '<td class="text-center">' . number_format(more data) . '</td>';
$htmlStr .= '<td class="text-right">' . round(percentage of certain data) . '%</td>';
$htmlStr .= '</tr>';
$more = FunctionForDetails(details looking for);
$htmlStr .= $more;
where FunctionForDetails() returns:
$htmlStr .= '<tr id="details" class="myCollapse">';
$htmlStr .= '<td class="text-center"><div>' . detailed data . '</div></td>';
$htmlStr .= '<td class="text-center"><div>' . more . '</div></td>';
$htmlStr .= '<td class="text-center"><div>' . more . '%</div></td>';
$htmlStr .= '</tr>';
My table comes out just fine with all the rows, but when I click a row, nothing happens. I want more detailed data about the row they clicked to drop down with more rows, and then go away when they click it again. I also wrote some css and jQuery to go along with it but it still does not work. And yes I am linking the bootstrap libraries and jquery library to my HTML. Any ideas or helpful tips would be wonderful, thank you!
CSS Code:
table .myCollapse {
display: none;
}
table .myCollapse.in {
display: table-row; !important
}
jQuery Code:
$(".myCollapse").click(function() {
if($('#versions').hasClass('in')){
$('#versions').removeClass('in');
}
else{
$('#versions').addClass('in');
}
});
The "in" class doesn't work with !important being after the semicolon.
So try doing this and I think you'll notice some changes at least:
table .myCollapse.in {
display: table-row !important;
}
Related
I have data being fetched from MySQLI database. I want to style "Small" so it looks like this:
Here is what my table looks like in PHP. I am unsure how to style specific words from fetched data.
Here's my PHP code:
<?php
$connect = mysqli_connect( 'placeholder','placeholder','placeholder','placeholder');
$sql = "SELECT * FROM databasename";
$result = $connect->query($sql);
if ($result->num_rows > 0) {
while ($row = $result-> fetch_assoc()) {
echo "<tr><td>" . $row["item_name"] . "</td>
<td>" . $row["item_cooldown"] . "</td>
<td>" . $row["item_effect"] . "</td>
<td>" . $row["item_passive"] . "</td>
<td>" . $row["item_cost"] . "</td>
<td>" . $row["item_type"] . "</td>
<td>" . $row["item_size"] . "</td></tr>";
}
}
else {
echo "No Results";
}
$connect->close();
?>
</table>
Any help is very appreciated.
Add a span inside the related cell (the last td tag pair) and make a css class to style it.
You could even have different colours for different data if you make a base class and a modifier class that is either applied using if/else or switch, or just use the data as the class name if they're single-word.
Completely untested, but shouldn't be too far off. I used single quotes to not conflict with the double quotes of the html syntax. My PHP might be a bit rusty.
'<td>
<span class="sizetag' . $row['item_size'] . '">' . $row['item_size'] . '</span>
</td>'
CSS
.sizetag {
border-radius 3px
padding: .5em
}
.large {
background-color: green
}
Then supply with the classes you need and adjust the colours until they are nice and the text is stil readable.
If you don't want to use the data name as a class you could do the following which uses colour name (or whatever you need) instead.
I would place this inside the while:
$color = ""
switch ($row['item_size']) {
small:
$color = 'bg-green';
break;
medium:
$color = 'bg-red';
break;
large:
$color = 'bg-yellow';
break;
}
And this to replace the last td
'<td>
<span class="sizetag' . $color . '">' . $row['item_size'] . '</span>
</td>'
And again supply with the classes you need and adjust the colours until they are nice and the text is stil readable.
to your last <td> tag change it to:
<td style='backgroundColor:green'> ...
I've an html table that is filled by an array which is fed by a database. I can delete a row (in database) by clicking on an html button, it successfully delete the line in the database and if I F5 the page the table is updated.
Of course I would like to refresh this table without having to press F5. I've tried several Jquery methods but I don't think I’m doing it right.
AJAX returns to my JS file the new array, I just have to do something about it but I don't know what. I tried to remove the selected row by using id, to hide the old table and show the new one but it doesn't seem to work.
Here is the last thing I tried :
}).done(function(e){
var aData = jQuery.parseJSON(e);
if(aData['status'] == true){
var sDescription = aData['description'];
var aListe = aData['liste']['Resultat'];
$('table.table td #'+iCategorieId).remove();
};
aData['liste']['Resultat'] contains my new array.
My table has a class which is table (very well found) and several tr which countaint the id of my rows.
This is the html which is filled by several PHP/SQL results :
// Inside table
$sHtml .= '';
// ID
$sHtml .= '<td class="'.$sCatégorie.'_id">';
$sHtml .= $iCatégorieId;
$sHtml .= '</td>';
// Lib
$sHtml .= '<td class="'.$sCatégorie.'_lib">';
$sHtml .= $sCatégorieLib;
$sHtml .= '</td>';
// Update
$sHtml .= '<td class="'.$sCatégorie.'_maj">';
$sHtml .= $sMiseAJour;
$sHtml .= '</td>';
// Edit
$sHtml .= '<td class="'.$sCatégorie.'_edit">';
$sHtml .= $html->link('<span>edit</span>', array('page_view' => $sActionEdit, $iCatégorieId, 'edit' ), array('class' =>'bouton btn-ico btmodif', 'value' => 'Modifier', 'title' => "Editer le $sCatégorie"));
$sHtml .= '</td>';
// Delete
$sHtml .= '<td class="'.$sCatégorie.'_delete">';
$sHtml .= '<input type="submit" value="Supprimer" class="bouton btn-ico btsupp"/>';
$sHtml .= '</td>';
$sHtml .= '</tr>';
}
I would do something like this: recover the ids array form aListe, and then use this loop:
// ids = [1,2,34,56,3,18];
$.each($('table.table tr'), function(){
// find the id
var id = $(this).find('td:eq(0)').html();
// search the ids array
if (ids.indexOf(id) == -1) {
$(this).remove();
}
});
I've been trying to add Javascript:void(0)to my magento website's navigation bar for a long time.
I read many articles about this subject and almost all of them says I should edit
/app/code/core/Mage/Catalog/Block/Navigation.php or copy this to local folder end edit there.
here one of the popular way that i followed;
To remove url, href functionality of the top menu categories, you can take the following steps:
Create some folder as this path: app/code/local/Mage/Catalog/Block
Copy file Navigation.php from app/code/core/Mage/Catalog/Block to
app/code/local/Mage/Catalog/Block
Go to function _renderCategoryMenuItemHtml()
Replace this code
$html[] = '<a href="'.$this->getCategoryUrl($category).'"'.$linkClass.'>';
$html[] = '<span>' . $this->escapeHtml($category->getName()) . '</span>';
$html[] = '</a>';
with this code
if($category->getLevel()== 2 && $hasActiveChildren) {
$html[] = '<a href="[removed]void(0);"'.$linkClass.'>';
$html[] = '<span>' . $this->escapeHtml($category->getName()) . '</span>';
$html[] = '</a>';
} else {
$html[] = '<a href="'.$this->getCategoryUrl($category).'"'.$linkClass.'>';
$html[] = '<span>' . $this->escapeHtml($category->getName()) . '</span>';
$html[] = '</a>';
}
But it didn't work for me. Weirdly even if i delete /app/code/core/Mage/Catalog/Block/Navigation.php the navigation menu works just fine. Were it gets the code for working I have no idea.
Maybe you have an idea that can help me. I just want to put Javascript:void(0) to the navigation menu.
I feel it's issue of cache or Magento Compiler. I suggest you to do the following steps from magento admin.
go to admin->System->Cache Management and clear/flush all the cache
go to admin->System->Tools->Compilation. Check if compilation is enabled then disabled it and clear cache again and run your compilation process
I was also looking to solve this, I think the problem is that the code you linked only works on 1.7 and not on 1.9?
The solution i came up with
copy Topmenu.php from app\code\core\Mage\Page\Block\Html to app\code\local\Mage\Page\Block\Html replace on line 131:
$html .= '<li ' . $this->_getRenderedMenuItemAttributes($child) . '>';
$html .= '<a href="' . $child->getUrl() . '" ' . $outermostClassCode . '><span>'
. $this->escapeHtml($child->getName()) . '</span></a>';
to
if ($child->hasChildren()) {
$html .= '<li ' . $this->_getRenderedMenuItemAttributes($child) . '>';
$html .= '<a href=\'javascript:void(0);\'><span>'
. $this->escapeHtml($child->getName()) . '</span></a>';
}
else{
$html .= '<li ' . $this->_getRenderedMenuItemAttributes($child) . '>';
$html .= '<a href="' . $child->getUrl() . '" ' . $outermostClassCode . '><span>'
. $this->escapeHtml($child->getName()) . '</span></a>';
}
Hope this helps.
I have a table in one of the column in a row i use a hyperlink with "Edit"
where i call a javascript function (which launches a popup-window)
This is one of my table row
echo "<tr>";
echo '<td>' . $row['id'] . '</td>';
echo '<td>' . $row['firstname'] . '</td>';
echo '<td>' . $row['lastname'] . '</td>';
echo '<td>' .
'<a href=\"javascript:popup_window_show('#sample', { pos : 'window-center', width : '270px' });'>Edit</a>
. '</td>';
echo '<td><a href=\"javascript:popup_window_show('#sample', { pos : 'window-center', width : '270px' });'>Edit</a></td>';
I have used two methods for Edit hyperlink, the first has no prob with code but doesn't shows the 'Edit' in the cell.. and the second has some errors with syntax
Below is my Js function in popup-window.js
function popup_window_show(/*selector,*/ args)
{
var pos = args.pos ? args.pos : null;
if (pos == 'window-center' )
{ x += $(document).scrollLeft()+($(window).width()-obj.width())*1/2; y += $(document).scrollTop()+($(window).height()-obj.height())*1/2; }
}
And also how do i pass row data to the js function (say firstname)
I have created a JSBin at http://jsbin.com/yafaxuma/3/edit, which demonstrates how to pass the row as an argument to your function.
Also it wasn't clear what the obj reference was to, so I have commented that in the JSBin and also commented how you can debug your function and see what is happening.
I have used jQuery in the JSBin to pass the row as an argument as it looked like you were also using it for obtaining scroll positions on the document.
The JSBin is showing output in the browser console. If you need more adjustments to the code, just provide me some clear idea of what you want to achieve and I can modify the code to demonstrate how to do what you want.
UPDATE to add PHP echo
echo "<tr>";
echo '<td>' . $row['id'] . '</td>';
echo '<td>' . $row['firstname'] . '</td>';
echo '<td>' . $row['lastname'] . '</td>';
echo '<td>Edit</td>';
echo "</tr>";
function popup_window_show(selector, args)
{
var pos = args.pos ? args.pos : null;
if (pos == 'window-center')
{
x += $(document).scrollLeft()+($(window).width()-obj.width())*1/2;
y += $(document).scrollTop()+($(window).height()-obj.height())*1/2;
}
var row = args.row;
}
I've got a webpage that returns a dynamic number of rows from a mysql db, which is output to the webpage via table, of which the first column is a checkbox via the following code:
while($row = mysql_fetch_array($result))
{
$id = $row['circuit_id'];
echo "<tr>";
echo "<td align=\"center\"><input name=\"checkbox[]\" type=\"checkbox\" id=\"checkbox[]\" value=" . $row['circuit_id'] . "></td>";
if ($row['status_name'] == 'Disconnected') {
echo "<td><font color=\"red\">" . $row['status_name'] . "</font></td>";
} else {
echo "<td>" . $row['status_name'] . "</td>";
};
echo "<td>" . $row['circuit_name'] . "</td>";
echo "<td>" . $row['circuit_appID'] . "</td>";
echo "<td>" . $row['circuit_appID'] . "</td>";
echo "<td><img src=\"images/icons/application_edit.png \"></td>";
echo "<td><img src=\"images/icons/note_add.png \"></td>";
echo "</tr>";
}
echo "</table>";
below this data presentation, I've added a few HTML buttons (one of which is shown below) that will allow the user to do 'mass' updates on the shown data, in this particular case to change the status from one state to another via the checkbox selection.
echo "<table align=\"center\">";
echo "<tr>";
echo "<td>Set status to Migrated for selected records</td><td><img src=\"images/icons/application_edit.png \"></td>";
echo "</tr>";
echo "</table>";
Is there a way to get the list of checkboxes that have been selected without changing everything to forms, and using a simple html based button to submit the request to the server?
I've been looking for an online solution for something like this via javascript but haven't managed to find anything that matches what I need.
Thanks
I've tried to piece together a few bits and pieces to get where I need to be, but am not making much progress at all, here's the current code:
var obj = {}
$('#click').on('click', function() {
$('input[type="checkbox"]').each(function() {
var name = $(this).attr('id');
obj[name] = $(this).is(':checked') ? 1 : 0;
});
$.each(obj, function(key, value) {
alert(key + ' : ' + value);
});
console.log(obj);
});
how do I get the list of 'true' ie. ticked boxes into a string and update the button with a 'new' url?
Any help is appreciated...
jQuery has the option to select all checkboxes and submit them in the background via AJAX..
jQuery Selectors: http://api.jquery.com/category/selectors/
jQuery AJAX: http://api.jquery.com/jQuery.ajax/
Good luck and hope this helps you!