javascript - Populate 2 tables with 2 sets of data when 1 field matches in both sets -
i'm using josh fraser's backwards compatible window.postmessage() (http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage) , i'm having trouble.
i have 2 iframes on page , both iframes send different data same parent page. in other words, there 2 xd.receivemessage functions getting 2 different messages 2 different iframes. here's shortened version of code:
<iframe id="iframe1" src="https://www.domain.com/pagenamefirst.php"></iframe> <iframe id="iframe2" src="https://www.domain.com/pagenamesecond.php"></iframe> <div id="firsttable"> <table> <tr> <th>name</th> <th>address</th> <th>id</th> </tr> <tr> <td><!--this filled in data--></td> <td><!--this filled in data--></td> <td><!--this filled in data--></td> </tr> </table> </div> <div id="secondtable"> <table> <tr> <th>email</th> <th>twitter handle</th> <th>id</th> </tr> <tr> <td><!--this filled in data--></td> <td><!--this filled in data--></td> <td><!--this filled in data--></td> </tr> </table> </div> <script type="text/javascript"> $(document).ready(function() { //first data pull var encodeurifirst = encodeuricomponent(document.location.href); var getmessagefirst = 'https://www.domain.com/pagenamefirst.php#' + encodeurifirst; $("#iframe1").attr('src',getmessagefirst); xd.receivemessage(function(getmessagefirst){ var getdatafirst = getmessagefirst.data; var getdatafirsteach = new array(); for(var a=0; a<getdatafirst.length; a++){ getdatafirsteach = getdatafirst.split("~,~"); $('div#firsttable table td:nth-child(0)').text(getdatafirsteach[0].replace(/[~]/g,"")); } }, 'https://www.domain.com'); //second data pull var encodeurisecond = encodeuricomponent(document.location.href); var getmessagesecond = '//www.domain.com/pagenamesecond.php#' + encodeurisecond; $("#iframe2").attr('src',getmessagesecond); xd.receivemessage(function(getmessagesecond){ var getdatasecond = getmessagesecond.data; var getdatasecondeach = new array(); for(var a=0; a<getdatafirst.length; a++){ getdatasecondeach = getdatasecond.split("~,~"); $('div#secondtable table td:nth-child(0)').text(getdatasecondeach[0].replace(/[~]/g,"")); } }, 'https://www.domain.com'); }); </script> please keep in mind i've scaled code significantly. each getdatafirst or getdatasecond
it works far getting data both iframes (send/receive both work). data comes through in format ~name~,~address~,~id~ first set of data , ~email~,~twitter~,~id~ second set.
i'm trying data populate 2 tables. for loops id in table , if id matches, fills in other fields associated id. in cases, id first data set same id second data set. when happens, for loops place data in both tables instead of appropriate one. i'm wondering why happen since i'm targeting table inside either $('div#firsttable') or $('div#secondtable') output. example:
$('div#firsttable table td:nth-child(0)').text(getdatafirsteach[0]); inside for loop placing getdatafirsteach[0] both firsttable , secondtable tables?
can tell me why?
as requested, here full js:
var encodeurigifts = encodeuricomponent(document.location.href); var giftsmessage = '//www.domain.org/firstpage.php#' + encodeurigifts; $("#iframe1").attr('src',giftsmessage); xd.receivemessage(function(giftsmessage){ var getdatagifts = giftsmessage.data; var currentrecordgifts = new array(); var getgiftslines = getdatagifts.split("|"); //lines of data pipe separated for(var bcnt=0;bcnt < getgiftslines.length;bcnt++){ var getgiftseach = getgiftslines[bcnt].split("`,`"); //each item separated `,` for(var ccnt=0;ccnt < getgiftseach.length;ccnt++){ if (getgiftseach[ccnt]!=="" && getgiftseach[ccnt]!=="undefined"){ currentrecordgifts[bcnt] = " <td class='giftamount'>"+getgiftseach[1]+"</td><td class='giftdate'>"+getgiftseach[2].replace(/[`]/g,"")+"</td>"; } if (ccnt==2) { var thisgiftsid = getgiftseach[0].replace(/[`]/g,""); $('#firsttable table td:contains("'+thisgiftsid+'")').closest('tr').find('td:nth-child(3)').after(currentrecordgifts[bcnt]); } } if (bcnt==0){ $('#firsttable table th:nth-child(3)').after('<th class="bblistingheading directorylistingheading" scope="col" style="white-space: nowrap;">last gift amount</th><th class="bblistingheading directorylistingheading" scope="col" style="white-space: nowrap;">last gift date</th>'); } } }, 'https://www.domain.org'); var encodeurichanges = encodeuricomponent(document.location.href); var changesmessage = '//www.domain.org/secondpage.php#' + encodeurichanges; $("#iframe2").attr('src',changesmessage); xd.receivemessage(function(changesmessage){ var getdatachanges = changesmessage.data; var currentrecordchanges = new array(); var getchangeslines = getdatachanges.split("|"); $('#secondtable table tr td:nth-child(3)').each( function() { $('#secondtable table tr td:nth-child(3)').after('<td class="bblistingitem directorylistingitem" style="white-space: nowrap;"><ul class="changes"></ul></td>'); }); for(var dcnt=0;dcnt < getchangeslines.length;dcnt++){ var getchangeseach = getchangeslines[dcnt].split("`,`"); for(var ecnt=0;ecnt < getchangeseach.length;ecnt++){ if (getchangeseach[ecnt]!=="" && getchangeseach[ecnt]!=="undefined"){ currentrecordchanges[dcnt] = "<li class='change'>"+getchangeseach[2]+" ("+getchangeseach[1].replace(/[`]/g,"")+")</li>"; } if (ecnt==2) { var thischangesid = getchangeseach[0].replace(/[`]/g,""); $('#secondtable table td:contains("'+thischangesid+'")').closest('tr').find('td ul.changes').append(currentrecordchanges[dcnt]); } if (dcnt==0){ $('#changesdiv .directorylistingtable th:nth-child(3)').after('<th class="bblistingheading directorylistingheading" scope="col" style="white-space: nowrap;">change details</th>'); } } } }, 'https://www.domain.org');
Comments
Post a Comment