Page 1 of 1

Creating checkbox form inside getJSON() function ???

Posted: Wed Jan 18, 2012 6:46 pm
by pizzipie
Hi,
I am 1: listing all invoice records in my database.
2: checking the checkbox(s) of those invoices which I want to see details on.
3: traversing to the server PHP file using ?invid='checkbox value' of the particular invoice.
The problem I am having is that I keep getting an 'undefined error' re my form name.

The results of my getJSON call are roughly;

==================
Inv id 5
Inv No 807-A5
Vendor Home Depot
Date 2012-01-09

* Invoice Id (This is a check box) When checked - go to 'invoiceDetails.php' with value of this checkbox
==================
The above repeats for however invoices there are from the database.

Thanks in advance for help in solving this.

RP

The relevent code is contained in a.js file as follows: Again I can't get the damn file to upload.

Code: Select all

//GLOBALS

var i=0;
var j=0;
var table="";
var tableid="";
var category="";
var delFlag=false;
var revFlag=false;
var dataToProcess="";
var url="invoicesData.php";

//  ==================================

 $(document).ready(function() {	
 			$("#rbox").hide();
	window.getRadioClick=getRadioClick;
	//window.nextRecord=nextRecord;           // WITHOUT THIS NOTHING WORKS ????????
	//window.previousRecord=previousRecord;   // WISH I COULD FIND AN EXPLANATION FOR THIS !!
	//window.setCategoryData=setCategoryData;
	//window.reviseData=reviseData;
	
			$("#what").show();
			$("#what2").hide();		
		
//  =========  getRadioClick()  ================
 	
function getRadioClick() {
	category=$('[name="category"]:checked').val();
	
	//alert("category " + category);
	
	if(category=="Invoices") {
		table="invoice";

		$.getJSON('invoicesData.php?tbl='+table, function(invData) {
			var content="";
			content= '<form name="pickInv">';
			$(content).appendTo("#rbox");
			
			  $.each(invData, function(key, val) {
					//console.log("id "+ val.invid +"  inv no "+ val.invno+" vendor "+val.vendor);
		  			content = '<p>'  +'\tInv Id\t' + val.invid + '</p>';
            			content += '<p>' +'\tInv No.\t'+ val.invno+ '</p>';
            			content += '<p>' +'\tVendor\t'+ val.vendor+ '</p>';
            			content += '<p>' +'\tDate\t\t'  + val.date+ '</p>';
            			content += '<br/>';
            			content += '<input type="checkbox" name="checkgroup" value=' + val.invid +'> Invoice Id.</input>';	
            			$(content).appendTo("#rbox");
          		}); // each
          		
        			content="</form>";
        			$(content).appendTo("#rbox");
        			
          		$('#rbox').show();
          		
          		for(i=0;i<document.pickInv.checkgroup.length; i++) {       // ERROR pickInv not defined
					if(document.pickInv.checkgroup[i].checked==true) {
					alert("Checkbox for Invoice " + i + "is checked!" );
					}	
				} 
          		
          }); // getJSON
        } // if category
  } // get radio
  

  
  
}); // doc ready

Re: Creating checkbox form inside getJSON() function ???

Posted: Thu Jan 19, 2012 11:45 am
by Tiancris
I'm not pretty sure, but I guess the problem is that you have to access to the form using $("#pickInv") instead of "document.pickInv" (and add "id=pickInv" to the form).
My memory is not helping me right now, but if I'm not wrong the object "document" is not updated when other objects are added dynamically. That's why "document.pickInv" does not work.

Re: Creating checkbox form inside getJSON() function ???

Posted: Thu Jan 19, 2012 2:52 pm
by pizzipie
Thanks Tiancris,

I'll give this a try.

RP

Re: Creating checkbox form inside getJSON() function ???

Posted: Thu Jan 19, 2012 4:04 pm
by pizzipie
Hi Tiancris,

I tried out your suggestion and it works with some modifications on my part.

I found a problem with checking the 'checked' state of the <input>. Apparantly there is a new way to do this. In fact jquery 1.6 won't work the old way. Here is the new way .prop("checked",true).

HOWEVER, I now have a new problem that you might help me with. The following is the new code. What is happening now is that when you run it, the checkbox in the first data record is checked all by itself and the alert message is displayed. I can't figure why that would happen. Could it be doing this because I gave it a value??

Thanks in advance,

RP

Code: Select all

GLOBALS

var i=0;
var j=0;
var table="";
var tableid="";
var category="";
var delFlag=false;
var revFlag=false;
var dataToProcess="";
var url="invoicesData.php";

