problem with div height when adding childs

[omerbutt]

hi tere i have a page in which i have the requirement that the client has 2 select (Length,Weight) and 1 text(Quantity) inputs and 2 buttons (add and remove) the idea is that the client should enter some number in the quantity field and hit the add button and he could add another row with the same fields and then he could again enter the quantity and so on , i have done all this successfully ,in FF when i add row another row appears under it and then another and so on but the problem is in IE it do adds a new row but the height of the div does not increase accordingly it shows only the first two div and how many rows i may add it wont give me any error but does not show me even anything atall
i am posting my code here and a working sample http://www.myrage.biz/custom_order.php
the HTML CODE
[code=html]
<input type="hidden" name="rows_t" id="rows_t" value="1" /><input type="hidden" name="myid" id="myid" value="<?=$myid ;?>" />
<table cellspacing="0" cellpadding="0" align="left" width="400" border="0">
<tr><td class="tdheight _11"></td></tr>
<tr>
<td align="left" valign="top" width="400">
<div id="specs_1">
<table cellspacing="0" cellpadding="0" align="center" width="400" border="0">
<tr>
<td align="left" valign="middle" class="text_gre y_12_b_b" width="125">Len gth:<br />
<span>
<select name="prod_leng th_1" id="prod_length _1" class="text_gre y_12_b_b" style="width:10 0px;">
<option value="36.5">36 .5"</option>
<option value="37">37"</option>
<option value="37.5">37 .5"</option>
<option value="37">38"</option>
</select>
</span>
</td>
<td>&nbsp;</td>
<td align="left" valign="middle" class="text_gre y_12_b_b" width="125">Wei ght:<br />
<span>
<select name="prod_weig ht_1" id="prod_weight _1" class="text_gre y_12_b_b" style="width:10 0px;">
<option value="Light">L ight</option>
<option value="Medium"> Medium</option>
<option value="Heavy">H eavy</option>
</select>
</span>
</td>
<td>&nbsp;</td>
<td align="left" valign="middle" class="text_gre y_12_b_b" width="125">Qua ntity:<br /><span><input type="text" name="prod_qty_ 1" id="prod_qty_1 " value="" class="textfiel d_reg_grey" style="width:50 px; height:15px;" /></span></td>
<td>&nbsp;</td>
<td align="left" valign="bottom" class="text_gre y_12_b" width="125">
<span id="adder_1" style="display: inline;"><input type="button" name="addrow_1" id="addrow_1" value="Add Row" onclick="AddRow ('1');" class="add" style="border:0 px; cursor:pointer; " /></span>
<div id="deller_1" style="display: none;"><input type="button" name="delrow_1" id="delrow_1" value="" onclick="DelRow ('1');" class="delete" style="border:0 px; cursor:pointer; " /></div>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr><td align="left" valign="middle" width="925" colspan="2"><di v id="specs_div"> </div></td></tr>
<tr><td class="tdheight _11"></td></tr>
</table>
[/code]
THE Javascript
[code=javascript]
function AddRow(row){
if(document.get ElementById("pr od_qty_"+row).v alue!=""){
if(chkNumeric(d ocument.getElem entById("prod_q ty_"+row).value )){
ObjxmlAdd=GetXm lHttpObject();
if(ObjxmlAdd==n ull){
alert("You need to upgrade your Browser");
return;
}else{
ObjxmlAdd.onrea dystatechange=$ row_;
ObjxmlAdd.open( "GET","ajax/custom_addrow.p hp?specid="+Mat h.random()+"&ro w="+row,true) ;
ObjxmlAdd.send( null);
document.getEle mentById("adder _"+row).style.d isplay='none';
document.getEle mentById("delle r_"+row).style. display='inline ';
}
}else{
msg_divs('error ','300px','280p x','400px','400 px',"<strong>Yo u must enter a ''Numeric'' value for ''Quantity''</strong>");
}
}else{
msg_divs('error ','300px','280p x','400px','400 px',"<strong>Yo u must enter ''Quantity''</strong>");
return;
}
}
function chkNumeric(str) {// check for valid numeric strings
var strValidChars = "0123456789 ";
var strChar;
var blnResult = true;
if (str.length == 0){
return false;
}
for (i = 0; i < str.length && blnResult == true; i++){// test strString consists of valid characters listed above
strChar = str.charAt(i);
if (strValidChars. indexOf(strChar ) == -1){
blnResult = false;
}
}
return blnResult;
}
function $row_(){
if(ObjxmlAdd.re adyState==4){
if(ObjxmlAdd.st atus==200){
var ni = document.getEle mentById('specs _div');
var numi = document.getEle mentById('rows_ t');
var num = (document.getEl ementById('rows _t').value -1)+ 2;
numi.value = num;
var resdiv = document.create Element('div');
var divIdName = 'specs_'+num;
resdiv.setAttri bute('id',divId Name);
resdiv.innerHTM L = ObjxmlAdd.respo nseText;
ni.appendChild( resdiv);
}
}
}
function DelRow(row){
if(row==1){
document.getEle mentById("specs _1").innerHTML= "";
}else{
var d = document.getEle mentById('specs _div');
var divname ='specs_'+row;
var olddiv =document.getEl ementById(divna me);
d.removeChild(o lddiv);
}
var rows_left=parse Int(document.ge tElementById("r ows_t").value);
rows_left=rows_ left-1;
document.getEle mentById("rows_ t").value=rows_ left;
}
[/code]
thanks for any help in advance,
Ragards,
Omer Aslam

