Develop Reference

Change style of a single element in a loop

This might confuse but a serious question.
I'm getting table rows from a loop using php and I'm displaying those table inside a table tag using ajax.
Here for the each row there is an id called productTableRow.
So I want to do is, in this table when I click a specific row, I want to change that clicked row's background color.Just only that row and to take the value of the clicked row attribute called product-id and show it in another hidden input
$(document).on('click', function(e){
if($(e.target).is('#productTableRow')){
var productId = $(e.target).attr('productId');
if(productId == productId){
$(e.target).css('background-color','#128C7E');
} else {
$('.trProductTable').css('background-color', 'transparent');
}
}
});
This is my php code which generating the Table rows,
foreach ($products as $product) {
$responseData .= "<tr id='productTableRow' productId='" . $product->id . "'>";
$responseData .= "<td>" . $product->id . "</td>";
$responseData .= "<td>" . $product->product_name . "</td>";
$responseData .= "<td>" . $product->product_barcode . "</td>";
if ($product->group_id == 0) {
$responseData .= "<td>None</td>";
} else {
$responseData .= "<td>" . $product->group_name . "</td>";
}
$responseData .= "<td>" . $product->product_cost . "</td>";
$responseData .= "<td>" . $product->product_selling . "</td>";
if ($product->product_type == 0) {
$responseData .= "<td>Liquid</td>";
} else if ($product->product_type == 1) {
$responseData .= "<td>Weight</td>";
} else if ($product->product_type == 2) {
$responseData .= "<td>Quantity</td>";
}
$responseData .= "<td>" . $product->created_at . "</td>";
Tried this code but doesn't work, really appreciate your help.

After changing the id to a class, I would try this
$('tr.productTableRow').click(function(){
var productId = $(this).attr('productId');
if(productId === productId){ // Always true
$(this).css('background-color','#128C7E');
} else {
// Do something when false ???
}
});
Edit Note: this code must be run after the table is added to the html, if you need to run it before, put the code inside a $(document).ready(function(){/*code */ });
Edit: Answer based on the comments
$(document).on('click', '.productTableRow', function(){
if(oldObject) {
$(oldObject).css('background-color', 'transparent');
}
var productId = $(this).attr('productId');
if(productId === productId){ // Always true
$(this).css('background-color','#128C7E');
}
oldObject = this;
});

First of all, id has to be specific to one element. Jquery is configured as this. Then you can use $(this).parent(‘tr’)
To get the parent row in the click event that can be to the entire class.

I arrived at my own answer,
$(document).on('click', '.groups-product-sidebar', (e)=>{
//Getting the clicked group attributes
var groupId = $(e.target).attr('groupId');
$('.groups-product-sidebar').parent().css('background-color','transparent');
$(e.target).parent().css('background-color','#128C7E');
});

sort php Array on click

Is it possible to have a php array sorted by clicking on a button?(Alphabetically or by year)
I am using fullpage.js and Columnizer jQuery plugin. Unfortunately, the problem is that I have to make a new table for each new slide. (Maybe someone knows a better solution?)
Or is it more useful javascript / jquery to use?
here is the Code:
// get table data from Plugin TablePress
$table = TablePress::$model_table->load( $atts['table-id'], true, true );
//only get the important data
$data = $table['data'];
$output = '<div id="tablecontest-slider">';
$output .= '<div class="section" id="section0">';
array_shift($data);
$counter = 1;
foreach ($data as $value) {
if ($counter == 1) {
$output .= '<div class="slide">';
$output .= '<div class="columnize">';
$output .= '<table>';
}
$output .= '<tr>';
$output .= '<td>' . $value[0] . '</td>';
$output .= '<td>' . $value[1] . '</td>';
$output .= '<td>' . $value[2] . '</td>';
$output .= '</tr>';
$counter++;
if ($counter == 21) {
$counter = 1;
$output .= '</table>';
$output .= '</div>';
$output .= '</div>';
}
}
$output .= '</div>';
$output .= '</div>';
return $output;
I dont know how to sort the array by click on a button..
Thank you for ideas and suggestions

No, you can't. PHP is running on your server and delivers the page. So there is no PHP-Array anymore once you render the site in your browser.
If you would get your data via an AJAX-call you COULD implement sorting and filtering on the server.

You can't directly sort anything on PHP from JS. BUT you can send an Ajax query on the button click, and respond with the PHP array sorted.

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

Replace a select dropdown with images

I'm looking to replace a select dropdown with images.
My current code for the drop down is
<div class="app_services_dropdown_select">
<select name="app_select_services" class="app_select_services">
<option value="1" selected="selected">Class IV MOT (Up to 3,000KG)</option>
<option value="2">Class VII MOT (3,000KG - 3,500KG)</option></select>
<input type="button" class="app_services_button" value="Show available times">
</div>
Which is generated by this code:
$s .= '<div class="app_services">';
$s .= '<div class="app_services_dropdown">';
$s .= '<div class="app_services_dropdown_title">';
$s .= $select;
$s .= '</div>';
$s .= '<div class="app_services_dropdown_select">';
$s .= '<select name="app_select_services" class="app_select_services">';
if ( $services ) {
foreach ( $services as $service ) {
$service_description = '';
// Check if this is the first service, so it would be displayed by default
if ( $service->ID == $appointments->service ) {
$d = '';
$sel = ' selected="selected"';
}
else {
$d = ' style="display:none"';
$sel = '';
}
// Add options
$s .= '<option value="'.$service->ID.'"'.$sel.'>'. stripslashes( $service->name ) . '</option>';
}
}
$s .= '</select>';
$s .= '<input type="button" class="app_services_button" value="'.$show.'">';
$s .= '</div>';
$s .= '</div>';
And I really want an image of a car as value 1 and a van as value 2, plus I really want it to submit on click rather than having the button.
Is it possible to replace the dropdown with images instead or would I need to use a radio button, then style it using an image?
You can see my current dropdown in use here

There are various plugins are available which help you to achieve your target. I have googled and found few you can try them
ddslick
Ms Dropdown

Have a link that trigger the apparition of a div with Javascript.
This div will contains the two links images, with the links you want the user to go.
This div also need to be placed relatively with the initial link that trigger it.
If you don't want to program the Dropdown by yourself, you can use libraries like bootstrap or jquery-ui

Generate multiple fields on Wordpress backend

I'm generating a custom field on the Wordpress admin panel. I want to add 2 buttons:
1. Add another
2. Remove field
The add button should generate the same field. I need help coding the javascript that generates the fields.
Here is my code:
$html = '';
$html .= '<div class="pyre_metabox_field">';
$html .= '<label for="pyre_' . $id . '">';
$html .= $label;
$html .= '</label>';
$html .= '<div class="field">';
$html .= '<input type="text" id="pyre_' . $id . '" name="pyre_' . $id . '" value="' . get_post_meta($post->ID, 'pyre_' . $id, true) . '" />';
if($desc) {
$html .= '<p>' . $desc . '</p>';
}
$html .= '<p style="margin-bottom:15px; padding-top:5px;clear:both;">Add Remove</p>';
$html .= '</div>';
$html .= '</div>';

Have you tried : Advanced Custom Fields ?
This plugin is really simple to use, and I'm pretty sure it can do what you're trying to do. It may save you a lot of work :)