asked on

Values are not updating in database if i select checkbox first

In my jsp page one bug is coming like below -

3 dates are coming from database when i m updating if i change the date through date picker then click on checkbox then submit it working fine date are saving
perfectly to database . but if i check the check box first then change the date from date picker then submit new date is not updating in database .hope you understand
if not please let me know i will get more specific .

my java script code are below -

$(document).ready(function() {

	$(".date").datepicker({dateFormat:'dd/mm/yy'});
	$('.chkValues').on('click', function() {

		//get values of dates
		var array = [];
		var parent = $(this).closest('tr');
	    
	    // Now find all the child <inpu> elements with class "date"
	    var last = 0;
	    var lbl = ['PDate','PaDate','bValue'];
	    $('.date', parent).each(function(i,e) {
	      var dt = new Date(e.value.split("/").reverse().join("-"));
	      console.log(dt.getTime());
	      if (dt.getTime() <= last) {
	    	  alert('Error: ' + lbl[i] + ' date must be greater than ' + lbl[i-1] + ' date');
	      }
	      last = dt.getTime();
	    });
		$row = $(this).data('row'); //row1, row2, row3 etc
		$('input.' + $row).each(function() {
			array.push($(this).val());
		});
		$('#btnSubmit').click(function(evt) {
    	evt.preventDefault();
    	var pCode=document.getElementById("pcode").value;
    	var prType=document.getElementById("prtype").value;
    	var prCode=document.getElementById("prcode").value;
    	$.ajax({
            type: "POST",
            url: "Test.jsp",
            data: {array : array , "pCode": pCode , "prType": prType , "prCode": prCode },
            success: function(responseFromServer) {
            	 $.each(responseFromServer, function(resultMessageKey,resultMessageValue) {	
                    $('#content').html(resultMessageKey);
                });
    	    	//getClearDateValues();
    		
            },
            error: function() {
                alert("Ajax call Failed to Update Values  into Database");
            }
        }); 
		});

	});

});

Open in new window

my html code is below -

 <tr>
<td align="top">
<INPUT type="checkbox" class="chkValues" id="ckbCheckAll" name="chkBox" type="checkbox" data-row="row<%=i%>" value="" size="50">
</td>
<td align="left">
<input class="inputText row<%=i%>" type="text" name="mYear" id="mYear"  value="<%=(tableNameList.get(i)==null?"":tableNameList.get(i))%>">
</td>

				<td>
		            <input class="date row<%=i%>" id="payDate<%=i%>" name="pOff" type="text" value="<%=(tableNameList.get(i+1)==null?"":tableNameList.get(i+1))%>" />
				</td>
				<td>
		            <input class="date row<%=i%>" id="paDate<%=i%>" name="pPayment" type="text" value="<%=(tableNameList.get(i+2)==null?"":tableNameList.get(i+2))%>" />
				</td>
				<td>
		            <input class="date row<%=i%>" id="iDate<%=i%>" name="bDate" type="text" value="<%=(tableNameList.get(i+3)==null?"":tableNameList.get(i+3))%>" />
				</td>

</tr>

Open in new window

ste5an

Yup, obviously. But I wrote that already here..

Cause you mixed the checkbox event with the submit event..

$(document).ready(function() {
    $(".date").datepicker({dateFormat:'dd/mm/yy'});
    $('.chkValues').on('click', function() {
        $('#btnSubmit').click(function(evt) {
        });
    });
});

Open in new window

instead of

$(document).ready(function() {
    $(".date").datepicker({dateFormat:'dd/mm/yy'});
    $('.chkValues').on('click', function() {
    });
    $('#btnSubmit').click(function(evt) {
    });
});

Open in new window

Especially as you create a closure for your submit event using the "array" variable from the outer scope.

puneet kumar

ASKER

Thank You Ste will check and update you.

puneet kumar

ASKER

Hi Ste,

i have updates code like below but it's not updating in database when i am selecting new date after checking the check box . please help me out on this .

$(document).ready(function() {

	$(".date").datepicker({dateFormat:'dd/mm/yy'});
	var array = [];
	$('.chkValues').on('click', function() {

		//get values of dates
		
		var parent = $(this).closest('tr');
	    
	    // Now find all the child <inpu> elements with class "date"
	    var last = 0;
	    var lbl = ['PDate','PaDate','bValue'];
	    $('.date', parent).each(function(i,e) {
	      var dt = new Date(e.value.split("/").reverse().join("-"));
	      console.log(dt.getTime());
	      if (dt.getTime() <= last) {
	    	  alert('Error: ' + lbl[i] + ' date must be greater than ' + lbl[i-1] + ' date');
	      }
	      last = dt.getTime();
	    });
		$row = $(this).data('row'); //row1, row2, row3 etc
		$('input.' + $row).each(function() {
			array.push($(this).val());
		});
		

	});
	
	$('#btnSubmit').click(function(evt) {
    	evt.preventDefault();
    	var pCode=document.getElementById("pcode").value;
    	var prType=document.getElementById("prtype").value;
    	var prCode=document.getElementById("prcode").value;
    	$.ajax({
            type: "POST",
            url: "Test.jsp",
            data: {array : array , "pCode": pCode , "prType": prType , "prCode": prCode },
            success: function(responseFromServer) {
            	 $.each(responseFromServer, function(resultMessageKey,resultMessageValue) {	
                    $('#content').html(resultMessageKey);
                });
    	    	//getClearDateValues();
    		
            },
            error: function() {
                alert("Ajax call Failed to Update Values  into Database");
            }
        }); 
		});

});