[Ferris]

Hi
I test your code in firefox and IE, it's ok. The div will increased it's height automatically. Of cause,I removed your ajax code.
So I think the problem is in the ajax return value : ObjxmlAdd.respo nseText; ( JS file,line 48).

would you please post the return value of ObjxmlAdd.respo nseText?

Regards.

[omerbutt]

Hi
I test your code in firefox and IE, it's ok. The div will increased it's height automatically. Of cause,I removed your ajax code.
So I think the problem is in the ajax return value : ObjxmlAdd.respo nseText; ( JS file,line 48).

would you please post the return value of ObjxmlAdd.respo nseText?

Regards.

are you sure that you have watched the output in IE6 and it is ok ,...means have you tried to add more than 2 rows and are they visible to you ....

[Ferris]

Hi

I think I have found what the problem is. The reason why you can't see new line is the new line displayed behind the 1st line, not below the 1st line.

I guess ObjxmlAdd.respo nseText will return a Table HTML code,and you set the table's align attribute.This is why the div will showed behind,not below.

for example:

the wrong code:

<div id="specs_div">
    <div id="specs_1">
        <table align="left" id="the_code_returned_by_ObjxmlAdd">
            <tr><td>some code</td></tr>
        </table>
    </div>
    <div id="specs_2">
        <table align="left" id="the_code_returned_by_ObjxmlAdd">
            <tr><td>some code</td></tr>
        </table>
    </div>
</div>

the right code:(remove align='left' in table)

<div id="specs_div">
    <div id="specs_1">
        <table id="the_code_returned_by_ObjxmlAdd">
            <tr><td>some code</td></tr>
        </table>
    </div>
    <div id="specs_2">
        <table id="the_code_returned_by_ObjxmlAdd">
            <tr><td>some code</td></tr>
        </table>
    </div>
</div>

I upload my test code for you. Pay attention to line 66. 2 files included,One is working in IE, the other's not.

Hope it helps.

Regards.

[omerbutt]

Hi

I think I have found what the problem is. The reason why you can't see new line is the new line displayed behind the 1st line, not below the 1st line.

I guess ObjxmlAdd.respo nseText will return a Table HTML code,and you set the table's align attribute.This is why the div will showed behind,not below.

for example:

the wrong code:

<div id="specs_div">
    <div id="specs_1">
        <table align="left" id="the_code_returned_by_ObjxmlAdd">
            <tr><td>some code</td></tr>
        </table>
    </div>
    <div id="specs_2">
        <table align="left" id="the_code_returned_by_ObjxmlAdd">
            <tr><td>some code</td></tr>
        </table>
    </div>
</div>

the right code:(remove align='left' in table)

<div id="specs_div">
    <div id="specs_1">
        <table id="the_code_returned_by_ObjxmlAdd">
            <tr><td>some code</td></tr>
        </table>
    </div>
    <div id="specs_2">
        <table id="the_code_returned_by_ObjxmlAdd">
            <tr><td>some code</td></tr>
        </table>
    </div>
</div>

I upload my test code for you. Pay attention to line 66. 2 files included,One is working in IE, the other's not.

Hope it helps.

Regards.

ofcourse it is going to be it you are exactly right about that the div is not populating UNDERit is being populated behind it ;) thanks a ton Ferris iwas about to lost my all hair on this issue some times you overlook these things and same was the case here
regards,
Omer Aslam