asked on

2 buttons that run deferent parts of a javascript file ?

I am trying to print labels using a DYMO Developer SDK it uses javascripts here is my files PrintMeThatLabel2.js

I got most of it working with the help for you all. I have a from the user query sql then save the info to a json then the PrintMeThatLabel2.js get that info and prints the label. If the query get 10 recorded it prints 10 labels Great!

But if I want to print 1 label out of the 10 I don't know how to push the 1 json to the PrintMeThatLabel2.js for printing.

I got most of it working so when I press Print me button it reloads the json array with just 1 recorded then I have to click the big print button at the top to print just that 1 recorded.

If the user then want to print them ALL 10 he/she will have to query the db again for it to load all the recorded in to the json array then click the big print button to run PrintMeThatLabel2.js and print.

I am trying to not have the user rerun the page to print all label ones the just pick one of the record to print.

so 2 buttons 1 prints all the recorded and 1 prints just the one he/she picked.

Most of you will recognize this code

<html>
<head>
<title>Search</title>

<link rel="stylesheet" type="text/css" href="PrintMeThatLabel.css" />
<script src = "cookie.js" type="text/javascript"> </script>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

<script src = "http://www.labelwriter.com/software/dls/sdk/js/DYMO.Label.Framework.3.0.js" type="text/javascript" charset="UTF-8"> </script>
<script src = "PrintMeThatLabel2.js" type="text/javascript" charset="UTF-8"> </script>
<style type=text/css>

