Weird issue while populating a table using jquery

[Naveen puttu]

Hi,

Code in my jsp

<div class="floatLeftDiv" id="questionWeightsSelector" style="display:none;"><div class="floatLeftDiv"><bean:message key="buyer.add.weights.question.combo.heading"/></div> <div class="floatLeftDiv"><select id="sectionSelector"></select></div> <div class="floatLeftDiv"></div></div>

<div id="questionWeightsTableContainer" class="floatLeftDiv" style="display:none;">
	<table class="questionWeights" style="margin-bottom: 20px; border-collapse: collapse; width: 775px;table-layout:fixed;" id="questionWeightsTable">
		<thead id="tableHeadQuestion">
			<tr class="displayNames">
				<th style="margin-left:20px"><bean:message key="buyer.add.weights.question.table.header.1"/></th>
				<th style="margin-left:20px"><bean:message key="buyer.add.weights.section.table.header.2"/></th>
			</tr>
		</thead>
	</table>
	</div>

This is a snippet of my JS file

function getQuestionWeights(){
	if(jQuery(this).attr('id') == "assignWeightsByQuestion"){
		populateSectionDropDown();
	}
	sectionIdForUrl = $("#sectionSelector :selected").attr('id');
	alert($("#sectionSelector :selected").attr('id'));
	$.ajax({
	      method : "get",url : 'getQuestionnaireWeights.do?§ionOrQuestion=questions&eventId='+<%=request.getParameter("eventId")%>+'§ionId='+sectionIdForUrl,
	      beforeSend : function(){
	    	  $("#sectionWeightsTableContainer").css({"display":"none"});
	    	  $("#questionWeightsSelector").css({"display":"block"});
	    	  //$('#questionWeightsTable').each(function(){
		    	   // if($('tbody', this).length > 0){
		    	        $('tbody tr').remove();
		    	    //}else {
		    	     // $('tr:last', this).remove();
		    	    //}
		    	//});
		    	alert($('tbody', this).length);
	    	  alert("before"+" "+$("#questionWeightsTableContainer").html());
	      }
	      , // show loading just when link is clicked
	      
	      complete : function(){
		      alert($("#questionWeightsTableContainer").html());
		      $("#sectionWeightsTableContainer").html($("#questionWeightsTableContainer").html());
		      
		      $("#sectionWeightsTableContainer").css({"display":"block"});
		      $("#questionWeightsTableContainer").css({"display":"none"});
	      }
	      , // stop showing loading when the process is complete
	      success : function(xml){
	    	  var table = $("#questionWeightsTable");
	    	  alert(table);
	    	  $(xml).find('question').each(function(){
	    		  var questionId = $(this).find('id').text();
	    		  var serialNo = $(this).find('serialNo').text();
	    		  var questionName = $(this).find('description').text();
	    		  var questionWeight = $(this).find('weight').text();
	    		  var eventId = $(this).find('rfxId').text();
	    		  var typeOfScoring = $(this).find('scoreType').text();
	    		  if(typeOfScoring == "NO_SCORING"){
	    			  table.append("<tr id=event_"+eventId+" class=tableContentForItems><td class=tableContentForItems style='padding-left:2px;padding-top:5px;width:85px;'>"+serialNo+" . "+questionName+"</td><td>n/a</td></tr>");
	    		  }
	    		  else{
	    			  table.append("<tr id=event_"+eventId+" class=tableContentForItems><td class=tableContentForItems style='padding-left:2px;padding-top:5px;width:85px;'>"+serialNo+" . "+questionName+"</td><td><input style='width: 52px; height: 20px; text-align:right;margin:0px;' class='inputTextNormal' type='text' id=section_"+questionId+" value="+questionWeight+"></input></td></tr>");
	    		  }
	      }//close function
		      );//close each
	    	  table.append("<tr class=tableContentForItems><td class=tableContentForItems style='padding-left:2px;padding-top:5px;width:85px;'>Total weight (must = 100%)</td><td><input style='width: 52px; height: 20px; text-align:right;margin:0px;' class='inputTextNormal' type='text' id='totalWeight'></input></td></tr>");
	      }
	      });
}

This is how im calling my js function

$("#assignWeightsByQuestion").livequery('click',getQuestionWeights);
$("#sectionSelector").livequery('change',getQuestionWeights);

The issue that iam facing right now is that the click event renders the data in the table ; as in the <tboby> has the data populated , however the change event doesnt ; as in the <tboby> is empty

What am i missing ??

Cheers
n4v33n

[Eric Pascarello]

You want to append the rows to the table's tbody, not the table

Eric

[Naveen puttu]

anything is fine eric

but why isnt the data showing up

[Eric Pascarello]

table.append

That is appending it to the table and not the tbody

var table = $("#questionWeightsTable");  

should be

var table = $("#questionWeightsTable tbody:eq(0)");  

Also are you sure it is getting the data and creating the rows? Have you used a tool such as Fiddler to add break points and see what is happening?

Eric

[Naveen puttu]

eric


im using firebug debug functionality and i can see the data . its only that the data isnt getting set in the table

[Naveen puttu]

eric


iam using firebug debug functionality and i can see the data . its only that the data isnt getting set in the table

BTW your suggestion did not work ERIC . its so frustrating man

[Eric Pascarello]

Are you actually seeing it going into the each loop?

[Naveen puttu]

Hey Eric,

I fixed this issue mate

while i was doing this

$("#sectionWeightsTableContainer").html($("#questionWeightsTableContainer").html()); 

i wasnt emptying the $("#questionWeightsTableContainer") . So there were two tables with the same id and that was the culprit

i was so stupid . took me a really long time to realise

Thanks for the inputs mate

Cheers
n4v33n