Solved

how to check box values to jsp without refreshing the page with AJAX+JQUERY+JSON

Posted on 2011-03-19
27
1,498 Views
Last Modified: 2013-11-08
When the user checks some of the checkboxes and clicks submit button  the page should not be Refreshed But check box values should go the JSP ?
 As you can see when the form is submitted am sending the values to JSP in the below manner.Its working fine.presently in my case page is getting refereshed.

 After server processing is over those check box values should be automatically checked when the page is displayed.

 How to use AJAX and JQuery in this case without refreshing the page?
 How to convert the DataModel class(have done this in Javascript) in JQuery?Can I use JSON in this requirement?Without using JSON can i fulfill this requirement?am newbie to JSON.

 if i use JSON how to format the JSON table when user checks the checkbox values(check1,1,xxx etc..)  and if user decides to unchecks it the value should be removed from JSON table.

to work in JSON do i need to download any js files??
 
<script>
 
		var selectedObjectsList = new Array();
 

            var uniqueIdentifier = "checkBoxId";

            function DataModel(checkBoxId, houseCheckValue,name)
            {

                        this.checkBoxId                               = eval(uniqueIdentifier);
                        this.houseCheckValue                          = houseCheckValue;
						this.name                                     = name;

            }

         function handleSelectedCheckBox(obj)
            {

					
			         var value=obj.value;

					var name = document.getElementById("name"+obj.id.substring(5)).value;

                        if(obj.checked)

                        {
					               

                                    dataModel         = new DataModel(obj.id, obj.value,name);
                                    selectedObjectsList.push(dataModel);
                       }
                        else

                        {

                                    for(var i=0;i<selectedObjectsList.length;i++)

                                    {

                                                dataModel = selectedObjectsList[i];

                                                if(dataModel!=null)

                                                {
                                                            if(eval("dataModel."+"houseCheckValue")==value)

                                                            {
																
                                                                        selectedObjectsList.splice(i,1);
																		dataModel=null;
	                                                                     break;

                                                            }

                                                }

											



                                    }

 
                                

                        }




            }

 
 function checkForm(  ) {
    var result = '', separator = '';
     for(var i=0;i<selectedObjectsList.length;i++)
         {

            dataModel = selectedObjectsList[i];

			result += separator + dataModel.checkBoxId+ ','+dataModel.houseCheckValue+ ','+ dataModel.name;
			separator  = '| ';
           
		   
         }  
		  alert( 'Selected: ' + result );
      document.getElementById("checkboxvalues").value=result; 
 }


 

  </script>

<form id="frm"  name="frm" onSubmit='return ex();'>
<body>
<table>
<tr>
<td>
<input type='checkbox' id='check1' value='1' onclick='handleSelectedCheckBox(this)'>
<input type='type' id='name1' value='xxxx'>
</td>
</tr>
<tr>
<td>
<input type='checkbox' id='check2' value='2' onclick='handleSelectedCheckBox(this)'>
<input type='type' id='name2' value='yyyy'>
</td>
</tr>
<tr>
<td>
<input type='checkbox' id='check3' value='3' onclick='handleSelectedCheckBox(this)'>
<input type='type' id='name3' value='zzzzzzz'>
</td>
</tr>
<tr>
<td>
  <input type="button" value="=enter=" onclick='checkForm()'/>
   <input type="hidden"  id="checkboxValues"/></td>
</tr>

 </BODY>

</HTML>

 

Open in new window

0
Comment
Question by:chaitu chaitu
  • 17
  • 10
27 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 35173107
>How to use AJAX and JQuery in this case without refreshing the page?

use $.post, $.get, $.getJSON, $.ajax, ...
http://api.jquery.com/jQuery.post/
http://api.jquery.com/jQuery.get/
http://api.jquery.com/jQuery.getJSON/
http://api.jquery.com/jQuery.ajax/

>After server processing is over those check box values should be automatically checked when the page is displayed.
to check all checkboxes :
$("input[type='checkbox'][id^='check']").attr("checked","true")

