#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2017
    Posts
    15
    Rep Power
    0

    Ajax modal insert or click delete inside a form & update page without refresh?


    Hi I have a very large edit form in tabs.
    In one tab I have multiple insert and delete of items.
    I use a modal for the inserts.
    The insert and the delete items work really well using ajax but do not show the results of my price totals nor the actual insert on the page shows until I submit the whole form.

    What I want is to show the new inserted items as the modal closes and the totals for the prices correctly updated.
    The delete works as it should except the price totals are not done at the same time.

    The form is php and mysqli.
    This is the ajax for insert and update:

    Code:
    $(document).ready(function(){
     $('#insert_form').on("submit", function(event){  
      event.preventDefault();  
      if($('#job_mat_desc').val() == "")  
      {  
       alert("Description is required");  
      }  
       
      else  
      {  
       $.ajax({  
        url:"add_material.php",  
        method:"POST",  
        data:$('#insert_form').serialize(),  
        beforeSend:function(){  
         $('#insert').val("Inserting");  
        },  
        success:function(data){  
         $('#insert_form')[0].reset();  
         $('#add_data_Modal').modal('hide');  
         $('#invoice_table').html(data);  
        }  
       });  
      }  
     });
    
    });  
    
    $(document).ready(function() {
            $('.delete-rows').click(function() {
                var id = $(this).attr("id");
                if (confirm("Are you sure you want to delete this Item?")) {
                    $.ajax({
                        type: "POST",
                        url: "job_remove_material_new.php",
                        data: ({
                            id: id
                        }),
                        cache: false,
                        success: function(html) {
                            $(".delete_mem" + id).fadeOut('slow');
                        }
                    });
                } else {
                    return false;
                }
            });
        });
    For the price totals I have simply used this and it works well only on keyup.

    Code:
    $(document).ready(function(){
    
    		//iterate through each textboxes and add keyup
    		//handler to trigger sum event
    		$(".txt").each(function() {
    
    			$(this).keyup(function(){
    				calculateSum();
    			});
    		});
    
    	});
    
    	function calculateSum() {
    
    		var sum = 0;
    		//iterate through each textboxes and add the values
    		$(".txt").each(function() {
    
    			//add only if the value is number
    			if(!isNaN(this.value) && this.value.length!=0) {
    				sum += parseFloat(this.value);
    			}
    
    		});
    		//.toFixed() method will roundoff the final sum to 2 decimal places
    		$("#sum").html(sum.toFixed(2));
    	}
    I am pretty new to ajax so not sure if it needs something else for the modal submit. I do have text that outputs saying Successfully added but then it disappears:
    PHP Code:

    if(mysqli_query($connect$query))
       
        echo 
    $output;

    Hope anybody can help it is pretty hard to keep adding more items with the modal without really seeing the result straight out and don't want to have the form submitted every single time to view it.
    Thanks
  2. #2
  3. Wiser? Not exactly.
    Devshed God 2nd Plane (6000 - 6499 posts)

    Join Date
    May 2001
    Location
    Bonita Springs, FL
    Posts
    6,079
    Rep Power
    4101
    To update the totals after your insert/delete operations just call your calculateSum function from within your success functions.

    To make the new items appear you just need to either have your ajax request return the appropriate HTML snippet and add it to the page or you need to generate the appropriate html via your javascript somehow.

    You'll also want to change your delete handler setup to look something like this:
    Code:
    $(document).on('click', '.delete-rows', function(){
       ...
    });
    Otherwise you won't be able to delete newly added items, only those that existed when the page was initially loaded.
    Recycle your old CD's



    If I helped you out, show some love with some reputation, or tip with Bitcoins to 1N645HfYf63UbcvxajLKiSKpYHAq2Zxud
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2017
    Posts
    15
    Rep Power
    0
    Oh thanks for that I was wondering why when I added new items it wouldn't delete.

    I didn't have the problem before adding more to the output e.g.my html is:
    PHP Code:

     $output 
    .= ' <div id="invoice_table"> 
      
             <div class="row clone delete_mem'
    .$material_id.'">
              <div class="col-md-12">
              <div class="input-group-btn"> 
             <a id="'
    .$material_id.'" class="btn btn-danger btn-xs delete-rows"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
             </div></div>
            
             <div class="clear"></div>
             <div class="col-md-12">
             <div class="col-md-9 col-sm-12 col-xs-12">
             <label>Description</label>
              <div class="form-group">
              <input type="hidden" name="material_id[]" id="material_id[]" value="'
    .$material_id.'">
               <input type="hidden" name="job_id[]" id="job_id[]" value="'
    .$job_id.'">
                
                                            <textarea class="form-control item-input invoice_product editors" id="job_mat_desc" name="job_mat_desc" placeholder="Enter item title and / or description" />'
    .$job_mat_desc.'</textarea>
              </div>
              
            </div>
             <div class="col-md-2 hidden">
             <div class="form-group"><label></label>
                                            <input hidden class="form-control invoice_product_qty calculate" id="job_mat_qty" name="job_mat_qty" value="1">
                                        </div>
                                        </div>
                                        
            <div class="col-md-3 col-sm-12 col-xs-12"><label>Price</label>;
              <div class="input-group input-group">
                                            <span class="input-group-addon">'
    .CURRENCY.'</span>
                                            <input type="text" class="form-control calculate invoice_product_price txt" id="job_mat_cost" name="job_mat_cost" aria-describedby="sizing-addon1" placeholder="0.00" value="'
    .$values.'">
                                        </div>
            </div>
            
             <div class="clear"></div>
             </div>
             
            </div>
               </div>'
    ;  
               }  
              
          }  
          echo 
    $output
    althought the textarea goes outside the box for some reason.

    Anyway on the ajax now having that html in the output I can't reload the modal with empty data in there it is showing the last data and won't let me enter any more items.

    Is this because of something in the ajax?

    Thanks for your help. I want this to be an easy thing for people to use but it is tricky being such a large form with multiple inserts.

IMN logo majestic logo threadwatch logo seochat tools logo