Search...
FAQs
Subscribe
Pie
FAQs
Recent topics
Flagged topics
Hot topics
Best topics
Search...
Search within HTML Pages with CSS and JavaScript
Search Coderanch
Advance search
Google search
Register / Login
Post Reply
Bookmark Topic
Watch Topic
New Topic
programming forums
Java
Mobile
Certification
Databases
Caching
Books
Engineering
Micro Controllers
OS
Languages
Paradigms
IDEs
Build Tools
Frameworks
Application Servers
Open Source
This Site
Careers
Other
Pie Elite
all forums
this forum made possible by our volunteer staff, including ...
Marshals:
Campbell Ritchie
Tim Cooke
paul wheaton
Jeanne Boyarsky
Ron McLeod
Sheriffs:
Paul Clapham
Liutauras Vilda
Devaka Cooray
Saloon Keepers:
Tim Holloway
Roland Mueller
Bartenders:
Forum:
HTML Pages with CSS and JavaScript
Weird issue while populating a table using jquery
Naveen puttu
Ranch Hand
Posts: 88
posted 14 years ago
Number of slices to send:
Optional 'thank-you' note:
Send
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
author
Posts: 15385
6
posted 14 years ago
Number of slices to send:
Optional 'thank-you' note:
Send
You want to append the rows to the table's tbody, not the table
Eric
Naveen puttu
Ranch Hand
Posts: 88
posted 14 years ago
Number of slices to send:
Optional 'thank-you' note:
Send
anything is fine eric
but why isnt the data showing up
Eric Pascarello
author
Posts: 15385
6
posted 14 years ago
Number of slices to send:
Optional 'thank-you' note:
Send
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
Ranch Hand
Posts: 88
posted 14 years ago
Number of slices to send:
Optional 'thank-you' note:
Send
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
Ranch Hand
Posts: 88
posted 14 years ago
Number of slices to send:
Optional 'thank-you' note:
Send
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
author
Posts: 15385
6
posted 14 years ago
Number of slices to send:
Optional 'thank-you' note:
Send
Are you actually seeing it going into the each loop?
Naveen puttu
Ranch Hand
Posts: 88
posted 14 years ago
Number of slices to send:
Optional 'thank-you' note:
Send
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
Thanks tiny ad, for helping me escape the terrible comfort of this chair.
New web page for Paul's Rocket Mass Heaters movies
https://coderanch.com/t/785239/web-page-Paul-Rocket-Mass
reply
reply
Bookmark Topic
Watch Topic
New Topic
Boost this thread!
Similar Threads
Page displaying in IE6 and older versions but not in Higher versions, chrome and firefox also.
JSP Page to know what it does
calling the struts action on jquery button click
Client side validation not working
fixed header, problem with alignment, must support all browsers
More...