>How to convert the DataModel class(have done this in Javascript) in JQuery?Can I use JSON in this requirement?Without using JSON can i fulfill this requirement?
JSON object is just a way to pass variable, you may use  http://api.jquery.com/serializeArray/ to serialize your object : $("input[type='checkbox'][id^='check']").serializeArray()

>to work in JSON do i need to download any js files??
No the jquery plugin alone is fine for example : http://code.jquery.com/jquery-1.5.1.min.js

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script language="javascript" type="text/javascript">

	$(document).ready(function() {
		$("input[type='button'][value='=enter=']").click(function() {
			$.getJSON("path/to/processCheckboxes.jsp", $("input[type='checkbox'][id^='check']").serializeArray(), function() {
				// After server processing is over those check box values should be automatically checked when the page is displayed
				$("input[type='checkbox'][id^='check']").attr("checked","true");
			})
		})
	});

</script>
</head>
<body>
<form id="frm" name="frm">
<table>
<tr><td>
<input type='checkbox' id='check1' value='1'>
<input type='type' id='name1' value='xxxx'>
</td></tr>
<tr><td>
<input type='checkbox' id='check2' value='2'>
<input type='type' id='name2' value='yyyy'>
</td></tr>
<tr><td>
<input type='checkbox' id='check3' value='3'>
<input type='type' id='name3' value='zzzzzzz'>
</td></tr>
<tr><td>
<input type="button" value="=enter="/>
</td></tr>
</table>
</body>
</html>

Open in new window

0
 
LVL 20

Author Comment

by:chaitu chaitu
ID: 35175312


