By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,453 Members | 937 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,453 IT Pros & Developers. It's quick & easy.

problem with div height when adding childs

omerbutt
100+
P: 638
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
Expand|Select|Wrap|Line Numbers
  1. <input type="hidden" name="rows_t" id="rows_t" value="1" /><input type="hidden" name="myid" id="myid" value="<?=$myid;?>" />
  2. <table cellspacing="0" cellpadding="0" align="left" width="400" border="0">
  3.     <tr><td class="tdheight_11"></td></tr>
  4.     <tr>
  5.         <td align="left" valign="top" width="400">
  6.             <div id="specs_1">
  7.                 <table cellspacing="0" cellpadding="0" align="center" width="400" border="0">
  8.                     <tr>
  9.                         <td align="left" valign="middle" class="text_grey_12_b_b" width="125">Length:<br />
  10.                             <span>
  11.                                 <select name="prod_length_1" id="prod_length_1" class="text_grey_12_b_b" style="width:100px;">
  12.                                 <option value="36.5">36.5"</option>
  13.                                 <option value="37">37"</option>
  14.                                 <option value="37.5">37.5"</option>
  15.                                 <option value="37">38"</option>
  16.                                 </select>
  17.                             </span>
  18.                         </td>
  19.                         <td>&nbsp;</td>
  20.                         <td align="left" valign="middle" class="text_grey_12_b_b" width="125">Weight:<br />
  21.                             <span>
  22.                                 <select name="prod_weight_1" id="prod_weight_1" class="text_grey_12_b_b" style="width:100px;">
  23.                                 <option value="Light">Light</option>
  24.                                 <option value="Medium">Medium</option>
  25.                                 <option value="Heavy">Heavy</option>
  26.                                 </select>
  27.                             </span>
  28.                         </td>
  29.                         <td>&nbsp;</td>
  30.                         <td align="left" valign="middle" class="text_grey_12_b_b" width="125">Quantity:<br /><span><input type="text" name="prod_qty_1" id="prod_qty_1" value="" class="textfield_reg_grey" style="width:50px; height:15px;" /></span></td>
  31.                         <td>&nbsp;</td>
  32.                         <td align="left" valign="bottom" class="text_grey_12_b" width="125">
  33.                             <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:0px; cursor:pointer;" /></span>
  34.                             <div id="deller_1" style="display:none;"><input type="button" name="delrow_1" id="delrow_1" value="" onclick="DelRow('1');" class="delete" style="border:0px; cursor:pointer;" /></div>
  35.                         </td>
  36.                     </tr>
  37.             </table>
  38.         </div>
  39.     </td>
  40. </tr>
  41. <tr><td align="left" valign="middle" width="925" colspan="2"><div id="specs_div"></div></td></tr>
  42. <tr><td class="tdheight_11"></td></tr>
  43. </table>
  44.  
THE Javascript
Expand|Select|Wrap|Line Numbers
  1. function AddRow(row){
  2.         if(document.getElementById("prod_qty_"+row).value!=""){
  3.             if(chkNumeric(document.getElementById("prod_qty_"+row).value)){
  4.                 ObjxmlAdd=GetXmlHttpObject();
  5.                 if(ObjxmlAdd==null){
  6.                     alert("You need to upgrade your Browser");
  7.                     return;
  8.                 }else{
  9.                     ObjxmlAdd.onreadystatechange=$row_;
  10.                     ObjxmlAdd.open("GET","ajax/custom_addrow.php?specid="+Math.random()+"&row="+row,true);
  11.                     ObjxmlAdd.send(null);
  12.                     document.getElementById("adder_"+row).style.display='none';
  13.                     document.getElementById("deller_"+row).style.display='inline';
  14.                 }
  15.             }else{
  16.                 msg_divs('error','300px','280px','400px','400px',"<strong>You must enter a ''Numeric'' value for ''Quantity''</strong>");
  17.             }
  18.         }else{
  19.             msg_divs('error','300px','280px','400px','400px',"<strong>You must enter ''Quantity''</strong>");
  20.             return;
  21.         }
  22.     }
  23.     function chkNumeric(str){//  check for valid numeric strings
  24.         var strValidChars = "0123456789";
  25.         var strChar;
  26.         var blnResult = true;
  27.         if (str.length == 0){
  28.             return false;
  29.         }
  30.         for (i = 0; i < str.length && blnResult == true; i++){//  test strString consists of valid characters listed above
  31.             strChar = str.charAt(i);
  32.             if (strValidChars.indexOf(strChar) == -1){
  33.                 blnResult = false;
  34.             }
  35.         }
  36.         return blnResult;
  37.     }
  38.     function $row_(){
  39.         if(ObjxmlAdd.readyState==4){
  40.             if(ObjxmlAdd.status==200){
  41.                 var ni = document.getElementById('specs_div');
  42.                 var numi = document.getElementById('rows_t');
  43.                 var num = (document.getElementById('rows_t').value -1)+ 2;
  44.                 numi.value = num;
  45.                 var resdiv = document.createElement('div');
  46.                 var divIdName = 'specs_'+num;
  47.                 resdiv.setAttribute('id',divIdName);
  48.                 resdiv.innerHTML = ObjxmlAdd.responseText;
  49.                 ni.appendChild(resdiv);
  50.             }
  51.         }
  52.     }
  53.     function DelRow(row){
  54.         if(row==1){
  55.             document.getElementById("specs_1").innerHTML="";
  56.         }else{
  57.             var d = document.getElementById('specs_div');
  58.             var divname ='specs_'+row;
  59.             var olddiv =document.getElementById(divname);
  60.             d.removeChild(olddiv);
  61.         }
  62.         var rows_left=parseInt(document.getElementById("rows_t").value);
  63.         rows_left=rows_left-1;
  64.         document.getElementById("rows_t").value=rows_left;
  65.     }
  66.  
