How do I click the plus and minus buttons on my form, refresh the values, and keep only what I searched on the screen?

Voncloft 0
Viewed 29

Basically I am in the home stretch of finishing this thing but the problem I am having is when I search to bring up information, and press a button (plus or minus) of the corresponding value, 1,2,3,etc......the entire page resets and I lose my place

Any advice? saveToDatabase2 or increment is where it all falls apart for the functions

For some reason editing manually by hand next to the button works.....but the possibility to click a button needs to work too.

I've tried googling for over 3 days for this problem and nothing has worked.

<HEAD> 
<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
</HEAD>
<?php
require_once("../include/dbcontroller.php");
$db_handle = new DBController();
$category=$_GET["category"];
$sql = "SELECT * from inventory where category =".$category;
$inventory = $db_handle->runSelectQuery($sql);

echo "<input type=hidden name=field id=field value=".$category." />";
?>
<!--script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script>

      $(document).ready(function(){ 
      
           $('#myInput').keyup(function(){  
                search_table($(this).val());  
           });
  
           function search_table(value){  
        //alert("wooo");
                $('#myTable > tbody >  tr:not(.header)').each(function(){  
                     var found = 'false';  
                     $(this).each(function(){  
                          if($(this).text().toLowerCase().indexOf(value.toLowerCase()) >= 0)  
                          {  
                               found = 'true';  
                          }  
                     });  
                     if(found == 'true')  
                     {  
                          $(this).show();  
                     }  
                     else  
                     {  
                          $(this).hide();  
                     }  
                });  
           }  

      }); 
function createNew() {
    $("#add-more").hide();
    var data = '<tr class="table-row" id="new_row_ajax">' +
    '<td contenteditable="true" id="txt_name" onBlur="addToHiddenField(this,\'name\')" onClick="editRow(this);"></td>' +
    '<td contenteditable="true" id="txt_location" onBlur="addToHiddenField(this,\'location\')" onClick="editRow(this);"></td>' +
    
'<td contenteditable="true" id="txt_diameter" onBlur="addToHiddenField(this,\'diameter\')" onClick="editRow(this);"></td>' +
    '<td contenteditable="true" id="txt_length" onBlur="addToHiddenField(this,\'length\')" onClick="editRow(this);"></td>' +
    '<td contenteditable="true" id="txt_qty" onBlur="addToHiddenField(this,\'qty\')" onClick="editRow(this);"></td>' +


    '<td contenteditable="true" id="txt_price" onBlur="addToHiddenField(this,\'price\')" onClick="editRow(this);"></td>' +
        
        '<td contenteditable="true" id="txt_finalized" onBlur="addToHiddenField(this,\'finalized_price\')" onClick="editRow(this);"></td>' +

    '<td><input type="hidden" id="name" /><input type="hidden" id="location" /><input type="hidden" id="diameter" /><input type="hidden" id="length" /><input type="hidden" id="qty" /><input type="hidden" id="price" /><input type="hidden" id="finalized_price" /><span id="confirmAdd"><a onClick="addToDatabase()" class="ajax-action-links">Save</a> / <a onclick="cancelAdd();" class="ajax-action-links">Cancel</a></span></td>' +  
    '</tr>';
  $("#table-body").append(data);
}
function cancelAdd() {
    $("#add-more").show();
    $("#new_row_ajax").remove();
}
function editRow(editableObj) {
  $(editableObj).css("background","#FFF");
}

function saveToDatabase(editableObj,column,id) {
  var search_terms = $("#myInput").val();
  var text_to_enter = $(editableObj).text();
  var final_text=text_to_enter.replace("$","");
  //alert(final_text);
  $(editableObj).css("background","#FFF url(../include/loaderIcon.gif) no-repeat right");
  $.ajax({
    url: "edit.php",
    type: "POST",
    //data:'column='+column+'&editval='+$(editableObj).text()+'&id='+id,
    data:'column='+column+'&editval='+final_text+'&id='+id,
    success: function(data){
      $(editableObj).css("background","#FDFDFD");
      if(search_terms.toString().length==0)
      {
        window.location.reload();
      }
    }
  });
}
function addToDatabase() {
  var name = $("#name").val();
  var price = $("#price").val();
  var location = $("#location").val();
  var qty = $("#qty").val();
  var diameter = $("#diameter").val();
  var length = $("#length").val();
  var category=$("#field").val();
  //var category = $("#category").val();
      $("#confirmAdd").html('<img src="../include/loaderIcon.gif" />');
      $.ajax({
        url: "add.php",
        //url: "add.php?category='".$category."'",
        type: "POST",
        data:'name='+name+'&price='+price+'&location='+location+'&qty='+qty+'&diameter='+diameter+'&length='+length+'&category='+category,
        success: function(data){
          $("#new_row_ajax").remove();
          $("#add-more").show();          
          $("#table-body").append(data);
          window.location.reload();
        }
      });
}
function addToHiddenField(addColumn,hiddenField) {
    var columnValue = $(addColumn).text();
    $("#"+hiddenField).val(columnValue);
}