.text {color: #000; font-family:Arial, Helvetica, sans-serif }
.head {color: #000; font-family:Arial, Helvetica, sans-serif }
.input {display:none;}



.tftable {font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #729ea5;border-collapse: collapse;}
.tftable th {font-size:12px;background-color:#acc8cc;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;text-align:left;}
.tftable tr {background-color:#d4e3e5;}
.tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;}
.tftable tr:hover {background-color:#ffffff;}




</style>

</head>
<body>


    <div class=text align="center">

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" >

<span class=text>Enter Work Order #: </span>
<input type="text"  name="Work_Order" length="30"  value="">


<input type="submit" name="submit" value = "Search">

</form>
</div>
<div id="wrapper">
<div class='labelDesignArea'> 

    
     <label for="printersSelect">Printer:</label>
        <select id="printersSelect"></select>
        <button id="printButton">Print</button>



<div class='printerSettings'>
    <a  href='javascript:void(0)' style='visibility: hidden' id='printerSettingsButton'>Printer location (url)</a> 
    <div style='visibility: hidden id='printerSettingsDiv'>
        <label style='visibility: hidden' for='printerUriTextBox'></label>
      <input  style='visibility: hidden' type='text' id='printerUriTextBox'></input>
      <button  style='visibility: hidden' id='addPrinterUriButton'>Add</button>
      <button  style='visibility: hidden'id='clearPrinterUriButton'>Clear</button>
    </div>  

</div>
</div>

</div>



<?php
       ini_set("display_errors",1);
       error_reporting(E_ALL);


if(isset($_POST['submit']))
{


$UsrWorkOrder = $_POST['Work_Order'];


//db connect info
include 'conn.php';
//Where the query are stored 
include 'Query.php';






$result_Vis = odbc_exec($conn_Vis,$sql_Vis);  // Get Data From Result
    while($row2 = odbc_fetch_array($result_Vis))
    {
//Store the data in the new array

 

            $result_cor1db01_2 = odbc_exec($conn_cor1db01_2,$sql_cor1db01_2);  // Get Data From Result



$json = array();




echo "<div><table class='tftable'><tbody><tr>";
Echo "<tr><th>Work Order</th><th>Part Number</th><th>Description</th><th>Mfg Lot Number</th><th>Cable Length</th><th>Test Results A</th><th>Test Results B</th></tr>";

$num_rows = odbc_num_rows($result_cor1db01_2);



            while($row3 = odbc_fetch_array($result_cor1db01_2))
            {

//This stores the data 
            	$Serial_No = $row3["Serial No"];
            	$Barcode = $row3["Work Order No"]."-". $row3["Serial No"];
       			$part = $row2["PART_X"];
        		$DESCR = $row2["DESCR_X"];
        		$MFG = $row3["Work Order No"]."-". $row3["Serial No"];
            	$Cable_Length = $row3["ValueInches"]; 



				IF(number_format($row3["Value1"],2)[0] < "1"){
					$Test_A = substr(number_format($row3["Value1"],2), 1);
					
				}Else{
					$Test_A = number_format($row3["Value1"],2);
					
				}

				IF(number_format($row3["Value2"],2)[0] < "1"){
					$Test_B = substr(number_format($row3["Value2"],2), 1);
					
				}Else{
					$Test_B = number_format($row3["Value2"],2);
					
				}



            	
 					// put all the data in to a json array for batch printing labels. 
				    $json []= array (
				    	'Serial_No' => $Serial_No,
				        'Barcode' => $Barcode,
				        'part' => $part,
				        'DESCR' => $DESCR,
				        'MFG' => $MFG,
				        'Cable_Length' => $Cable_Length,
				        'Test_A' => $Test_A,
				        'Test_B' => $Test_B

				         );

				   

                   // Echo "<br><br><img src=barcode.php?codetype=Code128B&size=80&text=".$row3["Work Order No"]."-". $row3["Serial No"] ." />";
                    Echo "<td>".$row3["Work Order No"]."-". $row3["Serial No"]."</td>";
                    Echo "<td>".$part."</td>";
                    Echo "<td>".$DESCR."</td>";
                    Echo "<td>" .$row3["Work Order No"]."-". $row3["Serial No"]."</td>";
                    Echo "<td>". $row3["ValueInches"]."</td>";

                    IF(number_format($row3["Value1"],2)[0] < "1"){

                    Echo "<td>".substr($row3["SS1"], -1)." " .substr(number_format($row3["Value1"],2), 1)."</td>";

				}Else{
					Echo "<td>".substr($row3["SS1"], -1)." " .number_format($row3["Value1"],2)."</td>";
					
				}

				IF(number_format($row3["Value2"],2)[0] < "1"){
					Echo "<td>".substr($row3["SS2"], -1)." " .substr(number_format($row3["Value2"],2), 1)."</td> ";
					
				}Else{
					Echo "<td>".substr($row3["SS2"], -1)." " .number_format($row3["Value2"],2)."</td>";
					
					
				}
echo  "<td><button data-json='$Serial_No' id='printONEButton' class='printme'>Print Me</button></td></tr>";

				
                    //Echo "Test Results: ".substr($row3["SS1"], -1)." " .number_format($row3["Value1"],2)."<br>";
                    //Echo "Test Results: ".substr($row3["SS2"], -1)." " .number_format($row3["Value2"],2)."<br>";

            }
//$printMe= json_encode($json);
//echo json_encode($json);
echo "<br>".$num_rows ." Rows<br><br>";
             
Echo "</tbody></table></div>";
    }

   ?>
			


<script type="text/javascript">


 $(function()
 {
      $('button.printme').on('click',function()
      {


      	
      	var json = $(this).data('json');

      	var mike = $('#backup').text(); 

      	var objMike = JSON.parse(mike);

		
        //console.log(mike2);

		var NewMike =  objMike.filter(function(ss) 
			{
				return ss.Serial_No == json;
										
			});

		console.log(NewMike); 


  var UpdateJson = JSON.stringify(NewMike)
  
  


$('#mike').text(UpdateJson);




		$('#printONEButton').click



      });
      


});

</script>

<?php  
odbc_close($conn_cor1db01_2);
odbc_close($conn_Vis);

}

?>

<!-- This is storing the Json data then this gets pulled in to the PrintMeThatLabel.js   -->


<div id='backup' style="display: none;"  name='backup'><?php echo json_encode($json); ?> </div>

<div id='mike' name='mike'>null</div>
</body>
</html>

Open in new window

so right now if I click the "Print me" Button, I should rename it to "Select me".
Then click the big print button at the top it work and prints just that one I wanted.

Because the "Print me" Button outputting the new json data

<div id='mike' name='mike'>null</div>

Open in new window

Then in the PrintMeThatLabel2.js that "mike" data is getting loaded and printed.

The PrintMeThatLabel2.js has a lot of onloads and I think this what stopping me from printing all the data or just print 1 row of data.

Is there a way to change PrintMeThatLabel2.js to do a IF user click Print all button on main page then print all the data in json.

If user click Print me button only print the json data from the row the user picked.

Do this make senses ?

Dustin Saunders

This is a handful to look through at a quick glance, but rather than having your printer function look at a set "obj", you can pass into the function the "obj" you want to use.

So if I have:

var mike = document.getElementById('mike').innerText;
        //This is parse the json data. 
        var obj = jQuery.parseJSON(mike);

Open in new window

Ok, so obj has the full set.

Here's a function for JSON

function getObjects(obj, key, val) {
    var objects = [];
    for (var i in obj) {
        if (!obj.hasOwnProperty(i)) continue;
        if (typeof obj[i] == 'object') {
            objects = objects.concat(getObjects(obj[i], key, val));
        } else if (i == key && obj[key] == val) {
            objects.push(obj);
        }
    }
    return objects;
}

Open in new window

So from that data set you could use:

getObjects(TestObj, 'Serial_No', '001');

Open in new window

And get the one result which you can pass to your function rather than having it always generate the JSON from a static location.

armasmike

ASKER

uuuu ok so

function getObjects(obj, key, val) {
    var objects = [];
    for (var i in obj) {
        if (!obj.hasOwnProperty(i)) continue;
        if (typeof obj[i] == 'object') {
            objects = objects.concat(getObjects(obj[i], key, val));
        } else if (i == key && obj[key] == val) {
            objects.push(obj);
        }
    }
    return objects;
}

Open in new window

goes in the PrintMeThatLabel2.js I put it right under

var mike = document.getElementById('mike').innerText;
        //This is parse the json data. 
        var obj = jQuery.parseJSON(mike);

Open in new window

then I put

getObjects(TestObj, 'Serial_No', json);

Open in new window

in my main page here

<script type="text/javascript">


 $(function()
 {
      $('button.printme').on('click',function()
      {


      	
      	var json = $(this).data('json');

      	var mike = $('#backup').text(); 

      	var objMike = JSON.parse(mike);

		
        //console.log(mike2);

		var NewMike =  objMike.filter(function(ss) 
			{
				return ss.Serial_No == json;
										
			});

		console.log(NewMike); 


  var UpdateJson = JSON.stringify(NewMike)
  
  


$('#mike').text(UpdateJson);




		getObjects(TestObj, 'Serial_No', json);
      });
      });

</script>

Open in new window

I get a SCRIPT5009: 'getObjects' is not defined in the console

armasmike

ASKER

so I made some changes and going away from the Print Me button.

I have added a

<script>
$( function() {
  $('tr').click( function() {
    $(this).toggleClass('on');
} )
});
</script>

Open in new window

the css is

tr.on {
    background-color: red;
}

Open in new window

so the user know they clicked on a row. Then added the Data-json'$Seral_No' to the <tr> like

                   
 Echo "<tr data-json='$Serial_No'><td >".$row3["Work Order No"]."-". $row3["Serial No"]."</td>";


                    Echo "<td>".$part."</td>";
                    Echo "<td>".$DESCR."</td>";
                    Echo "<td>" .$row3["Work Order No"]."-". $row3["Serial No"]."</td>";
                    Echo "<td>". $row3["ValueInches"]."</td>";

                    IF(number_format($row3["Value1"],2)[0] < "1"){

                    Echo "<td>".substr($row3["SS1"], -1)." " .substr(number_format($row3["Value1"],2), 1)."</td>";

				}Else{
					Echo "<td>".substr($row3["SS1"], -1)." " .number_format($row3["Value1"],2)."</td>";
					
				}

				IF(number_format($row3["Value2"],2)[0] < "1"){
					Echo "<td>".substr($row3["SS2"], -1)." " .substr(number_format($row3["Value2"],2), 1)."</td> ";
					
				}Else{
					Echo "<td>".substr($row3["SS2"], -1)." " .number_format($row3["Value2"],2)."</td>";
					
					
				}

Open in new window

So then I can filter and out put the row the user picked to a json

		var NewMike =  objMike.filter(function(ss) 
			{
				return ss.Serial_No == UserPick;
										
			});

		console.log(NewMike); 


  var UpdateJson = JSON.stringify(NewMike)

Open in new window

But how to I append to the UpdateJson every time the user keeps clicking

So if user click Searl no 001 the json looks like this

{"Serial_No":"001","Barcode":"M123340-050","part":"F06984-0035","DESCR":"BACC69CCC0035J\/BOEIN, REV R","MFG":"M123340-050","Cable_Length":"35 Inches","Test_A":".10","Test_B":".04"}

and if they click 001 and 005 and 010

the json need to append to each click like

{"Serial_No":"001","Barcode":"M123340-050","part":"F06984-0035","DESCR":"BACC69CCC0035J\/BOEIN, REV R","MFG":"M123340-050","Cable_Length":"35 Inches","Test_A":".10","Test_B":".04"},{"Serial_No":"005","Barcode":"M123340-050","part":"F06984-0035","DESCR":"BACC69CCC0035J\/BOEIN, REV R","MFG":"M123340-050","Cable_Length":"35 Inches","Test_A":".10","Test_B":".04"},{"Serial_No":"010","Barcode":"M123340-050","part":"F06984-0035","DESCR":"BACC69CCC0035J\/BOEIN, REV R","MFG":"M123340-050","Cable_Length":"35 Inches","Test_A":".10","Test_B":".04"}

and if they re click the serial no 001 again it removes it form the json

armasmike

ASKER

I need to use a push to append to the end of the

UpdateJson

cant it that working yet

This question needs an answer!

Become an EE member today

7 DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform.

View membership options

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.