Open in new window

ste5an

Well, why should it work? The relevant code shows that:

$(document).ready(function() {
    var array = [];
    $('.chkValues').on('click', function() {
    });

    $('#btnSubmit').click(function(evt) {
        evt.preventDefault();
        var pCode=document.getElementById("pcode").value;
        var prType=document.getElementById("prtype").value;
        var prCode=document.getElementById("prcode").value;
        $.ajax({
            type: "POST",
            url: "Test.jsp",
            data: {array : array , "pCode": pCode , "prType": prType , "prCode": prCode },
            success: function(responseFromServer) {
            },
            error: function() {
            }
        });
    });
});

Open in new window

puneet kumar

ASKER

Hi Ste i think in below code i do the same please check and let me know in my code where m i wrong -

$(document).ready(function() {

	$(".date").datepicker({dateFormat:'dd/mm/yy'});
	var array = [];
	$('.chkValues').on('click', function() {

		//get values of dates
		
		var parent = $(this).closest('tr');
	    
	    // Now find all the child <inpu> elements with class "date"
	    var last = 0;
	    var lbl = ['PDate','PaDate','bValue'];
	    $('.date', parent).each(function(i,e) {
	      var dt = new Date(e.value.split("/").reverse().join("-"));
	      console.log(dt.getTime());
	      if (dt.getTime() <= last) {
	    	  alert('Error: ' + lbl[i] + ' date must be greater than ' + lbl[i-1] + ' date');
	      }
	      last = dt.getTime();
	    });
		$row = $(this).data('row'); //row1, row2, row3 etc
		$('input.' + $row).each(function() {
			array.push($(this).val());
		});
		

	});
	
	$('#btnSubmit').click(function(evt) {
    	evt.preventDefault();
    	var pCode=document.getElementById("pcode").value;
    	var prType=document.getElementById("prtype").value;
    	var prCode=document.getElementById("prcode").value;
    	$.ajax({
            type: "POST",
            url: "Test.jsp",
            data: {array : array , "pCode": pCode , "prType": prType , "prCode": prCode },
            success: function(responseFromServer) {
            	 $.each(responseFromServer, function(resultMessageKey,resultMessageValue) {	
                    $('#content').html(resultMessageKey);
                });
    	    	//getClearDateValues();
    		
            },
            error: function() {
                alert("Ajax call Failed to Update Values  into Database");
            }
        }); 
		});

});

Open in new window

ste5an

You should look at the relevant code.. why do you think it should work?

Line 14 uses a variable which is not populated in the event.

puneet kumar

ASKER

Hi Ste but that variable i am inserting values in $('.chkValues').on('click', function() function . and it is define outside of the loops so it should work as per my thinking .please correct my code thanx a ton in advance.

ste5an

Why should it work?

The variable is only populated, if the check box is clicked. It is not populated when you change the a date value.

but if i check the check box first then change the date from date picker then submit new date is not updating in database .

Thus this order of events is not allowed/supported.

puneet kumar

ASKER

How can i change the at the time of change can you please tell me in my code .

ste5an

Move the array declaration to your submit event and populate it there.

puneet kumar

ASKER

Hi Ste below code is working fine but when validation is failed then also it updating the values please let me know the solution.
thanx a ton in advance.

$(document).ready(function() {

	$(".date").datepicker({dateFormat:'dd/mm/yy'}); 
	$('#btnSubmit').click(function(evt) {
    	evt.preventDefault();
		var array = [];
    	 var parent = $(this).closest('tr');
	    
	    // Now find all the child <inpu> elements with class "date"
	    var last = 0;
	    var lbl = ['PDate','PaDate','bValue'];
	    $('.date', parent).each(function(i,e) {
	      var dt = new Date(e.value.split("/").reverse().join("-"));
	      console.log(dt.getTime());
	      if (dt.getTime() <= last) {
	    	  alert('Error: ' + lbl[i] + ' date must be greater than ' + lbl[i-1] + ' date');
	      }
	      last = dt.getTime();
	    });
		$row = $(this).data('row'); //row1, row2, row3 etc
		$('input.' + $row).each(function() {
			array.push($(this).val());
		});
    	var pCode=document.getElementById("pcode").value;
    	var prType=document.getElementById("prtype").value;
    	var prCode=document.getElementById("prcode").value;
    	$.ajax({
            type: "POST",
            url: "Test.jsp",
            data: {array : array , "pCode": pCode , "prType": prType , "prCode": prCode },
            success: function(responseFromServer) {
            	 $.each(responseFromServer, function(resultMessageKey,resultMessageValue) {	
                    $('#content').html(resultMessageKey);
                });
    	    	//getClearDateValues();
    		
            },
            error: function() {
                alert("Ajax call Failed to Update Values  into Database");
            }
        }); 
		});

});

Open in new window

puneet kumar

ASKER

Hi Ste please tell me solution for above issue.

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.