function deleteRecord(id) {
    if(confirm("Are you sure you want to delete this row?")) {
        $.ajax({
            url: "delete.php",
            type: "POST",
            data:'id='+id,
            success: function(data){
              $("#table-row-"+id).remove();
            window.location.reload();
            }
        });
    }
}
function myFunction() {
  const input = document.getElementById("myInput");
  const inputStr = input.value.toUpperCase();
  const search_length = inputStr.length;
  
  //alert(search_length);
  //if (search_length == 0)
  //{
//  location.reload(); 
  //}
  document.querySelectorAll('#myTable > tbody >  tr:not(.header)').forEach((tr) => {
    const anyMatch = [...tr.children]
      .some(td => td.textContent.toUpperCase().includes(inputStr));
    //fix the button issue here
    if (anyMatch) tr.style.removeProperty('display');
    else tr.style.display = 'none';
  });
}


function increment(editableObj,column,qty,id,increase_value){
  var increase_value;
   //alert(column);
 if(qty=='')
 {
    qty=0
 }
  increase_value=parseInt(qty) + parseInt(increase_value);
  // alert(increase_value);
   //saveToDatabase(increase_value.text(),column,id);
    saveToDatabase2(increase_value,column,id);
}
var table = $('#myTable').DataTable( {
    ajax: "data.json"
} );

setInterval( function () {
    table.ajax.reload();
}, 3000 );

function saveToDatabase2(editableObj,column,id) {

  var search_terms = $("#myInput").val();
  //var text_to_enter = $(editableObj).text();
  //var final_text=text_to_enter.replace("$","");
  //alert(final_text);
  final_text=editableObj;
  $(editableObj).css("background","#FFF url(../include/loaderIcon.gif) no-repeat right");
  $.ajax({
    url: "edit.php",
    type: "POST",
    //data:'column='+column+'&editval='+$(editableObj).text()+'&id='+id,
    data:'column='+column+'&editval='+final_text+'&id='+id,
    success: function(data){
      $(editableObj).css("background","#FDFDFD");
      $('#myTable').DataTable().clear();
      $('myTable').DataTable().draw();
    //$("#myTable").load("http://voncloft.hauff.com/php/inventory_results.php?category=%27test%27"+"#myTable");
//var tables=$("myTable").DataTable();  
    //table.DataTable().ajax.reload();
    //var table = $('#myTable').DataTable();

        location.reload();
    //$('#myTable').DataTable().ajax.reload();
    },
    complete: function(data){
        //alert(data);
    }
    /*,
    complete: function(data){
    //alert("here");
     $('#myTable > tbody >  tr:not(.header)').each(function(){
    //$(this).destroy();
    //location.reload();
    
      var found = 'false';
       $(this).each(function(){
                          if($(this).text().toLowerCase().indexOf(search_terms.toLowerCase()) >= 0)
                          {
                               found = 'true';
                               alert(found);
                          }
                     });
                     if(found == 'true')
                     {
              //$(this).destroy();
              $(this).clear();
              $(this).draw();
                          $(this).show();
                     }
                     else
                     {
                          $(this).hide();
                     }
                });



    }*/
  });
  
}
 
</script>
<style>
//body{width:615px;}
table th{
  background-color: green;
  color: white;
  position: sticky;
  z-index: 100;
  top: 0;
  left: 0;
}
.sortable{
    //position: absolute;
    //left:100;
    width:85%;
}
.totalprice
{
position: fixed!important; 
float:right!important;
//position: relative!important;
top:0!important;
right: 0!important;
width: 15%;
padding 0px 50px 0px 50px;
z-index: 1000;

//background-color:yellow;
}
.edit_button {
     line-height: 12px;
     width: 30px;
     height:22px;
     font-size: 8pt;
     font-family: tahoma;
     margin-top: 1px;
     margin-right: 2px;
     float:right;
     align:right;
     top:0;
     right:0;
 }
 .edit_100button{
    width: 30px;
    height: 30px;
 }
