Jump to content

mongoose00318

Members
  • Posts

    235
  • Joined

  • Last visited

Everything posted by mongoose00318

  1. Well I think I've found a solution. I knew there was a built in tooltip for HighCharts but I wasn't sure it would do exactly what I was trying to do with it. After researching more of it's settings I think I have it doing what I want but I am getting a JS error on my returned JSON. 'Uncaught SyntaxError: Unexpected token u in JSON at position 0' Here is a sample of my returned JSON: 0: {id: 14671, job_number: 22094872} 1: {id: 14739, job_number: 22102672} 2: {id: 14740, job_number: 22102682} 3: {id: 14673, job_number: 22102712} 4: {id: 14675, job_number: 22102722} 5: {id: 14678, job_number: 22102742} 6: {id: 14683, job_number: 22102782} 7: {id: 14686, job_number: 22102902} 8: {id: 14689, job_number: 22102912} 9: {id: 14746, job_number: 22102922} 10: {id: 14837, job_number: 22111742} And here is my updated code: const chart = Highcharts.chart('container', { chart: { type: 'column' }, title: { text: '3 Week Forecast' }, xAxis: { categories: <?php echo $formatted_dates; ?> }, yAxis: { min: 0, title: { text: 'Total Line Items Due To Ship' }, stackLabels: { enabled: true, style: { fontWeight: 'bold', color: ( // theme Highcharts.defaultOptions.title.style && Highcharts.defaultOptions.title.style.color ) || 'gray' } } }, legend: { align: 'right', x: -30, verticalAlign: 'top', y: 25, floating: true, backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || 'white', borderColor: '#CCC', borderWidth: 1, shadow: false }, tooltip: { useHTML: true, formatter: function() { var json = $.getJSON('scripts/order_status.php?action=highchart_tooltip&date=' + this.point.category + '&enterprise=' + this.series.name); $.each(json, function(i, item) { console.log(item.job_number); }); }, style: { pointerEvents: 'auto' } }, plotOptions: { column: { stacking: 'normal', dataLabels: { enabled: true } } }, series: <?php echo $json; ?> });
  2. Hello Everyone, I've started using HighCharts JS library to make dynamic charts and so far it is pretty impressive. Here is a screenshot of my chart that I'd like to make a custom behavior for: Basically what I would like to do is when a user clicks on a point in a series within a certain category (for example on category 2021-02-15 the user clicks the series with a total of 35 line items) a box would pop out to the side of the series point the user has clicked on and would be populated with an ajax request. Here is my code so far: const chart = Highcharts.chart('container', { chart: { type: 'column' }, title: { text: '3 Week Forecast' }, xAxis: { categories: <?php echo $formatted_dates; ?> }, yAxis: { min: 0, title: { text: 'Total Line Items Due To Ship' }, stackLabels: { enabled: true, style: { fontWeight: 'bold', color: ( // theme Highcharts.defaultOptions.title.style && Highcharts.defaultOptions.title.style.color ) || 'gray' } } }, legend: { align: 'right', x: -30, verticalAlign: 'top', y: 25, floating: true, backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || 'white', borderColor: '#CCC', borderWidth: 1, shadow: false }, tooltip: { headerFormat: '<b>{point.x}</b><br/>', pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}' }, plotOptions: { column: { stacking: 'normal', dataLabels: { enabled: true } }, series: { cursor: 'pointer', events: { click: function ( event ) { //this.name is the enterprise the user has clicked and even.point.category is the date // this are the only two parameters I need to retrieve the necessary data from the database to populate the 'popout box' alert( 'Enterprise: ' + this.name + ' for ' + event.point.category + ' clicked' ); } } } }, series: <?php echo $json; ?> }); At the bottom of the code where 'series: { ' starts I've put some comments in. I am already getting the data I need from the click event; the only thing I'm stumped on is how to make some type of box popout when the user clicks it; the position of the box would have to be relative to the position of where the user clicked I would think...
  3. I got it working with this: function updateTableAfterSubmit() { table.ajax.reload( function (json){ auto_btn_height_width(); }, false ); } function auto_btn_height_width() { $('td.mfg-view-cols').each(function() { tdWidth = $(this).width(); tdHeight = $(this).height(); $(this).find('button').css({'width': tdWidth, 'height': tdHeight}); console.log(tdHeight); }); console.log($('td.mfg-view-cols').length); } Then just had to make sure I identified the right events to do call backs on. Works great now.
  4. Maybe I just need to write a jQuery function that determines the height and width of the parent td and then sets the height of each button...
  5. I could but I'd have to recode a lot and I've always found bootstraps buttons easy to use. https://stackoverflow.com/questions/53520077/css-100-height-in-a-tablecell What do you think about that?
  6. I have tried using bootstraps h-100 and w-100 to make it work as well as other things. I wont know the row height for each page so I need the buttons to fill the container TD. Why won't bootstraps h-100/w-100 classes work?
  7. Awesome man. Sorry for the delayed response and as always thanks for the thorough explanation.
  8. Masterfully done by the way. I understand most of it. Just that one part is a little confusing to me.
  9. @Barand Can you explain this part to me? return $price ? $price : 'Not set'; Isn't the first $price supposed to be the condition of the ternary operator? I'm confused as to how this statement operates.
  10. It could be a kit or a product. A kit is a collection of products which has it's own pricing. If it is a product* I will call this function...sorry about that. function determine_multi_price_product( $order_id, $product_id, $pdo ) { //get the enterprise associated with the order $query = 'SELECT enterprise FROM production_data WHERE id = :order_id'; $statement = $pdo->prepare($query); $statement->execute(['order_id' => $order_id]); if ( $statement->rowCount() > 0 ) { $enterprise = $statement->fetch()['enterprise']; //query database for a branded price for a specifc enterprise $query = ' SELECT price FROM leds_prices WHERE enterprise = :enterprise AND product_id = :product_id '; $statement = $pdo->prepare($query); $statement->execute([ 'enterprise' => $enterprise, 'product_id' => $product_id, ]); //check if the query returned a result and if not default to an unbranded price if ( $statement->rowCount() > 0 ) { $price = $statement->fetch()['price']; } //default to an unbranded price else { //query database for a branded price for a specifc enterprise $query = ' SELECT price FROM leds_prices WHERE enterprise = "Unbranded" AND product_id = :product_id '; $statement = $pdo->prepare($query); $statement->execute([ 'product_id' => $product_id ]); if ( $statement->rowCount() > 0 ) { $price = $statement->fetch()['price']; } //price isn't set else { $price = 'Not Set'; } } return $price; } }
  11. -- -- Table structure for table `leds_prices` -- DROP TABLE IF EXISTS `leds_prices`; CREATE TABLE IF NOT EXISTS `leds_prices` ( `id` int(11) NOT NULL AUTO_INCREMENT, `product_id` int(11) DEFAULT NULL, `kit_id` int(11) DEFAULT NULL, `enterprise` text NOT NULL, `price` decimal(7,2) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM AUTO_INCREMENT=95 DEFAULT CHARSET=latin1; -- -- Dumping data for table `leds_prices` -- INSERT INTO `leds_prices` (`id`, `product_id`, `kit_id`, `enterprise`, `price`) VALUES (94, 119, NULL, 'SHRVIE', '20000.00'), (86, NULL, 48, 'SHRVIE', '78.00'), (85, NULL, 48, 'SHELL', '23.00'), (31, 43, NULL, 'Unbranded', '432.00'), (32, 43, NULL, 'EXXON', '432.00'), (33, 43, NULL, 'GLOBAL', '654.00'), (34, 45, NULL, 'Unbranded', '567.00'), (35, 45, NULL, 'GLOBAL', '567.00'), (84, NULL, 48, 'EXXON', '34.00'), (83, NULL, 48, 'Unbranded', '12.00'), (93, 119, NULL, 'SHELL', '2000.00'), (92, 119, NULL, 'EXXON', '200.00'), (91, 119, NULL, 'Unbranded', '10.00'); COMMIT; -- -- Table structure for table `production_data` -- DROP TABLE IF EXISTS `production_data`; CREATE TABLE IF NOT EXISTS `production_data` ( `id` int(11) NOT NULL AUTO_INCREMENT, `job_number` int(8) NOT NULL, `enterprise` tinytext NOT NULL, `part_number` text NOT NULL, `description` text NOT NULL, `psm` tinytext NOT NULL, `qty` int(11) NOT NULL, `line_item` varchar(11) NOT NULL, `as400_ship_date` date DEFAULT NULL, `hold_reason` text NOT NULL DEFAULT '0', `hold_date` date DEFAULT NULL, `insert_time` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp() COMMENT 'time order was inserted', PRIMARY KEY (`id`), KEY `job_line` (`job_number`,`line_item`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1; COMMIT; INSERT INTO `production_data` (`id`, `job_number`, `enterprise`, `part_number`, `description`, `psm`, `qty`, `line_item`, `as400_ship_date`, `hold_reason`, `hold_date`, `insert_time`) VALUES (5017, 22971651, 'EXXON', 'XM2054FM.2LDCHPR', 'EXXON 4\'8x4\'2 2P DF FM SGN (C45 CHEV)||(12\" R/G ABLE 7-SEG LEDS)||PRINCIPAL PINN ILLUM||DWG XM2054FM_2LDRGABCHPR / EX204780||*REGULAR/DIESEL EFFICIENT||BLUE/GREEN BACKGROUND||DWG 204780||', 'M', 1, 'D', '2020-09-08', 'WO', '0000-00-00', '2020-09-04 13:35:22'), (7094, 22006972, 'SHRVIE', 'SG2066TP.2LDVSHSB', 'SHELL GLOBAL 6x6 2-PROD VC TP SGN(SHELL)||24\"/12\" ABLE LEDS 1-RED/1-GRN||RTE G66SH2LV||SIGNBOX 2 ILLUMINATION||2X REGULAR, 1X DIESEL, 1X V-POWER LOGO||ENG:TP075073_6948_LLV_SBLED||GRA:114270, 144876, 144496||', 'M', 1, 'B', '2020-09-18', '', '0000-00-00', '2020-09-04 13:35:23'), (7179, 23620991, 'NAPAHQ', 'NA0058SF.0V', 'NAPA 5x8 ID VC SF SGN||PRINCIPAL ILLUMINATION||ENG 181597 NA0058SF GRPH 204767||3X8 NAPA AUTOCARE CENTER||2X8 RELIABLE WRENCHERS||', 'M', 1, 'A', '2020-09-14', 'WO', '0000-00-00', '2020-09-04 13:35:23'), (7185, 22050692, 'SHELL', 'LD0080GR.1AB', 'LED 8\" GREEN 1-PROD MOD ABLE (2 MODULES)||SET OF 2 MODULES W/PWR PACKS||2 GRN W/ REMOTE CONTROL||', 'S', 2, 'C', '2020-09-16', '', '0000-00-00', '2020-09-04 13:35:23'); COMMIT; I think that should be the data needed...each of the four order ids should run through all the possibilities, price isn't set, product has a branded price, and product has an unbranded price, or no order was found. determine_multi_price_product( 7185, 119, $pdo ); Sample call to the function using a specific product that has prices for each of those enterprises except NAPAHQ.
  12. I am very unfamiliar with using using variables and conditional statements with an SQL statement. Is there a way to streamline this code to make it perform all the logic I am currently doing in PHP within the query itself in the interest of streamlined code? function determine_multi_price_kit( $order_id, $kit_id, $pdo ) { //get the enterprise associated with the order $query = 'SELECT enterprise FROM production_data WHERE id = :order_id'; $statement = $pdo->prepare($query); $statement->execute(['order_id' => $order_id]); if ( $statement->rowCount() > 0 ) { $enterprise = $statement->fetch()['enterprise']; //query database for a branded price for a specifc enterprise $query = ' SELECT price FROM leds_prices WHERE enterprise = :enterprise AND kit_id = :kit_id '; $statement = $pdo->prepare($query); $statement->execute([ 'enterprise' => $enterprise, 'kit_id' => $kit_id, ]); //check if the query returned a result and if not default to an unbranded price if ( $statement->rowCount() > 0 ) { $price = $statement->fetch()['price']; } //default to an unbranded price else { //query database for a branded price for a specifc enterprise $query = ' SELECT price FROM leds_prices WHERE enterprise = "Unbranded" AND kit_id = :kit_id '; $statement = $pdo->prepare($query); $statement->execute([ 'enterprise' => $enterprise, 'kit_id' => $kit_id, ]); if ( $statement->rowCount() > 0 ) { $price = $statement->fetch()['price']; } //price isn't set else { $price = 'Not Set'; } } return $price; } }
  13. Ohhhh....gotcha. Lol your riddle...now I understand. Yes the modal was hidden while I was piecing it all together than displaying to the user. Well, that is embarrassing...awesome thanks for the explanation.
  14. Oh yes it still works even without the html selector in front of it..I guess it was just a matter of referencing it's parent container as you pointed out. Thanks again.
  15. @requinix Just curious... So..just doing this: $('div#add-edit-product').find('div.price:not(:first)').remove(); Isn't actually affecting the HTML?
  16. Okay this fixed it: $('html div#add-edit-product').find('div.price:not(:first)').remove(); Thanks man @requinix
  17. @requinix Well...I know at first there aren't any visible price inputs but after the first time it has run there should be some? What do you mean when you say find it in the modals markup? I guess I thought that was what I was doing lol
  18. I am populating a modal window with some divs based on data which is retrieved via AJAX anytime the user clicks a button which opens the modal window. Here is the HTML: <div class="row"> <div class="float-left unbranded m-2 p-2 border border-dark rounded bg-primary text-white"> <p class="border-bottom pb-0 mb-1">Unbranded</p> <input type="text" name="price_unbranded" size="5" placeholder="$"> </div> <div class="float-left price m-2 p-2 border border-dark rounded d-none bg-secondary text-white"> <p class="border-bottom pb-0 mb-1">Price 1</p> <select name="price_ent[]"> <option>Select Enterprise</option> </select><br> <input type="text" name="price_price[]" size="5" placeholder="$"> </div> </div> Here is the jQuery: //user clicks on edit button for a product $('body').on('click', '.btn-edit', function() { $('div.price:not(:hidden)').remove(); //remove any existing elements other than the hidden template $.ajax({ type: 'GET', url: 'scripts/leds_product_manager.php', data: { action: 'get_led', id: $(this).attr('data-product-id'), }, success: function(data) { //parse response data = $.parseJSON(data); var consignment = ( data.consignment == 0 ) ? 'No' : 'Yes'; //populate selects $('#add-edit-product select#make').find('option').attr('selected', false); $('#add-edit-product select#make option[value=' + data.make + ']').attr('selected', 'selected'); $('#add-edit-product select#qty-per-box').find('option').attr('selected', false); $('#add-edit-product select#qty-per-box option[value=' + data.qty_per_box + ']').attr('selected', 'selected'); $('#add-edit-product select#consignment').find('option').attr('selected', false); $('#add-edit-product select#consignment option[value=' + consignment + ']').attr('selected', 'selected'); //populate inputs $('#add-edit-product input#part_number').val(data.part_number); $('#add-edit-product input#description').val(data.description); var count = 1; $.each(data.price, function(i,d) { // handle "Unbranded" price if ( d.enterprise == 'Unbranded' ) { $('div.unbranded input').val(d.price); } else { //handle all the others var div = $('div.price:last'); div.clone().removeClass('d-none').insertAfter(div); $('div.price:last p:first').text('Price ' + count); //setup selects cur_ent = d.enterprise; $.each(data.enterprises, function(i,d) { if ( cur_ent == d.enterprise ) $('div.price:last select').append('<option value=' + d.enterprise + ' selected="selected">' + d.enterprise + '</option>'); else $('div.price:last select').append('<option value=' + d.enterprise + '>' + d.enterprise + '</option>'); }); //populate price $('div.price:last input').val(d.price); } count++; }); //change button view $('.add-new-product').hide(); $('.edit-new-product').attr('data-product-id', data.id).show(); // change the title of the dialog box and open it $('#add-edit-product').dialog('option', 'title', 'Edit Record').dialog('open'); } }); }); At the top I have: $('div.price:not(:hidden)').remove(); to remove any preexisting elements and if I enter that into the console it erases all the correct elements. But anytime I open the modal window and then reopen it it is still duplicating the elements. Here are some screenshots (also I checked the json response coming back each time and all of that seems correct; it has to be something I am doing wrong with the jQuery): First open: Second open of the modal window: I've tried alerting how many elements of div.price which are visible, etc and can't figure out where I am going wrong...
  19. @Barand Interesting. Thanks for the clarity and I will continue to research it further.
  20. @Barand Awesome. Thanks for the tip. Just curious...what causes the WHERE to not function properly?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.