//  ==================================

 $(document).ready(function() {	

	$("#rbox").hide();

	window.getRadioClick=getRadioClick;
	//window.nextRecord=nextRecord;           // WITHOUT THIS NOTHING WORKS ????????
	//window.previousRecord=previousRecord;   // WISH I COULD FIND AN EXPLANATION FOR THIS !!
	//window.setCategoryData=setCategoryData;
	//window.reviseData=reviseData;
	
			//$("#what").show();
			//$("#what2").hide();		
		
//  =========  getRadioClick()  ================
 	
function getRadioClick() {
	category=$('[name="category"]:checked').val();
	
	if(category=="Invoices") {
		table="invoice";

		$.getJSON('invoicesData.php?tbl='+table, function(invData) {
			var content="";
			content= '<form name="pickInv" id="pickInv" >';
			$(content).appendTo("#rbox");
			
			  $.each(invData, function(key, val) {
				content = '<p>'  +'\tInv Id\t' + val.invid + '</p>';
            			content += '<p>' +'\tInv No.\t'+ val.invno+ '</p>';
            			content += '<p>' +'\tVendor\t'+ val.vendor+ '</p>';
            			content += '<p>' +'\tDate\t\t'  + val.date+ '</p>';
            			content += '<br/>';
            			content += '<input type="checkbox" name="checkgroup" id="checkinput" value=' + val.invid +'> Invoice Id.</input>';	
            			$(content).appendTo("#rbox");
          		}); // each
          		
        			content="</form>";
        			$(content).appendTo("#rbox");
        			
          		$('#rbox').show();
          		
          		if($("#checkinput").prop("checked",true)) {
					alert("Checkbox for Invoice is checked! ") ;
				} // if check 
		    		
          }); // getJSON
            
        } // if category
        
  } // get radio
  
}); // doc ready


Re: Creating checkbox form inside getJSON() function ???

Posted: Thu Jan 19, 2012 9:58 pm
by Tiancris
Let see...

There is a conceptual mistake here:

Code: Select all

content += '<input type="checkbox" name="checkgroup" id="checkinput" value=' + val.invid +'> Invoice Id.</input>'; 
You are setting the same id to every checkbox, and this isn't right. Id values must be unique for each object. You could use something like:

Code: Select all

id="checkinput"+val.invid
On the other hand... to get only checked inputs:

Code: Select all

$("input[name='checkgroup']:checked").each(function(){
  alert("Checkbox " + $(this).attr('id') + " is checked!");
})
I have to read more about that new version of jQuery... :wink:

Re: Creating checkbox form inside getJSON() function ???

Posted: Thu Jan 19, 2012 10:45 pm
by pizzipie
:D :D :D

I have been working on this all day and found the same error you did, plus some others. You, however, got me started on the right path!!! Thanks once more.

My final solution is as follows: It works well. Now I can take the checked value and go back to the server for detailed info on one record.

Code: Select all

//GLOBALS

var i=0;
var j=0;
var table="";
var tableid="";
var category="";
var delFlag=false;
var revFlag=false;
var dataToProcess="";
var url="invoicesData.php";


//  ==================================

 $(document).ready(function() {	
 			
 	$("#rbox").hide();
 			
	window.getRadioClick=getRadioClick;     // WITHOUT THIS NOTHING WORKS ????????



//  =========  getRadioClick()  ================
 	
function getRadioClick() {
	category=$('[name="category"]:checked').val();

	if(category=="Invoices") {
		table="invoice";

		$.getJSON('invoicesData.php?tbl='+table, function(invData) {
			var content="";
			content= '<form name="pickInv" id="pickInv" >';
			$(content).appendTo("#rbox");
			
			  $.each(invData, function(key, val) {

		  			content = '<p>'  +'\tInv Id\t' + val.invid + '</p>';
            			content += '<p>' +'\tInv No.\t'+ val.invno+ '</p>';
            			content += '<p>' +'\tVendor\t'+ val.vendor+ '</p>';
            			content += '<p>' +'\tDate\t\t'  + val.date+ '</p>';
            			content += '<br/>';
            			content += '<input type="radio" name="invoice" id="radioinput';
            			content +=  val.invid +'"'; 
            			content += 'value=' + val.invid +'> Check to see details.</input>';
            			content += '<br/>---------------------------------------------<br/>';
            			
            			$(content).appendTo("#rbox");
          		}); // each
          		
				content = $('pickInv').submit( function() {return false;  });
				$(content).appendTo("#rbox");
				
        			content="</form>";
        			$(content).appendTo("#rbox");
        			
          		$('#rbox').show();
 
          		$('input[name="invoice"]' ).click(function() {
 					alert("checked - Invoice Id ..." + $('input[name="invoice"]:checked').val());
				}); // click      
     	
      	}); // getJSON    
       } // if category
  } // get radio
}); // doc ready

Re: Creating checkbox form inside getJSON() function ???

Posted: Fri Jan 20, 2012 7:00 am
by Tiancris
I'm glad I could help a bit :D :D :D

Re: Creating checkbox form inside getJSON() function ???

Posted: Fri Feb 03, 2012 2:08 am
by trxtrainerssale
This is great site and I am happy to have found it.Thank you for all the nice shares.