.tbl-qa{width: 98%;font-size:0.9em;background-color: #f5f5f5;}
.tbl-qa th.table-header {width:150px;padding: 50px;text-align: left;padding:50px;}
.tbl-qa .table-row td {width:100px;padding:100px;background-color: #FDFDFD;}
.ajax-action-links {color: #09F; margin: 10px 0px;cursor:pointer;}
.ajax-action-button {border:#094 1px solid;color: #09F; margin: 10px 0px;cursor:pointer;display: inline-block;padding: 10px 20px;}
</style>
<input type="text" id="myInput" placeholder="Type to search">
  <!--table class="tbl-qa"-->
  <table id="myTable" border = "2" class="sortable">
  <caption><?php echo str_replace("'","",str_replace('_',' ',$category));?></caption>
  <thead>
    <tr class="header">
      <th width="150px" data-tablesort-type="string">Name</th>
      <th width="150px" class="table-sort">Location</th>
      <th width="150px" class="table-sort">Diameter</th>
      <th width="150px" class="table-sort">Length</th>
      <th width="150px" class="table-sort">Qty</th>
       <th width="150px" class="table-sort">Price</th>

      <th width="150px" class="table-sort">Extended Price</th>
      <th width="150px" class="table-sort">Action</th>
    </tr>
  </thead>
  <tbody id="table-body">
    <?php
    $grand_total="";
    if(!empty($inventory)) { 
    foreach($inventory as $k=>$v) {
      ?>
      <tr class="table-row" id="table-row-<?php echo $inventory[$k]["id"]; ?>">
        <td height="75px" contenteditable="true" onBlur="saveToDatabase(this,'name','<?php echo $inventory[$k]["id"]; ?>')" onClick="editRow(this);"><?php echo $inventory[$k]["name"]; ?></td>
            <td contenteditable="true" onBlur="saveToDatabase(this,'location','<?php echo $inventory[$k]["id"]; ?>')" onClick="editRow(this);"><?php echo $inventory[$k]["location"]; ?></td>
        <td contenteditable="true" onBlur="saveToDatabase(this,'diameter','<?php echo $inventory[$k]["id"]; ?>')" onClick="editRow(this);"><?php echo $inventory[$k]["diameter"]; ?></td>

        <td contenteditable="true" onBlur="saveToDatabase(this,'length','<?php echo $inventory[$k]["id"]; ?>')" onClick="editRow(this);"><?php echo $inventory[$k]["length"]; ?></td>
        
        <td>
        <table width=98%><tr><td>
            <table><tr>
                <td contenteditable="true" onBlur="saveToDatabase(this,'qty','<?php echo $inventory[$k]["id"]; ?>')" onClick="editRow(this);"><?php echo $inventory[$k]["qty"]; ?></td>
            </tr></table>
            </td><td align=right><table margin=0px>
                <tr><td>
                <button id="button"<?php echo $inventory[$k]["id"]; ?> class="edit_button"  type="button" onfocus="increment(this,'qty','<?php echo $inventory[$k]["qty"]; ?>','<?php echo $inventory[$k]["id"]; ?>','-1');">--</button></td>
                <td align="center">1</td>
                <td><button id="button"<?php echo $inventory[$k]["id"]; ?> class="edit_button"  type="button" onclick="increment(this,'qty','<?php echo $inventory[$k]["qty"]; ?>','<?php echo $inventory[$k]["id"]; ?>','1');">+</button></td>
                </tr>
                                <tr><td>
                                <button id="button"<?php echo $inventory[$k]["id"]; ?> class="edit_button"  type="button" onclick="increment(this,'qty','<?php echo $inventory[$k]["qty"]; ?>','<?php echo $inventory[$k]["id"]; ?>','-2');">--</button></td>
                                <td align="center">2</td>
                                <td><button id="button"<?php echo $inventory[$k]["id"]; ?> class="edit_button"  type="button" onclick="increment(this,'qty','<?php echo $inventory[$k]["qty"]; ?>','<?php echo $inventory[$k]["id"]; ?>','2');">+</button></td>
                                </tr>
                                <tr><td>
                                <button id="button"<?php echo $inventory[$k]["id"]; ?> class="edit_button"  type="button" onclick="increment(this,'qty','<?php echo $inventory[$k]["qty"]; ?>','<?php echo $inventory[$k]["id"]; ?>','-3');">--</button></td>
                                <td align="center">3</td>
                                <td><button id="button"<?php echo $inventory[$k]["id"]; ?> class="edit_button"  type="button" onclick="increment(this,'qty','<?php echo $inventory[$k]["qty"]; ?>','<?php echo $inventory[$k]["id"]; ?>','3');">+</button></td>
                                </tr>
                                <tr><td>
                                <button id="button"<?php echo $inventory[$k]["id"]; ?> class="edit_button"  type="button" onclick="increment(this,'qty','<?php echo $inventory[$k]["qty"]; ?>','<?php echo $inventory[$k]["id"]; ?>','-5');">--</button></td>
                                <td align="center">5</td>
                                <td><button id="button"<?php echo $inventory[$k]["id"]; ?> class="edit_button"  type="button" onclick="increment(this,'qty','<?php echo $inventory[$k]["qty"]; ?>','<?php echo $inventory[$k]["id"]; ?>','5');">+</button></td>
                                </tr>
                                <tr><td>
                                <button id="button"<?php echo $inventory[$k]["id"]; ?> class="edit_100button"  type="button" onclick="increment(this,'qty','<?php echo $inventory[$k]["qty"]; ?>','<?php echo $inventory[$k]["id"]; ?>','-100');">--</button></td>
                                <td align="center">100</td>
                                <td><button id="button"<?php echo $inventory[$k]["id"]; ?> class="edit_100button"  type="button" onclick="increment(this,'qty','<?php echo $inventory[$k]["qty"]; ?>','<?php echo $inventory[$k]["id"]; ?>','100');">+</button></td>
                                </tr>
                                <tr><td>
                                <button id="button"<?php echo $inventory[$k]["id"]; ?> class="edit_button"  type="button" onclick="increment(this,'qty','<?php echo $inventory[$k]["qty"]; ?>','<?php echo $inventory[$k]["id"]; ?>','-1000');">--</button></td>
                                <td align="center">1000</td>
                                <td><button id="button"<?php echo $inventory[$k]["id"]; ?> class="edit_button"  type="button" onclick="increment(this,'qty','<?php echo $inventory[$k]["qty"]; ?>','<?php echo $inventory[$k]["id"]; ?>','1000');">+</button></td>
                                </tr>



            </table>
        </td></tr></table>
        </td>       
        <!--td contenteditable="true" onBlur="saveToDatabase(this,'price',$'<?php echo $inventory[$k]["id"]; ?>')" onClick="editRow(this);"></td>
    -->   
            <td contenteditable="true" onBlur="saveToDatabase(this,'price','<?php echo $inventory[$k]["id"]; ?>')" onClick="editRow(this);">$<?php echo (double)$inventory[$k]["price"]; ?></td>
 
                
        
        
        
        <td> <?php 
        if(! is_null($inventory[$k]["price"]))
        {
            (double)$sum=(double)$inventory[$k]["price"] * (double)$inventory[$k]["qty"];
            (double)$grand_total=(double)$grand_total + (double)$sum;
            echo "$".number_format($sum,2,'.',',');
            //echo $inventory[$k][""];
        }
        else
        {
            echo "</td>";
        }
        ?>
        <td><a class="ajax-action-links" onclick="deleteRecord(<?php echo $inventory[$k]["id"]; ?>);">Delete</a></td>
      </tr>
      <?php
    }
    }
    ?>

  </tbody>
</table>
<div class="ajax-action-button" id="add-more" onClick="createNew();">Add More</div>
<div class="totalprice" id="totalprice" name="totalprice">
Grand total: 
$<?php
//echo strlen($grandtotal);
if (strlen($grand_total)==0)
{
        echo "0.00";
}
else
{
        echo number_format($grand_total,2,'.',',');
}
?>
<br><a href="../index.php">Home</a>
</div>

</body>

ajax php javascript
1 Answers

Anyway I got it to work by calling window.onload and sort there after I call a window.location.reload(); from an ajax success

DONE!

Voncloft0
Related