$.getJSON("path/to/processCheckboxes.jsp", $("input[type='checkbox'][id^='check']").serializeArray(), function() {

      with above  code all checkboxes will be checked once process is over irrespective of checked or unchecked and also you are sending whole checkbox data irrespective of checked or unchecked.

      i want only those checkboxes which are checked  and  same need to send them to jsp.


if i write like below only checked check boxes data will be send to jsp but if uncheck some of the checkboxes then unchecked data(checkbox data and respective text box data) should be removed from the array.how to do this in this case?

$.getJSON("path/to/processCheckboxes.jsp", $("input[type='checkbox'][id^='check']:checked").serializeArray(), function() {


how to retrive the form data in jsp?
i want check box data and textbox data in the jsp.?can i retrive data like this request.getParameter("name");
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35175537
>with above  code all checkboxes will be checked once process is over irrespective of checked or unchecked and also you are sending whole checkbox data irrespective of checked or unchecked.

That's wrong, only checked are serialized, test page (check and click on the button) :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script language="javascript" type="text/javascript">

	$(document).ready(function() {
		$("input[type='button'][value='=enter=']").click(function() {
			var o = $("input[type='checkbox'][id^='check']").serializeArray();
			alert("there's " + o.length + " checkbox checked"); 
			/*
			$.getJSON("path/to/processCheckboxes.jsp", $("input[type='checkbox'][id^='check']").serializeArray(), function() {
				// After server processing is over those check box values should be automatically checked when the page is displayed
				$("input[type='checkbox'][id^='check']").attr("checked","true");
			})
			*/
		})
	});

</script>
</head>
<body>
<form id="frm" name="frm">
<table>
<tr><td>
<input type='checkbox' name="check1" id='check1' value='1'>
<input type='type' id='name1' value='xxxx'>
</td></tr>
<tr><td>
<input type='checkbox' name="check2" id='check2' value='2'>
<input type='type' id='name2' value='yyyy'>
</td></tr>
<tr><td>
<input type='checkbox' name="check3" id='check3' value='3'>
<input type='type' id='name3' value='zzzzzzz'>
</td></tr>
<tr><td>
<input type="button" value="=enter="/>
<input type="hidden"  id="checkboxValues"/>
</td></tr>
</table>
</body>
</html>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 35175550
You may create an object like this one for each checkbox :


{
  "checked":true, // or false if not checked of course
  "name":"check1",
  "value":1
}

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 35175558
The code to create the objects is :

var checkboxes = [];
$("input[type='checkbox'][id^='check']").each(function() { checkboxes.push({"name":$(this).attr("name"), "value":$(this).val(), "checked":$(this).is(":checked")}); });

Open in new window



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script language="javascript" type="text/javascript">

	$(document).ready(function() {
		$("input[type='button'][value='=enter=']").click(function() {
			var o = $("input[type='checkbox'][id^='check']").serializeArray();
			alert("there's " + o.length + " checkbox checked");
                        var checkboxes = [];
                        $("input[type='checkbox'][id^='check']").each(function() { checkboxes.push({"name":$(this).attr("name"), "value":$(this).val(), "checked":$(this).is(":checked")}); });
			$.getJSON("path/to/processCheckboxes.jsp", checkboxes, function() {
				// After server processing is over those check box values should be automatically checked when the page is displayed
				$("input[type='checkbox'][id^='check']").attr("checked","true");
			})
		})
	});

</script>
</head>
<body>
<form id="frm" name="frm">
<table>
<tr><td>
<input type='checkbox' name="check1" id='check1' value='1'>
<input type='type' id='name1' value='xxxx'>
</td></tr>
<tr><td>
<input type='checkbox' name="check2" id='check2' value='2'>
<input type='type' id='name2' value='yyyy'>
</td></tr>
<tr><td>
<input type='checkbox' name="check3" id='check3' value='3'>
<input type='type' id='name3' value='zzzzzzz'>
</td></tr>
<tr><td>
<input type="button" value="=enter="/>
<input type="hidden"  id="checkboxValues"/>
</td></tr>
</table>
</body>
</html>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 35175760
corrected :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script language="javascript" type="text/javascript">

	$(document).ready(function() {
		$("input[type='button'][value='=enter=']").click(function() {
			var o = $("input[type='checkbox'][id^='check']").serializeArray();
			alert("there's " + o.length + " checkbox checked");
			var checkboxes = [];
			$("input[type='checkbox'][id^='check']").each(function() {
				var name = $(this).attr("name");
				var value = "{\"value\":" + $(this).val() +",\"checked\":" + $(this).is(":checked") + "}";
				checkboxes.push( { "name":name, "value":value } );
			});
			$.getJSON("processCheckboxes.php", checkboxes, function(data) {
				// After server processing is over those check box values should be automatically checked when the page is displayed
				$("input[type='checkbox'][id^='check']").attr("checked",true);
			})
		})
	});

</script>
</head>
<body>
<form id="frm" name="frm">
<table>
<tr><td>
<input type='checkbox' name="check1" id='check1' value='1'>
<input type='type' id='name1' value='xxxx'>
</td></tr>
<tr><td>
<input type='checkbox' name="check2" id='check2' value='2'>
<input type='type' id='name2' value='yyyy'>
</td></tr>
<tr><td>
<input type='checkbox' name="check3" id='check3' value='3'>
<input type='type' id='name3' value='zzzzzzz'>
</td></tr>
<tr><td>
<input type="button" value="=enter="/>
<input type="hidden"  id="checkboxValues"/>
</td></tr>
</table>
</body>
</html>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 35175786
you get each checkbox as JSON string for example :

String check1JSONStr = request.getParameter("check1");
JSONObject check1 = new JSONObject(check1JSONStr);
int check1_value = check1.getInt("value");
boolean check1_checked = check1.getBoolean("checked"):

Open in new window


Some java API :
http://www.json.org/java/index.html
https://github.com/douglascrockford/JSON-java/blob/master/JSONObject.java

This article may help playing with the API (don't forget to vote ;-) : http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/JSON/A_2715-Import-and-Export-datas-from-JSON-string-to-Oracle-with-Java-Stored-Procedure.html
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35175798
difference between : .serializeArray()
and : .each(function() { checkboxes.push({"name":$(this).attr("name"), "value":$(this).val(), "checked":$(this).is(":checked")}); })
Clipboard03.jpg
0
 
LVL 20

Author Comment

by:chaitu chaitu
ID: 35178214
leakim971,

thanks for your vast analization.let me give some time  i will get back by implementing your logic.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35179586
ok
0
 
LVL 20

Author Comment

by:chaitu chaitu
ID: 35180702
     There is a small correction in your code ;Lets summarize once again .
      
      as you mentioned there are 2 ways to send the checked checkbox data to jsp.
      
      1)serializeArray() it automatically gives the checked data
      2)iterating all checkboxes and pushed the only checked checkbox data(I changed the code little bit see my 2nd option)



      
      After server processing is over if you don't put the below condtion then all the checkboxes will be checked irrespective whether we checked or not.
      Please let me know if i made any mistake.
			for(var i=0;i<o.length;i++)
				{
					// After server processing is over those check box values should be automatically checked that are serialized when the page is displayed
					$("input[type='checkbox'][id^='check'][value~='"+o[i].value+"']").attr("checked",true);
					
				}


	which jar need to download to use the below object.
	JSONObject check1 = new JSONObject(check1JSONStr);

Open in new window



1st OPTION
************
      
	$(document).ready(function() {
		$("input[type='button'][value='=enter=']").click(function() {
			var o = $("input[type='checkbox'][id^='check']").serializeArray();
			alert("there's " + o.length + " checkbox checked");
			
			$.getJSON("Test1.jsp", o, function(data) {
			
			
			for(var i=0;i<o.length;i++)
				{
				// After server processing is over those check box values should be automatically checked that are serialized when the page is displayed
				$("input[type='checkbox'][id^='check'][value~='"+o[i].value+"']").attr("checked",true);
					
				}
			})
		})
	});

Open in new window


2nd Option
**********

in this case we are iterating all checkboxes but adding or removing based on checked or unchecked.am i correct while removing data from checkboxes array.
	$(document).ready(function() {
		$("input[type='button'][value='=enter=']").click(function() {
			
			
			var checkboxes = [];
			$("input[type='checkbox'][id^='check']").each(function() {
				var name = $(this).attr("name");
				var value = "{\"value\":" + $(this).val() +",\"checked\":" + $(this).is(":checked") + "}";

				if($(this).is(":checked"))
				{
					checkboxes.push( { "name":name, "value":value } );
				}
				else
				{
				        checkboxes.splice( 1,value);
				}

			});
			
			$.getJSON("Test1.jsp", checkboxes, function(data) {

			for(var i=0;i<checkboxes.length;i++)
				{
					// After server processing is over those check box values should be automatically checked that are pushed in the array when the page is displayed
					$("input[type='checkbox'][id^='check'][value~='"+checkboxes[i].value+"']").attr("checked",true);
					
				}
			})
		})
	});

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 35180844
>After server processing is over if you don't put the below condtion then all the checkboxes will be checked irrespective whether we checked or not.

again no, form post, form get only send the checked one. same thing for serializeArray(), only checked are serialized.

check my screen copy

Could you say me what iis missing in checkboxes (my screen copy) ? We've the checkboxes name, the checkboxes state and the checkboxes value
0
 
LVL 20

Author Comment

by:chaitu chaitu
ID: 35180948
// Let's say if i check 2 checkboxes then here printing length as 2 after server processing ($.getJSON method) But strangely all checkboxes are getting checked.but you are saying only checked ones should be checked but its happening in this case.Pls check.

alert("after server processing.."+o.length)
$("input[type='checkbox'][id^='check']").attr("checked",true);


Test.jsp
*********
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script language="javascript" type="text/javascript">
<%
System.out.println("in test.jsp......");

%>

	$(document).ready(function() {
		$("input[type='button'][value='=enter=']").click(function() {
			var o = $("input[type='checkbox'][id^='check']").serializeArray();
			alert("there's " + o.length + " checkbox checked");

			
			$.getJSON("Test1.jsp", o, function(data) {

			//here i check 2 checkboxes then here printing length as 2
			alert("after server processing.."+o.length)
			
				// After server processing is over those check box values should be automatically checked when the page is displayed
				$("input[type='checkbox'][id^='check']").attr("checked",true);
	
				
			})
		})
	});

</script>
</head>
<body>
<form id="frm" name="frm">
<table>
<tr><td>
<input type='checkbox' name="check" id='check1' value='1'>
<input type='type' id='name1' value='xxxx'>
</td></tr>
<tr><td>
<input type='checkbox' name="check" id='check2' value='2'>
<input type='type' id='name2' value='yyyy'>
</td></tr>
<tr><td>
<input type='checkbox' name="check" id='check3' value='3'>
<input type='type' id='name3' value='zzzzzzz'>
</td></tr>
<tr><td>
<input type="button" value="=enter="/>
<input type="hidden"  id="checkboxValues"/>
</td></tr>
</table>
</body>
</html>


Test1.jsp
***********

<%


String[] check1JSONStr = request.getParameterValues("check");

//here printing only checked checkbox values
for(int i=0;i<check1JSONStr.length;i++)
{
System.out.println("in test1.jsp......"+check1JSONStr[i]);
}

%>

Open in new window

0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 82

Expert Comment

by:leakim971
ID: 35181006
this is why I give you a second code, check my last proposition :

			var checkboxes = [];
			$("input[type='checkbox'][id^='check']").each(function() {
				var name = $(this).attr("name");
				var value = "{\"value\":" + $(this).val() +",\"checked\":" + $(this).is(":checked") + "}";
				checkboxes.push( { "name":name, "value":value } );
			});

Open in new window


else : << form post, form get only send the checked one. same thing for serializeArray(), only checked are serialized. >>
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35181042
You code modified :


Test.jsp
*********
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script language="javascript" type="text/javascript">
<%
System.out.println("in test.jsp......");

%>

	$(document).ready(function() {
		$("input[type='button'][value='=enter=']").click(function() {

			var o = [];
			$("input[type='checkbox'][id^='check']").each(function() {
				var name = $(this).attr("name");
				var value = "{\"value\":" + $(this).val() +",\"checked\":" + $(this).is(":checked") + "}";
				o.push( { "name":name, "value":value } );
			});
			alert("there's " + o.length + " checkbox checked");

			
			$.getJSON("Test1.jsp", o, function(data) {

			//here i check 2 checkboxes then here printing length as 2
			alert("after server processing.."+o.length)
			
				// After server processing is over those check box values should be automatically checked when the page is displayed
				$("input[type='checkbox'][id^='check']").attr("checked",true);
	
				
			})
		})
	});

</script>
</head>
<body>
<form id="frm" name="frm">
<table>
<tr><td>
<input type='checkbox' name="check" id='check1' value='1'>
<input type='type' id='name1' value='xxxx'>
</td></tr>
<tr><td>
<input type='checkbox' name="check" id='check2' value='2'>
<input type='type' id='name2' value='yyyy'>
</td></tr>
<tr><td>
<input type='checkbox' name="check" id='check3' value='3'>
<input type='type' id='name3' value='zzzzzzz'>
</td></tr>
<tr><td>
<input type="button" value="=enter="/>
<input type="hidden"  id="checkboxValues"/>
</td></tr>
</table>
</body>
</html>


Test1.jsp
***********

<%


String[] check1JSONStr = request.getParameterValues("check");

//here printing only checked checkbox values
for(int i=0;i<check1JSONStr.length;i++)
{
System.out.println("in test1.jsp......"+check1JSONStr[i]);
}

%>

Open in new window

0
 
LVL 20

Author Comment

by:chaitu chaitu
ID: 35181178
I checked you code even though i check 2 checkboxes its printing  3 ;
alert("there's " + o.length + " checkbox checked");

I think you need to use condition like if we check the checkboxes use push method and if i uncheck then use splice method for removing that value from array.
Please check the code from your side as well.

one more doubt can i put same name to all checkboxes??



0
 
LVL 82

Expert Comment

by:leakim971
ID: 35181202
>I checked you code even though i check 2 checkboxes its printing  3

Yes, all are sent BUT with their state, checked : true or false
and their value : 1 (for check1),  2 (for check2), 3 (for check3)

so you can update them all on the server side, or filter them (checked or not) and so on
0
 
LVL 20

Author Comment

by:chaitu chaitu
ID: 35181520
>Yes, all are sent BUT with their state, checked : true or false
>and their value : 1 (for check1),  2 (for check2), 3 (for check3)

>so you can update them all on the server side, or filter them (checked or not) and so on .

Yes you are correct.I can filter at server side.

As you said in case of serializeArray() only checked checkboxes values(1,2,3 etc..) will send to the server side then in that case no filteration is required.but if i want JSON object(name-value pair) then filteration should happen at either client or server sides.

Intead of filtering at server side if i want to filter at client side itself then below code should be added.you light on the below code.



                        if($(this).is(":checked"))
                        {
                                 o.push( { "name":name, "value":value } );
                        }
                        else
                        {
                                   o.splice( 1,value);
                        }

one more correction .Lets say even if i filtered at server side even then also all checkboxes will be checked with the below code because we didn't put any condition here.

            $("input[type='checkbox'][id^='check']").attr("checked",true);

i observed one thing here if we use JSON object(name:value pair) then in that case i need to use unique names to checkboxes.

<input type='checkbox' name="check1" id='check1' value='1'>
<input type='checkbox' name="check2" id='check2' value='2'>
<input type='checkbox' name="check3" id='check3' value='3'>



0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 35181725
the advantage to send all the checkboxes to the server is to update all the respective rows in the database.

>i observed one thing here if we use JSON object(name:value pair) then in that case i need to use unique names to checkboxes

or just use the id instead the name when serializing :

if the id is the primary key in a table it's more logic to use << id >> instead of << name >>

Is your main question are answered ?

serializeArray if you want only checked checkbox
below to get all the checkboxes and their respective state



var o = [];
			$("input[type='checkbox'][id^='check']").each(function() {
				var name = $(this).attr("id");
				var value = "{\"value\":" + $(this).val() +",\"checked\":" + $(this).is(":checked") + "}";
				o.push( { "name":name, "value":value } );
			});

Open in new window

0
 
LVL 20

Author Comment

by:chaitu chaitu
ID: 35186506
you didnt answer this Q;

one more correction .Lets say even if i filtered at server side even then also all checkboxes will be checked with the below code because we didn't put any condition here.

            $("input[type='checkbox'][id^='check']").attr("checked",true);


I think we need to put condition after server processing is over.

$.getJSON("Test1.jsp", o, function(data) {
$("input[type='checkbox'][id^='check']").each(function() {

if($(this).is(":checked") == data.checked)
$("input[type='checkbox'][id^='check']").attr("checked",true);


});

});

one more Q is how did you took the screen shot for ID:35175798.did u use console.log in firefox to see the JSON object?if you explain me on this it will useful for me to debug.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35186525
don't know which type of processing you're doing on the server side but if you return the same type an object like this one :

[
{"id":"check1","checked":true},
{"id":"check2","checked":true},
{"id":"check3","checked":false}
]

you may use :

$.getJSON("Test1.jsp", o, function(data) {
   $.map(data,function(el,i) {
        $("#"+ el.id).attr("checked", el.checked);
   });
});

Open in new window

0
 
LVL 20

Author Comment

by:chaitu chaitu
ID: 35186765
1)How did you took the screen shot for ID:35175798.did u use console.log in firefox to see the JSON object?if you explain me on this it will useful for me to debug.

2)can you send me the link to download the JSON jar  related to JAVA  ?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35186873
read ID:35175786
0
 
LVL 20

Author Comment

by:chaitu chaitu
ID: 35186884
I didnt get answer for this point in ID:35175786


1)How did you took the screen shot for ID:35175798.did u use console.log in firefox to see the JSON object?if you explain me on this it will useful for me to debug.
0
 
LVL 20

Author Comment

by:chaitu chaitu
ID: 35195642
leakim971:

I have downloaded this JSON view from below link.but dont know how to see my JSON object in firefox.

https://addons.mozilla.org/en-US/firefox/addon/jsonview/

one more thing is this below alert is not coming in firefox.

//here i check 2 checkboxes then here printing length as 2
                  alert("after server processing.."+o.length)
                  
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35198867
>I have downloaded this JSON view from below link.but dont know how to see my JSON object in firefox.
https://addons.mozilla.org/en-US/firefox/addon/jsonview/
never used..
may help : http://thecodecentral.com/2007/08/01/debug-javascript-with-firebug

>one more thing is this below alert is not coming in firefox.
could you share a link to see the page? there's no specific browser code on this line
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35398014
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now