thanks for any help in advance,
Ragards,
Omer Aslam
Sep 11 '08 #1

✓ answered by 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.responseText 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:
Expand|Select|Wrap|Line Numbers
  1. <div id="specs_div">
  2.     <div id="specs_1">
  3.         <table align="left" id="the_code_returned_by_ObjxmlAdd">
  4.             <tr><td>some code</td></tr>
  5.         </table>
  6.     </div>
  7.     <div id="specs_2">
  8.         <table align="left" id="the_code_returned_by_ObjxmlAdd">
  9.             <tr><td>some code</td></tr>
  10.         </table>
  11.     </div>
  12. </div>
  13.  
the right code:(remove align='left' in table)

Expand|Select|Wrap|Line Numbers
  1. <div id="specs_div">
  2.     <div id="specs_1">
  3.         <table id="the_code_returned_by_ObjxmlAdd">
  4.             <tr><td>some code</td></tr>
  5.         </table>
  6.     </div>
  7.     <div id="specs_2">
  8.         <table id="the_code_returned_by_ObjxmlAdd">
  9.             <tr><td>some code</td></tr>
  10.         </table>
  11.     </div>
  12. </div>
  13.  

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.

Share this Question
Share on Google+
4 Replies


Ferris
100+
P: 101
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.responseText; ( JS file,line 48).

would you please post the return value of ObjxmlAdd.responseText?

Regards.
Sep 11 '08 #2

omerbutt
100+
P: 638
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.responseText; ( JS file,line 48).

would you please post the return value of ObjxmlAdd.responseText?

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 ....
Sep 11 '08 #3

Ferris
100+
P: 101
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.responseText 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:
Expand|Select|Wrap|Line Numbers
  1. <div id="specs_div">
  2.     <div id="specs_1">
  3.         <table align="left" id="the_code_returned_by_ObjxmlAdd">
  4.             <tr><td>some code</td></tr>
  5.         </table>
  6.     </div>
  7.     <div id="specs_2">
  8.         <table align="left" id="the_code_returned_by_ObjxmlAdd">
  9.             <tr><td>some code</td></tr>
  10.         </table>
  11.     </div>
  12. </div>
  13.  
the right code:(remove align='left' in table)

Expand|Select|Wrap|Line Numbers
  1. <div id="specs_div">
  2.     <div id="specs_1">
  3.         <table id="the_code_returned_by_ObjxmlAdd">
  4.             <tr><td>some code</td></tr>
  5.         </table>
  6.     </div>
  7.     <div id="specs_2">
  8.         <table id="the_code_returned_by_ObjxmlAdd">
  9.             <tr><td>some code</td></tr>
  10.         </table>
  11.     </div>
  12. </div>
  13.  

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.
Attached Files
File Type: zip testPage.zip (4.3 KB, 77 views)
Sep 11 '08 #4

omerbutt
100+
P: 638
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.responseText 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:
Expand|Select|Wrap|Line Numbers
  1. <div id="specs_div">
  2.     <div id="specs_1">
  3.         <table align="left" id="the_code_returned_by_ObjxmlAdd">
  4.             <tr><td>some code</td></tr>
  5.         </table>
  6.     </div>
  7.     <div id="specs_2">
  8.         <table align="left" id="the_code_returned_by_ObjxmlAdd">
  9.             <tr><td>some code</td></tr>
  10.         </table>
  11.     </div>
  12. </div>
  13.  
the right code:(remove align='left' in table)

Expand|Select|Wrap|Line Numbers
  1. <div id="specs_div">
  2.     <div id="specs_1">
  3.         <table id="the_code_returned_by_ObjxmlAdd">
  4.             <tr><td>some code</td></tr>
  5.         </table>
  6.     </div>
  7.     <div id="specs_2">
  8.         <table id="the_code_returned_by_ObjxmlAdd">
  9.             <tr><td>some code</td></tr>
  10.         </table>
  11.     </div>
  12. </div>
  13.  

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
Sep 11 '08 #5

Post your reply

Sign in to post your reply or Sign up for a free account.