Develop Reference

How do I add an onClick event to a link generated on PHP?

I am trying to add an onclick event on a link in a PHP file.
$body2 .= '<td class="sampling-list-td download-link">' . '<a ' . 'class="sampling-list-download" ' . 'href="#" ' . 'data-id="' . $assetId . '" ' . 'data-type="' . $assetType . '" ' . 'data-event="LogFileElaboration" ' . 'data-file="' . $fileName . '" ' . 'data-enterprise="' . $provisionedBuId . '"' . '>'
. '<i class="glyphicon glyphicon-download-alt" style="color: rgb(109, 110, 113); zoom: 1.3;"></i>'
. '</a>' . '</td>';
This is what I'm trying to do:
$body2 .= '<td class="sampling-list-download" ' . 'onClick="ga('send', 'event', { eventCategory: 'download', eventAction: 'click', eventLabel: 'Files Download'});" ' . 'href="#" ' . 'data-id="' . $assetId . '" ' . 'data-type="' . $assetType . '" ' . 'data-event="LogFileElaboration" ' . 'data-file="' . $fileName . '" ' . 'data-enterprise="' . $provisionedBuId . '"' . '>'
. '<i class="glyphicon glyphicon-download-alt" style="color: rgb(109, 110, 113); zoom: 1.3;"></i>'
. '</a>' . '</td>';
But I am getting the following errors:
ParseError: syntax error, unexpected 'send' (T_STRING)
I don't know what i'm doing wrong? I'm trying to add the event tracking code for google analytics T_T

the quote in 'send' ends the string you started right before onClick. When the string is terminated it will interpret as PHP again and send is not a valid keyword here.
To prevent this you can escape the ' like this: 'onClick="ga(\'send\', \'event\', { e...

Its a Quote problem .change like this add\ before ' in onclick.Otherwise each time ' .is break the string and after the text are execute like php statement or variable .If the php send is invalid one so you got error
$body2 .= '<td class="sampling-list-download" ' . 'onClick="ga(\'send\', \'event\', { eventCategory: \'download\', eventAction: \'click\', eventLabel: \'Files Download\'});" ' . 'href="#" ' . 'data-id="' . $assetId . '" ' . 'data-type="' . $assetType . '" ' . 'data-event="LogFileElaboration" ' . 'data-file="' . $fileName . '" ' . 'data-enterprise="' . $provisionedBuId . '"' . '>'
. '<i class="glyphicon glyphicon-download-alt" style="color: rgb(109, 110, 113); zoom: 1.3;"></i>'
. '</a>' . '</td>';

Output from database use toggle to edit data

I have a database with some record which i output on my page using php. This all works fine but i want to be able to edit the outputted information using the toggle functionality. So basicly i output text when a button edit is clicked i want to toggle that specific table and show the information once more but then in an input form.
foreach( $result as $row2 )
$div = $row2['id'] ;
echo "<div id='d$div; '><table ><tr><td>" . 'Categorie: ' . '</td><td> ' . $row2['name'] . '</td></tr>'
. '<tr><td>' . 'Omschrijving: ' . '</td><td>' . $row2['comments'] . '</td></tr> . '<tr><td>' . '<button id="e1">' . 'Edit' . '</button>' . '</td></tr>' . ' </table><hr>'; } ?></p>
If I would then would then echo everything out again using <form> input fields and use as div id f$div every record would get its unique id.
foreach( $result as $row2 )
$di = $row2['id'] ;
echo "<div id='f$di; '><table ><tr><td>" . 'Categorie: ' . '</td><td> ' . $row2['name'] . '</td></tr>'
. '<tr><td>' . 'Omschrijving: ' . '</td><td>' . $row2['comments'] . '</td></tr> . '<tr><td>' . '<button id="e2">' . 'Safe' . '</button>' . '</td></tr>' . ' </table><hr>'; } ?></p>
Then I would toggle it but I don't have the ids as they still have to be generated. How would I go about this...same would go for the click function but I can generate an id for these in the same way.
<script>
$('#e1,#e2').click(function () {
$('#d?,#f?').toggle();
})
</script>

You can do this with javascript, too. This is one example. You can even use AJAX to update, otherwise you can update the data in database and come back to the same page.
<?php
foreach($result as $row2) {
$div = $row2['id'];
echo "<div id='d$div'><table ><tr><td>" . "Categorie: " . "</td><td> " . $row2["name"] . "</td></tr>" . "<tr><td>" . "Omschrijving: " . "</td><td>" . $row2["comments"] . "</td></tr>" . "<tr><td>" . "<button id=e$div onclick='makeForm(\"$div\",\"d$div\",\"$row2[name]\",\"$row2[comments]\")';>" . "Edit" . "</button>" . "</td></tr>" . "</table><hr></div>\n";
}
?>
<script>
function makeForm(id,mydiv,category,comment){
var div = document.getElementById(mydiv);
var divHTML = "<form action='update.php' method='POST'><table> <tr><td>Categorie: </td> <td><input type='text' name='cat_" +id+ "' value='"+category + "' /></td></tr> <tr> <td>Omschrijving:</td> <td><input type='text' name='comment_" +id+ "' value='"+comment+"' /></td></tr> <tr><td> <input type='submit' value='Safe'></td><td><button onclick='removeForm(\""+id+"\",\""+mydiv+"\",\""+category +"\",\" "+comment+"\" ); return false;'>Cancel</button></td></tr></table> </form><hr>";
div.innerHTML = divHTML;
}
function removeForm(id,mydiv,category,comment){
var div = document.getElementById(mydiv);
var divHTML = "<table> <tr><td>Categorie: </td> <td>"+category + "</td></tr> <tr> <td>Omschrijving:</td> <td>"+comment+"</td></tr> <tr><td><button onclick='makeForm(\""+id+"\",\""+mydiv+"\",\""+category +"\",\" "+comment+"\" ); '>Edit</button></td></tr></table><hr>";
div.innerHTML = divHTML;
}
</script>
Hope this helps...

Bootstrap showing and collapsing table rows

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;
}

magento javascript:void(0) in navigation menu

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.

Calling javascript function from table column

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;
}