Checking and Unchecking Check Boxes with Ajax success

Javascript & Ajax
#1

i am trying to make a table full of check boxes either check or uncheck based on ajax succes. i know how to do it for 1 single variable in a plain table or just a stand alone check box but i cant get the syntax correct for inside the dynamic table–the ajax returns an array with the value of data.returned either 0 or 1 if data.returned is 1 i would like the check box checked and if 0 then unchecked. here is my code

$("#ViewList").click(function() {
$('#loading').show();
$("#GuideMain tbody tr").remove();

			$.ajax({
			type: "POST",
			url: "ViewGMData.php",
			dataType: "json",
			data: ({VendorPO: $('#VendorPO').val(), Seller: $('#Seller').val(), Title: $('#TitleReRun').val(),
				     OrderDate: $('#OrderDateEnter').val(), ISBN13:$('#ISBN13UP').val(),
					 Received:$('#ReceivedEnter').val(),
					 ReceivedDate:$('#ReceivedDateEnter').val(),
					 Returned:$('#ReturnedEnter').val(),
					Refund:$('#RefundEnter').val()}),
			
			
			success: function(data){
				if (data.message) {
					alert ("You Must Pick a Filter");
					 $('#loading').hide();
				}
				else{
				if(data.ID==null){
				$("#GuideMain").append('<tr><td>No Records Found</td></tr>');
				  $('#loading').hide();
			}else{
				//append general data
				for(var x=0;x<data.ID.length;x++)
				{
					 var textContent=data.Notes;
		 		//code
				if (data.returned==1) {
					checked1='True';
					//code
				}
				else{
					checked1='False';
				}
					
 $("#GuideMain").append('<tr><td class="price" id="tableID">'+data.ID[x]+
 '</td><td><input type="text12"  id="tableVendorPO" value="'+data.PO[x]+
 '"/></td><td><input type="text12"  id="tableISBN" value="'+data.ISBN[x]+
 '"/></td><td><input type="text"  id="tableTitle" value="'+data.Title[x]+
 '"/></td><td><input type="text9"  id="tableQtyOr" value="'+data.QtyOr[x]+
 '"/></td><td><input type="text10"  id="tablePrice" value="'+data.Price[x]+
 '"/></td><td><input type="text12"  id="tableGuideRef" value="'+data.GuideRef[x]+
 '"/></td><td><input type="text10"  id="tablebestprice" value="'+data.bestprice[x]+
 '"/></td><td><input type="text12" id="tableOrDate" value="'+data.OrDate[x]+
 '"/></td><td><input type="text9"  id="tableRcvdQty" value="'+data.RcvdQty[x]+
 '"/></td><td><input type="text12"  id="tableRcvdDate" value="'+data.RcvdDate[x]+
 '"/></td><td><textarea  id="tableNotes" >'+textContent[x]+
 '</textarea></td><td><input type="checkbox"  id="tablereturned" value="'+data.returned[x]+
 '"/></td><td><input type="text10"  id="tablereturnC" value="'+data.returnC[x]+
 '"/></td><td><input type="text10"  id="tablerefundF" value="'+data.refundF[x]+
 '"/></td><td><input type="text10"  id="tablerefundA" value="'+data.refundA[x]+
 '"/></td><td><input type="text10"  id="tablePubCheck" value="'+data.PubCheck[x]+
 '"/></td><td><input type="text10"  id="tablePubName" value="'+data.PubName[x]+
 '"/></td><td><input type="text10"  id="tableResult" value="'+data.Result[x]+
 '"/></td></tr>');

you can see one value is a checkbox that is the column i would like to control

#2

I am confused on what you are attempting to do. You create a row of data, but, do not have any checkboxes in them. A checkbox is defined as type=‘checkbox’, not text9,text,text12, etc. Also, why do all this in JQuery? Just have the PHP file called in the Ajax to create the row for you. It would be much easier since the PHP file already has the row data and you would just create the displayed version there and pass that back to the JQuery to load the entire row. Or am I missing something? Please explain further what you need and where the data is coming from.

#3

if you look at the id ="tablereturned that is type=checkbox the php does return an array with the value set for that data.returned as 0, or 1 what i am missing is the popluating of all the row ( up to 175 trows) where the check box is check for 1 and unchecked for 0–if it was just one row of data it would be easy

#4

Well, you did not explain what you are attempting to do. Basically, it appears that you are checking filters and pulling data from a file named ViewGMData.php. Then, I am guessing you want to parse thru that data and create rows of data to display. To parse thru rows of Json data, you can use commands like this:

json.VendorPO.MovementInformation.Movement.forEach(function(item) { Do something with data }

You could use a FOR() function, but, it is easier using the Json-forEach… Is that what you need?

Oh, you can use the .done and .each functions as explained here: JQuery loop Json results
One of these processes should let you parse thru the Json results. Hope this helps…

EDIT: Here is another way that I found on Google…

      // Loop through Object and create peopleHTML
      for (var key in data) {
        if (data.hasOwnProperty(key)) {
          peopleHTML += "<tr>";
            peopleHTML += "<td>" + data[key]["name"] + "</td>";
            peopleHTML += "<td>" + data[key]["gender"] + "</td>";
          peopleHTML += "</tr>";
        }
      }

It was for a test display that shows name and gender using keys, but, you can alter it as needed.
Might work, too… There’s three ways to loop thru the data…

#5

so for delayed responce–maybe i was not clear let me try again–the table is created fine- the data is parsed fine. Everything is working the way it is supposed to but the client wanted to change the column with id tablereturned to check boxes from input data–so i changed them to check boxes…The problem is how to fill the table the way it currently done with filling that column with checked boxes for 1 and unchecked boxes for 0 the value for that column is contained in the array returned for data.returned[x]–i cant seem to get the right syntax to check the boxes is my only problem–the filters dont matter they are just user input that is not needed–the file ViewGMData.php simple queries a table and returns an arrary with all the data need to fill the table… It fills input boxes fine–i had to change the format so it would fill the one column that is a textarea, so i am assuming that i need to do something with the format for input checkbox with id=‘tablereturned’.

![image|661x162](upload://ym5BWEenTlLb5TlPRYyG8UGKJdG.png)
#6

Well, I am confused. First, each checkbox must have a unique ID if you are going to use it for Javascript. I see you did that using different ID names. ALL check boxes must have a type of “checkbox”. You used different ones like text9, text12, etc. That makes little sense to me.

As far as checked or not checked, but, going back to your first code post, you show you are checking for data returned. Then, you set a variable called “checked1” to true or false. I think you should alter this area. If true, set the variable to " CHECKED=true " and if false set it to " " , nothing. Then, display the variable in the textbox and it will mark it correctly.

<td><input type="checkbox"  id="tablereturned" value="'+data.returned[x]+checked1+ '" /></td>

Basically, you need to just display nothing if false and CHECKED=true if true. Good luck…

#7

ok so here is the final answer thanks for the push in the correct direction

<td><input type="checkbox"  id="tablereturned" '+data.returned[x]+'/></td>

for anyone running into this problem-- take out value=" and set the value of data.returned to either "checked’ or ‘’ in php file ( could be done in jquery with loop but easier in php

#8

Glad you solved it! See you in your next post!

Sponsor our Newsletter | Privacy Policy | Terms of Service