Hi, I think it works. I had the same kind of problem, I solved it by
adding thead/tbody/tfoot tags (all of them are required according to
my tests).
Thanks for your answers to Sudheer's question.
Here is the piece of code I used:
var req = new Request.HTML({url:'http://test.com/html',
onSuccess: function(tree, elements, html, js) {
//Clear the text currently inside the results div.
$('target_div').set('text', '');
var myElements = elements.filter('table');
//Now we have to had thead, tbody and tfoot to each
table for
ie !!!
myElements.each(function(item){
var tbody = new Element('tbody');
tbody.adopt(item.getElements('tr'));
tbody.inject(item);
var tfoot = new Element('tfoot');
tfoot.inject(item, 'bottom');
var thead = new Element('thead');
thead.inject(item, 'top');
});
//Inject the new DOM elements into the results div.
$('target_div').adopt(myElements);
}
});
On 1 août, 01:15, Fábio M. Costa <[email protected]> wrote:
> So... did it work?
>
> --
> Fábio Miranda Costa
> Solucione Sistemas
> Front-End Engineerhttp://meiocodigo.com
>
> On Fri, Jul 31, 2009 at 7:51 PM, Sudheer <[email protected]> wrote:
>
> > Fabio,
>
> > Good catch.... you nailed it. I got the reference to the rghtWrkCntnr,
> > so I figured it must be something specific to IE. Actually I think the
> > problem was with the table insertion and not the div insertion. I
> > believe IE requires you to add thead and tfoot tags, or else it will
> > not render the table at all.
>
> > Thanks a lot. Really appreciate your help
>
> > Sudheer
>
> > On Jul 31, 1:27 pm, Fábio M. Costa <[email protected]> wrote:
> > > Theres this ie tester:http://www.my-debugbar.com/wiki/IETester/HomePage
> > > thats adds a debugbar.
>
> > > Its being hard to discover. Did you really get the reference to
> > > $('rghtWrkCntnr')?
> > > It stops at the insertion of the first div?
>
> > > --
> > > Fábio Miranda Costa
> > > Solucione Sistemas
> > > Front-End Engineerhttp://meiocodigo.com
>
> > > On Fri, Jul 31, 2009 at 4:58 PM, Sudheer <[email protected]> wrote:
>
> > > > Fabio,
>
> > > > I tried that too. Its still not working. I also tried to inject a
> > > > 'div' in a completely different part of the page and it failed there
> > > > too. So I don't think it has anything to do with the JSON response.
>
> > > > I also added one
>
> > > > alert("appending " + element.id +" at " + context.id);
>
> > > > statement in "var inserters bottom" function in mootools.js file and
> > > > IE responded back with correct element.id and context.id. So it seems
> > > > IE is able to identify the element and the context, just not able to
> > > > do "element.appendChild(context)"
>
> > > > I have checked every ( for a matching ) and every { for a matching }.
> > > > Also made sure that there are no extra commas after the last elements
> > > > of arrays. Is there an equivalent of "developer extension in FF"
> > > > available in IE so that we can debug these issues?
>
> > > > Here is my complete code ....
>
> > > > Really appreciate your time on this.... :)
>
> > > > Sudheer
>
> > =========================================================================================
> > > > var updateAction2 = function(item,method) {
>
> > > > switch(item) {
> > > > case "GAME" :
> > > > url = "gameUpdate.php";
> > > > break;
> > > > case "VENUE" :
> > > > break;
> > > > }
>
> > > > var ajaxRequest = new Request.JSON({
> > > > url: url,
> > > > method: 'get',
> > > > onSuccess: function(responseText) {
> > > > // Lets build the table
> > > > // Main div
> > > > var gameLayout = new Element('div', {
> > > > 'id': 'gameLayout'
> > > > });
> > > > gameLayout.inject($('rghtWrkCntnr'));
>
> > > > // main Table
> > > > var gameTable = new Element('table', {
> > > > 'id': 'gameTable'
> > > > });
> > > > gameTable.inject($('gameLayout'));
>
> > > > // Heading Row
> > > > var headRow = new Element('tr', {
> > > > 'id': 'gameTableHeadRow'
> > > > });
> > > > headRow.inject($('gameTable'));
>
> > > > var mainHeading = new Element('th', {
> > > > 'id': 'gameTableMainHead',
> > > > 'text': "Game Information",
> > > > 'colspan': '5'
> > > > });
> > > > mainHeading.inject($('gameTableHeadRow'));
>
> > > > // Build the column heads
> > > > var headRow = new Element('tr', {
> > > > 'id': 'gameTableSubHeadRow'
> > > > });
> > > > headRow.inject($('gameTable'));
>
> > > > var heads = new Array('Game', 'Game Date', 'Visitor Team',
> > > > 'Reserve Price');
> > > > heads.each(function(heading, index) {
> > > > var headCell = new Element('th', {
> > > > 'class': 'gameTableHeadCell',
> > > > 'text': heading
> > > > });
> > > > headCell.inject($('gameTableSubHeadRow'));
> > > > });
>
> > > > // Now build each row
>
> > > > var fields = new Array("GameDate", "VisitorId",
> > > > "ReservePrice");
> > > > responseText.each(function(game,index) {
> > > > var bodyRow = new Element('tr', {
> > > > 'id': 'gameTableBodyRow'+index+1
> > > > });
> > > > bodyRow.inject($('gameTable'));
>
> > > > // Game sequence number in first column
> > > > var bodyCell = new Element('td', {
> > > > 'id': 'gameTableBodyRowGame'+index+1,
> > > > 'text': index+1
> > > > });
> > > > bodyCell.inject($('gameTableBodyRow'+index+1));
>
> > > > // Game fields in remaining columns
> > > > fields.each(function(field,id) {
> > > > var bodyCell = new Element('td', {
> > > > 'id': 'gameTableBodyRow'+field+index+1,
> > > > 'text': game[field]
> > > > });
> > > > bodyCell.inject($('gameTableBodyRow'+index+1));
> > > > });
> > > > });
> > > > }
> > > > }).send();
> > > > }
>
> > > > On Jul 31, 11:55 am, Fábio M. Costa <[email protected]> wrote:
> > > > > oh i see the problem now hehe
>
> > > > > Try this:
> > > > > var ajaxRequest = new Request.JSON({
> > > > > url: url,
> > > > > method: 'get',
> > > > > onSuccess: function(responseText) {
> > > > > // Lets build the table
> > > > > var gameLayout = new Element('div', {
> > > > > 'id': 'gameLayout'
> > > > > });
> > > > > gameLayout.inject($('rghtWrkCntnr'));
> > > > > *} // <- this used to have a ');' which is wrong*
> > > > > });
>
> > > > > But it should've give you an error on firefox, i dont understand how
> > it
> > > > was
> > > > > working...
>
> > > > > --
> > > > > Fábio Miranda Costa
> > > > > Solucione Sistemas
> > > > > Front-End Engineerhttp://meiocodigo.com
>
> > > > > On Fri, Jul 31, 2009 at 3:23 PM, Sudheer <[email protected]> wrote:
>
> > > > > > Hi Fabio,
>
> > > > > > Here is how the json looks like as sent by the server side php
> > > > > > json_encode function. I am able to decode it using mootools json
> > > > > > decode... No problems there (actually I love the way mootools does
> > > > > > it). I rewrote the code as per previous post and still just not
> > able
> > > > > > to create a new div element.
>
> > > > > > [{"GameDate":"2010-01-01","VisitorId":"2","ReservePrice":"101"},
> > > > > > {"GameDate":"2010-01-02","VisitorId":"2","ReservePrice":"103"}]
>
> > > > > > Thanks
> > > > > > Sudheer
>
> > > > > > On Jul 31, 10:49 am, Fábio M. Costa <[email protected]> wrote:
> > > > > > > Hi Sudheer, could you tell us whats the json your getting on the
> > > > > > > responseText variable?
> > > > > > > And please rewrite the code with the previous fix, so it will be
> > > > easier
> > > > > > to
> > > > > > > help.
> > > > > > > Welcome to Mootools!
>
> > > > > > > Cheers,
>
> > > > > > > --
> > > > > > > Fábio Miranda Costa
> > > > > > > Solucione Sistemas
> > > > > > > Front-End Engineerhttp://meiocodigo.com
>
> > > > > > > On Fri, Jul 31, 2009 at 2:10 PM, Sudheer <[email protected]>
> > wrote:
>
> > > > > > > > Oh ... I was trying to figure out if I am receiving the JSON
> > data
> > > > > > > > correctly or not. I have removed it and it still does not work.
> > > > > > > > Unfortunately IE is not giving any error either. It just skips
> > over
> > > > > > > > the part of the code. I want to add a div and then add a
> > > > dynamically
> > > > > > > > generated table in it. One set of json data will provide the
> > table
> > > > > > > > headings and another set will provide the data itself and then
> > I
> > > > will
> > > > > > > > generate the table dynamically. However, I am stuck at
> > inserting
> > > > the
> > > > > > > > first div only.
>
> > > > > > > > Thanks
> > > > > > > > Sudheer
>
> > > > > > > > On Jul 31, 9:32 am, Ryan Florence <[email protected]>
> > wrote:
> > > > > > > > > I really doubt this has anything to do with it ... but what's
> > up
> > > > > > with:
>
> > > > > > > > > responseText.each(function(game,index) {
>
> > > > > > > > > });
>
> > > > > > > > > On Jul 31, 2009, at 10:24 AM, Sudheer wrote:
>
> > > > > > > > > > Hi Friends,
>
> > > > > > > > > > I am a newbie to Mootools and to this group. I am learning
> > > > Mootools
> > > > > > > > > > and it has been a good ride so far. However I am stuck and
> > > > would
> > > > > > > > > > appreciate any help on this matter. Here is a small piece
> > of
> > > > code
> > > > > > that
> > > > > > > > > > is not working in IE6 & 7 (works fine with Firefox). I can
> > > > create
> > > > > > the
> > > > > > > > > > elements in IE using createElement and appendChild methods.
>
> > > > > > > > > > var ajaxRequest = new Request.JSON({
> > > > > > > > > > url: url,
> > > > > > > > > > method: 'get',
> > > > > > > > > > onSuccess: function(responseText) {
> > > > > > > > > > responseText.each(function(game,index) {
> > > > > > > > > > });
> > > > > > > > > > // Lets build the table
> > > > > > > > > > var gameLayout = new Element('div', {
> > > > > > > > > > 'id': 'gameLayout'
> > > > > > > > > > });
> > > > > > > > > > gameLayout.inject($('rghtWrkCntnr'));
> > > > > > > > > > });
> > > > > > > > > > });
>
> > > > > > > > > > Am I missing something? Please help
>
> > > > > > > > > > Thanks and Cheers
> > > > > > > > > > Sudheer
